Developing web sites for portable devices

Krišs RauhvargersWeb Technologies I, 2013,

University of Latvia

The changing internet

• The internet is constantly changing, let’s face it.

Meme of 1996Sent in email,

using a desktop computer

Meme of 2011Shared on web social

networks … using mobile phones while

resting on a couch

2013not sure yet

The changing internet (2)

• Devices– Significance of desktop computers is falling– While portable devices (phones, tablets) are the

hot marketing segment• Network coverage

– Internet is available nearly everywhere– And for a reasonable price

• Ogooglebar? http://www.bbc.com/future/story/20130328-who-owns-the-meaning-of-words

– Google has indexed “everything”– Search is fast and people know how to use it

Result

• Result: someone may need the information on your site… at night ... from a device that has 3x4cm screen … and an “Edge” 56Kbps connection

• Prepare!

PORTABLE DEVICE SPECIFICS

Screen size• Problem: small viewport sizes

– 360x640* (Samsung Galaxy S3)– 320x480px (iPhone 4)

• When rendering page at full size, would see left top corner only.– Thank God they invented the “zoom” feature.

• Another problem: large viewport sizes:– Some screens have small physical dimensions, but huge resolution:

• 800x1280 (Asus Transformer Pad)• 768x1025 (iPad)

• Result: designing a web site version “for mobile devices” is useless

• Better idea: check capabilities at runtime!

* http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/

HTML viewport directive for portable devices

• The modern devices know their screen is small– They render the page on a virtual viewport (larger than

screen)– You zoom in the interesting part of viewport

• “viewport” meta element allows setting the viewport size

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=5.0; user-scalable=yes;">

– Fun fact: • the tag is Apple proprietary attribute.• Well documented*, but still not a standard

* https://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Be careful with the “viewport” directive!

• Don’t mess with “user-scalable=0”– The users will effectively be unable to zoom– http://blog.javierusobiaga.com/stop-using-the-

viewport-tag-until-you-know-ho

• Do not set maximum-scale=1 unless the page really may not be zoomed

What happens when you use the “viewport” directive

Before After

Initial view of the same page before and after setting the “viewport” directive

Input methods

• User input is very limited on portable devices– No or little keyboard– Finger taps instead of controlled mouse

gestures• Fingers are hulky, small items are

untappable– Apple UI guidelines state: 44x44px is the

minimum size of a tappable item:– http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Characteristics/Characteristics.html

How the “44px” looks like

The links with yellow background are 44px high.

And they seem to be tappable.

Limitation results

Small device screen + inability to tap =

do not put too much information on the screen of a mobile device

The question is – how?

CSS MEDIA QUERIES

Targeting media• Since CSS2 it is possible to target stylesheets to a specific

media:• <link rel='stylesheet' type='text/css' media='screen' />– media=‘print’– media=‘handheld’– media=‘braille’

• Such stylesheet is only applied if the device characteristics match

• It works, but modern devices ignore the “handheld” media

Targeting media in a single style sheet

/***** style.css *****/

body {/*Works on all devices*/color:green;font-family: Arial, sans-serif;font-size:14px;

}

@media print { /*Let’s save the ink!*//*applied to printers only */

body {color:black;font-size:12pt;

}}

Effect of CSS2 media types

• Easy to prepare a specific print version:– Remove unnecessary colored items– Hide things that are useless on paper

• Navigation menus• Clickable buttons & icons

– Change text sizes to more readable ones– Reset dimension limits

CSS3 media queries

• CSS3 extends the query language by adding multiple device properties:– device-width, device-height

• Screen resolution– width, height

• Browser window size– aspect-ratio

• width:height ratio to recognize wide screen devices– Orientation

• Portrait, landscape– … http://www.w3.org/TR/css3-mediaqueries/

Query language

• min- and max- prefixes are used:– min-width:1024 means “window width is 1024 or

higher”– max-device-width:600 means “the device screen

may not be wider than 600 pixels”

• Example:@media (min-width:300px) and (max-width:600px){

body {color:red;}}

Query language: and/or?

• Combinations of requirements are created by AND keyword

• Alternatives are separated by a comma@media (min-width:300px) and (orientation:portrait), (min-height:300px) and (orientation:landscape){

//smallest side is no less than 300px}

Query language: combining with CSS2 properties

• Some printers may match also min-width, max-width parameters

• Your queries are most likely targeted at screens

@media screen and (device-min-width:600px) { /**._.**/}

PUTTING MEDIA QUERIES TO WORK

Setting up

• The query syntax is understood by mobile browsers and desktop browsers

• Desktop browser can be used for initial development– Just use “min-width” instead of “min-device-

width” and resize the window!– Most browsers have hard limit of how small

the window can be

What can I do with it?

• Of course, you can do art:– http://arleym.com

• Or, you can show additional artifacts if space allows it:– http://css-tricks.com/css-media-queries/

• Or, you can – hide stuff that requires more space– rearrange items on page to “fit”– .. etc.– make your page “responsive”

Responsive?

• “Responsive web design”– A coined term to describe pages that adapt to

screen properties.• Good example:

– http://microsoft.com first page

Navigation changes

• Horizontal navigation bars may require too much space– At a certain screen size, make them vertical

• At a certain size, make navigation links larger– They will be tapped, not clicked

• On very small screens navigation may be hidden and only shown upon click;

Navigation differences

Vertical on a smaller screen

Horizontal and not that high on a larger screen

Rearranging page content

• Multi-column pages are typically “serialized”– Aside items shown after (or before) the main

content block– Inessential aside items hidden

• Good example: http://css-tricks.com first page• Explained: http://webdesignerwall.com/demo/responsive-design/index.html

Planning the content rearrangement

• Many page details have minimum reasonable width– Plan, what to do

when the minimum is reached

Main text with content here

Aside block with addit. info

Not usable if narrower than

200px

Screen width – aside widthShould be at least twice the aside

width.

Here, the problem arrives at document width 600px.

Planning the content rearrangement (2)

• Is the aside really necessary?

• If yes,– can you make it even

tighter?– can you put it before

the content?• There are some tools

to help you:– Adobe Edge Reflow

Main text with content here

Aside block with addit. info

Main text with content here

Aside block with addit. info

Who is responsible for this?

• Theory– A web site design is a work of art– Making the site look nice is web designer’s

work• Practice

– Not all designers are aware of the responsive web design paradigm

– You will have to help them

Dealing with layout breakers

• Items that are wider than screen width break the layout– Images in their native size– Tables

• Use “max-width” and width to fit them• Tables do not bend to these rules

– Hide them?

Mobile first?

• Some say, “mobile first” is the way to go:– First design the site for small screens– Then you have a lot of space to fill on a large screen

• This approach improves usability– Just play with the mobile site for a while, try clicking

everything• “Mobile last” makes you

– think portable devices are 2nd class passengers,– want to hide lots of content from them.

OTHER METHODS USED IN MOBILE (AND NOT ONLY) PAGES

Animations and transitions

• CSS3 animations are nice, but may be slow on portable devices– (because the CPU speeds are relatively low)

• Use only GPU accelerated properties – http://blog.forecast.io/its-not-a-web-app-its-an-ap

p-you-install-from-the-web/

• When scripting, try to avoid attaching too many event handlers;

Avoid too many resource calls

• 3G traffic has relatively high latency• Each HTTP request is expensive• Use CSS sprites

36

What is a CSS sprite?

• A sprite is an image combined of several smaller images.

• Sprites are used to decrease number of HTTP requests

• Only a fragment of sprite is shown on page

• background-position is usedto position the sprite image

37

Where CSS sprites are used?

• Image buttons– Mouse-over and inactive images in one image– When user hovers over button, the

background is shifted• Search boxes

– When the search box is focused, background image changes

Hiding or not giving?

• When you hide items in a “responsive” page, they are still loaded from the server

• An improvement idea: the server could omit rendering elements that won’t be displayed

• Involves server-side programming with browser sniffing or use of cookies