Act Responsively: Guide to Responsive Web Design

Posted on

  • email
  • twitter
  • facebook
  • share this

share this



Responsive Web design has recently become a very hot topic in the digital business community.

It is an important one, to be sure, but many people are still unsure about what responsive Web design does exactly and how.

This article will explain it in the simplest way possible. There is some code that needs to be addressed, but the goal is to make this extremely easy to follow.

Definition
Responsive Web design enables websites to adapt to the different screen sizes of various devices such as personal computers, tablets and smartphones simultaneously. Thanks to the explosive growth and variety of mobile devices, responsive Web design has become a very important trend.

There is a big difference between the screen sizes of a desktop computer and a smartphone, and users will experience significant difficulties if your website displays the same layout for each device. There will be lots of zooming and panning required to view the content on a smaller smartphone screen (Figure 1), which detracts from the user experience.

Execution
So, how to create a responsive website? A responsive website can be created by using several CSS steps. For those who are not familiar with CSS, it is a computer language used to describe the look and format of a website’s elements such as text, images, buttons, etc.

There are three important CSS steps to make a responsive website. The first step is to detect a device’s screen size, or more popularly known as the media query. Below is a CSS media query example:

 The first line is to detect a computer screen that is equal or bigger than 769 pixels, and the second line is to detect a smartphone screen that is equal or smaller than 768 pixels. The second step is the flexible grid layout. This means that the grids can adjust their width and position based on a device’s screen width.

 

Below is a CSS example for flexible grid layout: 





The code above shows different CSS styles for small screens and big screens. The CSS style for small screens will make the blocks stack vertically. That style is defined between @media only screen and (max-device-width:768px) bracket.

The CSS style for big screens will make the blocks stack horizontally. That style is defined between @media only screen and (min-width:769px) bracket.

In Figure 2, for example, the vertical layout on a smartphone screen will make a website’s content almost as big as the layout on a computer screen.

Image-ination
The third step of responsive Web design is flexible image or media. In this step, maximum width of an image or media will be the same as its container width.

If the container width is set to be equal to a device’s screen width, the image or media width will be the same as the device’s screen width. If the container width is set to be 50 percent of the device’s screen width, the image or media width will be 50 percent of the device’s screen width, and so on (see Figure 3).

Below is the CSS code to make a flexible image or media:



And that’s pretty much it — easy, right? But do keep in mind that these codes are simple ones so that the responsive Web design concept could be easily understood. Big websites will have lots of CSS codes inside, and this will make things somewhat more complicated.

The good news, however, is that the concept behind responsive design will always remain the same — no matter how much code your website has.

About the Author: Robby Leonardi is a multidisciplinary designer based in New York City. He does illustration, graphic design, animation and front-end development for major media companies.

:: Create a local presence wherever you want to do business. Get a local phone number. ::


Login To Comment


Become a Member

Not already a part of our community? Sign up to participate in the discussion. It's free and quick.

Sign Up

4 comments

BobR 01-03-2013 12:14 PM

Is the example code posted for download?

WilliamG 01-31-2013 3:55 PM

The Responsive Web Design Bookmarket is an EXCELLENT tool!  Thank you!

George S.M Better magazine on and offline for web designs three thumbs up! 05-05-2013 7:13 PM

Great stuff thanks for explaining. 75 percent of my web traffic to MAYOPR.com is mobile. I currently use Google's free mobile sites, because they allow you

to have up to 500 visitors at a time.

George S.M Better magazine on and offline for web designs three thumbs up! 05-05-2013 7:13 PM

Great stuff thanks for explaining. 75 percent of my web traffic to MAYOPR.com is mobile. I currently use Google's free mobile sites, because they allow you

to have up to 500 visitors at a time.

Add to the discussion!

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920
Email: info@websitemagazine.com

Facebook


Twitter