Download - Developing web sites for portable devices
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