Responsive Web Design involves developing
sites
that serve all devices and gadgets on the same set of URLs, with each URL
serving the same content to all the devices and using just CSS to change how
the page is rendered on the device in other to supply suitable content to each
device. Because of so many different gadgets and smart mobile devices
available this days with different screen resolutions and the need for each
device to receive suitable content from a website, the need to develop websites
with responsive capabilities can never be over emphasized. It’s also worth
noting that greater percentage of online users do so via mobile devices and
gadgets. Personally as a web designer and developer almost every client these days
request for mobile version of their sites.
Responsive Web design is the approach that suggests
that design and development should respond to the user’s behavior and
environment based on screen size, platform and orientation. The practice
consists of a mix of flexible grids and layouts, images and an intelligent use
of CSS media queries. As the user switches from their laptop to iPad, the
website should automatically switch to accommodate for resolution, image size
and scripting abilities. In other words, the website should have the technology
to automatically respond to the user’s preferences. This would
eliminate the need for a different design and development phase for each new
gadget on the market.
On a historical angle Ethan
Marcotte coined the term responsive web design (RWD) in a May 2010 article in “A
List Apart”. He described the theory and practice of responsive web design
in his brief 2011 book titled Responsive Web Design. A site
designed with RWD adapts the layout to the viewing environment by using
fluid, proportion-based grids, flexible images, and an extension of
the @media rule.
Ø Media
queries allow the page to use different CSS style rules based on
characteristics of the device the site is being displayed on, most commonly the
width of the browser.
Ø Flexible
images are also seized in relative units, so as to prevent them from displaying
outside their containing element.
Ø The
fluid grid concept calls for page element sizing to be in relative
units like percentages, rather than absolute units like pixels or points.
Finally With so many devices
available this days and more are still been produced, this has resulted in
varying screen resolutions, definitions and orientations. New devices with new
screen sizes are being developed every day, and each of these devices may be
able to handle variations in size, functionality and even color. Some are in
landscape, others in portrait, still others even completely square. As we know
from the rising popularity of the iPhone, iPad, tablets and advanced
smartphones, many new devices are able to switch from portrait to landscape at
the user’s whim. As a web developer how are you able to design for these
situations? The answer or solution is simply responsive web design (RWD). We
are in a new age of Web design and development. Responsive Web design is a good
concept that when implemented correctly will improve the user experience, traffic
and SEO. Understanding how to make a design responsive to the user doesn’t
require too much learning, and it can definitely be a lot less stressful and
more productive than learning how to design and code properly for every single
device available. For more information, questions or you would like to enroll with
us and get trained in different ICT packages visit www.vesterconcept.org.