Are more of your website visitors coming from a mobile device instead of a desktop or laptop computer? Mine are, and even though this site is optimized for mobile, it needs to evolve. (That includes smartphone plus tablet usage.) In What Users Want Most from Mobile Sites Today, Google reports that 61% of mobile visitors who click through to a non mobile-friendly website will leave and search for a site that’s more easily readable from their device – faster than Miley Cyrus leaving a dull party.
The statistics on mobile adoption continue to be breath-taking. According to KPCB, 2013 was the year when the global installed base of smartphones and tablets exceeded desktops and laptop. In India there was more Internet use from mobile than from computers. There are now over 50mm Internet enabled TVs!
I’m ushering in the New Year with a responsive design for this website. Simply put, Responsive Web Design means that your blog or website will automatically appear properly formatted on any device: a desktop computer, a tablet, or a mobile device. RWD offers many advantages – once you’ve invested in the design, you can change all formats – tablet, smartphone – with a single edit. If your customers are on the move, it’s the way to go.
Right now, this website runs on the Thesis framework, which in turn sits on top of WordPress. Both are fantastic. WordPress is a free and open source blogging tool and content management system that runs 20% of the top 1MM websites. Thesis is a framework which allows you to easily customize your design and control your SEO. It’s useful for me to keep handy with both, because then I am much better educated to manage higher level technical projects at work. There’s an analogy you can use to think about the whole structure: WordPress is like the engine of the car, Thesis is like the body, and the theme on top of that is the paint job.
Thesis 2 launched at the end of last year and was a huge shift from Thesis 1. When I first looked at it, it was like looking at a completely new product. I’m a long time user of Thesis and wanted to continue using it, but I also looked at the excellent Genesis framework in order to create a new responsive design. In the end, I went with Thesis.
I looked at Thesis 2 a long time before I began to tinker with it. The changes were so significant, I set it up on a test website and got used to the differences. Then I got a pot of coffee and tackled the transition. Thesis makes it simple to switch back and forth between the new and the old versions, so if you screw up you can turn on the old theme for a while until you have time to sort it out.
The task was almost like redoing the whole website, but I’m happy with the result (and I hope you are too). Here are a couple of tools you can use to see the responsive design in action: Resposinator and Screenfly (both will open using this website, but you can change the URL).
Obviously, converting a small website to a responsive design is a far cry from a giant brand website, but it the end I was surprised at how simple it was. There are many emerging development tools that can make this easier, like Twitter Bootstrap. Still, you have to be careful of the man behind the curtain – in other words, the person who is picking your breakpoints and making the decision on how the website scales. I’ll be doing some more experiments with this and I’ll report back.
by 