These days your site visitors have wide range of options to choose from when it comes to screen size:
- desktop computer monitors with huge screen sizes
- laptop with their usually middle-sized monitors
- pads of different sizes
- mobile phones with tiny to almost pad-sized big displays
And to be sure all these different users have great experience visiting and using your website you need to make your website pages look equally good on different screen sizes.
This is where Responsive Web Design comes into the game! Keep reading to get an idea what is Responsive Design, why do you need to care about it at all and how to make your site look great on most popular screen sizes.
What is Responsive web design?
Kayla Knight gave a good definition for Responsive web design in his article Responsive Web Design: What It Is and How To Use It:
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
If put simply, website is responsive when it dynamically adopts to visitor’s screen width. It looks equally well for wide and narrow displays.
Mobile phones aren’t only for calls today. Modern mobile phones are true computers. They have access to the Internet and they can display websites and applications.
Websites development is progressing. While developing websites, we may hear the expression Responsive web design very often.
So the reason number one you need to make your site Responsive: provide equally good experience to all your website visitors, regardless of their device screen size. This will increase your users happiness and decrease pages bounce rate 😉
How to implement Responsive web design?
There are a few different approaches, but so call method mobile first becomes most popular these days.
Mobile first method means that the original layout of the site is designed for small screens. Because the visible region is small, it is necessary to focus on the main parts of the layout, place them in a visible area of the screen. And forget about everything else.
Next step is to design layout for larger screens, adding other bells and whistles for larger (desktop) screens only. It is implemented with so called media queries.
So if you’re just starting out with your new website from the scratch, best option is to consider responsive layout from the very beginning. Implement mobile layout first, then improve it and complicate for larger screens.
How To Optimize Old Theme?
What to do with old sites with layout that is not designed to be adopted for mobile smaller screens?
The ideal approach would be to update the design, but if not possible, still using media queries can help a lot.
A few starting points when optimizing existing layouts:
Remove fixed width. Make page stretched the entire width of the screen.
Remove columns. Show column with content first.
Increase touched elements.
Make other changes to improve usability: up
These changes are very dependent on the structure of the layout, its flexibility and consistency of html elements. Sometimes you’ll also have to update HTML code a lot.
- Responsive Web Design: What It Is and How To Use It – Detailed Responsive Design Guidelines
- 7 Responsive Design Tips to Revamp Your Workflow – 7 things to consider while working on Responsive Design for your website
- Notes to an Agency Starting Their First Responsive Web Project – if you want to do Responsive Design by yourself, this article will help you to start
- Mobile First Book – more in depth reading on topic
We hope this short article will help you check if your current website is Responsive for your key visitors and define the next steps to fix any related issues.