Responsive Web Design
Mobile First Approach
In 2014,
for the first time more users
accessed the internet from their
mobile devices than desktop.
That is why almost every new
client these days wants a mobile
version of their website. It’s
practically essential after all:
one design for the BlackBerry,
another for the iPhone, the iPad,
netbook, Kindle — and all screen
resolutions must be compatible,
too. 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. One may
also have to consider the
settings on their devices; if
they have a VPN for iOS on their
iPad, for example, the website
should not block the user’s
access to the page. 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.
Responsive Web Design (RWD)
Responsive Web Design is a term
coined by Ethan Marcotte that
articulates how to adapt a website’s
layout for multiple screen
resolutions. Creating a responsive
web design utilizes:
1. Fluid grids that ebb and flow with a
devices’ screen size
2. Flexible images and media that keep
content intact on any resolution
3. Media queries allowing designs to
adapt by establishing dimension
breakpoints
Mobile First
Mobile First is a philosophy
created by Luke Wroblewski that
highlights the need to
prioritize the mobile context
when creating user experiences.
Starting with mobile first:
1. Allows websites to reach more
people (77% of the world’s
population has a mobile device,
85% of phones sold in 2011
equipped with browser)
2. Forces designers to focus on
core content and functionality
(What do you do when you lose
80% of your screen real estate?)
3. Lets designers innovate and take
advantage of new technologies (geolocation,
touch events and more)