Have you ever found yourself on a website on your phone endlessly scrolling horizontally to read the tiny text? This is because the website has not been optimised for your phone. Thus reducing the quality and functionality of the website.
Responsive design allows the email or web page you are looking at to fit the device that you are viewing it on. Each device has a different width, for example the iPhone has a safe width of 310px for websites where as most desktops have a 1024px width. This means that depending on the device you are viewing the website on, the content must be shuffled around to fit the width of the device.
Websites need to be optimised for the device it is being displayed on, this can be done in two ways; the first way, Adaptive, uses the width measurement of each device then designing the layout individually for each device that the webpage would be viewed on. The second, Responsive, uses a fluid grid layout so the content automatically optimises for the device it is being shown on.
Fluid grids are a way to create a responsive web design. Fluid grid work using proportions, this means that the content will scale depending on the size of the device and the content will all scale in relation to each other. However when the device is very narrow the design of the webpage breaks down. This is where Media Queries comes in to play, this helps to specify what would be displayed on each device and the scale of each section allowing small textboxes side by side to become wider on top of each other. Media Queries detects the size of the visible area and snaps to a different design based on the width of the area.
Another technique is mobile first. This works by first designing the mobile website then using Media Queries to add new styles as the visible area grows. The benefit of this technique is that the phone does not need to load all the content that would be on the desktop making it faster and easier to access the website.
It is important to optimise your website for each device that it might be viewed on because you want your webpage to look good on every device it is viewed on from the smart watch to the desktop. This will maintain your websites level of standard across all devices, increasing the number of people who are impressed by the design and functionality of your website.
On the 21st of April 2015 google released a new algorithm to their search results affecting over half of all website positions on a page by page basis. The algorithm nicknamed ‘Mobilegeddon’ ranks the websites based on their mobile friendliness. Meaning websites that were not mobile friendly fell down the search rankings. This move by Google reemphasises the change in how people are now accessing the Internet and the need for companies and their websites to change with the times.
In conclusion designing your website using Responsive Design is the best move in a world quickly filling with wide variety of platforms for Internet interactions.