"Real" Responsive Web Design, and Why Mobile Sites Suck
As a website visitor, the phrase "Click here to view our full site" is something you should never see at the bottom of the site. Imagine this – you are looking to buy a new couch, and you find the perfect floral patterned beauty of a loveseat on a nicely designed and organized website: awesomecouches.com (it's not real, I checked). Later that evening while out with the girls, you pull up that website on your iPhone, and what do you see? You see a mobile site that looks like it was designed by a third grader, and now you can't find that awesome floral couch no matter how hard you look. So next you click their "full site" link and get an experience that's like watching a big screen movie through a straw. How are you supposed to click on those tiny little buttons? This is why "mobile" sites suck. You get limited information in an elementary looking format that's nothing like the "full site".
The latest in Responsive Web Design (RWD) allows you to have only ONE site that shifts and changes to your screen, no matter what the size. Whether you use an old beat up PC, your new shiny tablet or next year's fancy gadget, your responsive site will look and function as you intended it to. It'll look great and you won't need a magnifying glass to read it. But be aware that there are a few different ways to make a site responsive, and they aren't all created equal.
ONE site that shifts and changes to your screenMost "Responsive Designers" (you couldn't see but I made air quotes when I typed that) don't truly make your site responsive but they'll tell you it is. The site will actually be coded in a way that responds to predetermined break points. This means there is a version of the site for the average desktop computer, the average tablet, and the average phone. While this is better than most "mobile" sites, it isn't ideal because it's actually only built for 3 average screen sizes. What happens to those of us who remain loyal to a Blackberry (not me) or some other device (or future device) with a non-average screen size? Well, we get a less than satisfactory experience. This could mean that since we got mad and couldn't find the couch to show our friends on awesomecouches.com, we found it on fancysofa.com's RESPONSIVE site instead and the first company just lost a sale.
I bet you're wondering, "How can I tell if it's a truly responsive site or not – I don't know what I'm doing." Well luckily for you there is a very easy way to tell. All you have to do is click that little page size icon in the upper right corner of your page (might be called "restore down") then grab the corner of your screen (down there in the bottom right) and make the window smaller or larger. If the site is responsive and was done right, it will scale and change and shift beautifully as your screen size and dimensions change. Try it right now on this page, I'm patient, I can wait a second. (Cue sound of ticking stopwatch.) Oh you're back. How was it? Get the idea? You should have the same experience no matter the size or dimensions of the device you're using. There shouldn't be different graphic styles, different navigation, and you should definitely not have different content.
A single responsive site has many benefits:
- Google loves responsive sites. Their indexing algorithms can more easily give your site the credit it deserves, and they don't have to try to distinguish which of your sites should get the juice since there's only one.
- Less maintenance time. Your website is never "finished". You'll always want to make quick little updates here and there. Having only one site (responsive site) means there's only one place to update. Instead of updating your about us page in 3 different places, you only have to do it once.
- Overall Longevity. When done the right way, your responsive site will work on ANY screen size. As screen sizes ebb and flow you won't need a new site because it will look just as good on the future iPhone24S as it does today.
- User Experience. With a single site we have the ability to design and tweak the user experience. For example, a user on a phone may need a quicker portal to your contact information, and may be more inclined to call, while a desktop user may fill out a form after doing some research.
This is a quick overview of just one of the parts of website design and development that is always changing. If you're thinking of updating your site for better sales – or if your site needs a major overhaul we'd be happy to talk to you about it.