It’s Responsive Web Designing, It’s not a trick

Arun Chakravarthy June 4, 2012
0 Flares 0 Flares ×

Responsive Web Designing

Lately, everyone wants a mobile version of their website. Designing for iPhone, then again for BlackBerry, iPad, Kindle and the endless new devices lined up for years to come can get quite expensive. Changing screen size, platform and orientation calls for different designs for different devices.  Is this the way forward? It’s about cost after all.


As we know, computers are not the only device with a web browser. In 2007 iPhone had put across a full-fledged web browser. I would say, that was a breakthrough. Apple, with many others who followed iPhone overnight, changed the way people looked at mobile as a device for web browsing. To keep up with user’s expectations, the web design community started creating mobile versions of websites. At the time, this seemed like a reasonable idea; everyone prefixed ‘m.’ to their domain names. Clearly, this wasn’t the way forward in this era of never ending new devices and resolutions. Designing for iPhone, then again for BlackBerry, iPad, Kindle and all other inventions lined up for years to come can get quite expensive. It’s about cost after all. Then the world began buzzing about a brand new invention called Responsive Web Designing (RWD).

Comments

 

It’s quite hard to talk about Responsive Web Designing without acknowledging its creator, Ethan Marcotte. In his words, RWD is like a room or space that automatically adjusts to the number and flow of people within it. Similarly, design should automatically adjust to screen resolution, platform and orientation. How is this possible? When a user switches from desktop to mobile, the website should automatically shrink to fit the new screen. RWD uses a combination of Flexible Grids, Flexible Images and CSS media queries to make this possible. We will go through all of these features in detail, but before that I suggest you see it in action.

 

Open madeflexible.com on a desktop browser and adjust the browser to different sizes from landscape to portrait to even the size of a mobile screen. You can see the layout adjusting itself smoothly to fit the screen.

Screen Resolution

Technology never stops marching forward. Motion sensitive devices these days can switch from portrait to landscape by just turning the device around. It’s obvious that we cannot create custom websites for each of these screen orientation. This is the problem that responsive web design addresses head on. RWD detects the screen size and resolution and automatically adjusts the layout and text to fit the screen size. With a mix of Fluid Grids and Images, RWD makes sure the layout and images never break.

Resolution trends

 

Fluid Grids

The key behind responsive web design is the usage of Fluid Grids. Fluid Grids go way ahead of the traditional layout; it’s more about proportions. The elements in the layout grow proportionately as user switches between resolutions. Check out Ethan Marcotte’s demo page. The images on the page shrink proportionately when we move from desktop to handheld device resolution.


Sample code:


Font:

body {
   font: normal 100% Helvetica, Arial, sans-serif;
}

Fluid Grid

Fluid Images

One major problem faced by the design community is that images always load in its original size. With Fluid Images, designers can create images at the maximum size they will be used at. Images do not need the height and width specified in this approach. The job is done by setting “width=100%” to <img> tag in CSS. The browser resizes the image as needed. The same applies to embedded video, frames and other objects.


Sample Code:


Images :


img {
max-width: 100%;
}

 

Embedded videos :


img,
object {
max-width: 100%;
}

Fluid Images

Media Queries

Responsive Web Design allows designers to create different layouts for the same content using media queries. You didn’t read that wrong! Yes, designers can have a default style sheet and a child style sheet for different devices. When layouts change, style sheets switch intelligently. If you look at the image below, you can see how the layout on a desktop is reorganized on a tablet with a slimmer screen. For users, that gives a whole new look to the website.

 


Media Queries


Popularity of smartphones and its easiness to use while on the move has already attracted 35% of websites users to mobile browsers. As we go forward with more users moving Internet to their pockets, RWD becomes crucial for any website owner. It can be argued that this is just a passing phase. However, I will have to agree with our designers that this concept solves design problems related to different resolutions to a great extent.


Look for a future blog post where we will discuss this in detail. If you would like to know more, post your questions to facebook.com/qburst.

 

Tags: , ,

Comment Here