I’ve been getting my proverbial hands dirty behind the scenes this week, grappling with code in order to put together a probable, working mobile layout for this blog. (The main thing I’ve realized so far? It’s a LOT of WORK. LOL)

This is the mobile design I finally came up with, working with the basic color scheme from the new desktop layout I’ve been designing. Its main features: Site content shrinks and expands as necessary (this screenshot shows how a mobile phone would display it) Same logo as my desktop design Bigger font and widely spaced text lines Simplified navigation Larger-sized links But it took quite a while to get this design “right”–and it wasn’t easy to figure out how to manage it. Indeed, I’ve struggled most of this last week to come up with a design that actually looked like a mobile site layout, instead of a hopelessly squeezed version of my desktop design!

The Key: Focus on Readability and Content

I found out while designing this mobile layout that trying to fit all my navigation, my sidebar information, AND my content would just not work. Instead, I needed to make my mobile layout rather sparse-looking by desktop standards:

• Keep the color scheme basically the same as your desktop layout, but make sure that there is a lot of contrast between the text color and the background color. High contrast is especially important for readability on small screens!
• Only include the navigation that matters to your mobile users; if it doesn’t have to do with your content, it doesn’t need to be on your mobile site’s navigation. (For my blog, that meant that I had to exclude my “Links”, basically.)
• Same goes for content. If it’s not one of your articles, don’t include it on your mobile layout. (No sidebar info here!)
• Bigger font is actually better on a mobile device–you don’t want to make your users have to zoom in to read your text! That’s why you make a mobile layout in the first place. (For instance, I ended up with Garamond 16px for the body font in my mobile design, and I might even make it bigger than that in the final draft.)
• Make headings, links, and navigation very, very clear and very easy to tap on with big fingers. Take it from someone with large fingertips–a link in big font is much easier to tap on than a link in itty-bitty font.
• Include clear branding for your site (i.e., your logo/icon); if you can use the exact same logo/icon for your mobile site that you use for your desktop, all the better!

Summary

Mobile layouts have to be simplified, but that doesn’t mean that they are simple to design. (Indeed, you have to be deliberate and careful in your design choices, otherwise your mobile layout will be unusable!) But with a few considerations, you too can make yourself a layout that will transition well to all mobile devices, big screen or small.

(Tune in next week for part 2, in which I will attempt to make this mobile layout a coded reality!)