Hello friends, today’s need a beautiful responsive website. Still, we learn about how to make a beautiful HTML page. You might hear “responsive” word much time but do not know its meaning. In this lesson, we will know about responsive. So let’s get started.
What is Responsive web design?
When you open a website in different devices, like laptop, mobile and tablet, you see website have different layout among these devices. That means website adopt a new layout according to the device’s screen size.
Let me make it more clear, let suppose you are showing 4 images in a row on laptop layout. When you open the same page on mobile, these 4 images will show in a row. Now assume how odd it will look on mobile, where 4 images are showing in a row. Difficult to watch and odd to look. But if these images are shown one by one, it will be more user-friendly.
So we can say that a responsive page is the one which adopts the best user experience layout according to the device. A responsive web page makes an HTML page readable.
As you can see in the above image, Orange boxes are 3 in the laptop, tablet but in the case of mobile, it showing these boxes one by one.
Why you should make a responsive web design?
- User-friendly layout.
- It makes content readable.
- No need to zoom-in on low-end devices means mobiles.
- The website looks beautiful on all devices.
- A responsive website doesn’t need to scroll left or right.
Nowadays Google search engine give priorities to the mobile version. If your website looks goods on mobile, there is more chances to get a better position on the google search result.
How to check the responsiveness of web page on the browser?
We always design or develop a website on a laptop or desktop. Now you think how to check the responsiveness of a page that you created. The browser is your solution. Almost all browser give facility to check your website on different devices. Let me show to do that on Google Chrome.
Make browser windows toa small size, the website will show the layout for the screen size.
With Inspector tool
Almost all modern browsers come with inspector tool. With the inspector tool, you can see the HTML structure of a web page and also get style define with the particular element. And also make a change on CSS to see the effect.
Now let talk about the responsiveness testing. Here is the method.
Right-click anywhere on a web page and select Inspect. You can also use shortcut-key for that ctrl+shift+I in case of Google Chrome browser. Shortcut key may differ for different browsers. This will open the inspector tool as shown below.
Now click on it switch browser to responsive modes, like shown below.
You can choose any devices from the list and also rotate the screen. If you do not find the size where you want to check, you can manually enter that.
That’s all about the term responsive web design. Hope you will get about it. In the next lesson, we will learn about how to make an HTML page responsive.
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?