Surely you’ve heard the buzzwords online of “Mobile Friendly” and “Responsive.” Gone are the days of having a separate mobile website – it is optimal, and almost a must to have this feature integrated directly into your site. Even Google recommends it for improving your search engine rankings.
So what exactly is responsive design? What makes a website responsive, and why does it help?
In the past, many websites were set with a fixed width meant for a standard sized screen ( It’s the reason that many websites with fixed widths have a width of 960px.) These sites usually had a separate website for when you were visiting it through a blackberry, or mobile device in general. Eventually, advancements in code allowed websites to detect if you were viewing the site on a smartphone, and automatically redirected you to the separate, mobile version.
As technology evolved and expanded, and more manufacturers increased their brand line, there was no longer a standard screen size, let alone resolution size. Laptops, and Net-Books could come with tiny screens, televisions came with web browsers and thus were large, tablets became popular, as well as smartphones – and look how many different sizes those come in!
As a result, a website can end up looking nothing like it originally was meant to. Either the site ends up being way too large, causing you to scroll left and right for ages just to read, or the site appears much too small due to the large size of screen. In worse case scenarios, the site outright breaks.
Responsive design avoids the need to worry about these issues, all which can turn away visitors, and ultimately potential customers – instead, it causes the website to readjust the layout and content based on the size of the visitor’s screen.
Ashley Faulkes from Mad Lemmings puts it best:
How do Responsive Website work?
Without getting all “techy” on you, I will try to provide a simple explanation of how responsive websites work.
Basically, when you visit a website your browser sends information about the size of the screen you are using.
The website can use that information to re-arrange the websites, to display them differently (better) for you on your phone, iPad or computer.
Almost anything can be changed – font sizes, colors, images, positions of elements on the page, and so on.
You can even show some things, and hide others. It really is quite flexible.
If you want to see some examples, here are 5 great ones from Social Media Examiner.
Responsive websites are not perfect, because they have to make some estimates of the screen sizes to expect.
However, having one means your website looks great on almost any device.
So anyone who visits your website will be able to find, read, and interact with your site, without cursing your name! And they will probably come back too, because it was so easy to use.
A responsive design avoids the need to have multiple websites, and thus have to update multiple sources of content – and with it optimized for the device sizes, your visitors will be happy too!