Developing web sites for portable devices
Upcoming SlideShare
Loading in...5

Developing web sites for portable devices



An introductory lecture to creating web pages for portable devices.

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



Total Views
Views on SlideShare
Embed Views



2 Embeds 30 29 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Developing web sites for portable devices Developing web sites for portable devices Presentation Transcript

  • Developing web sites forportable devicesKrišs RauhvargersWeb Technologies I, 2013,University of Latvia
  • The changing internet• The internet is constantly changing, let‟sface it.Meme of 1996Sent in email,using a desktopcomputerMeme of 2011Shared on web socialnetworks …using mobile phones whileresting on a couch2013not sure yet
  • The changing internet (2)• Devices– Significance of desktop computers is falling– While portable devices (phones, tablets) are thehot marketing segment• Network coverage– Internet is available nearly everywhere– And for a reasonable price• Ogooglebar?– Google has indexed “everything”– Search is fast and people know how to use it
  • Result• Result: someone may need theinformation on your site… at night... from a device that has 3x4cm screen… and an “Edge” 56Kbps connection• Prepare!
  • Screen size• Problem: small viewport sizes– 360x640* (Samsung Galaxy S3)– 320x480px (iPhone 4)• When rendering page at full size, would see left top corneronly.– Thank God they invented the “zoom” feature.• Another problem: large viewport sizes:– Some screens have small physical dimensions, but hugeresolution:• 800x1280 (Asus Transformer Pad)• 768x1025 (iPad)• Result: designing a web site version “for mobile devices” isuseless• Better idea: check capabilities at runtime!*
  • HTML viewport directive forportable devices• The modern devices know their screen is small– They render the page on a virtual viewport (largerthan screen)– You zoom in the interesting part of viewport• “viewport” meta element allows setting theviewport 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*
  • Be careful with the “viewport”directive!• Don‟t mess with “user-scalable=0”– The users will effectively be unable to zoom–• Do not set maximum-scale=1 unless thepage really may not be zoomed
  • What happens when you use the“viewport” directiveBefore AfterInitial view of thesame page beforeand after settingthe “viewport”directive
  • Input methods• User input is very limited on portabledevices– No or little keyboard– Finger taps instead of controlled mousegestures• Fingers are hulky, small items areuntappable– Apple UI guidelines state: 44x44px is theminimum size of a tappable item:–
  • How the “44px” looks likeThe links with yellowbackground are 44px high.And they seem to be tappable.
  • Limitation resultsSmall device screen + inability to tap=do not put too much information on thescreen of a mobile deviceThe question is – how?
  • Targeting media• Since CSS2 it is possible to target stylesheets to aspecific media:• <link rel=stylesheettype=text/cssmedia=screen />– media=„print‟– media=„handheld‟– media=„braille‟• Such stylesheet is only applied if the devicecharacteristics match• It works, but modern devices ignore the“handheld” media
  • Targeting media in a singlestyle 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 addingmultiple 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– …
  • Query language• min- and max- prefixes are used:– min-width:1024 means “window width is 1024or higher”– max-device-width:600 means “the devicescreen 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 createdby 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 withCSS2 properties• Some printers may match also min-width,max-width parameters• Your queries are most likely targeted atscreens@media screen and (device-min-width:600px) {/**._.**/}
  • Setting up• The query syntax is understood by mobilebrowsers and desktop browsers• Desktop browser can be used for initialdevelopment– Just use “min-width” instead of “min-device-width” and resize the window!– Most browsers have hard limit of how smallthe window can be
  • What can I do with it?• Of course, you can do art:–• Or, you can show additional artifacts if spaceallows it:–• 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 toscreen properties.• Good example:– first page
  • Navigation changes• Horizontal navigation bars may require toomuch space– At a certain screen size, make them vertical• At a certain size, make navigation linkslarger– They will be tapped, not clicked• On very small screens navigation may behidden and only shown upon click;
  • Navigation differencesVertical on a smaller screenHorizontal and not that high ona larger screen
  • Rearranging page content• Multi-column pages are typically“serialized”– Aside items shown after (or before) the maincontent block– Inessential aside items hidden• Good example: first page• Explained:
  • Planning the contentrearrangement• Many page detailshave minimumreasonable width– Plan, what to dowhen the minimumis reachedMain text withcontent hereAsideblockwithaddit.infoNot usable ifnarrower than200pxScreen width – aside widthShould be at least twice the asidewidth.Here, the problem arrives at document width 600px.
  • Planning the contentrearrangement (2)• Is the aside reallynecessary?• If yes,– can you make it eventighter?– can you put it beforethe content?• There are some toolsto help you:– Adobe Edge ReflowMain text withcontent hereAsideblockwithaddit.infoMain text with content hereAside 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‟swork• Practice– Not all designers are aware of the responsiveweb design paradigm– You will have to help them
  • Dealing with layout breakers• Items that are wider than screen widthbreak 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 largescreen• This approach improves usability– Just play with the mobile site for a while, tryclicking everything• “Mobile last” makes you– think portable devices are 2nd class passengers,– want to hide lots of content from them.
  • Animations and transitions• CSS3 animations are nice, but may beslow on portable devices– (because the CPU speeds are relatively low)• Use only GPU accelerated properties–• When scripting, try to avoid attaching toomany event handlers;
  • Avoid too many resource calls• 3G traffic has relatively high latency• Each HTTP request is expensive• Use CSS sprites
  • What is a CSS sprite?• A sprite is an image combined of severalsmaller images.• Sprites are used to decrease number ofHTTP requests• Only a fragment of sprite is shown onpage• background-position is usedto position the sprite image36
  • Where CSS sprites are used?• Image buttons– Mouse-over and inactive images in one image– When user hovers over button, thebackground is shifted• Search boxes– When the search box is focused, backgroundimage changes37
  • Hiding or not giving?• When you hide items in a “responsive”page, they are still loaded from the server• An improvement idea: the server couldomit rendering elements that won‟t bedisplayed• Involves server-side programming withbrowser sniffing or use of cookies