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
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
26.
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
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.
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.
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
It’s a set of techniques, not a magic bullet; still a work in progress, no setbest practices
You can't assume know how people will be viewing.
Separate mobile site - don't get content
It’s not just computer or phone now.
Also show live example, changing Starbuck site
New, most web designers still learning
Also show live example, changing Starbuck site
It’s possible that there are things in your current design that don’t need to be in any responsive configuration, because they really aren’t useful to the user.
Not finished
Go to sites and walk through?
Best practices are still in flux, place to watch(Not finished this page…)