Written by Simon Geraghty & Ryan Nutley.
Over the last 5 years, tablets and smartphones have taken the world by storm, causing an increase in demand for short bursts of information on the fly. As a designer and a developer, it’s my responsibility to work towards the demands of the end user.
What is Responsive Design?
Responsive design is a general reference to the adaptiveness of a website to multiple devices, how easily it can be viewed on any screen size, while still keeping a consistent look and feel.
Browsing the web on your standard macbook, laptop or desktop computer, you are presented with a “template” view of a website, a standard layout based site that is viewable across nearly all other desktop computers. I call this the standard web.
Browsing these standard “template” sites on a mobile device, you may notice that you have to zoom, or scroll to view the same site in a readable mobile manner, this is NOT responsive design.
Standard Approach to Responsive Design
When I started web development the idea of responsiveness was already embedded in my brain, I never quite understood why anyone would design a website with a fixed width that couldn’t be viewed on anything smaller than an 11″ laptop, I guess I had an advantage over many designers from that point of view.
My generation is a generation of iDevices and Skype, we expect nothing less than high end gadgetry and top quality freemium services. The idea of not being able to do something on one device as opposed to another just doesn’t make any sense.
After researching more about responsiveness, I discovered many designers were claiming responsive designs, but doing little more than making a variable width website as opposed to static width, and hiding sidebars etc. on smaller devices. In my eyes, that’s like painting a brick yellow and telling someone it’s gold. It might look alright, it might feel alright, but it’s not real.
Think about it logically, all that’s happening is you will be loading up the entire site on a mobile device and then making some elements disappear. As a user you should be concerned about this… longer loading times mean higher data usage, and slower access. One “responsive” site might not make a huge difference, but all that data adds up.
How can we expect to progress the mobile web if it’s being done wrong?
The big question I ask is, “Why bother loading an entire site, just to make half of it disappear?”
True, responsive design should adapt an entire site to a specific device, plain and simple. It should optimize what it loads, how it loads it, how it presents it. It should feel like an entirely new website that was made just for the device you’re using, but without the hassle of creating a brand new website for each device.
True responsive design should have a mobile version, a tablet version and a desktop version, and offer alternative experiences for different user levels.
The DotDash Approach
I guess now that I’ve spoken a little about what responsive design is and how it should ideally work, I’ll give in insight into how we approach it at DotDash.
With mobile users growing by the day, we have adapted our own rather unique approach to the whole situation:
- The first thing we do is sit down and brainstorm how we want a site to feel for a mobile user, what features it should have, how it will be navigated etc.
- We will then think about how we want the site to perform on tablet devices, what additional features and layouts would work best for larger touchscreens etc.
- Finally, we take what we’ve done for tablet devices and scale upwards again for desktop usability.
Essentially we work in reverse order, giving priority to mobile, then tablet then desktop. This is done for three main reasons:
- It helps understand the core purpose of the site and what users absolutely need for the site to hold merit.
- It allows the mobile design to be scaled towards desktop, which results in an almost app like feel to the site. (Mark my words, that’s where the web is heading over the next few years)
- It allows different features to be implemented on different devices, giving users a slightly different experience depending on how they are interacting with the site
To assist our overall responsive process, we have created our own class of functions that allow us to determine the device being used by the user. This allows is to do nearly anything with a responsive site, right down to delivering device specific messages to users. We can also choose to condense files, speeding up load times, load smaller images depending on screen size, and create calls to action for certain users only.
If you’re interested in creating a responsive website for your business, why not check out our mobile web design services and get in touch.