A little over five years ago website designs were fixed in height, width, layout and size. They were designed to appear great on a fixed resolution and monitor size. About 15” – 17” was the norm and we needed a large bulky object known as a PC to view those sites.
Now it’s the second half of 2014 and you can view websites on tiny little devices such as Smartphones or carry them around with you wherever you go with Tablets that fit in your hand easily. The world is becoming truly mobile when it comes to accessing data and information and this is only set to grow over the next 10 years as wearable devices become normal in everyday use.
Responsive Web Design is a fairly recent addition to the web designer’s arsenal and represents a quantum leap in how sites are presented to users. Responsive Web Design is the single fastest growing design trend of the last 12 months and is also set to grow much more than it is at the moment. As more and more Smartphones and Tablets are sold, the need for Responsive Web Design becomes much more important. As users browse sites on different devices, these sites need to work and appear correctly and old style non-responsive sites will look like a complete mess.
Ethan Marcotte coined the term Responsive Web Design or RWD in early 2010 and the idea of adapting a site layout for a devices screen size was written about by Cameron Adams as early as 2004. Ethan described Responsive Web Design further in a book in 2011 and it became one of the top design trends in 2012-2013 and is now becoming mainstream and the design style of choice for forward thinking web designers and businesses
To understand what responsive design is, you can view it in action by resizing your browser and watch how the layout of this site moves around to fit the window size. You can also play around with the zoom and see how the words and images change to accommodate the larger font size.
Bring up this website on your tablet or mobile and see how the layout is different to what you see on your PC. This is the essence of responsive design, where a site rearranges itself to look nice and work properly on all devices. A responsive design is built so portions of a website move relative to each other and will always fit the screen size.
“The way a user has to navigate a site is key and if it doesn’t work you will lose customers. 25% or more of website users will not stay on a site if they can’t navigate it easily.”
Most mobile users now expect that websites are mobile friendly and responsive design has become natural and normal. If a user visits a site that isn’t responsive they won’t hang around on it too long as it’s hard to use. After all when browsing why use a site that doesn’t work properly when you can use one that does. There are millions of websites around, so users always choose the ones that are easy to navigate and easy to use as it’s quicker and more efficient. It is a known fact that even having a mobile friendly site is not good enough.
The way a user has to navigate a site is key and if it doesn’t work you will lose customers. 25% or more of website users will not stay on a site if they can’t navigate it easily using a mobile phone or tablet; they get frustrated with poor design and just go find a site that works.
Before we had responsive design we would make different versions of sites, one for Tablets, one for PC’s and one for Smartphones. We even made designs for different sizes of smartphone screens and a different one for iPhones. As you can imagine this was very expensive for the customer and frustrating for us designers.
The thing about Responsive Web Design was that the huge problems from having several different sites for a wide variety of devices were solved using simple ideas. Using readily available tools, coding and scripts such as CSS, jQuery and HTML5, it is now relatively easy to build a responsive website and although the development time and cost is a bit higher than a normal site it works out much cheaper than having an app built and is much more friendly to site growth in the long run. In fact in the long run you will save money as you won’t lose so many customers.
Responsive Web Design is great for search engines as it rids your website of the things it doesn’t need and gets all your SEO into one tight single package. You cannot have this with separate websites for Mobiles and Desktops. Having different sites for specific devices creates issues in that you need to have separate search engine strategies for each site, optimising each one for its task. Responsive Design also gets rid of the issue of duplicate content which can damage your rankings.
It is much easier and more efficient to have one responsive website and optimise it for search engines than to do this for multiple sites. It uses less time and resources so is much cheaper in the long run.
Responsive Web Design can be confusing due to the nature of the mobile device market. It is constantly changing with new innovations appearing almost daily. Screen sizes seem to get bigger and grow in resolution while older phones such as Android and Apple devices get operating system and browser updates. It can be hard to keep on top of unless you know what to look out for.
For us to understand how Responsive Web Design works we must delve into how browsers work on different devices. It is a joy to see a website that is well designed working well across many different Phones and Tablets. In older responsive designs not much was happening and the designs were not optimised to be “mobile first”. Phones and Tablets a few years ago were nowhere near as powerful as they are now. In fact a Smartphone or Tablet is now way more powerful than a top end PC was in the early 2000’s.
As mobile device capabilities and the way surfers use them has exploded, the need for responsive design that works and works well has become extremely important for user friendliness.
Responsive Web Design is the design of a website which has the ability to change shape to fit the screen of the device it is being seen on. As you could not easily design different site layouts to fit every make and model of mobile device ever created, Responsive Web Design overcomes this by using layouts that are fluid and flexible. They squash or stretch themselves to fit the screen.
In the past websites have been designed with fixed sizes and values, usually set in pixels or percentages of screen size, that create the layout or framework of that site. Responsive Web Design discards all this to use what is known as fluid grids which use elements that are proportional and relative to each other. It is a bit like fluid, constantly changing tessellation.
These elements can resize and rearrange themselves to fit a given screen size automatically and each one is integrated with the rest so they form a cohesive structure.
This is where Responsive Design becomes a bit technical and can involve a bit of maths to work out the amount of space elements and images on web page will take up. You then have to calculate how they will arrange themselves when the screen size changes.
It is usually best to design a mock-up in Photoshop and see how the pieces will fit into different screen size and layouts – you can then create code to emulate these layouts.
To make all this coding easier for the designer, we have seen the advent of HTML5 and CSS3 which allows for things called media queries. These media queries allow a designer to target specific devices and screen sizes, above or below a certain width or height. These media queries allow us to target styling for an iPhone for instance, but then create a different CSS3 media query for an Android Device with a resolution of 800 x 400. We can even target whether a device is in portrait or landscape.
The job of the designer is to write the code and queries in such a way as they work nicely on all sorts of devices with the minimum and most efficient code.
Responsive Web Design allows me to create sites that work well on all kinds of devices. It allows a design to look good wherever it is being seen no matter what you are using to view it.
It ensures the designs I have made do not break and look like a complete mess. It is a simple but very powerful tool and it’s definitely the future of web design.
Responsive Web Design allows me to create sites that are not bloated and heavy with code and allows sites to be created that have navigation that suits the devices it’s viewed on.Thanks for reading.