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.
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 Should Your Blog Use Responsive Web Design?
Recently this tweet from Laura Scott got me thinking about how sites look on mobile devices again.
So many links tweeted are to sites that don’t work on
#mobile. Wonder about links I shared. We all must stop assuming desktop privilege!— Laura Scott (@lauras) September 2, 2012
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 480×320 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.
[Note: Cross-posted on BlogHer in slightly different form.]