Responsive design is currently the big “buzzword” that you may have heard floating all around the web lately, but you might not know much about what the term “responsive” means. So here is a brief history and case for going responsive on your new or redesigned website.
The ability to create responsive websites has actually been around for quite some time using CSS3 (@mediaqueries) and some simple HTML markup. What changed the game for everyone was the flood of tablets and smartphones over the last half dozen years, before that you really did not need to service more than laptops and desktops. Some hardy souls took the scary road down the m.mobile site route, but this was always a strange road to follow as often you would need to build two websites, one for desktops and one for the mobile experience. And usually you had to limit what you displayed on the mobile website as many screens resolutions where very small (remember flip phones… yikes!). And with so many different phones types targeting a good resolution was always a battle.
Ethan Marcotte coined the term responsive web design (RWD)—and defined it to mean fluid grid/ flexible images/ media queries—in a May 2010 article in A List Apart. He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design.
So why responsive? This is easy to answer, serve all devices with one application period.
Deliver the best experience of your content to phones on portrait or landscape, same goes for any size tablet and any desktop/laptop. You don’t even have to stop at the old width rules that were around for years, remember when you could only go 960 pixels (px) wide or when you made it 1020px and thought you were living large?! Now you are no longer a slave to screen size make it full width 2750px for those huge displays, heck while we’re at it, how about that 80 inch HD televisions hanging on a wall in some living room, sure we got you covered.
Responsive design is based on resolution and re-tooling the content to fit those devices, we do not have to build multiple versions to do it, one set of content, delivered to any size device. Now doesn’t this make your old static website feel dated?
I know many of you as saying, “I just re-designed my website two years ago”. I hear this all the time and probably the main reason responsive design was not applied to your site when you re designed it is because the technology and reason to do it was very new. The skill level to build these web sites responsive is a steep learning curve and caught many design houses by surprise. The ability to re-tool twenty plus years of design standards in just a year or two has proven to a difficult one. Luckily many designers have taken big step to get up to speed and if you drop in on any design firm chances are responsive design would be on the menu. Actually not building a responsive site today is a major disservice to you and your visitors.
Late 2014 statistics show that 30-40% of your traffic will come from a mobile device and it’s expected that it will surpass 50% in 2015. That’s half of your visitors seeing you website on a mobile device… Thinking hard about updating your website now?! Can you imagine if you are running an e commerce website how many purchase you may be losing due to the lack of a good buying experience (pinching and zooming with your fingers is a crappy way to shop). So make sure you are thinking hard in 2015 about updating your old website to a well thought out responsive design, you can’t afford not to.
Do responsive website cost more than static websites? They can, you are no longer creating a single view in one resolution and creating a static item. A bit more thought and planning does and should go into the creation of your website, thinking about what people expect to see on different devices should be taken into consideration. Example would be, do you need to deliver large images that look nice on large display to users on small smartphones, probably not. Or you might use multiple images served to different devices to show a similar experience. These are all things to consider to be able to deliver the best experience to the user, setting the correct balance can greatly increase sales/conversions/call on you website. And making your website a high priority for your business marketing plans is huge, when was the last time you got a call from the yellow pages?
Responsive web design – http://en.wikipedia.org/wiki/Responsive_web_design
Ethan Marcotte – http://ethanmarcotte.com/
SalesForce 2014 mobile behavior report
Note about the author: Tim Davis has over 20 years experience building websites, from large .coms, small business and nonprofits. For the last 3 years I have done nothing but responsive design in an agency setting, working with many client both small and large using many different platforms to deliver quality websites. Currently I hang my hat at Trademark Creative were we strive to deliver the very best website for your marketing/sales goals.