Responsive Web Design and Media Queries

Responsive Web Design Image
Responsive Web Design Image – Credit

The following line of code is an HTML link element that contains a media query:

<link href=”stylesheet.css” rel=”stylesheet” media=”screen and (min-width:320px)”>

The part that says media=…. is the media query used in this link element. It’s used to define under which circumstances or conditions the browser should use this style sheet.

This media query tells the browser to use the style sheet when the media type is screen, i.e., the HTML code is being rendered on a screen like an LCD display and also if the “viewport” width is greater than or equal to 320px.

Media queries are very often used in responsive web design theses days. Responsive web design is another name for the sum of all the activities and technologies that web designers do or use so that their websites are displayed the way they wanted them to be displayed on all or most screen sizes or screen types, media queries being one of them. Devices range from smart phones like iPhone, Android, etc. going all the way to huge Internet-enabled TVs. So it’s pretty complicated.

Media queries work in all the modern browsers and in IE9+. IE8 doesn’t understand them and simply ignores them. So if you’re designing for IE8 as well, you need to have some strategy so that your content is accessible there too.

There are all kinds of solutions for IE8 and earlier versions and other old browsers. You could use JavaScript, you could use separate style sheets for them or just send a simplified version of your HTML to them. It’s important to understand that IE8 and the earlier versions are actually still being used in many places like libraries, etc. where the user has no control over any aspect of the machine he’s using. So if your content is supposed to reach those demographics, make sure that it happens somehow. It’s not that important that your website looks as glamorous on IE8 or earlier as it does in modern browsers; the only thing that really matters is that your content is well accessible to those browsers as well.

To know more about media queries, you can read Media Queries – W3C Recommendation.


The HTML “picture” Element and Picturefill JavaScript

If you need to use the HTML element <picture> in your HTML markup, you need to help the browsers that don’t understand it yet. Most browsers still don’t support <picture>.

In order to solve the problem, you can use JavaScript to help browsers understand your code. If you did so, you’d be assuming that your users have JavaScript activated in their browser. If not, they’d not be able to understand your <picture> elements.

At any rate, if you decide to use <picture> and want to make sure it’s supported by all/most browsers today, use the Responsive Image Polyfill below to take care of the problem.


Check Your Device Pixel Density Online

If you develop responsive websites or web applications, you definitely need to know what sort of device pixel density you’re dealing with so that you can write your code accordingly. Here’s two tools you can use to find out the device pixel ratio of the device you’re currently working with:

Moreover, if you need to have information about other devices, here’s a list of some common devices you might want to optimize your code for: