Building a Responsive Website Template: HTML5 & CSS3 Media Queries

Introduction

These days, you've seen that users don't have enough time to spend on Desktop computers to browse the web. Users are now much more advanced and they're using screen Mobile devices, Tablets like iPads, Galaxy Tab or Playbook, and small notebooks to the surf web. That's the main reason the traditional designs are not preferred these days by designers because with fixed sizes they don't work on every device. So, it shows that we need some adaptive web designs, and the layout of a website should be automatically adjustable depending on the screen size of various devices. I'll explain how to design a responsive website template using media queries with source code in my next article. But before we start a practice session, it is necessary to understand the basics of "Responsive Web Design" and "Media Queries" using HTML5 and CSS3.

Let's Start

You guys are now thinking, why am I stressing so much about "responsive web design" when we have traditional design techniques? Why do we need this, and how is it different from traditional design? So many queries. Let's understand these things one by one.

What is responsive web design?

Responsive websites respond according to their environment, in other words, you don't need to design multiple sites for various devices including Mobiles, Tablets, and Desktops. So, if you use this design technique, then you need to design only one site that will run on any device without any extra effort. But you need to specify how it should appear on various devices using "media queries".

Let's have a look at this image in which we have a responsive website that adjusts itself depending on various screen sizes.

What are the benefits of responsive design?

• It is a future-friendly way to ensure device compatibility
• You don't need to maintain separate content for various devices
• For various devices, it adapts to the user interface
• Distinct SEO advantages in the eyes of Google
• You don't need to code again and again for separate websites; just code one time, and you're done

When should we use it?

It depends on various conditions and you also need to consider some important points like.

• Browser Support
• Performance
• Content
• Websites or Web Apps
• Time & Money

So far, I've used the term "media queries" many times if you have noticed, now let's understand it.

What are the media queries?

A media query is a CSS3 module that consists of a media type like print or screen, and you can also specify the content look by using various conditions such as width, height or orientation. A media query is a combination of media types and conditions in which we specify how the content will appear on a specific device.

How to use media queries?

A media type can be specified in the head of an HTML document using the "media" attribute inside the <link> element. The value of the "media" attribute defines the basis of the screen sizes of the devices on which that document will be shown. You can define the following media types in CSS2.

• print
• embossed
• handheld
• braille
• projection
• screen
• speech
• tty
• tv

You can also specify the media type "all", which indicates that the same stylesheet applies to all media types.

Syntax

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 1000px)" href="demo.css" />

<!-- CSS media query within a style sheet -->
<style>
    @media (max-width: 480px) {
        .showSidebar {
            display: none;
        }
    }
</style>

Features of media queries

The following are the media query features that are listed in the latest W3C recommendation.

Feature	value	Min/Max	Description
color	integer	yes	number of bits per color component
color-index	integer	yes	number of entries in the color lookup table
device-aspect-ratio	integer/integer	yes	aspect ratio
device-height	length	yes	height of the output device
device-width	length	yes	width of the output device
grid	integer	no	true for a grid-based device
height	length	yes	height of the rendering surface
monochrome	integer	yes	number of bits per pixel in a monochrome frame buffer
resolution	resolution ("dpi" or "dpcm")	yes	resolution
scan	"progressive" or "interlaced"	no	scanning process of "tv" media types
width	length	yes	width of the rendering surface

Stay Tuned

I hope now you understand the basics of responsive web design and also about media queries. In my next article, I'll create a responsive web template and I'll explain it to you.