Responsive is a word that’s been floating around the web for awhile now but for many, it’s still a bit of a confusing topic. Questions like, “Why would I need my site to be responsive?” “What good is responsiveness?” or, “What the hell is “responsive”?”
Let’s start with the last question first: What is “responsive?”
A website that is responsive aims at providing the user with the best experience in regards to screen viewing size. This is the difference of what a site looks like on a tablet versus a smart phone or how both those options look different from the version you see on your monitor. For sites that aren’t responsive, the phone/tablet version is often a full version of the site where you are able to zoom in and out, but can often be a bit troublesome trying to navigate through on a tiny screen. Responsive websites give you the feel of an app but while still viewing the website. (Which I feels answers the question of, “What good is responsiveness?”)
So moving on: Why? Why worry about a thing that seems like it could be a giant pain. I’ll let my analytics do the talking (from January 21st-February 20th):
If you look at the numbers above, you will see that more than a solid 1/3 of my traffic comes from an IOS/Android traffic. I’m actually part of that third occasionally when I want to look up a recipe on the fly or take my iPad into the kitchen with me. The amount that people use tablets/smart phones is on the rise and it’s helpful to remember that just because it looks great on your computer screen doesn’t mean it looks great on your phone.
So let me show you the difference. While Naturally Ella has always had some sort of responsive capability, it always looked like junk (serious, it was horrible). I spent the last few days revamping it so that when I viewed it on my iPad or my Iphone, it felt easy and natural to use.
Naturally Ella as seen on my regular monitor:
Naturally Ella as seen on a tablet held horizontal:
Naturally Ella as seen on a tablet held vertical:
Naturally Ella as seen on a smart phone held horizontal:
Naturally Ella as seen on a smart phone held vertical:
As you can seen with each screen, the homepage adapts just slightly. Eventually the sidebar drops under the content, a mobile menu pops on the the vertical smart phone, and the original header is replaced with a logo. My site is a bit more of a pain than others because I had so much custom stuff.
Don’t have an smart phone or tablet and want to know what your site looks like on a mobile device? You can use responsive.is to check it out (take it with a grain of salt- some of my stuff was spot on in this demo but off on the iPhone/iPad). Of course, you can always hijack a friend’s tablet/phone and test your site out on there.
Also, some themes are starting to come pre-packaged with responsive capability. If you are looking for a new theme, you may want to research and see if that’s the case. (We use PageLines to build our sites on and I’ve found that out of the box, the responsiveness works decently). If you find that your theme doesn’t have this capability, there are services and plug-ins that can help you out. WP Touch is a plug-in for self hosted wordpress that allows your site to have a mobile version. There are a few plug-ins out there for tablet friendly sites but they haven’t been updated in over a year (which makes me a bit hesitant to use). While at Alt I also spoke with the people from Padsquad. They add tablet capability to your site along with advertising and while I haven’t used it myself, it’s something else for you to look into.
While responsive sites are still a new thing for me, I look forward to building/revamping sites to have this great capability!(small print: we are an affiliate of Pagelines and do receive a small percentage if you decide to purchase the theme through that link.)