Responsive Web Design
What’s that mean?
We build websites – we built a lot of websites, and technology and the way those websites work changes all the time. In September of 2012, I wrote a blog article on the differences between a mobile-friendly website and a mobile app. At that point in time we were encouraging our customers to look at mobile-friendly design as an alternative to having a mobile app programmed. Apps were expensive and updates would be time consuming. Mobile-friendly meant your regular full-size website would look and function the same on small and large screens. Not long after that we started to see several third-party vendors that would take your website, run it through their server and spit out your website in a version that looked like a mobile app when viewed on a mobile device.
For most sites today we look for ways to make the site responsive rather than be mobile-friendly or by using a third party tool. Responsive means using a fluid layout, which allows both large and small screens to share the same content without having to set up separate code for each screen size. When you look at a website that is designed and built with a responsive layout you’ll notice as you resize your browser window different elements of the site will begin to move into new positions, two modules that were once side-by-side will stack on top of each other, columns of text will realign so that they’re easier to read on a small screen. There are many advantages to using a responsive design for your website, however responsive design has also created some pretty big challenges.
For starters, when we know a customer specifically wants a fully responsive website we have to calculate how much additional time it will take to build. We have to plan the site design a bit differently while keeping in mind that some minor adjustments might be required once it’s programmed, and we’re viewing it in a browser. While the design side of the project takes a hit on time – the bigger hit comes in the form testing.
The testing process for a responsive website is a large and time consuming task. Think about how many different mobile devices there are. There are tablets from Samsung, Microsoft, Apple and more. Each of those manufacturers offers their tablets in multiple sizes. What about phones? How many different smart phones are out there and how many more are coming out this year? With each device you have to test that device, as well as, several browsers on each. A responsive website isn’t helpful if your menu isn’t available on an iPhone when viewed using Safari, but functioning perfectly when viewed on a Galaxy S4 with Firefox. The only way to know is to test each device and each browser on each device.
So what do we recommend? Most of the templates we use offer a responsive framework. Our default process is to use these templates when designing and building all new websites. We then test the completed site on desktops and laptops. We look at smaller screen sizes to insure the basic functionality works – for example making sure the main menu is visible and can be easily used. This option is a great fit for probably 95% of our customers. For the few customers that want to be sure every page of their website is functioning correctly on as many different devices and browsers as possible, we’ll provide an additional quote for the testing process to cover the tools and time it takes to review additional devices and browsers.
If you’re ready to build a new website we’ll be happy to talk through the options and show you some examples of responsive design in action. If you’re already one of our website customers we’d love to show you how we can upgrade your site with this new feature and make your website respond to today’s latest technology.