The Hype Around Responsive Web Design And Media Queries – An Insider’s Thoughts
The Web design and development world hasn’t experienced this much commotion since the emergence of Internet technology. It has invaded deep in to the lives of every single netizen in such a manner that WWW has become an inevitable and integral part of us. The industry has witnessed ups and downs in various terminologies like open source, CMS, E-commerce etc with much enthusiasm. Now, the latest trend is “Responsive Web” catering to cross platform users in both smart phone and desktop platforms.
Evolution of “Responsive”
When Ethan Marcotte first coined the idea of Responsive Web design through one of his article which became quite popular later, (http://www.alistapart.com/articles/responsive-web-design) there was a reference to ‘responsive architecture’ in his article. The concept is really interesting where the physical spaces make room for more people as the maximum threshold of the room is reached. It can also be termed as elastic borders where the boundaries shrink and expand according to the size. Even though, there are glaring differences between architecture and web technology, the same concept of elasticity is adopted in web designing too, by extending it in to the domain of smart phones and tablets.
Responsive web designing implies making the web design more flexible and smart to adapt itself in accordance with the browsers and screen size of end user’s device being used to access your website. Rather, in simple terms, it can be said that a single web design which will work for both desktops and smart devices. An e-commerce entrepreneur can take competitive advantage of the market by making smart moves by incorporating responsive web design to his business web portal.
Going the mobile way
No doubt that the world is moving in to mobile phones and smart devices. While more people are accessing the medium of websites and portals through different devices, there will be wide disparities in the screen resolution, user interactivity, navigational usability, inconsistent screen width, browser compatibility etc. Therefore, the new age web designer needs to focus on all these aspects during web design and development.
Being Responsive in the design, helps the website owners to target all type of users like desktop, tablet, smart phone etc. Whatever be the end-user device, the main quality of responsive web design is that it will adjust in accordance with the screen size and view port of the device through which a website is accessed. For this purpose, web engineers are mixing and matching different web technologies like CSS, Java script, JQuery, XHTML, etc. to find a perfect solution for responsive designing across cross platforms of mobiles, smart phones and desktops. But most touted among all is Media Queries.
Meet Media Queries
CSS Media Queries offer the most liquid technical solution for achieving elasticity in web design. It helps in specifying style rules for different devices by setting conditions for screen width, and resolution. A website should be able to scale and adapt automatically when accessed from 1024X768 screen-based desktop or from a 320*480 resolution screen of a smart phone, and should be viewed without much differences. This progressive methodology makes it possible to make the design responsive in a simple manner without requiring multiple set of codes for traditional desktops and smart devices.
Unravel the potential of Media Queries
Embedding Media Queries in CSS helps us to change layout of the design exactly in accordance to the end-users’ device without any change in the informational aspect. A standard 1000 px wide layout can shrink in to a single column of 400 px layout according to the browser window of the user’s mobile device – just with implementation of CSS media queries.
Media Queries are CSS3 extension of media type that controls how your styles are applied. It is a logical expression with a boolean variable which is either true or false. There are 10 different Media types in CSS which can be used to specify how the layout of a document will look like in different medias. And there are 5 methods which can be used to define Media types as well as media Queries.
Let’s see a small bit of code explaining the working of Media Query:
<link href=”css/mobile.css” rel=”stylesheet” type=”text/css” media=”only screen and (max-width: 800px)” >
Here, the media query has been added to the <link> tag which can be used within style sheets also. The media attribute is where the query actually resides. Required parameters are passed to the media attribute to get the effect of responsive designs.
This implies that this style sheet is applicable only to a device that has a screen resolution no wider than 800 pixels.
The media Attributes which will be frequently used in responsive designing will be:
- Aspect ratio
Media queries are also cross-browser compatible as it is supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on most modern smart phones and other screen-based devices.
This is simply basic demonstration of what and how media queries can be used in responsive designing. Designers will be having in-hand a wide range of alternatives for specifying responsive elements in web design using Media queries in CSS3 which can be used as per the requirement and logic.