Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

“This Is How We Built It” Case Studies (Part 2)

We hope you enjoyed the first part1 of this case studies overview. Obviously we don’t want you to get lost, so just check out the list of categories again:

  1. Illustration, Graphics and Logo Design2
  2. Typography3
  3. Usability Design4
  4. Advertising, Promotion and E-Commerce5
  5. Redesigning Elements and Features6
  6. Complete (Re)branding and (Re)design7
  7. Content and Storytelling (appears on a new page)8
  8. Technical Challenges and Solutions9
  9. Workflow and Optimization10
  10. Last Click11

Content And Storytelling

Step-By-Step Landing Page Copywriting12,” Nathan Barry
The process of writing great copy for a landing page is covered step by step.

Step-By-Step Landing Page Copywriting | Nathan Barry13

The Art Of Storytelling Around An App14,” John Casey
This case study is about the art of storytelling in the app “The House That Went on Strike.”

The Art Of Storytelling Around An App15

“Rethinking the Case Study,” Christopher Butler
Butler explains what case studies are for and what a great one looks like, and he lays out a practical plan for writing one.

Rethinking the Case Study

Retiring The Portfolio Screenshot16,” James Young
You’ve probably noticed that portfolios nowadays are packed with detailed analysis, rather than screenshots. Take yours to the next level and learn how to create an amazing portfolio (such as the ones featured in this post).

Retiring The Portfolio Screenshot17

“Responsibly Leveraging Advanced Web Features,” Ryan Heap
Heap tells us about his full responsive redesign of Travois, a consulting firm focused on housing and economic development. The study includes topics such as progressive enhancement, responsive and responsible Web design, SVG, and the HTML5 History API.

My Notes on Writing an E-Book18,” Jonathan Snook
Several people have suggested that 2013 is the year of self-publishing. Jonathan Snook shares his process of writing and digital publishing.

Technical Challenges And Solutions

Beating Borders: The Bane of Responsive Layout19,” Joshua Johnson
Responsive design often requires setting widths in percentages. This is easy enough, until borders are thrown into the mix.

Beating Borders: The Bane of Responsive Layout20

How We Improved Page Speed by Cleaning CSS, HTML and Images21,” Lara Swanson
Page-loading time is a big part of the user experience. Dyn shows how it improved it simply by cleaning up the CSS, HTML and images.

How We Improved Page Speed By Cleaning CSS, HTML and Images22

Mein Honig – Brand Identity23,” Thomas Lichtblau
“My Honey makes people and bees happy. And if they are happy, nature is happy too.” This simple yet beautiful statement belongs to Mein Honig (My Honey), a personal project of Thomas Lichtblau from Austria. Thomas shares fascinating insights about a production, banding and packaging process in which he only used colorless, organic and traditional tools and materials.


Front-End Performance Case Study: GitHub25,” JP Castro
Castro analyzes the front-end performance of GitHub and shares his findings.

GitHub: Front End Performance Case Study26

iPad to Windows Store App27,” Bart Claeys and Qixing Zheng
This case study helps designers and developers who are familiar with iOS to reimagine their apps using design principles for Windows Store apps. Translate common UI and UX patterns found in iPad apps to Windows 8 apps.

Design case study: iPad to Windows Store app (Windows)28

Behind the Scenes of Mad Manimation29,” Anthony Calzadilla
Here is the process behing the Mad Manimation, an HTML- and CSS-based animation of the introduction to the Mad Men TV show. View the finished project.30

Mad Manimation: Behind the Scenes31

Embedding Canvas and SVG Charts in Emails32,” Thomas Fuchs
Learn how to use embedded canvas and SVG charts in email.

Freckle: Embedding Canvas and SVG charts in emails33

Scaling Pinterest From 0 to 10s of Billions of Page Views a Month in Two Years34,” Todd Hoff
This case study traces the evolution of Pinterest’s architecture, which was scaling fast, with a lot of incorrect choices made along the way

Scaling Pinterest - From 0 to 10s of Billions of Page Views a Month in Two Years35

How We Built a Photoshop Extension With HTML, CSS and JS36,” Brian Reavis
Creative Market’s extension is a Backbone.js Web app that lives inside of Photoshop. The team can update it without the user having to install an update. How does that work? Read up on it!

 Creative Market: How We Built a Photoshop Extension37

Batch Processing Millions and Millions of Images38,” Mike Brittain
Etsy wanted to redesign a few of its major sections and had to rescale over 135 million images in order to do it.

Etsy: Batch Processing Millions and Millions of Images39

Making 100,000 Stars40,” Michael Chang
Chang writes about 100,000 Stars, an experience for Chrome that was built with Three.js and CSS3D.

Making 100,000 Stars - HTML5 Rocks41

Mastering the Application Cache Manifest for Offline Web Apps and Performance42,” Julien Nicault
Nicault, who work on Cinémur, a new social film app, describes how to use AppCache to improve performance and enable offline usage of Web apps

Cinémur: Mastering the Application Cache Manifest for Offlin43

Harvey: A Second Face for Your JavaScript44,” Joschka Kintscher
Responsive design often requires drastic UI changes. This study shows how to execute parts of your JavaScript depending on the device’s type and screen size.

Harvey: A Second Face for Your JavaScript      45

Our First Node.js App: Backbone on the Client and Server46,” Spike Brehm
The team at Airbnb has been curious about Node.js for a long time, but used it only for odds and ends. See how they used it on a production-scale project.


Making a 60fps Mobile App48,” Paul Lewis
Paul Lewis shows you how to make a mobile app that has 60fps at all times, does one thing really well, has offline support and a flat UI.

Making a 60fps Mobile App49

The Making of the Interactive Treehouse Ad50,” Chris Coyier
Treehouse is the primary sponsor of CSS-Tricks, and this case study looks at its interactive ad using jQuery.

Improve Mobile Support With Server-Side-Enhanced Responsive Design51,” Jon Arne Sæterås
This is an analysis of the process of finding the right mix between server-side and client-side logic for adaptive Web design.

“Designing an Instant Interface,” Luke Wroblewski
Wroblewski shows how to design the instant interface used for the real-time views, real-time notifications and real-time comments on Bagcheck’s website.

Lessons in Website Security Anti-Patterns by Tesco52,” Troy Hunt
Hunt looks closely at the many simple security errors Tesco makes, analyzing how he would apply basic security principles to remedy them.

Refactoring >14,000 Lines of CSS Into Sass53,” Eugene Fedorenko
Beanstalk is a mature product whose CSS grew accordingly to 5 files, 14,211 lines and 290 KB of code. Learn how the team rebuilt its style sheets into something cleaner and easier to maintain.

“Refinder: Test-Driven Development,” Maciej Pasternacki
These slides show how test-driven development enabled Gnowsis to reimplement Refinder’s basic data model.

“Managing JavaScript on Responsive Websites,” Jeremy Fields
Jeremy Fields of Viget talks about how to manage JavaScript on a website whose interface and functionality changes at different breakpoints.

Trimming the Fat54,” Paul Robert Lloyd
Lloyd walks through the performance optimizations he made for his website, trimming the page load from 383 to 100 KB. He also shows graphs.

Workflow And Optimization

Visual Design Explorations55,” Paul Lloyd
Lloyd of Clearleft talks about how to maintain knowledge-sharing and collaboration on a growing team.

Visual design explorations56

The Anatomy of an Experience Map57,” Chris Risdon
Experience maps are becoming increasingly useful for gaining insight in order to orchestrate service touch points over time and space. This study explains what they are and how to create them.

The Anatomy of an Experience Map58

The design process of my infographic for the ‘Tour of France’ for Grinta!59,” Veerle Pieters
Pieters designed an infographic about the Tour of France, and focused mainly on the question, “What does a pro cycling team take with them to the Tour of France?”


Turning Small Projects Into Big Profit61,” Jon Savage and Simon Birky Hartmann
Ace of Spade discusses how it overhauled its operations and started making a living off of small projects.

Turning Small Projects Into Big Profit, A Case Study62

“What We’ve Learned About Responsive Design,” Christopher Butler
Butler shares what his agency has learned about responsive design, which is to overcome initial fears and focus on what is important.

What We've Learned About Responsive Design

“The Modular Canvas: A Pragmatic Workflow for Designing Applications,” by Gabriel O’Flaherty-Chan
There are some gaps in the way we work; the bigger the project, the more glaring the gaps become. O’Flaherty-Chan looks at a better workflow for designing apps.


How We Reduced Our Cancellation Rate by 87.5%63,” Kareem Mayan
Kareem Mayan tackles the issue of user cancellations by using a cohort analysis. Learn how he did it.

How I Run a Membership Site64,” Justin Tadlock
This study looks at how Theme Hybrid handles memberships after registration and payment.

“Post-Implementation, Pre-Launch: A Crucial Checkpoint,” Mindy Wagner
Wagner of Viget discusses how to approach the time of post-implementation and pre-launch, a crucial checkpoint that can create a lot of stress for a team.

A New Make Mantra: A Statement of Design Intent 65,” Mark Boulton
Mark Boulton used the CERN redesign project as an occasion to define a new “make” mantra that would help him tackle projects. This single, actionable sentence would guide him through projects.

100 Conversion Optimization Case Studies66,” KISSmetrics
Lots of techniques and tactics to optimize your website for better conversions shared by marketers.

Responsive Design

Responsive Design and ROI: Observations From the Coalface67,” Chris Berridge
Working on the frontline, Berridge share his insights on responsive design and returns on investment.

cxpartners:Responsive Design & ROI – observations from the c68

Making Your Site Responsive: Mastering Real-World Constraints69,” Alex Fedorov
Listen to how agency Fresh Tilled Soil addressed real-world constraints, such as resources, time and budget, in its responsive design process.

Making Your Site Responsive — Mastering Real-World Constraints70

Goals, Constraints, and Concept in a Redesign71,” Steven Bradley
Some thoughts on the redesign of Vanseo Design.

Goals, Constraints, And Concept In A Redesign - Vanseo Design72

How a Simple Redesign Increased Customer Feedback by 65%73,” James Santilli
Customer feedback is the backbone of many Web services. Campaign Monitor analyzed the process behind a simple redesign that increased customer feedback by 65%.

How a simple redesign increased customer feedback by 65%74

More on Apples: Mobile Optimization in Ecommerce75,” Electric Pulp
This study analyzes how both mobile and non-mobile conversions went up when Electric Pulp redesigned a website to be responsive.

“How I’m Implementing Responsive Web Design,” Jeff Croft
Croft is finally at the point where responsive design feels worth the extra effort. Read about how he got there.

Last Click

Mentoring: The Evaluation76,” Laura Kalbag
Freelancers are often offered projects whose budget is below their rate. Laura Kalbag had a fantastic idea on how to transform these kind of projects into a win-win: She decided to mentor a group of students. Such a project would give the students an opportunity to gain valuable experience and help them transition into freelancing, and the client would get good quality work, despite the modest budget. This series of posts describes her experience, from initial idea to launched project.

Mentoring a Project77

Until Next Time

We hope this collection will prove to be a valuable resource in your quest to deliver great work. And we hope it will inspire you to share the knowledge and experience you’ve gained on your own.

If you do client work, make sure your contracts allow you to share it, so that you don’t get into trouble. Episode 20 of Unfinished Business78 talks about secrecy and non-disclosure agreements.

Are we missing your favorite case study? Share it with us in the comments!

(al) (il) (ea)


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8 #a7
  9. 9 #a8
  10. 10 #a9
  11. 11 #a10
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78

↑ Back to top Tweet itShare on Facebook

Former Smashing Editor Melanie completed her degree in Philosophy, Politics and Economics at Otago University, and is now freelancer and part-time politician. She's interested in many things like writing, web design, travelling and fire brigade, and tweets as @mel_in_media.

  1. 1

    nice article! The link to the “Mein Honig – Brand Identity,” isn’t working

  2. 3

    What a great (not to mention comprehensive) list of information. I’m digging in right now. :)


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top