What is responsive web design and why do i need one?
The recent report published on 29th March, 2016 by Canadian Radio-television and Telecommunications Commission shows that 83% of Canadians own cell phone and 66% are smartphone users.
It confirms that most of the people are surfing the internet on their phones than on desktop computers. Responsive web design helps your website to reach this large audience who uses mobile, smartphone and tablets to find your products. If your website is not responsive, you are most likely to lose these prospects to your competitors. Responsive web design is a term used for describing mobile-friendly websites.
In this article, you will learn to check, if your website is mobile friendly or not. You will also learn about various options to make it fully responsive.
If you have a responsive website, you are a winner. Accordion to Vancouver Observer 79% of business websites in Canada are not mobile responsive. As long as your competitors avoid these data, you have the high competitive advantages over them.
Now lets discuss the impact of not having a responsive web design. Starting April 21, 2015, Google uses “mobile-friendly-website” as a rank factor. If your website is not mobile-friendly, it will have significant negative impact on the search engine result page (SERP). Responsive web design is no longer an option but a requirement. Mobile-friendliness is the ranking criteria and important factor of search engine optimization (SEO).
How do I find if my website is mobile friendly or fully responsive?
The first thing to do is to check whether your website passes the google mobile-friendly test. It is very easy to do. Just click on the following google-link and enter your web address.
If you pass the test, CONGRATULATIONS, you are one of the 21% of the business that owns responsive websites. If you fail, do not panic. You can either hire web developers or create one yourself using free WordPress tutorials.
Where do I find responsive design examples?
Responsive web design reacts to the change in browser size. Watch the following illustration to discover how you can quickly check the responsive web design.
Notice how the navigation menu, sections and design changes with the change in your browser size.
Here you’ll find various responsive designs examples and free previews. Do not forget to apply the technique you have just learned in the video.
How to make websites responsive?
The mobile phones and tablets come in many different sizes and you have to make sure that your website is designed for all those devices.
Most of the websites these days use bootstrap for constructing grids and various other elements such as navigation, typography, tables, images, jumbotron, alerts, buttons, glyphicons, modal, forms etc. It is the most popular framework for developing fully responsive and mobile-friendly websites using html, css and javascript.
The core of the responsive web designs is CSS media queries. The media query tells your browser how to display the content based on the browser size.
For example, if you write the following code inside your css stylesheet,
@media only screen (max-width:767px) {
body {
background:red;
}
}
All the devices whose width is less than 767px (mostly tablets’ portrait view and smartphones) will have red background.
Similary, if you write the following code inside your css stylesheet,
@media only screen (min-width:767px) {
body {
background:green;
}
}
All the devices whose width is more than 767px (mostly tablets’ landscape view, laptops and desktops) will have black background.
The responsive web design uses the media queries to display your website based on the visitor’s device size.
Media queries can also target the specific device such as iPhone and galaxy phone.
For changing your website’s background on the portrait view of iPhone, your web developer will use the following media queries in the stylesheet,
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
body {
background:blue;
}
}
So, if you use the all 3 media queries examples from above, you will get the following results,
- Your website will show RED background in all the devices whose screen sizes are small than 767px, i.e on smartphones and iPad (portrait view).
- Your website will show GREEN background in all the devices whose screen sizes are greater than 767px, iPad (landscape view), laptops, desktops
- Your website will show BLUE background on iPhones, if you flip it to the portrait view.
The recent examples show how color responds to the media queries. Same technique can be applied to all the html elements.
Here you will find the complete list of media queries for many devices such as iPhone, Galaxy Phone, iPad, Kindle, Apple Watch, laptops, desktops etc.
If your website is build on the WordPress platform, you can use free plugins to make your site mobile responsive. To add and activate the responsive plugin,
- Sign in to your WordPress account
- Go to your Dashboard
- Click on Plugins
- Click on Add New
- On the plugin search box, search for “Responsive Website”
- WordPress will list all the free plugins
- Choose the one that addresses your web design need
- Click on Install plugin
- On the next page click on Activate plugin
- Go to the plugin settings and follow the instruction
Check one of our free video tutorial to learn how to install and activate WordPress plugins to your site.