This details responsive web design.

1. RESPONSIVE
WEB DESIGN
FOR THE VISUAL DESIGNER BY ERICA COSTA OF
THE BRANDON AGENCY

2. WHAT IS A
RESPONSIVE
WEBSITE?

3. A responsive website
responds to its environment.

4. “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 we’ll build websites for the decade to come.”
- Jeffrey Veen

5. There is no longer a
standard screen size.

6. It’s one site for
every device.

7. WHO IS USING RESPONSIVE
WEB DESIGN RIGHT NOW?

8. barackobama.com

9. sony.com

10. bostonglobe.com

11. WHAT DOES ALL
THIS MEAN FOR US
(THE DESIGNERS)?

12. We have to create beautiful websites that
anticipate users’ needs beyond the desktop.

13. Far beyond the desktop.

15. This is where responsive
web design steps in.

16. SO, HOW DO WE APPROACH
THE ACTUAL DESIGN?

17. No more picking an arbitrary
size in photoshop, mocking-up a design,
and handing it over to developers.

18. We need a new
design process.

19. 1 Get content
Tweak the
Chat with
8 design for 2
the developer
this new size
Fix problems Repeat until Research,
7 and find the you’ve reached 3 sketch,
breakpoint the largest size brainstorm
Sit with Designing for
6 the developer 4 the smallest
and test Hand over resolution
5 design to the
developer

20. This process requires us and
the developer to work together
right from the very beginning.

21. We can’t work
separately anymore.

22. WHAT DO YOU DO NOW?

23. Find and utilize resources on the web.

24. Just be willing to
adapt and learn.

25. RESOURCES

26. TERMS TO KNOW
Adaptive Fluid
Adaptive design is based on top of fixed-width designs. Instead of having one Instead of an element being a known and fixed size, it can stretch to fill any
fixed-width design, there are multiple fixed-width designs for a single page. available space. But, only horizontally (this is a stretch, not a scale). Whole
Normally these designs are split up based on the width of the browser, so there pages can be made of fluid elements, meaning the whole site becomes fluid.
can be one fixed-width design for mobile, another for iPad, and another for a The layout doesn’t change.
computer. Although they’re “multiple designs,” they’re generally based on the .
same thing, just rearranged to better suit a larger (or smaller) screen. In effect,
the website adapts to the size of the visitor’s screen/browser by automatically
Mobile first
Is a way of managing the design and build process. The idea is to start by
selecting a different fixed-width design to use.
considering the simplest possible version (usually the mobile version, hence
the name) and work up through larger and more complex designs only once a
Breakpoint smaller one is complete. The advantage in terms of design is an emphasis on
A breakpoint is the width at which a given design starts to look broken and, core content and design elements (typography and colors, then layout, etc).
therefore, at which point a new design should be applied. From a technical perspective, this is quite essential; from a design perspective,
it’s less so.
Fixed-width Responsive
This is a traditional web page. With fixed-width sites, it doesn’t matter what
Combines Adaptive and Fluid techniques. In a responsive project, there are a
size screen or browser a visitor has, the site is always the same size (in pixels)
series of designs, each of which is fluid - stretching up to a given point before
as the design in our Photoshop file. If the screen isn’t big enough to fit the
switching to a different design or layout
design in, the visitor has to scroll sideways. If the screen is huge, the design
has empty space around it.

27. USEFUL SITES
abookapart.com 1stwebdesigner.com
blog.responsivenews.co.uk madebysplendid.com
webdesign.tutsplus.com sitepoint.com
smashingmagazine.com netmagazine.com
designer-daily.com thinkvitamin.com
speckyboy.com tripwiremagazine.com

28. CREDITS
mattwilcox.net dennischeatham.com
trentwalton.com stephanierieger.com
johnpolacek.github.com adactio.com
www.netmagazine.com splashnology.com
elliotjaystocks.com designshack.net
1stwebdesigner.com designyoutrust.com