Responsive Web Design – Slow to Catch On, but Worth the Effort!

Responsive Web Design – Slow to Catch On, but Worth the Effort!

If you work with web technologies for your livelihood and are not yet familiar with Responsive Web Design, you need to get to know this new web design philosophy as soon as possible. Responsive Web Design (also called simply "Responsive Design") is an approach to designing web sites so that they deliver an optimal user experience on any device or screen size. The seminal work that exposes the technical inner workings of this new approach is Responsive Web Design by Ethan Marcotte, which is a must-read for all technology professionals.

You may be asking why you should learn about Responsive Design as soon as possible. Well, older web design approaches commonly used a minimum width for the content. If your browser window was narrower than that minimum width, a horizontal scroll bar would appear at the bottom of the browser window, and some of the content would not be visible unless you scrolled around. Sites such as that can be difficult to use on smartphones and tablets because the entire site will usually require lots of zoom-in and zoom-out operations in order to just begin to read the content of the site.

All that changes with Responsive Design! This approach uses the latest advancements in HTML5, CSS, and Javascript to work its magic. But a responsive web site cannot be obtained by simply applying a few lines of code to an existing web site. In order to deliver a responsive experience, concepts and techniques such as CSS media queries, fluid grids, image scaling, heavy use of typography, and progressive enhancement (and lots more) have to be considered during the design phase of the web site. It's a rare situation in which an older site can become responsive without completely redesigning it.

Web designers who have been writing a small amount of HTML, CSS, and Javascript are in for a steep learning curve here. Unless they leverage a productized framework for delivering a responsive web site, they are in for a wild, crazy, and sometimes terrifying, ride. But it seems that graphic designers and visual designers have a lot to re-learn as well. The old approach of designing a website, in which you start with an attractive mock-up of the site in PhotoShop and then cut it up into images, simply will not work in this brave new world. All of this means web and graphic designers must collaborate and work together much more than they did previously.

Along with Responsive Design as a technical approach, we are seeing a new style of visual design emerge in 2014 that is definitely a result of the popularization of Responsive Design. This new visual style uses solid background colors, large fonts with carefully chosen typefaces, fewer graphics, and content areas use the whole horizontal space without being visually framed in. A few beautiful and glowing examples of this new design are the public web sites of companies such as Starbucks, Rackspace, Xero, Workday, Zurb, and of course, Certify. Go ahead and take a look at those sites. While you do that, try changing the width of your browser, slowly narrowing it all the way down to the size of an iPhone 5 in portrait mode. When you do that, you will notice that some of those sites do not actually "respond," as you shrink the browser, but instead they simply introduce a horizontal scroll bar. Those sites are using this new responsive visual style but are not actually responsive.

As we browse around the world wide web, looking at corporate web sites, software company web sites, marketing and advertising web sites, and more, we start to see some trends. It turns out that this new responsive visual style is being adopted more quickly and pervasively than Responsive Web Design itself. There is a simple reason for that, and it is that changing the web design approach from the old method to Responsive Design is a massive undertaking. Here at Certify, we made that switch ourselves and found out firsthand just how much learning, labor, and love is required. If you and your company have not made the switch to Responsive Design just yet, do not fear because these are still the early days. But with the proliferation of tablets, phablets, smablets, smartphones and more, and also with the global sea-change in customer browsing habits shifting away from desktop experiences, we can expect Responsive Design to only increase in importance and priority.

As a software architect, Responsive Design provides the impetus for us to completely re-tool our user interface and user experience methodologies. For years it was simple to just use basic HTML and CSS with some amount of AJAX, and allow the graphic designers to make things look pretty due to modern development frameworks' abilities to separate business logic from the presentation layer. But Responsive Design is now upon us, and it tends to once again blur the lines between content and logic. It is here that I must warn you…a steep learning curve is in order if you plan to make the move to Responsive Web Design. If you are like me, once you become interested in this approach to web design you won't be able to stop thinking about it and inspecting every site you visit. But I would also like to encourage you – it may put a serious dent in your productivity for a while as you come up to speed on it, but the end result is definitely worth all the effort.

Learn more about how Certify makes travel and expense easy for your entire organization.
Alan Neveu

Certify, CTO