#heweb10 - CSS for Mobile Devices

CSS for Mobile Devices & Presenting Content to iPhone
TPR Track / 8:30 AM / Monday
Justin Gatewood, Victor Valley College

Why design for mobile?

  • 1/4 of US households have smart phone (nielsen)
  • more people access online content on a phone than a desktop (according to nelson … not sure I believe this stat especially considering the above stat??)

Problems for Mobile Design

  • Small screens
  • awkward input
  • download delays
  • mis-designed sites

Make your existing site more mobile-friendly

  • Add a handheld stylesheet (and capitalize the “Screen” media attribute for windows mobile to force it to use the mobile stylesheet)
  • float and width are not your friends
  • change all by default to white background, black text
  • hide elements that aren’t vital (sidebar, footer, some navs)
  • put a max-width on your images
  • iphone specific styles — webkit-text-size-adjust: none;
  • float, display (unless its none), padding, margin, background-image — don’t play nice with mobile browsers
  • encourages using a css reset (like meyers) on all stylesheets (agreed - gets you to a good standard base point on all browsers to start designs)
  • detect user agent / browser detection — reduce the weight of what is delivered to the mobile device
  • Remember the user IS mobile - not just HOLDING one

Develop a One-for-all mobile site (i.e. m.yourcollege.edu)

  • @media only screen and (max-device-width: 480px) { }
  • no text resizing — html { -webkit-text-size-adjust: none; }
  • use meta tag to set viewport
  • Use javascript to remove iphone URL bar
  • click to call links for phone numbers
  • Frameworks for mobile development: jQTouch, iui, jQuery mobile is on the way (similar to jQTouch - but would also work for android)

This post was written by:

Lacy Tite - who has written 10 posts on .eduGuru

Lacy is a web developer for Vanderbilt University (Go 'Dores!) in the  University Web Communications office (which is responsible for the Vanderbilt homepage and all top level pages - as well as providing development, design, content management, communication strategy assistance to the entire Vanderbilt community.)  Follow Lacy: twitter | VU project blog | delicious

5 Responses to “#heweb10 - CSS for Mobile Devices”

  1. Says: