Conclusion

The emergence of responsive web design, more than six years ago, showed us the vision
for our future sites: a world where users can have great experiences no matter what
devices or what screen sizes they have those experiences on. However, it was also clear
to us that this change was not going to happen without effort—and a tremendous one,
at that.
The beautiful thing about responsive retrofitting projects—and what can also make
them look so scary—is the number of improvements that can be validated by the need
to make your site’s experience better on any device. As professional web designers
and developers, we often know perfectly well what our sites need in order to be greatly
improved. But sometimes the task ahead seems too complex, too riddled with obstacles,
and too big to feel realistic and achievable.
Our teams are not made up of an infinite number of people who can work on our
responsive retrofitting projects day in and day out, leaving everything else on standby.
So it is key that any retrofitting project be thoughtfully planned and broken down into
digestible chunks that you, your team, and your team’s schedule can comfortably handle.
My hope is that this book has made what can often seem like an insurmountable task feel
a little more attainable.
The technologies of the Web change quickly. Some of the techniques I have
mentioned here will likely be surpassed soon after this book goes to print. But hopefully
the core ideas about how to approach planning, content, design, and development will be
helpful regardless.
Even though this is where this book ends, this is certainly not the end of your journey
into responsive web design. There are many excellent resources that can take you further
into understanding how best to design and build a responsive site. You will find some
helpful resources in the appendix, and you are bound to also discover others that I have
not included in that short list.
I would love to hear about your experiences making existing web sites responsive.
What problems were tough to solve? What solutions are you proud of? What was easier
than expected? Feel free to find me online, and send me your stories, case studies, blog
posts, and conference talks. I await your comments eagerly.

© Inayaili de León 2016 137

I. de León, Moving to Responsive Web Design, DOI 10.1007/978-1-4842-1987-4
APPENDIX

Resources

The constraints that come with the book format are evident when it comes to a subject as
broad as responsive web design: there is so much to say, in such a finite space. But luckily,
there are plenty of excellent resources available to further improve your ability to plan,
design, and deliver a great responsively retrofitted web site. Peruse this list at your leisure.
Responsive web design and responsive retrofitting in general:
• Responsive Web Design Podcast, Karen McGrane and Ethan
Marcotte, http://responsivewebdesign.com/podcast. Episodes
7, 9, 15, 30, 38, 42, 43, 44, and 53 are especially relevant.
• Implementing Responsive Design: Building Sites for an Anywhere,
Everywhere Web, Tim Kadlec (New Riders, 2013),
www.implementingresponsivedesign.com.
• Responsive Web Design, Ethan Marcotte (A Book Apart, 2011),
https://abookapart.com/products/responsive-web-design.
• Going Responsive, Karen McGrane (A Book Apart, 2015),
https://abookapart.com/products/going-responsive.
• Responsive Design: Patterns & Principles, Ethan Marcotte (A Book
Apart, 2015), https://abookapart.com/products/responsive-
design-patterns-principles.
Project management and planning:
• “Effective Project Management: Three Critical Activities,” Laura
Dallas Burford, Nonprofit Technology Network, www.nten.org/
article/effective-project-management-three-critical-
activities.
• “Top 11 Project Management Tools for 2016,” Robin Muilwijk,
opensource.org, https://opensource.com/business/16/3/top-
project-management-tools-2016.
• “Project Management Apps: Which Is Best for Your Team?” Laura
Shin, Forbes, www.forbes.com/sites/laurashin/2014/10/21/
project-management-apps-which-is-best-for-your-team/#271
5e4857a0b1f982d5831d2.

© Inayaili de León 2016 139

I. de León, Moving to Responsive Web Design, DOI 10.1007/978-1-4842-1987-4
A P P E N D I X ■ RESOURCES

Content strategy:
• “Content Choreography in RWD,” in Smashing Book 5: Real-Life
Responsive Web Design, Eileen Webb (Smashing Magazine, 2015),
99–126, https://shop.smashingmagazine.com/products/
smashing-book-5-real-life-responsive-web-design.
• A Practical Guide to Information Architecture, Donna Spencer
(Five Simple Steps, 2010), http://uxmastery.com/practical-ia.
• “Writing for the Web,” Usability.gov, www.usability.gov/how-to-
and-tools/methods/writing-for-the-web.html.
• “Content Strategy Basics,” Usability.gov, www.usability.gov/
what-and-why/content-strategy.html.
• “The Elements of Content Strategy,” Erin Kissane (A Book Apart, 2011),
https://abookapart.com/products/the-elements-of-content-
strategy.
• “The Discipline of Content Strategy,” Kristina Halvorson,
A List Apart, http://alistapart.com/article/
thedisciplineofcontentstrategy.
• “Content Strategy for Mobile,” Karen McGrane (A Book Apart, 2012),
http://abookapart.com/products/content-strategy-for-
mobile.
• “Aligning Content Work with Agile Processes,” Brendan Murray,
A List Apart, http://alistapart.com/article/aligning-
content-work-with-agile-processes.
• “Why and How to Perform a Content Audit,” Laura Rives, Hannon
Hill, www.hannonhill.com/resources/blog/2016/why-and-how-
to-perform-a-content-audit.html.
• “How to Quickly Create a Written Style Guide for Your Company,”
Emily Nix, Nectafy, http://nectafy.com/written-style-guide/.

User research and testing:

• “User Research Basics,” Usability.gov, www.usability.gov/what-
and-why/user-research.html.
• “User-Centered Design Process Map,” Usability.gov, www.
usability.gov/how-to-and-tools/resources/ucd-map.html.
• “Guerrilla Testing: Getting Input into Products and Services,”
Government Service Design Manual, Gov.uk, www.gov.uk/
service-manual/user-centred-design/user-research/
guerrilla-testing.html.

140
 A P P E N D I X ■ RESOURCES

Accessibility:
• “Accessibility Basics,” Usability.gov, www.usability.gov/what-
and-why/accessibility.html.
• “Reframing Accessibility for the Web,” Anne Gibson, A List Apart,
http://alistapart.com/article/reframing-accessibility-
for-the-web.
• “All Technology Is Assistive,” Sara Hendren, Backchannel,
https://backchannel.com/all-technology-is-assistive-
ac9f7183c8cd#.is88svol2.
• “What’s the Difference Between Usability and Accessibility?”
Liam McDermott, A Padded Cell, www.apaddedcell.com/what-s-
the-difference-between-usability-and-accessibility.

CSS units:

• “The Lengths of CSS,” Chris Coyier, CSS-Tricks, https://css-

tricks.com/the-lengths-of-css.
• “<length>,” Mozilla Developer Network, https://developer.
mozilla.org/en/docs/Web/CSS/length.
• “Font Sizing with rem,” Jonathan Snook, http://snook.ca/
archives/html_and_css/font-size-with-rem.

Media queries:
• “Using Media Queries,” Mozilla Developer Network, https://
developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/
Using_media_queries.
• “Media Queries Level 4,” W3C, https://drafts.csswg.org/
mediaqueries.
• “@media,” Mozilla Developer Network, https://developer.
mozilla.org/en-US/docs/Web/CSS/@media.

Responsive images:
• Responsive Images Community Group,
http://responsiveimages.org.
• “Responsive Images: If You’re Just Changing Resolutions, Use
srcset,” Chris Coyier, CSS-Tricks, https://css-tricks.com/
responsive-images-youre-just-changing-resolutions-use-
srcset/.
• “The Anatomy of Responsive Images,” Jake Archibald, https://
jakearchibald.com/2015/anatomy-of-responsive-images.

141
A P P E N D I X ■ RESOURCES

Performance:
• “Setting a Performance Budget,” Tim Kadlec, https://
timkadlec.com/2013/01/setting-a-performance-budget.
• “How to Make a Performance Budget,” Daniel Mall, http://
danielmall.com/articles/how-to-make-a-performance-
budget.
• “What Your Site Costs Users,” Tim Kadlec, https://timkadlec.
com/2015/03/what-your-site-costs.
• “Render Blocking CSS,” Ilya Grigorik, Google Developers, https://
developers.google.com/web/fundamentals/performance/
critical-rendering-path/render-blocking-css.
• “More Weight Doesn’t Mean More Wait,” Scott Jehl, Filament
Group, www.filamentgroup.com/lab/weight-wait.html.
• “Inlining Critical CSS for First-Time Visits,” Jeremy Keith,
https://adactio.com/journal/8504.
• “Media Query & Asset Downloading Results,” Tim Kadlec,
https://timkadlec.com/2012/04/media-query-asset-
downloading-results.
• “The Perception of Performance,” Luis Vieira, SitePoint,
www.sitepoint.com/the-perception-of-performance.
• “An Introduction to Perceived Performance,” Matt West,
http://blog.teamtreehouse.com/perceived-performance.

Measuring performance:
• Google PageSpeed tools, https://developers.google.com/
speed/pagespeed.
• gzipWTF, http://gzipwtf.com.
• Pingdom Website Speed Test, https://tools.pingdom.com.
• ImageOptim, https://imageoptim.com.

Measuring success, analytics, and data gathering:

• “Web Analytics Basics,” Usability.gov, www.usability.gov/what-
and-why/web-analytics.html.
• Mixpanel mobile analytics, https://mixpanel.com.
• Segment analytics API and customer data hub, https://segment.com.
• Kissmetrics customer intelligence and web analytics,
www.kissmetrics.com.
• Intercom customer communication platform, www.intercom.io.

142
 A P P E N D I X ■ RESOURCES

Other resources:
• Style Guide Podcast, Anna Debenham and Brad Frost,
http://styleguides.io/podcast.
• “HTML5 Cross Browser Polyfills,” Modernizr, https://github.
com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-
Polyfills.
• “Responsive Resources,” Brad Frost, http://bradfrost.github.
io/this-is-responsive/resources.html.

143
Index

„A responsive retrofitting project, 96

site cost, 102–103
Absolute units, 72 Speed Index, 101–102
Accessibility, 25, 27, 94–95 visually responsive, 96
responsive web design, 52–53 web fonts, 100
Accordion, 38 WebPagetest, 100–101
A List Apart’s pattern library, 61 publishing, site, 132–133
Amazon, 54 Sass, 127–129
Anne Gibson’s alphabet site and organization, 134
of accessibility, 26 small-screen devices, 134
Argos, 39 stylesheets, 131–132
Asana tool, 7 testing
Axure tool, 70 browsers and
operating systems, 119–120
„B BrowserStack, 119, 122–123
decision-making process, 118
Basecamp tool, 6–7, 21 definition, 119
BBC News web site, 85 device lab, 121
BBC’s home page redesign, 48 document and process, 119
Bootstrap, front-end framework, 50–51 Ghostlab, 124
Boston Globe, xxv Percy, 124–125
Breakpoints, responsive web design, 59 web site and prototypes, 118
BrowserStack, 119 writing code and markup, 126
Building strategies
accessibility, 94–95
experiment, smaller projects, 94 „C
inobtrusive ways, 134–135 Canonical.com’s first responsive test, 58
Intercom.io, 135 Chicago Manual of Style, 43
markup and code style guide, 126–127 12-Column grid layout,
metric, 134 content boxes in, 73
mixins and functions, 129, 131 Command-line interface (CLI), 133
performance Component inventory folders, 62
budget, 96–98 Consultants, project, 3
handy tools, 100 Content
lean sites, 99 accessibility and usability, 24, 27
mobile user, 96 accordion, 38
perceived performance, 98–99 audit, 30

© Inayaili de León 2016 145

I. de León, Moving to Responsive Web Design, DOI 10.1007/978-1-4842-1987-4
■ INDEX

Content (cont) make image inventory, 79–80

Canonical.com, 38 SVG, 81
column headings, 29 performance, 54
content inventory, 28 on reusability, 49–50, 52
creation and management, 23 setting rules, 55
duplicated work, 32 building prototype, 58
ongoing maintenance, 32 writing ideas, 55–57
real, 23–24 standardize across sites, 67
simplification, 40 style guide, 60–61
style guide, 41 building style guide, 65–66
tabs, 39 clean up style sheets, 66
updates and improvements, 32–33 examining, 66
content audit, 28, 30 pattern library, 66
Content boxes responsively rationalize, 64
adjustments to narrower screenshots, 62–63
viewport adapt to, 75 useful patterns
in 12-column grid layout, 73 dropdown and slidedown, 82
in screen one-third smaller, 74 navigation, 82
Content inventory, 28 overflow, 86–87
Content management system, 23 priority+, 84
Content specialist, 47 priority columns, 90
Content strategy, 40–41 side drawer, 84
mobile, 31, 45 tables, 87
CSS, xxii–xxiii, xxv, 59 UX, 68
CSS Object Model (CSSOM), 113 prototyping, 68–69
sticky-note-sized wireframes, 68
testing prototype, 70–71
„D things to test, 71
Dated content, 36 Developer, front-end, 2–3
Deadlines, responsive Developers, project, 16–17
retrofit project, 17–18 Digital record,low-fidelity planning, 6
Designers, project, 16–17 Document object model (DOM), 113
Designers, web site, xxii
Design-pattern library, 44
Design stage, responsive web design „E
on accessibility, 52–53 eBay’s November 2000 web site, xxiii
determining breakpoints, 59 Emergence of responsive web design, 137
analytics, 60 European Organization for Nuclear
in browser, 59 Research (CERN),
elements to analyze, 60 web site for, xxii
tweakpoints and breakpoints, 59 Evernote tool, 8
evolution, 47–48 Evolution, responsive web design, 47–48
feedback and reviews, 91
flats, 54–55
grids and type, 72 „F
explore responsive grids, 73–74, 76 Fixed-width site, xxi, xxiv, xxvi, 17
grid to percentages, 72 creating style guide for, 64
reorder content, 76, 78 Flat mockups, 55
typographic scale, 78–79 Fluid grids
handling images, 79 absolute units, 109–110
bytes, 81 bootstrap, 107

146
 ■ INDEX

fast track, 104 technical tenets, 110

markup, 104–106 W3C specification, 111
remove inline styles, 106 Microsoft, dropdown navigation style, 83
scalable type, 110 Mobile view of Wikipedia, 77
ZURB, 108
Folders, component inventory, 62
Front-end developer, 2 „N
Navigation pattern, responsive web
design, 82
„G New York Times uses dropdown
Ghostlab, 124 navigation, 83
Going Responsive, 19
Google’s material design spec, 51
Grids and type, responsive web design, 72 „O
explore responsive grids, 73–74, 76 One-hour test, responsive
grid to percentages, 72 retrofit project, 15
reorder content, 76, 78 Online banking project, 19
typographic scale, 78–79 Open source tools, 6–8
Guardian and Observer Style Guide, 43
Guerrilla testing, 70–71
„P
Paper prototype, 69, 71
„H Pattern Lab tool, 65
“How to Make a Performance Budget”, 54 Percy, 124–125
HTML, xxv Performance, responsive web design, 54
HTML5 Boilerplate framework, 49 Photoshop, 55
Pixels, 72
Priority columns responsive pattern, 90
„ I, J, K Priority+ navigation pattern, 84
iMac, 68 Project leader, 3–4
Informal testing, prototype, 70 role of, 12, 20
InVision tool, 70 Project-management tools, open source, 6
Prototyping, super-speedy, 68–69
„L
Lea Verou’s contrast ratio tool, 53 „Q
[Q]uick fix remedies
„M
MailChimp’s acclaimed „R
Content Style Guide, 42 Redesigns, responsive, 48
MailChimp’s style guide, 42 BBC’s home page, 48
Media queries Responsive images
advantage, 113 compress, bitmaps, 118
breakpoint, 113 image caching, 117
browser support, 114 optional images, 118
CSS rules, 112 picture and srcset, 115–117
float properties, 112 SVG images, 114–115
linear, 112 Responsive retrofit project, 44
print and speech, 111 account for downtime, 12–13
stylesheet, 113 assigning tasks, 10

147
■ INDEX

Responsive retrofit project (cont) Sony Android, 68

define project leader, 3–4 Sound content strategy, 41
deprioritize other projects, 10 Standards-based HTML, xxiii
do not use everyone at once, 12 Sticky-note-sized wireframes, 68
finding time in schedule, 9 Style guide, responsive web design, 60–61
goal of, 68 building, 65–66
involve right people, 2–3 clean up style sheets, 66
keeping record, 20–21 examining, 66
keep tight scope, 13 or pattern library, 66
break down tasks, 14–15 responsively rationalize, 64
define stages, 16 screenshots, 62–63
determining out of scope, 16–17
one-hour test, 15
organize, 14 „T
prioritize, 14 Tables, responsive web design, 87
start with wish list, 13 jQuery Mobile, 89–90
testing, 17 to list, 88
low-fidelity planning, 5 Wikipedia entries, tables, 88
digital record, 6–8 Task-management software, 7
gaining perspective, 5 Testers, project, 3
managing site updates, 20 Testing, project, 17
participation, 4 The Elements of Content Strategy, 37
rollout strategies, 18–19 Tools
set deadlines, 17–18 Asana, 7
team, 2 Axure, 70
understand calendar, 9 Basecamp, 3, 6–7, 21
use everyone at once, 11 Evernote, 8
Responsive retrofitting project, 104, 137 InVision, 70
Responsive web design, xxi Lea Verou’s contrast ratio, 53
emergence of, 137 Pattern Lab, 65
enter, xxiv Sketch, 55
time, xxvi Slack, 20–21
web used to be responsive, xxi–xxiii, Trello, 8–9
Reusability, responsive Topshop.com, side drawer, 84
web design, 49–50, 52 Trello tool, 8–9
Rewriting content, 34 Typographic scale, 78–79

„S „U
Salesforce’s Lightning Design System, 61 ubuntu.com, xxvi, 4
Scalable vector graphics (SVG), 81 component inventory
Scope creep, 17 uncovered variations on, 64
Screenshots, responsive Usability testing, 71
web design, 62–63 User experience designer, 2–3
Senior designer, 3
Side drawer navigation, 84
Sketch tool, 55 „V
Slack messaging app, 20–21 Visual designer, 47

148
 ■ INDEX

„ W, X, Y, Z for European Organization for

Nuclear Research (CERN), xxii
Web design responsive redesigns of, xxv
professionals, xxvi Web Standards Project’s
technical factors, xxiv mission, xxiv
Web site Wikipedia,
designers, xxii mobile view of, 77
eBay’s November xxiii, 2000 Words—no mockups, 55

149