Mobile Representation

Mobile browsers: I seem to have encountered a problem that probably has one solution.

ANDROID PHONES

  1. The website seems to be cut off on the side and seems to be locked form scrolling to see the entire content form side-to-side. > ttnews.com

  2. Emailed newsletters are not graphically optimized. Instead they load in the mobile email app as text and links minus the layout/design.

Is there a primer for designing mobile versions of site and emails? Is it just a matter of having separate mobile style sheets?

It usually is either a manner of separate stylesheets, or having a very fluid design that fits everywhere. Fluid designs don’t generally look too great on big screens, so media queries are popular. I have no idea what you can do about the HTML emails since email clients suck at CSS, so emails are almost always in tables… and tables stink on tiny screens since table rows don’t wrap and you probably had to set widths on the cells.

There’s a sticky thread on mobile design here in the Web Design forums… with a list of resources that may help you.

Also, be sure to check PPK’s Quirksmode.org site, as he’s been spending the last 2 years or something building up a representation of mobiles, mobile browsers and what works in them (and what doesn’t).