how to create responsive websites

The market, today, is transforming quickly. Every day a gadget is out with something new in it. People today are using them to do everything. Whether it is surfing the internet or playing video games, everything is running on them. In such a scenario, it is mandatory to design a website that fits every screen. But is it plausible to create distinct versions of the same website to fit diverse screens out there? Because the website should look good ion the tablets and mobile phones as well. So what if there is a solution that can cater to this problem without you creating different versions of the same website? We can solve this problem by creating responsive websites.

Responsive website

What is a responsive website? Responsive website or responsive web design is the method that implies that design and development should respond to the user’s action and environment depending upon screen size, platform, OS and orientation. In another language when the website can adapt to the changes and perform efficiently, it can be termed as a responsive website. So as you switch from desktop screen to tablet or mobile phone, the website adapts to changes and the images, scripts, and media on the website also change to corresponding screen size. This is the function of a responsive website. HTML and CSS provide many functions to create a responsive website.
Steps to responsive website
How to make a website responsive? What all things we need to take care of while we are creating or designing a responsive website? Here is the answer to all such questions. Basically, you need to work on three parameters when you are creating a responsive website which are:

Website Layout

The first thing to work on while creating a responsive website is its layout. Because it is the layout that first reacts to the change of screen resolution. The best way to do is to make the non-responsive layout and then make changes. If you make changes in the viewport, the layout will easily adjust to the screen size. How to make changes in the viewport? Just follow the below code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">

 

This will change the screen layout according to the screen resolution. Similarly, if you wish to make changes for the orientation you can do by specifying the width and margin in your code. Consider the code given below:

/* device Landscape */
@media screen and (max-width: 1060px) {
#mainscript {width: 70 %;}
#sidebar {width: 25%; margin-left: 5 %;}
}
/* device Portrait */
@media screen and (max-width: 768px) {
#mainscript {width: 95 %;}
#sidebar {width: 100%; margin: 0; border: none ;}
}

You can adjust the size according to your website. How much margin is you want to utilize is completely up to you. Using this code in .css will make your website quite responsive.

Website Scripting

The important part of the website we need to deal with is its scripting. What if you change the orientation of your screen and text on it does not change? What if it appears to go out of the screen? Thus to avoid such things we make changes in the font size of our text. Indeed, responsive font size should be linked to its parent container width, so it can adjust to the screen of the user. Consider the following code to see how to make text responsive in HTML and CSS:

<h1 style="font-size: 20vw"> your text </h1>

Using the viewport function will enable the text to adjust according to the screen size. We can set the entire text as responsive if we do the same in the <div> tag.

Website Media

Another important part to work on while creating a responsive website is the media of the website. One of the ways to make media responsive is to use the “width” property. In CSS if we set this property to 100%, the media will become responsive. Follow the code given below.

<h1 style="font-size: 20vw"> your text </h1>

Here we need to scroll the image but what if the user desires the responsiveness of image without scrolling? In such condition, we make use of “max-width” property. This property of CSS also makes the image responsive but does not enlarge the image more than its size. Follow the code below to understand better.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h2>Responsive Image</h2>
<p style="max-width: 100%"> prevents the image from getting bigger than its original size. But it will scale itself according to the screen resolutions. </p>

<img src="img_panda.jpeg" style="max-width: 100%; height: auto ;">

</body>
</html>

 

So now you must have understood that making the website responsive consists of a mix of compliant grids and layouts, images, videos and smart use of CSS media queries. As the client switches from their desktop to iPad or tablets, the website should also switch automatically to adapt for resolution, image size and texting styles. In any case, the website should not block the user’s access to the page. It should have the technology to automatically respond to the client’s likings. This would eradicate the necessity for a different design and construction phase for every new gadget in the market.

+ There are no comments

Add yours