Act Responsively: Guide to Responsive Web Design
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.


Leave Your Comment
Login to CommentBecome a Member
Not already a part of our community?
Sign UpSign up to participate in the discussion. It's free and quick.