Mobile  

design for
mobile web



 

Design a new site .mobi as top level domain (TLD)

example:

Create a site in current domain for mobile devices

example:

Use CSS on current website that modifies HTML styles for mobile devices

example:

 

considerations
small screen size
  • 320 x 240
  • 320 x 480
  • 480 x 800
  • 640 x 960

 

low bandwidth(slow connection speed)
  • 3G & 4G - better
  • some users pay per kilobyte
  • eliminate unnecessary images

 

font, color, & media issues
  • font - limited support choose standard fonts
  • color - need contrast between background and text
  • flash - many devices do not support

 

limited control
  • navagation and text entry is more difficult on mobile devices
  • most are single column layout with good keyboard tab control
  • page consists of mostly text (list format)

 

functionality
  • remove unneccsary functionality
  • provide quick links to important items
  • search feature is a good idea
  • provide link to full site

 

Optimize layout
  • limit scrolling to one direction
  • use heading elements
  • use lists to organize
  • avoid tables
  • provide labels for form control
  • avoid pixel units of measure in CSS
  • avoid absolute positioning in CSS
  • hide content that is NOT essential
Optimize navigation
  • provide minimal navigation
  • provide consistent navigation
  • avoid hyperlinks that open files in another window
  • avoid hyperlinks that open windows with pop-ups
  • avoid too many clicks to reach information
Optimize graphics
  • avoid images that are wider than 320 pixels
  • specify image size
  • configure small, optimized all images
  • mobile browsers may downsize images which makes text on images difficult to read
  • provide alternate text for graphics
Optimize text
  • configure good contrast between text and background
  • use common fonts
  • configure fonts using ems or percentage
  • use short descriptive page titles
viewport meta tag

viewport meta tag can be placed in your webpage to scale the readablity of the page. 

directives:
  • width
  • height
  • initial-scale
  • minimum-scale
  • maximum-scale
  • user-scalable (zoom)

<meta name = "viewport"
   content="width=device-width, initial-scale=1.0">

CSS media query

<link href="somestylesheet.css"  rel="stylesheet"
media = " ...media query ..." />

media query:
  • only - causes older browsers to ignore query
  • screen - targets devices with screens
  • print - target devices for printing
  • all - targets all devices
media query features:
  • max-device-height (screen size)
  • max-device-width (screen size)
  • min-device-height (screen size)
  • min-device-width (screen size)
  • max-height  (viewport)
  • min-height (viewport)
  • max-width (viewport)
  • min-width (viewport)
  • orientation

 

<link href="somestylesheet.css"  rel="stylesheet"
media = "only screen and (max-device-width: 480px)" />

More on media query:

 

Testing mobile display
Testing using Desktop Browser:

modify the link to use the mobile CSS

display the page and reduce the viewport to approximate the mobile device

@media rule for CSS

@media only screen and (max-device-width: 480px) {

#header {

    background-image: url(mobileheader.gif);

}

} /*end of @media rule*/

Best practices