How Does Responsive Web Design Work?

[custom_frame_left shadow=”on”][/custom_frame_left]

Responsive sites use fluid grids. All page elements are sized by proportion, rather than pixels. So if you have three columns, you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column 1 should take up half the page, column 2 should take up 30%, and column 3 should take up 20%, for instance.

Media such as images is also resized relatively. That way an image can stay within its column or relative design element.

Related Issues

Mouse v. touch: Designing for mobile devices also brings up the issue of mouse versus touch.  On desktop computers the user normally has a mouse to navigate and select items.  On a smartphone or tablet, the user mostly is using fingers and touching the screen.  What may seem easy to select with a mouse, may be hard to select with a finger on a tiny spot on a screen. The Web designer must take “touch” into consideration.

Graphics and download speed: Also, there’s the issue of graphics, ads and download speed. On mobile devices, it may be wise to display fewer graphics than for desktop views so that a site doesn’t take forever to load on a smartphone.  Larger ad sizes may need to be exchanged for smaller ads.

Apps and “mobile versions”:  In the past, you might have thought about creating an app for your website — say an iPad app or an Android app.  Or you would have a mobile version specifically for BlackBerry.

But with so many  different devices today, it’s getting harder to create apps and versions for every device and operating platform. As Smashing Magazine wrote, “When will the madness stop? It won’t, of course.”  A responsive design that is flexible enough to be viewed on multiple devices just makes sense.