There are approx. 4 billion mobile device users around the globe nowadays and this number is rising with a constant pace. Now users prefer mobile browsing instead of desktop browsing because it is fast and accessible to them anywhere around. We cannot assume anymore that users will view our websites on a desktop monitor with a regular resolution. Maybe we never could!
The answer to this problem was
first proposed by Ethan Marcotte’s great article “Responsive Web Design”. The
concept is quite simple instead of making separate websites for each device we
can build one website that adjusts to each device. Nevertheless, the current
approach used by many developers for responsive web design is still dependent on
few commonly used devices and consequently expected to become outdated.
Truly Universal Responsive Web Design
Just imagine a truly universal
responsive design that will be device independent, one that can be viewed on
any screen size with perfect visibility. The only way to build such design that
will work on any screen size is to forget the device specific approach.
Common Responsive Design Practice
Still many developers use device
specific responsive design that binds the design to particular devices. This
approach uses pixel widths according to the dimensions of the commonly used
devices. This approach is called Adaptive Web Design (AWD). It uses predefined
layouts centered on the dimensions of the most commonly used devices but now
this approach is not in fashion anymore.
Device Independent Design
The ideal device independent
design starts from the most typical form of content like the paragraph element
and turns in to a full layout. It is tantalizing to first set up the font size
of the body section. However, the browser default size for readability has
already set by its developer or user and it is not recommended to mess with it
without any good reason.
Nevertheless, if your website
design is entirely based on CSS ems
font size then, when font size increases or decreases, your website design will
do the same. With ems, your website design becomes resolution independent.
Responsive Website Design (RWD)
The above-mentioned approach is
used in responsive website design (RWD). The important elements that are used
to create a responsive web design
are CSS3, fluid grids, media rule and media queries. These elements utilize
percentages to build a flexible foundation. In addition, it is vital to use
fluid type, flexible images and videos and ems in place of pixels. By
following, these important points your responsive website will be able to alter
its layout to suit any device.
The responsive web design is a
client side approach that means the web page is sent to the browser (client) of
the device and then the browser alters the appearance of the web page according
to the size of the browser window. In the older versions, like the adaptive web
design (AWD) the approach was server side meaning that when a mobile user
access the website with AWD the server will take action instead of the device
browser (client) and a mobile site or application shows up on the mobile device.
