Outline

• Challenges
• Layout
• Navigation
• Images
• Large and small screens together

Reminder: Challenges

• Screen size
• Input
• Network
• User goals
• Device Limitations

Example…

Beethoven's page (tinyurl.com/2ypphd)

From your mobile: follow links from bit.ly/mwbps3

…on a phone

Let's fix it!

redesigned Beethoven's page (tinyurl.com/yq7z9m)

Mobile-friendly layout

Avoid:

• viewport changes: scrolling/zooming
• table-based layout: <table>
• fixed layout: style='width:400px'
• multi-columns layout: style='position:absolute'
• wide images and tables

instead

• use liquid or elastic layout
• in a linear (single column) organization

Mobile-friendly layout

In practice:

• use relative measures in CSS ("%", "em") rather than absolute (e.g. px)
• avoid CSS properties position, display, float
• keep images small
• keep tables narrow or turn them in lists

Mobile-friendly layout

Applying to Beethoven's page

• CSS style sheet:

  #container {
     width:100px;
  }

  #sidebar {
     width: 200px;
     float: left;
  }

  #content {
     margin-left: 242px;
  }

• Smaller images
• Table into list

→ resulting page (tinyurl.com/cjqk3h)

Mobile-optimized navigation

Long navigation bar at the top:

• hides actual content
• makes hard to distinguish pages
• can be difficult to skip

instead

• keep top navigation to a minimum
• push additional navigation lower down
• consider using accesskeys [but…]

Mobile-optimized navigation

Applying to Beethoven's page

• removing "Navigation" heading
• selecting 2 most important links: site home page, other lyrics from the artist
• turning list into single line

• <a href="/home" accesskey="0">Lyric Repository's Home>/a>

→ resulting page (tinyurl.com/cgg786)

Dealing with images

Take care with

• images dimensions
• images weight
• background images impact on readibility
• reflow due to loading of images
• browser-based rescaling of images
• alternative content for images
• supported images format

Dealing with images

In practice:

• resize images to fit mobile screens
• optimize images weight, keep their number low
• provide a useful alt attribute
• specify the width and height in the markup
• use well-supported formats: GIF, JPEG, (PNG)

Dealing with images

Applying to Beethoven's page

• #header {
     background-image:url("beethoven-background.jpg");
  }

• <img src="beethoven-Aipeic6G.jpg"
   alt="Portrait of Beethoven in 1820, by Joseph Karl Stieler"
   width="120" height="150" />

• <img src='music.gif' alt='' width='22' height='22' />

→ resulting page (tinyurl.com/yzbqfv2)

Large and small screens together

Content adaptation on the server or on the client

Large and small screens together

On the client: CSS Media Types

<link rel="stylesheet" media="handheld" href="mobile.css" />
<link rel="stylesheet" media="screen" href="computer.css" />

Applicable also as:

<style type='text/css' media="handheld">

and inside a style sheet with:

@media handheld { /* mobile-specific rules */ }

Large and small screens together

On the client: CSS Media Types

• basic CSS media types: poorly supported
• CSS media queries:

  <link rel="stylesheet" media="screen and (max-device-width: 480px)" 
  href="mobile.css" />
  <link rel="stylesheet" media="screen and (min-device-width: 481px)" 
  href="computer.css" />

• supported only in recent browsers
• Return of the Mobile Stylesheet

Large and small screens together

Applying to Beethoven's page

• removing background image only on mobile

  @media screen {
     #header {
        background-image:url("beethoven-background.jpg");
     }
  }

• two columns layout on large screens

  @media screen {
     #content {
        float: left;
        width: 550px;
     }
  }

• move down portrait
• …

→resulting page (tinyurl.com/yq7z9m)

In summary

• liquid linear layout
• small and optimized top navigation bar
• reasonably sized images with alternative descriptions and well-defined dimensions
• using CSS to keep both small and large screens happy