How To Make Responsive Web design

Nowadays, people visit websites on whichever device is in their hands, i.e., mobile, tablet, or laptop. Due to the difference in the size of the screen of these devices, a web page must look right and appropriate accordingly. It should be not only apt for the desktop screen, but also smartphones and tablets.

To make a web page adjustable for all the screens, a website is designed to be responsive. Responsive web design makes sure that the website page is opened and adjusted according to the screen. As a Responsive website is one of the most important and demanded sites today, a web developer must be an expert in this technique.

In today’s article, we will tell you how easily you can create a responsive web design in three easy steps.

Adjusting the Layout

Design your required layout for the website. Do not worry about the responsive design for now and set the width at default. You can work on the responsive design later. As a coder, you must know that it is easy to focus on one thing at a time. It will save your code from errors.

After done designing your non-responsive layout, add the tags within your HTML page. With this, the view will be set at a 1X1 ratio for all the screens and remove the full-view for which users have to zoom in on small screens.

Next, you need to add some media queries. It will help your website to adapt to the responsive design. Media queries depend on your website layout, but we will try our best to help you understand it.

In the above code, #primary is for the main area, and the #secondary is for the sidebar.

Now, there are two sizes defined in the code. The first one is for the tablet landscape display with the max-width of 1060px. In this size, #primary will have 67% from its parent container and #secondary 30% with a left margin of 3. The other size is for smartphone screens and tablet portrait. For this, we will give to #primary and #secondary width 100% due to the small screens.

To understand it more efficiently and work it properly, you need to adjust a bit of your code accordingly.

Adjusting Media

After setting the layout, the next important thing is to adapt your media like images and videos.

For the images, you only have to add following instruction line in the CSS style sheet of your website.

For videos, you also do not have to think and work hard. Today, as most of the videos embedded on the website are from the third party like YouTube or Daily motion, so we are sharing here the technique of elastic video which help the videos responsive. For HTML, add the following code:

For CSS style sheet,

.video-container iframe,.video-container object,.video-container

Adjusting Font

The last step of creating a responsive web design is adjusting the page font size. One thing you need to remember is that the font size of a site should be related to its parent container width. It will allow the font to adapt the size according to the screen of the user.

If you have worked with CSS3, you will know that it has unit called rems. As rems relates to HTML, you need to reset its font size.

After resetting the font size, you need to define responsive font sizes as:

@media (min-width: 640px) { } @media (min-width:960px) { } @media (min-width:1100px) { }

Apply this in your code and see the efficient result yourself.

Digital marketing professional with expertise in developing an Seo strategy. I have Years Of Experience In Seo & Digital Marketing. As an Seo Specialist.