5 Things You Should Consider When Designing For Mobile

[ Image credit: portable.tv ]

Mobile is happening right now. It is not another trend or craze. If you are still thinking about it, you are already behind. Now is the time to act, and web designers all around need to evolve and become mobile minded. Having recently made the transition to mobile, I'd like to share a few things I've learned with my fellow designers. Consider the following when designing for mobile.

1. Responsive Layout vs Separate Site

This is a hot topic among web designers nowadays. There are pros and cons for each of these two options. Let me break it down for you.

Responsive Layout

  • Displays the same content
  • One central place to make site updates
  • Load time on mobile is horrendous due to making many requests for resources

Separate Site

  • Optimal load time on mobile
  • Able to display condensed content
  • Doubles the work load on content creation
  • Also doubles the efforts on making site updates

Let's say you want both your desktop and mobile versions of your website to show the same content and have the same functions, then a responsive layout would be the way to go. Case in point would be a blog with regular updated articles and the functions to comment and share. Even though load time on mobile takes a huge hit, but the users expect it because they know the website is serving up lots of content.

On the other hand, if you want your website to serve up the same information but in a much more concise fashion on mobile, then a separate site makes much more sense. Case in point would be a marketing website that promotes your products, services, or venues. Users coming to such a website are usually looking for things like contact info, directions, and quick description of whatever you are promoting. They don't have the patience to wait too long.

So before you start designing the mobile version of your website, you should first identify your website's needs, and from then on decide which option to take—responsive layout or separate site. One side note though, if you are going with responsive layout, then you should study up on CSS media queries and become a ninja at that.

2. Screen Resolutions

Just like the desktop version of your website, the mobile version also need to accommodate various screen resolutions. New smartphones are being released frequently and, for this reason, it's best to keep some general dimensions in mind when designing for mobile.


The screen resolution for the iPhone is 320px by 480px, but that's accounting for the entire screen. There are a few standard UI elements to take into consideration: status bar, URL bar, and the bottom bar. So the actual viewable area for the mobile Safari browser is 320px by 365px. With a few lines of code, the URL bar can be hidden and you can increase the viewable area to 320px by 416px. Also keep in mind that the iPhone has retina display, so make sure all graphics created for mobile are 2x the size.

Landscape view

Portrait view

Android and BlackBerry Devices

While iPhones have a specific screen resolution, Android and BlackBerry devices are a different story. For Android, I reviewed a handful of devices and figured out a default viewable area that's safe to use as a general reference: 320px by 451px (1.5x for Super AMOLED display). For Blackberry, I reference the latest device (The Torch) and its default viewable area is 360px by 406px.

3. Legible Content

Reading on a small screen puts a lot of stress on the eyes, so having legible content is a must. If the user has to pan and zoom to read, that is just bad user experience. On a mobile website, I have a rule of thumb for defining font size using CSS—using default values of the font-size property. The values are as follow: xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large. I find that medium is the perfect value to set your body text in. It is the most comfortable font size for reading. If you must set your font-size property in pixels though, 14px is the equivalent. The reason I set the font-size property using the default values is because they are device specific. Medium on iPhones might be different than medium on Android or BlackBerry devices, but I know medium on any device is always a comfortable font size for reading.

4. Custom Typefaces

While we are on the topic of fonts, let's talk about typography. Typography is what designers are most passionate about. They love to specify down to the smallest details, from the typeface (font-family), to tracking (letter-spacing), to leading (line-height).

Typefaces can convey emotions, and a good typeface can deliver a message very effectively. Naturally, designers are never satisfied with using just the few web safe fonts in their designs. The list of mobile web safe fonts is even smaller. See below:

Mobile Web Safe Fonts

  • Arial/Helvetica
  • Courier/Courier New
  • Georgia
  • Times/Times New Roman
  • Trebuchet MS
  • Verdana

So what options are there if you want to use typefaces other than the ones in the above list? Luckily, there are a bunch of custom web fonts services out there. Let's take a look at the two best options: Google Web Fonts and Typekit.

Google Web Fonts / Cost: Free

This is easily my favorite service. Its library is ever growing and the setup only requires one line of code in the HTML for each font you use.

  • Easy setup
  • Works with most iPhone, Android, and Blackberry devices
  • Slim chance of any downtime since it's hosted by Google
  • Google lets you download the fonts to your desktop. This is convenient for your designer during the design process
  • Font Previewer on their site is great for playing with the fonts before implementing them
  • No bandwidth limitations and you can use as many fonts as you wish on a specific site!
  • The library is still relatively small, it only consists of a little over 100 fonts, but it is growing consistently
  • Some fonts don't work on anything below iOS 4

Typekit / Cost: Free ~ $99.99 per year

Typekit is pretty cool. It came out couple years ago when there weren't much competition for custom web fonts services.

  • Huge library with over 4000 fonts
  • Has specific mobile settings for iPhone and Android devices
  • Once you include the Typekit javascript on your HTML, you don't need access to the HTML and CSS to change fonts. You can use the Editor on typekit.com, which means you can make fonts changes from any computers anywhere
  • There's a free version
  • The heavy javascript hinders performance
  • No Blackberry support
  • The free version puts a branded tag on the corner of your mobile website
  • Changes sometimes take a while to go into effects
  • Cannot download fonts to desktop
  • Pricing plans are on a per year basis
  • There are limitations on bandwidth and number of fonts used according to the plans you select

There are many more services out there. For a complete list, check out my post on the BlueTrain Mobile In Transit blog.

5. Treat It Like A Landing Page

Users visiting your website on mobile are most likely on the go, they don't have the patience to wait. You have to provide the information they need in a quick and accessible way. Think of your mobile website as a landing page and apply some landing page best practices when designing it:

  • Keep your copy short and sweet, but at the same time compelling enough for the user to take a closer look
  • Use strong calls to action to indicate what the user should do next
  • The action buttons should stand out. Make them big and bright
  • Show all the important information above the fold (or within the default viewable area we discussed earlier)

Bonus Tip: Compress and Combine Your Images

Performance is essential for a good mobile web experience, so you must ensure to optimize the load time on your mobile website. According to a recent survey done by Modapt, 40% people say slow downloads is their biggest frustration when browsing the mobile web. Here are a couple basic things you can do to speed up your mobile website:

Make a Sprite of All Image Assets

Instead of having a dozen of individual image assets, you should learn how to make a CSS sprite—combining all image assets into one big image file (learn about it here). Why? You ask. Well, let me tell you something about the mobile web you might not know about. When your mobile device loads a website, the biggest factor in hindering the load time is not the physical file size. Rather, it is how many calls of request your website is making for external resources—javascripts, CSS, images, etc. With that being said, loading one image is much faster than loading a dozen images, given that the one big image is equal in size of the dozen images.

Compress the Images

Even though I said size is not the biggest factor, it is still a factor. So make sure that you compress all your images down to the smallest size. I have come up with a two-step process that guarantees to compress the heck out of any image files:

  • First compression: When saving out your images in Photoshop (or your preferred image editing program), make sure to use the save for web option
  • Second compression: Compress the image files you just saved out even further by using Yahoo's Smushit or ImageOptim for Mac

Get Mobilized

Like it or not, mobile is here to stay. More and more companies are realizing the importance of mobile and its value in marketing. Now is the time for designers to capitalize on (and adapt to) this young technology to become an early leader in it. Just like how we adapted to web design when print died, right?