#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)

Share StumbleUpon It! Del.icio.us reddit

Like this post? Be sure you've subscribed to the .eduGuru RSS feed or email to get all the latest news and articles.

css, heweb10, iphone, Mobile

Read Related Posts on .eduGuru:

  1. Mobile PittState - How We Did It With No Money or Resources
  2. Best of the Mobile Higher Ed Web
  3. Mobile Analytics: The Neglected Mutant Step Child

This post was written by:

Lacy Tite

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. Avatar image
    Deborah Says:

    Leave a Reply

    Spam protection by WP Captcha-Free