A lecture on and workshop given at General Assembly on Responsive Web Design. Explores a brief history of the web into why Responsive came about and how web designers should consider responsive not a just a tactic but as a quality of the modern web.

1. Responsive Web Design
& Best Practices
Hello
interaction education art/design systems
Chris R. Becker
UX Design @cbecker

2. • Credentials
• A vocabulary buffer
• Responsive Web Design
• What is the Problem?
• A brief web history
• A crude Timeline
• Why is matters
• Some Media Theory
• The Screen is our medium
• Responsive as a Quality
• Its Trending
• Multiscreen
• Media Queries
• The Grid
• Responsive CSS Frameworks
• Case Studies
• Best Practices
• Advertising
• Q & A
Agenda
@cbecker UX Design <1>

3. Who is this guy?
Hi, I am Chris Becker
@cbecker
I
I am a
Freelance UX / Interaction Designer / Design
Researcher / Educator
who dabbles in physical computing experiences
I have a background in
Graphic Design - BFA : Colorado State University
MFA - Art Center College of Design : Media Design Program
I have done projects for
Apple, Nissan, Mataxa, Art Center, Jet Propulsion Laboratory (NASA), VW, CB2, Adobe,
Toyota, EA, Mattel, Hyundai, Starwood Hotels, Fresh and Easy, HTC, OKGO and more.
I have worked for
Jet Propulsion Laboratory, Art Center, Schematic, Syynlabs, Saatchi & Saatchi,
Phenomenon, Innocean, Blitz, DeutschLA, the Ayzenberg Group, Handmade
Mobile, Boombang, Blitz, Two Bit Circus, Fabric Interactive
I !
teach at
Loyola Marymount University , UCLA extension, General Assembly
@cbecker UX Design <2>

4. Some of my projects
Esquire TV - Responsive Redesign
CB2 - Physical Interactive Campaign
Apple : Macintosh 30 years
@cbecker UX Design <3>
OK GO music video - Interaction Builder

5. Vocabulary Buffer
Affordance: a quality of an object, or an environment, which allows an individual to perform an action. For
example, a knob affords twisting, and perhaps pushing, while a cord affords pulling.
HTML 5:
markup language for structuring and presenting content for the World Wide Web, and is a core
technology of the Internet. It is the fifth revision of the HTML standard.
HTML5 is not software that has to be installed but rather a new version of the language HTML.
Web browsers must support this new version of HTML in order to correctly display web pages
using HTML5 functions. It is upon the developers of browsers to update their software to use
HTML5; users simply must allow these updates to be done on their computers, but do not have to
install additional software.
CSS 3 is divided into several separate documents called "modules". Each module adds new
capabilities or extends features defined in CSS 2
!
is a CSS3 module allowing to adapt the rendering of webpages based on conditions such as screen
resolution (eg. smartphone vs. high definition screen). It was first drafted in 2001 by the W3C and
became a recommended standard in June 2012. It is a cornerstone technology to Responsive Web
Design.
CSS3 :
Media Queries:
Responsive Web Design (RWS): is an approach to web design in which a designer intends to provide an optimal viewing experience—
easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range
of devices (from desktop computer monitors to mobile
W3C: The World Wide Web Consortium (W3C) is the main international standards organization for the
World Wide Web (abbreviated WWW or W3).
Frameworks: A “boilerplate” set of code templates that include the js libraries and code processes for building HTML
5 concepts
is a prototype-based scripting language that is dynamic, weakly typed and has first-class
functions. It is a multi-paradigm language, supporting object-oriented, imperative, and
functional programming styles.
Best Practices: is a method or technique that has consistently shown results superior to those achieved with other
means, and that is used as a benchmark
Java Script (JS):
@cbecker UX Design <4>

6. Let get into it
RESPONSIVE WEB
DESIGN
& Best Practices
@cbecker UX Design <5>

7. RWD
What is the Problem?
A considered User Experience
Across Multi Platforms
But the Media Space Reality is :
@cbecker UX Design <6>

8. Web History (brief)
Anyone Know who this is?
TimBL?
What did he do?
http?
Hypertext Protocol with a server
The Internet was Invented!
Year?
1990!
HTML Hypertext Markup Language
Tim Burners Lee
He made a proposal for an information management system in March 1989, and on 25 December 1990, with the help
ofRobert Cailliau and a young student at CERN, he implemented the first successful communication between a Hypertext
Transfer Protocol (HTTP) client and server via the Internet.
Tim Berners-Lee is the director of the World Wide Web Consortium (W3C), which oversees the Web's continued
development. He is also the founder of the World Wide Web Foundation, which writes and creates standards for HTML 5.
@cbecker UX Design <7>

9. A crude Timeline
1990 2000 2007 2010
HTML HTML5
@cbecker UX Design <8>
2014
CSS
JavaScript
CSS3
HTML4
FLASH
timeline
You
Are
Here
Clients
might
be
here
CSS2

10. Interaction Space
Why does RWD matter?
Interaction Cycle & User Experience Concerns
@cbecker UX Design <9>

11. Some Media Theory
We shape our
tools
and then our
tools shape Us
-Marshall McCluhan
Herbert Marshall McLuhan, (July 21, 1911 – December 31, 1980) was a Canadian philosopher of
communication theory. His work is viewed as one of the cornerstones of the study of media
theory, as well as having practical applications in the advertising and television industries.
McLuhan is known for coining the expressions the medium is the message and the global
village, and for predicting the World Wide Web almost thirty years before it was invented.
@cbecker UX Design <10>

12. The Screen is our Medium
We Invent these tools
The Screen is our
MEDIUM
@cbecker UX Design <11>

13. What is Responsive
RESPONSIVE
Can be a tactic
or it can be an
QUALITY
@cbecker UX Design <12>

14. What is Responsive
Just as elastic is a quality of a rubberband,
Responsive can be a quality of the sites
you design
@cbecker UX Design <13>

15. Let get into it
Its trending
@cbecker UX Design <14>

16. Why is it Necessary
It’s Hot right now
@cbecker UX Design <15>

17. Why is it Necessary
Multiscreen
Hardest Harder
Level of
Effort
Fastest Faster Fast
Use
Expectations
@cbecker UX Design <16>
Hard
Interaction One hand 2 hands (2 hands) Keyboard + Mouse
Size Small Medium Large

18. Let get into it
Media Queries
CSS3 Media Queries are an extension of the CSS2-3 media type property and allow
several different rule sets based on the browser’s capabilities, including width and
height of the browser window and device, screen orientation, and resolution. This gives
you context-specific control over the layout of your content, allowing you to optimize
layout and design for specific browsers and device capabilities.
@cbecker UX Design <17>

19. Is all about
THE GRID
“Well designed grid systems can make your designs not only more
beautiful and legible, but more usable.” [ Mark Boulton ]
http://www.thegridsystem.org/
@cbecker UX Design <18>

20. Is all about
RESPONSIVE
CSS FRAMEWORKS
http://webexpedition18.com/articles/responsive-css-frameworks/
@cbecker UX Design <19>

21. Is all about
RESPONSIVE CSS FRAMEWORKS
1. Responsive System
http://www.responsivegridsystem.com/
2. Twitter Bootstrap
twitter.github.com/bootstrap
3. Foundation 3
foundation.zurb.com
4. Groundwork
groundwork.sidereel.com
5. Golden Grid
http://goldengridsystem.com/
http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
@cbecker UX Design <19>

22. Is all about
Twitter Bootstrap
@cbecker UX Design <19>

23. Let get into it
Case Studies
http://narrowdesign.com/
@cbecker UX Design <20>

24. Let get into it
Case Studies
parallax + RWD
http://www.stinkdigital.com/
@cbecker UX Design <21>

25. Let get into it
Case Studies
http://www.billionaire.com/
http://www.billionaire.com/
@cbecker UX Design <3>

26. RWD still has to follow
Best Practices
Goals + Common Sense +
Interaction Principles +
Testing & Validation
Background Information
Page Layout
Browser Compatibility
Navigation
Color and Graphics
@cbecker UX Design <23>
!
Multimedia
Content Presentation
Functionality
Accessibility
http://terrymorris.net/bestpractices/

27. RWD still has to follow
Best Practices
The is no intuitive interface,
not even the nipple.
It’s All Learned
Bruce Ediger
@cbecker UX Design <24>

28. Common Mistakes
1. Hiding Content
Follow this simple guide: don’t penalize users for the device they happen to be browsing with. People are coming to our sites
and services with expectations, and it’s our job to make sure they’re able to achieve their goals. Mobile users will do
everything desktop users will do, but it must be presented in a usable way. So do all that you can to make sure as many
people as possible can access your content and functionality.
2. Bloating K-weight
One of the biggest challenges of creating responsive web designs is the balancing act of delivering a full experience while
still maintaining a snappy user experience across the board. Cut away the cruft, follow performance best practices, don’t
assume a strong connection by default, and look for ways to exploit great techniques like conditional loading to keep
initial page sizes down.
3. Ignoring Context Conventions
A phone is not a tablet is not a laptop is not a desktop is not a TV. Each device provides its own unique form factor, interface
conventions, constraints and opportunities. We need to be considerate of all these variables in order to create experiences that
feel natural to the user.Responsive web design by definition is not mobile design, so it’s up to us to introduce contextually-considerate
elements to our designs. That means handling responsive navigation in a way that makes sense to visitors across
contexts. That means designing for touch. That means avoiding forcing mobile users to sift through ridiculously long amounts of
disparate content just to find what they’re looking for.
4. Serving a one-size fits all
Mobile is much more than just various small screens, and these emerging contexts unlock entirely new use cases,
patterns and possibilities. We shouldn’t sell ourselves short by only creating responsive layouts
5. Relying on Devices
Let the design itself sort out where breakpoints should occur. I absolutely love this advice from Stephen
Hay:"Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!"
@cbecker UX Design <25>

29. The Ugly Lamp in the Corner
Advertisements
http://www.netmagazine.com/features/state-responsive-advertising-publishers-perspective
@cbecker UX Design <26>

30. The Ugly Lamp in the Corner
Advertisements
@cbecker UX Design <27>

31. Working on it
http://adcade.com/
@cbecker UX Design <27>

32. Some Links
http://mobile.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/
http://webdesignledger.com/inspiration/21-fresh-examples-of-responsive-web-design?
utm_source=dlvr.it&utm_medium=linkedin
http://matthewjamestaylor.com/blog/responsive-banner-ads
http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
http://www.lukew.com/ff/entry.asp?1514
http://responsive.is/grillroyal.com
http://wdn.unl.edu/responsive/viewer/
@cbecker UX Design <28>

33. Conversation
Q
&A (not quality assurance)
@cbecker UX Design <28>

34. Thank you
UX Design @cbecker
@cbecker UX Design <3>