learning basics of web designing

What is a responsive page?

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.

responsive-web-design

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.

Universal Method

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.

how to inspect on google chrome

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.

the inspector tool

Now click on responsive icon it switch browser to responsive modes, like shown below.

switch to responsive device mode

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.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. Can build a custom theme for your business.  I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.

Free Bootstrap 4 Theme

Mega UI Advanced Material Design Blogging WordPress Theme

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.