June 24, 2021


TriStudy Provide Free Online Tutorials about Programming languages,Digital Marketing, web designing, online earning, web hosting, WordPress etc

How to make a responsive website in html.

responsive web

responsive web site

Hi everybody! My name is Yawar Ganie, and welcome back to Tristudy.com Today’s topic is How to make a responsive website in html.So let’s go!

Responsive web design is about using html and css to automatically resize,hide,shrink,or enlarge,a website, to make it look good on all devices (desktops,phones,and tablets):

setting the viewport

With the development of Html5, CSS3 and other website building technologies, more and more users use mobile phones to access websites. Responsive website design has emerged in this environment. But when it was born, it seemed to have its own halo, and it quickly became popular with the attributes of adapting to multiple devices at the same time, and it was favored by many companies and enterprises. Xiaofei also discussed in some articles what responsive design is, some common misunderstandings and blind spots in responsive design, and the trend of responsive design. However, many readers report that although they have a certain understanding of responsive website design, they still do n’t know how to start when they make their own website. Needless to say, everyone knows that one of the biggest features of responsive design is flexibility. Whether it is a website layout, pictures, videos, or text information, it can easily adapt to different sizes of devices. The following points can be developed around this feature. of. Come and see it!

responsive web

when we make a responsive web pages,add the following <meta> element in all your web pages:



<meta name=”viewport” content=”width=device-width, initial-scalar=1.0″>

<title>Responsive with media query</title>

<link rel=”stylesheet” href=”” />



<div id=”data here”>

<img src=”abc.jpg” <style=”bgcolor:white”>


<div class=”topnav”>

<a href=”#”>home</a>

<a href=”#”>about</a>

<a href=”#”>services</a>

<a href=”#”>products</a>

<a href=”#”>contact</a>


< br /> <br />

<div class=”content”>

<div class=”leftbar”>

<h3>data here</h3>

<p>welcome here</p>


<div class=”rightbar”>

<img src=”ablc.jpg width=”800″ />

<br> <br />


<p style=”text-shadow:5px 4px 5px red”>address here .</p>

<h3>contact us</h3>


<td>contact here</td>




In responsive web page we can also using the width property of image and can show different images depending on browser width and also set the text size,or resize .

Suggestion: Set breakpoints one by one according to different equipment sizes. This project is too time consuming. Xiaofei teaches you a trick. In fact, we look at the source code of some front-end frameworks that are commonly used by everyone to understand their breakpoint values ​​and learn from them. But if you are completely innocent in terms of website building technology and code writing, the take-off page self-service website building platform is a good choice. You do n’t need any professional technology to easily create a website. Website commissioning or professional customization services are all available. 

Media Query

with media queries you can define complete different styles for different browser sizes.

Example: resize the browser to see that the three div elements below will horizentally on large screens and stacked vertically on small size: that means we make this to see easy in phones etc.

Expand target click area (button or hyperlink)

Unlike the mouse, which is often used on PCs, users are more accustomed to gestures on touch-screen devices such as mobile phones and click directly with their hands. Studies show that the average width of an adult index finger is 1.6-2.0cm, which is equivalent to 45-57px. A 57px wide click area can meet the user’s comfort needs when clicking, so remember to expand the click area of ​​the behavior guide button or hyperlink to make them more finger-friendly and optimize the user experience. The well-known Fitz’s law also states that the time it takes to reach a target using a pointing device is related to the current device position, the distance to the target position, and the size of the target. To put it simply, in a website, if the click area is smaller, the user spends more time browsing and acquiring the page, which will greatly reduce the user’s conversion rate.

Focus on text typography.

Text typography is an important part of a website. The readability of the website is of paramount importance. Excellent text layout helps to convey the information on the website and also forms a good interaction with users. Divide the website into different levels. The most important content is on the first level of the website. The second and third levels contain relevant information and details. The level is clear and developed in order of priority. Carefully select a suitable font (with a liner). Line fonts are easy to read and sans-serif fonts are eye-catching). It is best not to use more than three different fonts in a website; choose a suitable font size to ensure that it can be displayed well on different screens; And paragraph spacing, white space, etc. to keep the page clean and elegant.