Subscribe:   Posts   |   Email   |   Facebook   |   Twitter

Internet Marketing and Web Development in Higher Education and other tidbits…

#heweb10 – CSS for Mobile Devices

11 Oct 2010

written by Lacy Tite

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

The content of this post is licensed: ©2010 All Rights Reserved


About the author

Lacy Tite

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

This post was written by - who has written 10 posts on .eduGuru


  • Deborah

    Hi Lacy,

    Thanks for the post on the session. Great to see this posted so quickly! A question for you on the comment to hide elements that aren’t vital (sidebar, footer, some navs).

    I’m curious what techniques the speaker recommended for hiding the elements for mobile, was it just display: none?

    • http://www.silverberry.org Lacy Tite

      Yes — use display: none on those elements in your mobile stylesheet.

  • Deborah

    Thanks Lacy.

    Was there consensus that higher ed institutions are moving to a one for all mobile site? I know UT Texas did that last month.

    • http://www.silverberry.org Lacy Tite

      I think most of us in the room have the One-for-all — but also have mobile stylesheets. The One for all is the easiest way to have a consistent experience for your user on all devices — and by using RSS feeds to populate the most frequently changing content — it’s not even that time-consuming to create and maintain.

  • http://www.vvc.edu Justin Gatewood

    If you throw some search and a feedback form on there as well, then (along with some keyword/search term analysis and reading the submissions from site visitors) you can start making some good decisions on what you may want to add to improve the mobile experience for your visitors.

Proud Member of BlogHighEd University Web Developers eduStyle

© .eduGuru - Internet Marketing and Web Development in Higher Education and other tidbits…. Powered by Wordpress. | Advertiser policy