Can you recall the shrunken version of a desktop site on your phone, where you have to pinch and zoom to see anything? It was likely not an optimal experience!
Because of this, back in 2015, Google rolled out a change to the search engine algorithms which now factor in a website’s mobile presence as a ranking signal. The date was aptly named Mobilegeddon. This reason alone can justify why responsive design is important!
Simply put, a website needs to be user-friendly on a smartphone.
If it is not, your brand may be losing out on leads and sales.
In fact, 40% of users have gone to a competitor’s website after a poor mobile experience.
What is a responsive website?
A responsive website changes the layout to offer an experience based on the device being used, especially ideal for mobile viewing.
A mobile responsive website includes design elements such as:
Did you know the number of smartphone users internationally surpassed 2 billion in 2016?
Websites not optimized for all these smaller screens can experience a decline in their search engine rankings. This means that they are not getting found online.
It’s true that over 60% of searches online now come from a mobile device.
To ensure your website offers an experience tailored to handheld devices (without creating a separate app), consider why responsive design is important as a mobile solution.
Let’s get into the details about the why and how.
First of all…what the heck is mobile responsive design and why should you care?
What is Responsive Web Design?
Responsive web design (RWD) creates a system for a single site to react to the size of a user’s device—with one URL and one content source. A responsive website has a fluid and flexible layout which adjusts according to screen size.
The importance of responsive web design is that it offers an optimized browsing experience.
Basically, your website will look great and work well on a desktop (or laptop), a tablet, and a mobile phone’s browser.
In the past, developers built more than one site in order to accommodate different screen sizes. With the number of device types out there on the market today, this seems completely inefficient…right?
Check out www.setupfreewebsite.com
Websites in this day and age must cater to an ever growing market of mobile users on top of desktop users. From a web designer’s perspective this means it is critical to insure a website’s front-end adapts and responds to varying screen sizes. This translates to developing with a wide range of design intentions in mind, from maintaining readable text content and fonts across different screen sizes to insuring the layout remains consistent or appears as expected across any screen size.
Probably the most flexible approach using CSS is writing CSS media queries at specified screen widths. These are CSS styles that the browser will specifically implement only at the given screen width size of the browser’s viewport. Media queries can also instead specify height of the viewport, width or height of the device, orientation, (checks if device is in landscape or portrait mode) and resolution. With creative use of CSS style’s using media queries at different screen sizes, the HTML DOM can be tailored to look completely different on different devices or screen sizes.
Media queries offer more flexibility with the optional media type. Media types include:
This is detailed further on media query’s MDN page. But for the purpose of this guide, we won’t need to specify a media type.
Other CSS Techniques in comparison
There are other mobile responsive design techniques in CSS including flexbox, grid or CSS frameworks like Bootstrap that can sometimes better handle the responsive design for you. For developing relatively simple layouts with mobile responsiveness quicker, these techniques are likely to be the better choice as they will typically involve writing less lines of code (mainly CSS).
However there are advantages of CSS media queries in comparison. Personally, I find that it is more flexible because of two main reasons.