What is Responsive Web Design

1
What the heck is Responsive Web Design?
presentation by John Polacek
2
responsive websites
respond
to their environment
3
Adaptive(Multiple Fixed Width Layouts)
Responsive (Multiple Fluid Grid Layouts)
OR
4
Mixed Approach Fixed width for large and
medium.Fluid width for small.
5
Why?
Day by day, the number of devices, platforms,
and browsers that need to work with your site
grows. Responsive web design represents a
fundamental shift in how well build websites
for the decade to come. - Jeffrey Veen
6
Small Medium Large One site for every screen.
7
Taking a closer look

• A Responsive Website can be achieved through
  these short features
• The site must be built with a flexible grid
  foundation.
• Images that are incorporated into the design must
  be flexible themselves.
• Different views must be enabled in different
  contexts via media queries.

8
Flexibility
Part of any good web design in these modern times
is a flexible grid. This practice will
accommodate a variety of browsers already that
demand the design be flexible and fluid. Tiny
Fluid Grid is a great tool for creating fluid
grids. It lets you make grids with up to 1200px
maximum widths, and is based on 1kb grid. 70
essential resources for creating liquid and
elastic layouts has everything you need to get
started creating your own flexible layouts.
9
Images
Another feature of Responsive Web Design is
images that move and scale with your flexible
grid. Unstoppable Robot Ninja has a simple
script that automatically resizes your
images. Zomigi allows you to selectively hide
parts of your image dynamically.
10
Media Queries
Media queries allow designers to build multiple
layouts using the same HTML documents by
selectively serving stylesheets based on the user
agents features, such as the browser windows
size. Media queries and responsive design allow
us to think outside of the constraints of a
screen size or resolution and start building
websites that flexibly adapts to all mediums.
11
Who is doing it?
Not just demos, design shops and vanity pages.
Real client work.
12
The Boston Globe
Largest responsive web design project to
datebostonglobe.com
13
Grey Goose
Responsive site for Grey Goose with parallax
scrolling animationwww.greygoose.com
14
Clean Air Commute Challenge
Promo siteclearairchallenge.com
15
Barack Obama
The Obama campaign continues to be at the leading
edge of web technology.barackobama.com
16
...and plenty more mediaqueri.es
17
Time Money Browser Support Performance Content W
ebsite vs. Web App
When to use it? Things to consider
18
How?
Stop Thinking in Pages. Start Thinking in
Systems. - Jeremy Keith
19
Frameworks?
(save time)
OR
Roll Your Own
(more control)
20
Best Practices
Content Check
Start Small (Mobile First)
Exit Photoshop, Enter Browser
Make it modular
Always be optimizing
Best practices still emerging!
21
Where can you learn more?
22
(No Transcript)
23
(No Transcript)