HTML For Responsive Web Designing

    These days the internet and web pages are not just limited to desktop, now we can access a website using any smart and mobile device. The display size of devices varies from each other, so now we require such web pages that look good on every device. It would be a tedious and daunting task to write a separate HTML document for different display size, so we write such HTML code which is more responsive and apply on every device. When we make a webpage responsive, then the content and element of the webpage adjust automatically according to the device display size.

    Responsive Web Designing

    Using only HTML, we can not make a web page responsible and portable for every device, so we require CSS and some JavaScript. Using HTML and CSS, we can write such code that can automatically resize, collapse, expand, and shrink the size and content of the web page according to the device viewport.

    How to make a web page Responsive?

    There are some techniques you can follow if you want to make your website look good on every device.

    Set the Page Viewport

    In the <meta> element we can set the viewport size of a web-page. To make a responsive web page make sure that your document contains the following <meta> tag. 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    This line of HTML code will tell the browser how should be the dimension of the webpage should be scaled o various devices.

    Responsive Images

    Mostly every web page contains images, and by default, the browser shows the image resolution according to its actual dimension. So it's become very important to resize and manipulate the image resolution and dimension before we import it into the web page. When it's come to responsive image designing, we use the CSS width and height property to alter the size of displaying the picture.

    Example 

    <img src="image.jpg" style="width:100%;">

    HTML <picture> element

    The HTML <picture> the element allows us to define multiple image sources for a single picture. And the display size of the device decides which image should be displayed on the browser.
    Example 
    <picture>
  <source srcset="image1.jpg" media="(max-width: 600px)">
  <source srcset="image2.jpg" media="(max-width: 1500px)">
  <source srcset="image3.jpg">
  <img src="image4.jpg>
</picture>

    Responsive Text

    CSS can also alter the size of text content using its font-size property. While resizing the text size make sure that you use "vw" unit which stands for "viewport width".

    Example 

    <h1 style="font-size:15vw">TechGeekBuzz</h1>
    The vw unit adjusts the text size according to the device browser viewport. 1vw stands for 1% of the viewport width of the device.

    Media Query

    Media query also uses in responsive web designing. It automatically changes the styling of the document according to the browser viewport.
    For example, the media query will show the block horizontally if the size of the screen is large else it will stack the block from top to bottom.
    Example 
    <style>
  @media screen and (max-width:800px) {
.left, .main, .right {
width:100%;
}
</style>

    CSS frameworks for Responsive Web designing

    CSS has many frameworks that contain rewritten code for responsive web designing. Some of the popular CSS web frameworks are:

    • Bootstrap
    • foundation
    • Ulkit
    • Semantic UI
    • Materialize

    Responsive Web Designing Quick Summary

    • It is very important to design a Responsive Web Page.
    • A responsive web page looks good and organized on every device.
    • The responsive web page organizes and adjusts its content according to the browser viewport.
    • It's always suggested to use an open-source Framework to design a better web page.
    Previous Tutorial Next Tutorial