The New Mantra: Mobile First

BlogHer Original Post

Is your blog ready for mobile? Do you know how it looks on an iPhone or Kindle Fire? There's a push to create websites designed for mobile first and the browser second. Lindsey Kirkbride's article Responsive Web Design, Mobile First, and the Future of Content Consumption is a quick summary of the current state of design ideas for a world rapidly going completely mobile.

Folksy responsive site
Folksy screenshot via mediaqueri.es

The reverse of the mobile first idea is to start with a desktop design, but make it "responsive" so that it can adapt to any size device. You see that idea at work in the image of the British crafters site Folksy above. I wrote about responsive design last December in Responsive Design: Should Your Blog Use It?

Recently this tweet from Laura Scott got me thinking about how sites look on mobile devices again.

This is a pet peeve of mine too. I don't always spend time on Twitter when I'm at my computer. Frequently I look at Twitter when I'm away from the house in a waiting room or sitting outside the school waiting for the grandkid. I'll see something that really looks interesting, but when I follow the link it's unreadable on my iPhone.

This problem could be solved if sites were designed with mobiles in mind from the very first, or if they were designed respond to mobile devices with different layouts.

Luke Wroblewski wrote a book called Mobile First and is the leader among the proponents of this idea. He explains, in an article at Net Magazine, why he supports the approach.

But things have changed so dramatically over the past few years that starting with the desktop may be an increasingly backwards way of thinking. Designing for mobile first can open up new opportunities for growth and lead to a better overall user experience. Let’s dig into the three key reasons why: mobile is seeing explosive growth; mobile forces you to focus; and mobile extends your capabilities.

Luke's comment that mobile forces you to focus means that you really have to think about what's important. You can't have content that isn't part of your main message cluttering up the screen when you only have 480x320 pixels of screen space. Narrowing your focus can also extend capability by reducing download speed and making your site easier to use and navigate.

What about Blogs?

Most bloggers are not creating their own templates or themes. But fortunately, the folks who do create templates and themes for blogs are well aware of the need for blogs to work on mobiles and well as desktops. The default WordPress themes 2011 and 2012 are both responsive designs. Switching to one of them guarantees you a good result on a mobile device.

Blogger also allows you to switch to a mobile theme.

If you are unafraid of the idea of designing your own WordPress theme from scratch, here's a helpful article by Ellen Bauer at Smashing Magazine that explains how to Create A Responsive, Mobile-First WordPress Theme.

Check Yourself. And Everyone Else

What if you don't own every possible size of mobile device to take a look at your blog and check yourself?

There's a handy bookmarklet available from Benjamin Keen. You download the bookmarklet and put it in your bookmarks toolbar. Then you can see how your site, or anyone else's site looks in various sized devices.

You may be losing readers if you don't find out.

Virginia DeBolt, BlogHer Section Editor for Tech
virginia.debolt@blogher.com
Virginia blogs at Web Teacher and First 50 Words.

More Like This

Recent Posts by Virginia DeBolt

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.