doteduguru

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)