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 large screen Mobile devices, Tablets like iPad, 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 practical session it is necessary to understand the basics of "Responsive Web Design" and "Media Queries" using HTML5 and CSS3.
Let's Start...
You guy's are now thinking, why an 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 that includes 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.
![responsive-web-design.png]()
You can watch this VIDEO, if you still have any doubt.
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 we should 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 a term "media queries" many times if you have noticed, now let's understand it.
What is 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 a 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 which 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 |
*source wikipedia
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 for you.