Presentation given to NYC Webgrrls on March 11, 2013

1. Responsive Web Design
Webgrrls Discussion Topic
March 11, 2013
By Amélie Walker
Castle Builder Design
www.castlebuilder.com

2. What is Responsive Design?

3. Responsive Design is:

4. Responsive Design is:
 Flexible

5. Responsive Design is:
 Flexible – Margin and image sizes change with width

6. Responsive Design is:
 Flexible – Margin and image sizes change with width
 Adjustable

7. Responsive Design is:
 Flexible – Margin and image sizes change with width
 Adjustable – Layout changes changes with width

8. Responsive Design is not:

9. Responsive Design is not:
Magic

10. Responsive Design…
Responsive web design is
1
a set of techniques that
allows website designers to
create a single version of
a website that will
seamlessly adapt to
phones, tablets, laptops
and desktop computers.
flexible,
adjustable
version

11. Photo by Jeremy Keith, Wikimedia Commons

12. The Old Way
Main Website Mobile Website

13. The Old Way
Main Website Mobile Website

14. The Old Way = Problems
 Reduced information on mobile version
 Two separate websites to update
 What about other devices?

15. The New Way

16. The New Way

17. Navigation

18. What happens?
 Logos change size and/or format
 Menus consolidate or collapse completely
 Sections reorder, right column often goes to bottom
 Less important items disappear

19. Examples
 Boston Globe
 Emeril’s Restaurant
 Microsoft
 Starbucks
 United Pixel Workers
 World Wildlife Fund

20. Sign Me Up! Not so fast…
If you already have a website, it might be expensive to
rebuild your website to be responsive. Is it worth it?
YES if…
 You have a significant mobile audience.
MAYBE NOT if…
 You already have a great mobile site, or
 You have a very small mobile audience.

21. Know Your Audience
Google Analytics
www.google.com/analytics
The best free tool to measure your
website traffic and more
Audience > Mobile > Overview About 25% use this site on mobile.

22. Broken on Mobile
If you can’t make it responsive, at least make sure it works.
Zooming in
expands menu
only, covers
content

23. Pros
 Less expensive to maintain
 Consistent on all devices
 Just one URL
 Improved social sharing
 Improved SEO (and Google recommends it!)

24. Google recommends using responsive web design because it has
many good aspects:
• Using a single URL for a piece of content makes it easier for your
users to interact with, share, and link to your content, and a single
URL for the content helps Google's algorithms assign the indexing
properties for the content.
• No redirection is needed for users to get to the device-optimized
view, which reduces loading time. Also, user agent-based
redirection is error-prone and can degrade your site's user
experience.
• It saves resources for both your site and Google's crawlers. For
responsive web design pages, any Googlebot user agent needs to
crawl your pages once, as opposed to crawling multiple times with
different user agents, to retrieve your content. This improvement in
crawling efficiency can indirectly help Google index more of the
site's contents and keep it appropriately fresh.
See “Building Smartphone-Optimized Websites” by Google.

25. Cons
 More time consuming to create
 Involves more testing
 Not ideal for e-commerce
 Slower load time
 Not all devices recognize media queries

27. Responsive Out-of-the-Box
Wordpress
Many themes are now responsive, including Twenty Twelve,
the latest default Wordpress theme.
Search for “responsive” at…
Self-hosted: wordpress.org/extend/themes
Wordpress.com: theme.wordpress.com

28. Wordpress: Twenty Twelve Theme

29. Or…
Hire a web designer.

30. “I am the designer!
How do I do this?”

31. Designing a responsive website
Method 1: Mobile First
1. Start with minimum amount of content and navigation.
2. Focus on core content.
3. Add slowly, considering each piece.
4. Progressively enhance for larger screen sizes.

32. Designing a responsive website
Method 2: Scaling Down
1. Start with desktop version.
2. Decide what is less important or can be consolidated.
3. Reflow or collapse existing content.
4. Move non-essentials to bottom or remove.

33. The Ingredients
Fluid grids
Flexible images
Media queries

34. Fluid Grids: Grids That Respond
 Change container widths
host.sonspring.com/yui3_grid
 Change margins
Example: WP 2012 Theme
 Change layout
Disable floats to stack content, as we’ve seen in
examples (www.starbucks.com, etc.).
 Remove/add content...

35. Fluid Grids: Remove/Add Content
Hide Content Load Conditionally
Use CSS to hide sections when Use javascript to load content
screen size is small. only if screen is wider than
certain size.
 Content still loads, even  Improves load time on
when hidden. mobile.

36. Fluid Grids: Creating Grids
Resources for creating grids
 grids.heroku.com (online)
 www.960.gs (downloadable)
 thesquaregrid.com (downloadable)
Build a grid for each breakpoint.

37. Fluid Grids: Basic Layout Break

38. Fluid Grids: Example/Download
Proportional Grids
 builtbyboon.com/blog/proportional-grids

39. Responsive Images
 Resize images with css
One image, resized, no change in file size
 Serve different versions of images
Save on load time
www.adaptive-images.com
Further reading: Which Responsive Images Solution Should
You Use?

40. HTML Special Characters
HTML entities that can replace
simple graphics, scale nicely ★ ★
☆ ☆
♥ ♥
Stars great for ratings: ♣ ♣
← ←
★★★★☆
↑ ↑
→ →
↓ ↓

41. HTML Special Characters
HTML entities that can replace
simple graphics, scale nicely ★ ★
♣
☆ ☆
♥ ♥
♣ ♣
← ←
↑ ↑
→ →
↓ ↓

42. Media Queries
Components of a media query:
 Media type
 Query (feature to inspect)
 Target value
screen and (max-device-width: 480px)

43. Media Queries
Load external stylesheets:
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href=”smallscreens.css”>
<link rel="stylesheet" type="text/css"
media="screen and (min-device-width: 960px)"
href=”largescreens.css”>

44. Media Queries
Include in CSS as part of @media rule:
@media screen and (max-device-width: 480px) {
.sidebar {
float: none;
}
}

45. Media Queries
Import at top of css:
@import url(”smallscreens.css") screen and (max-device-width:
480px);
@import url(”largescreens.css") screen and (min-device-width:
960px);
 Import can slow down page load, not recommended.

46. Media Query Support
All modern browsers support media queries.
 Chrome 1+
 Firefox 3.5+
 Internet Explorer 9+
 Safari 4+

47. Oh, Internet Explorer…
Option #1:
Use javascript to help along old browsers ≤ IE8.
 Respond.js
 css3-mediaqueries.js
 Adapt.js

48. Oh, Internet Explorer…
Option #2:
Use conditional code to load stylesheet for IE less than 9.
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href=”IE.css" />
<![endif]-->
 Only solves problem in certain situations.

49. Tools for Building Responsively
Downloadable Toolkits
Front-end frameworks for creating responsive websites
 Foundation: foundation.zurb.com
 Bootstrap: twitter.github.com/bootstrap

50. Resources
www.castlebuilder.com/blog/responsive-design
• Getting Started
• Online & Downloadable Tools Tweet Amélie
@castlebuilder
• Examples
• Further Reading