Responsive websites, what, when, where. Designing websites for devices

Responsiveness as the term defines deals with responding to changes and that is what it also means on the web. Responsive websites are those that respond to different devices and adapt themselves according to the devices. Since not all devices are same and also do not have same resolutions, it is better if we make a website that adjusts itself accordingly. But creating a responsive website is not as easy as creating a regular website though it is not too tough as well. There are a set of things that need to be taken care of while creating a responsive website and we will discuss those here.

Media Queries

A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the “Applies to” line), and all expressions in the media query are true. Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND.

Example:

This media query expresses that the style sheet is usable on devices with viewport (the part of the screen/paper where the document is rendered) widths between 400 and 700 pixels:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Flexible Images

One major problem that needs to be solved with responsive Web design is working with images. The most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix.

img { max-width: 100%; }

As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image’s original width. The maximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, the image adjusts itself to the new width.

CSS or JavaScript?

You can either use JavaScript to create a adaptive or responsive design or you can use what CSS has to offer. But in some cases you will  have to settle for more than just one.  Some Javascript plugins that help in making your site responsive are “Response.js” and “Responsly”

Examples and Tutorials

A great tutorial can be found at “A List Apart“. It contains a tutorial to creating adaptive web design. Also you can download and check this cool responsive theme for WordPress. A detailed article about Responsive design can be found at Smashing Magazine

*Image credit: http://www.artistechnewmedia.com/thenest/2012/responsive-web-design/