An introductory lecture to creating web pages for portable devices. Don't expect rocket science here, it covers just the main ideas.

1. Developing web sites for
portable devices
Krišs Rauhvargers
Web Technologies I, 2013,
University of Latvia

2. The changing internet
• The internet is constantly changing, let‟s
face it.
Meme of 1996
Sent in email,
using a desktop
computer
Meme of 2011
Shared on web social
networks …
using mobile phones while
resting on a couch
2013
not sure yet

3. 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

4. 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!

5. PORTABLE DEVICE
SPECIFICS

6. 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/

7. 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

8. 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

9. What happens when you use the
“viewport” directive
Before After
Initial view of the
same page before
and after setting
the “viewport”
directive

10. 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

11. How the “44px” looks like
The links with yellow
background are 44px high.
And they seem to be tappable.

12. 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?

13. CSS MEDIA QUERIES

14. 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

15. 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;
}
}

16. 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

17. 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/

18. 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;}
}

19. 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
}

20. 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) {
/**._.**/
}

21. PUTTING MEDIA QUERIES TO
WORK

22. 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

23. 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”

24. Responsive?
• “Responsive web design”
– A coined term to describe pages that adapt to
screen properties.
• Good example:
– http://microsoft.com first page

25. 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;

26. Navigation differences
Vertical on a smaller screen
Horizontal and not that high on
a larger screen

27. 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

28. 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 width
Should be at least twice the aside
width.
Here, the problem arrives at document width 600px.

29. 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

30. 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

31. 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?

32. 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.

33. OTHER METHODS USED IN
MOBILE (AND NOT ONLY) PAGES

34. 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-
app-you-install-from-the-web/
• When scripting, try to avoid attaching too
many event handlers;

35. 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 used
to position the sprite image
36

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
37

38. 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