Chapter 1: The Business Side of Redesign

Written by Paul Boag, Reviewed by Collis Ta'eed

Footnotes

1. The Washington Post, "Facebook Changes Confuse Users, as a Major Overhaul Looms".
2. Moll, Cameron. "Good Designers Redesign, Great Designers Realign".
3. Nielsen, Jacob. "Fresh vs. Familiar: How Aggressively to Redesign".
4. Verify App
5. WebSort

Chapter 2: Selecting a Plattform: Technical Considerations for Your Redesign

Written by Rachel Andrew, Reviewed by Ryan Carson and Harley Finkelstein

Footnotes

1. Andrew, Rachel. "Your CMS as Curator of Your Design and Content".
2. Chopra, Paras. "The Ultimate Guide to A/B Testing".
3. Google Webmaster Central Blog, "Using Site Speed in Web Search Ranking".
4. Beanstalk, "An Introduction to Version Control".

Chapter 3: Jumping Into HTML5

Written by Ben Schwarz, Reviewed by Russ Weakley

Beta versions of several browsers

• "Beta", "Dev channel" and "Canary" by Google Chrome
• WebKit by Apple Safari
• "Next" by Opera
• Nightly edition by Firefox
• "Aurora" by Firefox
• New builds by Microsoft Internet Explorer

Footnotes

1. When Can I Use
2. Make Data Useful by Greg Linden
3. Yepnope.js
4. HTML5 Boilerplate Webserver configuration repository on GitHub
5. UglifyJS compiler
6. HTML5 Shiv on Google Code
7. Modernizr by Faruk Ateş and Paul Irish
8. Normalize.css by Nicolas Gallagher and Jonathan Neal
9. Nicolas Gallagher's website
10. Jonathan Neal on Twitter
11. HTML5 Doctor
12. Validator.nu

Summary

• HTML5 Please
• HTML5: A Technical Specification for Web Developers
• HTML5 Rocks
• HTML5 Doctor

Figures

• Figure 3.1. When Can I Use (Compability tables for HTML5, CSS3, SVG and more)

Chapter 4: Restyle, Recode, Reimagine With CSS3

Written by David Storey and Lea Verou, Reviewed by Tab Atkins

Footnotes

1. Modernizr by Faruk Ateş and Paul Irish
2. List of vendor prefixes by @alrra
3. Prefixes via JavaScript by Lea Verou
4. Compatibility tables for browser support on When Can I Use
5. Compatibility tables for browser support on HTML5 Please
6. Mozilla Developer Network's documentation
7. Example: @font-face
8. Font Squirrel
9. Example: Museo Sans font by Jos Buivenga
12. Example: CSS3: Multiple Backgrounds and Gradients on Dabblet
13. Example: CSS3: Background-size/-origin, outline on Dabblet
15. Example: Small border image on Dabblet
16. Example: :target on Wikipedia
17. Selectivizr - CSS3 pseudo-class and attribute selectors by Keith Clark
21. Cubic Bezier preview tool by Lea Verou

Figures

1. Figure 4.4. Example: Centering with Flexbox
2. Figure 4.5. Example: Flexing the size and position with Flexbox
3. Figure 4.15. Example: CSS transform by Atli Harðarson
4. Figure 4.17. Example: Mix Units on Dabblet
5. Figure 4.18. Example: CSS Percentage Problem
6. Figure 4.19. Example: Box-sizing on Dabblet
7. Figure 4.20. Example: Transition timing by Paolo Camera

Chapter 5: JavaScript Rediscovered: Tricks to Replace Complex jQuery

Written by Christian Heilmann, Reviewed by Paul Irish

Footnotes

1. When Can I Use
2. Easing Equations by Robert Penner
3. Example: Easing Equation
4. Event delegation
5. Example: To-Do list in plain HTML5 and JavaScript
6. Example: Animated elements using CSS3
7. Example: Thumbnail generation in the browser

Chapter 6: Techniques for building Better User Experiences

Written by Dmitry Fadeyev, Written by Joshua Porter

Footnotes

1. ZURB, "Why Burying Sign Up Buttons Helps Get More Sign Ups".
2. VWO blog, "Signups increased by 60% after actually removing the signup form".
3. Wroblewski, Luke. "Gradual Engagement Boosts Twitter Sign-Ups by 29%".
4. Wroblewski, Luke. "Testing Accordion Forms".
5. The Baymard Institute. "Contextual Words Like "Continue" are Usabilty Poison".
6. Apple Insider, "Inside Max OS X 10.7: Lion".
7. Holst, Christian. "Redesigning The Country Selector".
8. Porter, Joshua. "Reward The Passionates".

Chapter 7: Designing for the Future, Using Photoshop

Written by Marc Edwards, Reviewed by Jon Hicks

Footnotes

1. Photoshop Action: Copy Merge

Figures

• Figure 7.15 Bypass Photoshop's rotation bug by using Bjango rotation.

Chapter 8: Redesigning With Personality

Aarron Walter, Reviewed by Denise Jacobs

Footnotes

1. Wikipedia: Borg (Star Trek)
4. Carbonmade
5. Photojojo
6. GE
8. The travel-booking company Hipmunk site
10. Wufoo
12. SurveyMonkey
13. Wilson, Fred. "Minimum Viable Personality".
14. Wroblewski, Luke. "Warm Gun: Designing for Emotion".
15. Forbes, "Why Does Emotional Design Work on the Web".
16. Download: User Persona Template
17. Van Gorp, Trevor. "Emotional Design With A.C.T.: Part 1".
18. Anderson, Stephen P. "Mental Notes".
19. Download: User Persona Template
21. Voice & Tone
22. Bonus Content for Chapter 08

Chapter 9: Mobile Considerations in User Experience Design: "Web or Native?"

Written by Aral Balkan, Reviewed by Josh Clark and Anders M. Andersen

Footnotes

1. Presentation: "Understanding 'The Other': Roles, Process and Architecture for RIAs" by Aral Balkan
3. Apples iOS "Human Interface Guidelines"
4. Feathers
5. Swype keyboard
6. Çelik, Tantek. "Web Human Interface Guidelines" & Hewitt, Joe. "Web Technologies Need an Owner".
7. Statement: "If you are not paying for it, you're not the customer; you're the product being sold." by Andrew Lewis
10. Balkan, Aral. "My websites will only support the latest browser versions".
11. Topolsky, Joshua. "A modest proposal: the Continuous Client".
15. Whinnery, Kevin. "The Future of Titanium Desktop".

Figures

• Figure 9.1. Image by David Jones
• Figure 9.7. Image "Layers" by Rosmarie Voegtli
• Figure 9.10. Sample App: Continuous client experience
• Figure 9.11. Image on the Trillian Blog
• Figure 9.13. Comment by Lea Verou

Chapter 10: Workflow Redesigned: A Future-Friendly Approach

Written by Stephen Hay, Reviewed by Bryan Rieger

Footnotes

1. CSS Flexible Box Layout Module & Tutorial: Learn You a Flexbox for Great Good!
2. Marcotte, Ethan. "Responsive Web Design".
3. Wroblewski, Luke. "Mobile First".
4. Few, Stephen. PDF: "Bullet Graph Design Specification". & Wikipedia: Bullet graph

Figures

1. Figure 10.1. Image "You Are Here" by Joe Goldberg
2. Figure 10.2. Image by Fabrice Florin, Wikimedia Foundation, licensed under the CC-BY-SA and GFDL license.
3. Figure 10.9. Pandoc - a universal document converter

Chapter 11: Becoming Fabulously Flexible: Designing Atoms and Elements

Written by Andy Clarke

Footnotes

1. Hume, Andy. "Responsive by default".
2. Clarke, Andy. "I don’t care about Responsive Web Design".
3. Wikipedia: Animal Magic (TV series)
4. Allsopp, John. "A Dao of Web Design".
5. Dreamweaver FAQ: Using Frames To Align Page Content
6. Santa Maria, Jason. "A List Apart Redesign".
7. Clarke, Andy. "A List (taken) Apart".
8. Hicks, John. "Is 1024 OK?".
9. Keith, Jeremy. "A List Too Far Apart?".
10. Santa Maria, Jason. "A Real Web Design Application".
12. Rieger, Stephanie. "The 'trouble' with Android".
13. Marcotte, Ethan. "Responsive Web Design".
14. Walton, Trent. "Content Choreography".
15. Warren, Samantha. "Style Tiles as a Web Design Process Tool".
16. Style Tiles by Samantha Warren
17. Twitter Bootstrap
18. Dribbble
19. BBC's GEL (Global Experience Language)
20. MailChimp
22. Food Sense
23. Jay Stocks, Elliot. "The Typography-Out Approach In The World Of Browser-Based Web Design"
24. Jamie Oliver
25. BBC Food
26. BBC GEL (Global Experience Language): Fonts

Errata

Although we tried to do our best to avoid any mistakes or errors in the book, we did make some mistakes. We apoplogize for that. Here is the list of the mistakes we've found so far (you can also report mistakes and errors in the book):

• Page 28: "WebSort" is mistakenly spelled 'Websort' in the footnotes.
• Page 72: "WebKit" is mistakenly spelled 'Webkit'.
• Page 78: "Webserver" is mistakenly spelled 'Web server'.
• Page 83: In the code snippet <time datetime="2012-01-01">1 January 2012</datetime> the end tag should be </time>, not </datetime>
• Page 132: basic stylesheet is introduced as 0-up.css, but then for the rest of the chapter it's o-up.css. Of course, the file name should be 0-up.css in the chapter.
• Page 143: in the footnote, the phrase "convent inventory" should be "content inventory".
• Page 144, line 7: "sentences were squeeze into..." should be "squeezed".
• Page 175: Quote mistake, "Contextual Words Like 'Continue' are Usabilty Poison" instead of "Continue".
• Page 194: "and has since modified it's process..." — redundant apostrophe.
• Page 199: The screen resolution of iPhone 4 and iPhone 4S in the table is wrong. The chapter states "320×480" but the correct resolution is 640×960px (Retina display).
• Page 243: Quote should be: Forbes, "Why Does Emotional Design Work on the Web."
• Page 243: "In his talk at the Warm Gun conference in 211, McClure..." Missing digit in the year. Correct would be '2011'
• Page 298: "just as quickly as as you could in a word processor" — "as" repeated twice.
• Page 245: "personae" is mistakenly spelled "personas".
• Page 256: The pull quote, “Designing an application is as much about drawing a pretty picture of an application…” is actually not a pull quote as it has been cut from the body text. (A pull quote should be a quote from the text that is pulled out.)
• Page 257: In the call-out box titled “Outside In Is Good, Inside Out Is Bad”, I’d kern the TM symbol closer to the “g” so that it is essentially floating above the full stop.
• Page 262: "read" is mistakenly spelled 'ead' in the footnotes.
• Page 262: By inserting, “such as the Web”, we’ve accidentally altered the meaning of the sentence completely so that it has become meaningless. The right paragraph is: "Similarly, on native platforms that do not have a strong, consistent visual language and culture–such as Android–or on native platforms that are notorious for being difficult and confusing to use–such as Microsoft Windows–non-native applications will have less of a handicap. They might even, ironically, provide better usability and user experiences in some situations."
• Page 262: the paragraph "Using a desktop mail client on an operating system (OS) such as Windows could require you to find and install the application itself, keep it updated, keep your mail, synced between your various devices, and make sure messages are checked for viruses and other malware." should read "Using a desktop mail client on an operating system (OS) such as Windows could require you to find and install the application itself, keep it updated, keep your mail synced between your various devices, and make sure messages are checked for viruses and other malware."
• Page 262: "Different browsers (that is, applications that run native Web apps) implement the bahavior of core form controls differently." should be "Different browsers (that is, native applications that run Web apps) implement the bahavior of core form controls differently."
• Page 263, Figure 9.7 caption should read: "A browser is an application that runs in the context of the OS. In other words, a browser is a native application. A Web app, on the other hand, is an application that runs in the context of the browser. It is not a native application since it has one degree of separation (the browser) between it and the OS. Similarly, a Flash app runs in the context of a Web app. It is not a native Web application since it has one degree of separation (the web app) between it and the browser. Flash apps, therefore, as not native to the browser, just as Web apps are not native to the OS."
• Page 264: The phrase “native Web authoring technologies” should be “Web authoring technologies".
• Page 264: Quote should be: "If you are not paying for it, you're not the customer; you're the product being sold."
• Page 265 ff. OS' should be OS's.
• Page 266: In the “Ease of Deployment and Access” section, at the end of the first paragraph, “Simples.” has been mistakingly changed to “Simple.” “Simples” is the catch phrase of a meerkat called Nikolai who gained fame in a commercial for (of all things) car insurance. He’s a cute little guy. Check him out.
• Page 267: Figure 9.9: native Web applications should be changed to Web applications
• Page 267: Footnote 10: version less should be replaced with versionless.
• Page 269: technologies, e.g. iCloud make it... should be technologies, e.g., iCloud, make it...
• Page 275: 7% should be 70%, 3% should be 30%, 1% should be 10%.
• Page 277: Footnote 12: WebUI should be Web UI
• Page 278: The comma after Failing that has gone missing. It should read: Failing that,
• Page 280: Figure 9.15: Inside the table, on the Mono row: core deviceframeworks should read core device frameworks.
• Page 280: In the footnotes (1,2,3): The first line is capitalized, the other two are not. The other lines should be capitalized as well.
• Page 282: Even if you douse Titanium should read Even if you do use Titanium.
• Page 283: The advantages of building native applications using native technologies are versatile. should read The advantages of building native applications using native technologies are numerous.
• Page 283, under "Designing for Humans": This is not a decision to betaken lightly or brushed over. should read This is not a decision to be taken lightly or brushed over.
• Page 283: solves your own problems, not the users’ problems should read solves your own problems, not the user’s problems
• Page 283: the second-to-last paragraph should read: "If your choice of platforms and technologies is based simply on your perceived short-term business needs or on the current competencies of your team, then you are making a decision that solves your own problems, not the user’s problems. This may have short-term advantages, but you will not be able to compete in the long term with those who solve the user’s problems first. Your choice of technologies and platforms should be based on how best you can meet the user’s needs, not on ideological bias or on obtaining short-term gain at the risk of long-term loss."
• Page 283: the final paragraph should read "Remember that there are already too many things out there. We don’t need more things. We need things that work better. Make things that inform, empower and delight. And use the right tools and technologies for the job."
• Page 325: "Environment" (description text Figure 11.2.) is mistakenly spelled 'enviroment'.
• Page 266: from “While some designers…” to “…are catching up to Web applications.” the text should be: We keep hearing that “the Web is catching up to native.” What people mean when they say this is that Web authoring technologies are getting better access to device features such as touch, hardware-accelerated graphics, GPS, accelerometer support and cameras. What is rarely mentioned, however, is how native applications are catching up to Web applications.”
• Page 325: "Dribbble" (description text Figure 11.2.) is mistakenly spelled 'Dribble'.