Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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 Barcelona, 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 Features18,” 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-Book19,” 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 Layout20,” 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 Layout21

How We Improved Page Speed by Cleaning CSS, HTML and Images22,” 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 Images23

Mein Honig – Brand Identity24,” 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: GitHub26,” JP Castro
Castro analyzes the front-end performance of GitHub and shares his findings.

GitHub: Front End Performance Case Study27

iPad to Windows Store App28,” 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)29

Behind the Scenes of Mad Manimation30,” 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.31

Mad Manimation: Behind the Scenes32

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

Freckle: Embedding Canvas and SVG charts in emails34

Scaling Pinterest From 0 to 10s of Billions of Page Views a Month in Two Years35,” 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 Years36

How We Built a Photoshop Extension With HTML, CSS and JS37,” 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 Extension38

Batch Processing Millions and Millions of Images39,” 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 Images40

Making 100,000 Stars41,” 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 Rocks42

Mastering the Application Cache Manifest for Offline Web Apps and Performance43,” 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 Offlin44

Harvey: A Second Face for Your JavaScript45,” 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      46

Our First Node.js App: Backbone on the Client and Server47,” 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 App49,” 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 App50

The Making of the Interactive Treehouse Ad51,” 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 Design52,” 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 Tesco53,” 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 Sass54,” 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 Fat55,” 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 Explorations56,” Paul Lloyd
Lloyd of Clearleft talks about how to maintain knowledge-sharing and collaboration on a growing team.

Visual design explorations57

The Anatomy of an Experience Map58,” 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 Map59

The design process of my infographic for the ‘Tour of France’ for Grinta!60,” 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 Profit62,” 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 Study63

“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%64,” 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 Site65,” 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 66,” 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 Studies67,” 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 Coalface68,” Chris Berridge
Working on the frontline, Berridge share his insights on responsive design and returns on investment.

cxpartners:Responsive Design & ROI – observations from the c69

Making Your Site Responsive: Mastering Real-World Constraints70,” 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 Constraints71

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

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

How a Simple Redesign Increased Customer Feedback by 65%74,” 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%75

More on Apples: Mobile Optimization in Ecommerce76,” 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 Evaluation77,” 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 Project78

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 Business79 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
  79. 79
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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