The	  Minimal	  Viable	  Web                               Kristofer	  Layon                            <br/>	  developmen...
Part 1:                                     The Victorian Web      The Minimal Viable Web | Kristofer Layon | <br/> develo...
Part One:                                     The Victorian Web      The Minimal Viable Web | Kristofer Layon | <br/> deve...
Part One:                                     The Victorian Web      The Minimal Viable Web | Kristofer Layon | <br/> deve...
Part One:                                     The Victorian Web      The Minimal Viable Web | Kristofer Layon | <br/> deve...
Part One:                                     The Victorian Web      The Minimal Viable Web | Kristofer Layon | <br/> deve...
http://karenswhimsy.com/public-domain-images/victorian-dresses/images/victorian-dresses-2.jpg      The Minimal Viable Web ...
http://sf.blueherontours.com/2010/09/victorian-ferndale.html      The Minimal Viable Web | Kristofer Layon | <br/> develop...
http://karenswhimsy.com/public-domain-images/victorian-dresses/images/victorian-dresses-2.jpg      The Minimal Viable Web ...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And here’s an ironic examp...
http://extraecclesiam.files.wordpress.com/2010/03/haiti-earthquake-damage-ee602c9091fd9e2b.jpg      The Minimal Viable Web...
http://media.sacbee.com/static/weblogs/photos/images/2010/aug10/katrina_five_sm/katrina_five_18.jpg      The Minimal Viabl...
http://papers.risingsea.net/images-for-rolling-easements/Photo29.jpg      The Minimal Viable Web | Kristofer Layon | <br/>...
http://en.wikipedia.org/wiki/File:New_Orleans_Elevations.jpg      The Minimal Viable Web | Kristofer Layon | <br/> develop...
The	  dike	  has	  broken	  on	  our	  web	  designs.      The Minimal Viable Web | Kristofer Layon | <br/> development :f...
Part One:                                     The Victorian Web      The Minimal Viable Web | Kristofer Layon | <br/> deve...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And here’s how mobile scre...
Part 2:                              Modernism to the Rescue      The Minimal Viable Web | Kristofer Layon | <br/> develop...
(form follows function)      The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012An iconic example of Moder...
http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg      The Minimal Viable Web | Kristofe...
http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg      The Minimal Viable Web | Kristofe...
Part 3:                 Human Modernism — Focus on People      The Minimal Viable Web | Kristofer Layon | <br/> developmen...
(or the advent of user-centered product design)     The Minimal Viable Web | Kristofer Layon | <br/> development :focus on...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Another example from Aalto...
http://en.wikipedia.org/wiki/File:Edward_Johnston.png                                        Edward	  Johnston            ...
http://harrybeck.com/                                            Harry	  Beck                                           (1...
http://silviakarcheva91.files.wordpress.com/2011/04/img00311.jpg      The Minimal Viable Web | Kristofer Layon | <br/> dev...
http://www.tfl.gov.uk/assets/images/general/beckmap1.jpg      The Minimal Viable Web | Kristofer Layon | <br/> development...
http://shop.tfl.gov.uk/SiteData/Root/PrintShop/underground_map.gif      The Minimal Viable Web | Kristofer Layon | <br/> d...
http://markoffaith.files.wordpress.com/2011/10/london_underground_sign.jpg      The Minimal Viable Web | Kristofer Layon |...
http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg     The Minimal Viable Web | Kristofer...
http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg      The Minimal Viable Web | Kristofe...
http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg      The Minimal Viable Web | Kristofe...
http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg      The Minimal Viable Web | Kristofe...
It is always better to be                                                         slightly underdressed.                  ...
http://www.chanel.com/      The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 20...
http://www.chanel.com/      The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 20...
Part 4:              Mobile Can Help Us Make the Web Better      The Minimal Viable Web | Kristofer Layon | <br/> developm...
Pack Your Speedo,                                      We’re Mobilizing Web Sites!      The Minimal Viable Web | Kristofer...
Packing	  a	  carry-­‐on	  bag	  vs.	  a	  full-­‐size	  suitcase       • Some	  of	  the	  contents	  need	  to	  be	  pa...
What	  does	  this	  analogy	  illustrate	  for	            designing	  for	  the	  mobile	  context?       • Our	  purpos...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Stephanie Rieger made a si...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012I like how she is thinking...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Also in May 2012, Jeffrey ...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012But he clearly articulates...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012The design is simple yet p...
Part 5:                             Web Product Management      The Minimal Viable Web | Kristofer Layon | <br/> developme...
To design is to                                                           communicate clearly by                          ...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Like building a city below...
http://www.kfc.com/doubledown/      The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — Ju...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Authenticity in design is ...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Dan has always struck a ch...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Dan’s August 2011 blog pos...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012But more importantly, he a...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So taking baby steps is wh...
Determining	  priority:                       Maslow’s	  Hierarchy	  of	  Needs      The Minimal Viable Web | Kristofer La...
http://en.wikipedia.org/wiki/Abraham_Maslow                                       Abraham	  Maslow                        ...
Abraham Maslow, A Theory of Human Motivation, 1943      The Minimal Viable Web | Kristofer Layon | <br/> development :focu...
Local	  storage                                           Offline               Web	  sockets                               ...
You can have more than one group of priorities,                       yet everything can’t be a priority.                 ...
KanoModel                                                                                                         http://a...
http://www.van-cafe.com/shop/images/22S.419.091C.jpg      The Minimal Viable Web | Kristofer Layon | <br/> development :fo...
http://wac.450f.edgecastcdn.net/80450F/973thedawg.com/files/2011/11/fuel-gauge.jpg      The Minimal Viable Web | Kristofer...
http://1.bp.blogspot.com/-7y-e8Fm1_Ik/T6rYexg6AOI/AAAAAAAADOA/ELLTW_Lc5XQ/s1600/Crazy+Hair+Kelli.jpg          The Minimal ...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012In approaching a product, ...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Then it needs other basic ...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And it most certainly need...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012A windshield is mostly a b...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012An add-one feature like a ...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012The right balance of basic...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012On the other hand, the wro...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Determining the Minimal Vi...
http://www.dilbert.com                              Executives like graphs.      The Minimal Viable Web | Kristofer Layon ...
5  4                                                                                                         http://www.ve...
5  4                                                                                                         http://www.ve...
5  4                                                                                                         http://www.ve...
5   4                                                                                                         http://www.v...
5  4                                                                                                         http://www.ve...
5  4                                                                                                         http://www.ve...
<!DOCTYPE html>  <head>  <meta charset="utf-8">  <title>Mobilizing Web Sites | Kristofer Layon</title>  <meta name="author...
To purchase my book,                     people need to know the title.      The Minimal Viable Web | Kristofer Layon | <b...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So the results of setting ...
To be interested in my book,                people need to know the contents.      The Minimal Viable Web | Kristofer Layo...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So this is the next batch ...
To want to read my book,            people should see what they can learn.      The Minimal Viable Web | Kristofer Layon |...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So the next elements a vis...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012These three examples bring...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And as visitors see each e...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Pushing people immediately...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012The results of this initia...
The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Working iteratively in thi...
Part One:                                     The Victorian Web      The Minimal Viable Web | Kristofer Layon | <br/> deve...
Minimal Viable Web Design:       • Start with people       • Design from your content out       • The best visual design i...
Web Product Management:       •   Get away from your desk – talk to people       •   Write user stories       •   Road map...
@klayon             kris.layon@gmail.com                  kristoferlayon.comThe Minimal Viable Web | Kristofer Layon | <br...
Upcoming SlideShare
Loading in …5
×

The Minimal Viable Web

2,847 views
2,758 views

Published on

Published in: Design, Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,847
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

The Minimal Viable Web

  1. 1. The  Minimal  Viable  Web Kristofer  Layon <br/>  development  :focus  on  responsive June  4,  2012 Minneapolis,  MNWelcome to my presentation about the Minimal Viable Web. “Minimally viable” is a productmanagement term, used to bring a disciplined focus to increasing the value of a product. Soas the title implies, this presentation focuses on how to improve the web by managing it as aproduct that can be continually and iteratively improved.
  2. 2. Part 1: The Victorian Web The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012To best understand the Minimal Viable Web, we should first review how the web has beendesigned up until a few years ago. For the first 15 years or so, the web was stuck in theequivalent of the Victorian Age. An age in which designers paid a lot of attention to visualpresentation, often at the expense of content quality and overall responsiveness.
  3. 3. Part One: The Victorian Web The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012I remember when I was pulled into the Victorian Web — it was nine years ago, when the CSSZen Garden web site was brand new. Dave Shea created the site to showcase the power ofCSS; two years later, Peachpit published a book that was inspired by the site and written byShea and co-author Molly Holzschlag.
  4. 4. Part One: The Victorian Web The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012CSS Zen Garden is still pretty cool. The trouble is, it’s also kind of dangerous. As what CSSdoes in web standards, CSS Zen Garden separates style from content. So at the time, this feltliberating because it freed designers from cramming visual design into HTML tables.
  5. 5. Part One: The Victorian Web The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Except I think these examples separate design from content a bit *too* much. As you lookthrough the CSS Zen Garden designs today, you get pulled into them as pictures. At theexpense of the content, which becomes secondary to the visual examples.
  6. 6. Part One: The Victorian Web The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And when you get to themes like “Under the Sea” that feature a giant squid, you realize thatthere’s a complete disconnect between the style and content. It’s fun, beautiful, andgraphically well-designed. But the designs in these examples are superfluous. They’re pureornamentation.
  7. 7. http://karenswhimsy.com/public-domain-images/victorian-dresses/images/victorian-dresses-2.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012We’ve had plenty of other examples of elaborate ornamentation in design. This example of anilluminated manuscript is not only much older, but it is a bit different: it’s a complete fusionof style and content. It’s actually the print equivalent of laying out web pages in tables. So thesituation of favoring elaborate ornamentation in design is several centuries old.
  8. 8. http://sf.blueherontours.com/2010/09/victorian-ferndale.html The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012We see predecessors of the Victorian Web in Victorian architecture too. And I don’t mean tosay that this design is terrible — it isn’t. Nonetheless, the vibrant colors and intricateornamentation don’t have anything to do with the function of the architecture. Arguably, it’sanother example of excessive design. At least, it’s certainly not minimally viable.
  9. 9. http://karenswhimsy.com/public-domain-images/victorian-dresses/images/victorian-dresses-2.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And in fashion: quite a bit like CSS Zen Garden for the web. Only here, apparel is mostlyornamentation and style. It’s not designed to be lived in, to be accommodating, to beresponsive. This is stiff, formal dress. Excessively so. And it reflected values of the era: lackof freedom, lack of flexibility, lack of self-expression. Again, not at all minimally viable.
  10. 10. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And here’s an ironic example of Victorian design: “Keep It Simple,” typeset in elaborate,flowery typography. As the comment testifies, the typeface is far from simple. This is acomplete disconnect between content and style.
  11. 11. http://extraecclesiam.files.wordpress.com/2010/03/haiti-earthquake-damage-ee602c9091fd9e2b.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Not only have we pushed the level of design detail and control, people sometimes take toomany risks when they design. Here’s the palace in Port-au-Prince, Haiti — destroyed becausethat city was designed and built on a massive fault line. We can only control design until theuncontrollable forces of an earthquake take over.
  12. 12. http://media.sacbee.com/static/weblogs/photos/images/2010/aug10/katrina_five_sm/katrina_five_18.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Similarly, if we design beautiful houses but build them in places subject to hurricanes, wetake risks. Are the risks worth it? What are we really in control of here? This is another way tosee what happens when we push beyond what is minimally viable in our designs.
  13. 13. http://papers.risingsea.net/images-for-rolling-easements/Photo29.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Hurricane Katrina was the ultimate example of demonstrating human folly: designing anentire modern city in a place where it can be completely inundated by a hurricane. So onceagain, our design is only viable until it is exposed to forces that we cannot control.
  14. 14. http://en.wikipedia.org/wiki/File:New_Orleans_Elevations.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012This graphic that shows how we can flaunt our design confidence in the face of threats. Theentire city is under sea level! Once a hurricane raises the sea over the top of the dikes, it’s allover. Our hubris has been exposed. We are designing well beyond what we can control.
  15. 15. The  dike  has  broken  on  our  web  designs. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And so it is with mobile devices and the web: the dike has broken around the designs wethought were beautiful and safe. The sea change of small screens can wipe out all of ourelaborate desktop designs. We are not in control. And we never have been, really.
  16. 16. Part One: The Victorian Web The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012One example of this is Twitter. We can spend a lot of time designing the perfect backgroundimage for our Twitter stream when viewed on desktop.
  17. 17. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And here’s how mobile screens wipe out too much effort invested into design. It’s gone. Andthe majority of Twitter use is mobile, so a minority of users ever see the design of thebackground images. But here, at least it’s still minimally viable... and that’s the difference: inthis case, what matters is still there and it works. Only the additional ornamentation has beenlost.
  18. 18. Part 2: Modernism to the Rescue The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So if elaborate design and excessive ornamentation are risky, how do we proceed? PerhapsModernism can help us — Modernism appears to do a better job at focusing on what isminimally needed.
  19. 19. (form follows function) The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012In fact, Modernism was itself a sea change and has been helping to reinvent design for acentury. The central tenet of Modernism is paring back form and ornamentation, andprioritizing function instead. Sounds like a good way to proceed with a web that is minimallyviable instead of excessively ornamented in ways that won’t always deliver value.
  20. 20. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012An iconic example of Modernist design is the Savoy Vase by Alvar Aalto. It demonstrates howelegant form doesn’t need ornamentation to be effective and even beautiful. This is form,function, and material in perfect balance. The glass is allowed to express its own beauty andtruth. Just as web material — content — should.
  21. 21. http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Modernist homes follow a similar sensibility. They break down the barriers between form andfunction, and even between inside and outside. Modernist architecture also reduces barriersbetween nature and human life via its transparent, expansive planes. In many ways, it worksvery nicely.
  22. 22. http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And by allowing materials to be presented in a pure and unadulterated manner, their innerbeauty and inherent structural qualities are allowed to be directly expressed. The design isminimal — just enough to enhance the material and structure.
  23. 23. Part 3: Human Modernism — Focus on People The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Modernism is sometimes criticized for being cold, detached, and mechanical. And someexamples are. I would argue that the best Modernism, however, is intensely focused onhuman needs and desires. Human Modernism.
  24. 24. (or the advent of user-centered product design) The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Human Modernism is people-centered. And this Modernism introduced us to product design:using design to advance what people can do, and to help them do things better.
  25. 25. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Another example from Aalto: this isn’t just an aesthetic design for a sink. Aalto studied howwater came out of faucets and splashed in and out of sinks. His sink design minimizessplashing, thereby also making the sink quieter to use.
  26. 26. http://en.wikipedia.org/wiki/File:Edward_Johnston.png Edward  Johnston (1872-­‐1944) The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012One of my favorite examples of human-centered Modernism is in graphic design. It involvedtwo contributors, Edward Johnston and Harry Beck. Johnston designed one of the firstModern sans-serif typefaces for the London Underground. Named after him, Johnston is stillused today for all signage and the London Underground’s map.
  27. 27. http://harrybeck.com/ Harry  Beck (1902-­‐1974) The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Harry Beck redesigned the map itself, reconceptualizing how mapping could be done.
  28. 28. http://silviakarcheva91.files.wordpress.com/2011/04/img00311.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Prior to Beck’s and Johnston’s involvement, the London Underground’s map was rathertypical: the map was a bit too literal to be very useful, and the typographic design was notvery refined.
  29. 29. http://www.tfl.gov.uk/assets/images/general/beckmap1.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012The new design is a refined minimalism. The rail lines are much more cleanly depicted, makeit much easier to pick routes from one point to another. Stations are more clearly labeled withtype that is easier to read. And it is all color-coded to help customers quickly distinguish oneline from another.
  30. 30. http://shop.tfl.gov.uk/SiteData/Root/PrintShop/underground_map.gif The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012The redesign persists today, and even though it has been updated the core design is verymuch unchanged. Moreover, the London Underground map has become the template for allnearly other mass transit maps in production today around the world.
  31. 31. http://markoffaith.files.wordpress.com/2011/10/london_underground_sign.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Beck and Johnston did more than redesign the map: they extended their typography andgraphic standards to station signage and other communications. The result is one of the firstcorporate branding standards in history, and it remains one of the most recognizable brandsin the world — even to people who have never been to London.
  32. 32. http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012An example of a London Underground station sign, showing how outstanding its readabilityis and how easy to spot it is (even in the midst of busy Victorian architecture!).
  33. 33. http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Analyzing the London Underground further, it is important to consider its advertising. Notethe content: it is not focused on the service itself or its technology. It is instead focused onpeople’s needs and interests. Here, the ad makes the case that one can take the train to seethe Wimbledon tennis tournament.
  34. 34. http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And this poster isn’t selling the Underground as much as it is selling the London Zoo.
  35. 35. http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Once again, this poster design is less about the service itself and more about the reason fortraveling: getting to Chinatown. The London Underground has had a long tradition ofcommissioning these posters and having the content focused on things people do.
  36. 36. It is always better to be slightly underdressed. Coco Chanel The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Fashion is another example of design being revolutionized by Modernist thinking. One wouldthink that clothing has always been human-centered, but remember those elaborate Victoriandresses? Enter Coco Chanel: she pared fashion back to simple elegance, and made the casethat women’s fashion could be progressive and liberating, not stifling.
  37. 37. http://www.chanel.com/ The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Of course, Chanel is also a widely-recognized brand represented by a clean wordmark. Thedouble-C design has a double-meaning: it is Coco’s initials, and also represents the gold andsilver chains that she adorned her handbags with.
  38. 38. http://www.chanel.com/ The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Today, the tradition of Chanel is still the same: simple and elegant design, best representedby the classic “little black dress” and black handbag accessory.
  39. 39. Part 4: Mobile Can Help Us Make the Web Better The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So what can we learn from these examples? I think the lessons are: we should learn how todesign better by taking fewer risks, focusing more on customer needs, and letting theessence of our design be the least amount of design necessary to facilitate our product’scontent or service.
  40. 40. Pack Your Speedo, We’re Mobilizing Web Sites! The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012One metaphor for looking at how we should design for mobile is looking at how we can travelwith a carry-on bag instead of checking a large suitcase. Traveling lighter means travelingfaster: no waiting at the baggage claim when we arrive, and less to carry around afterwardswhen we’re underway.
  41. 41. Packing  a  carry-­‐on  bag  vs.  a  full-­‐size  suitcase • Some  of  the  contents  need  to  be  packed   differently • Other  items  need  to  be  a  smaller  or  less   bulky  version • And  someWmes  you  need  to  leave  some   things  behind The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Traveling with just a carry-on bag does require a different approach or design. You mightneed to roll some things up tightly instead of folding them loosely; travel-size toiletries areimportant; you have to more carefully edit what you decide to bring or leave behind.
  42. 42. What  does  this  analogy  illustrate  for   designing  for  the  mobile  context? • Our  purpose  stays  the  same • Our  strategy  changes • The  soluWon  is  a  mix  of  what  we  already   have  plus  some  new  things • The  result:  more  simple  +  lightweight The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012But traveling with just a carry-on doesn’t have to mean that our trip has to change. We cango to the same place we intended. We just pack differently. But if we do it right, we will stillhave what we need. And it will be less of a burden than trying to bring more than we reallyneed.
  43. 43. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Stephanie Rieger made a similar case about web design in May 2012.
  44. 44. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012I like how she is thinking here, because it’s less about making a new mobile site or even anexisting site mobile-optimized. She’s instead posing a different question: shouldn’t all sitesbe lightweight? Shouldn’t all sites be minimally designed and with minimal content?
  45. 45. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Also in May 2012, Jeffrey Zeldman asked a similar question rhetorically by redesigning hissite with a typeface that scales well to mobile screens. So he turned the tables, optimizing formobile only — and this results in type that arguably feels quite large for desktop.
  46. 46. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012But he clearly articulates that this design supports the core transaction that is being sought: atransaction between reader and writer. It’s not delivering more than is necessary. It will stillwork just fine on desktop, too.
  47. 47. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012The design is simple yet powerful: it makes the case that a single design, even simply andstarkly optimized for mobile instead of desktop, is a design for all use cases.
  48. 48. Part 5: Web Product Management The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Zeldman’s example and Rieger’s question both point in the same direction: managing theweb as a product, down to the barest core essentials. It’s about the Minimal Viable Web: whatis the least amount of web needed to do the job? Because the web is pretty darn big already.We don’t need more web; we just need better web.
  49. 49. To design is to communicate clearly by whatever means you can control or master. Milton Glaser The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Milton Glaser helps us circle back to the hurricane and earthquake devastation slides fromearlier: clear communications, and successful design, are centered on things that we cancontrol. We should minimize our investment in design that can be changed by external forcesor eliminated by others. Such design investment in more than is necessary is risky. How muchrisk do we want to take?
  50. 50. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Like building a city below sea level or homes right on the beach in hurricane-prone areas,pushing product management too far results in excess of one kind of another. Straying fromminimally viable design can result in some absurd product decisions.
  51. 51. http://www.kfc.com/doubledown/ The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012To the point that the very definition of what you’re designing can go off the tracks. Seriously,isn’t a sandwich a balance of bread and fillings? In this case, the product is a parody of itself;the ad even has to try to reassure us that it is real. Shouldn’t a good product be authentic enoughthat it doesn’t need reassurance?
  52. 52. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Authenticity in design is extremely important. And authenticity is also an important part ofthe Minimal Viable Web. In August 2011, Dan Cederholm wrote a great post on his Simplebitsblog about mobile optimization.
  53. 53. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Dan has always struck a chord with me: his low-key, sincere, New England sensibility resultsin clear, beautiful designs and outstanding presentations.
  54. 54. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Dan’s August 2011 blog post made me happy for two reasons: first, he validated myexcitement for mobile and responsive design, saying that it finally felt like web design. Yes!
  55. 55. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012But more importantly, he also walked through the first mobile version of Dribbble.com. Henoted that because it was an existing site with a tiny team, building anew with mobile firstwasn’t a great option for them.
  56. 56. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So taking baby steps is what they did: doing something, even if it’s not perfect or startingwith mobile first. This is exactly what I think everyone should do, too, if they’re not in aposition to jump into mobile first. Just take baby steps instead. Small, iterativeimprovements. You can always do more later.
  57. 57. Determining  priority: Maslow’s  Hierarchy  of  Needs The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012But not going mobile first does present other challenges. If you can’t do it all at once withrespect to mobile optimization, where do you begin? How do you decide? I suggest taking alook at Maslow’s Hierarchy of Needs.
  58. 58. http://en.wikipedia.org/wiki/Abraham_Maslow Abraham  Maslow (1908-­‐1970) The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Abraham Maslow was a pioneering developmental psychologist whose research and writingfocused on his theory of a hierarchy needs, motivation, self-actualization, and humanpotential.
  59. 59. Abraham Maslow, A Theory of Human Motivation, 1943 The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012This graphic of Maslow’s theory of human motivation illustrates needs in a pyramid, with themost fundamental needs at the bottom. Each layer needs to be met before you are able tofocus on the next level of needs. The first four layers are basic or “deficiency needs”; the toplayer is unique and the most advanced, considered “being needs”.
  60. 60. Local  storage Offline Web  sockets Transions HTML 5 Performance Respond Share Read Pinch+Zoom See Navigate Mobile Kristofer Layon, A Theory of Human Motivation, 2012 The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012I think this hierarchy can be used to systematically analyze features or enhancements to theweb, too. We need to be able to see and navigate above all else. Then we can focus onreading, and thereafter responding and sharing. After that, how fast or well this happens(performance) is important. Then there are “extras” like HTML 5.
  61. 61. You can have more than one group of priorities, yet everything can’t be a priority. (otherwise nothing is) Product management is about managing priorities. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012The discipline of product management is the discipline of analyzing a variety of needs,putting them in priority, and working with a team to focus on the right priorities, at the righttime, for the right reasons. It requires a blend of market understanding, savvycommunications and diplomacy, and enthusiasm for improving a product. But also patiencefor doing smaller amounts at a time.
  62. 62. KanoModel http://assets.baymard.com/blog/kano-model-full-res.png The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Maslow’s hierarchy of needs is one way to discern priorities. Another is to use the KanoModel, developed by Noriaki Kano, which classifies product attributes into three types: thosethat are basic, those that enhance performance, and those that delight people.
  63. 63. http://www.van-cafe.com/shop/images/22S.419.091C.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012A quick explanation by way of analyzing a car: a basic feature of a car is a steering wheel. Inother words, not having a steering wheel is a fundamental problem. It’s a basic requirement,so long as cars are actively steered by a human driver (maybe someday they won’t be).
  64. 64. http://wac.450f.edgecastcdn.net/80450F/973thedawg.com/files/2011/11/fuel-gauge.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012A performance attribute of a car is fuel efficiency. The less fuel it needs, the less it costs tooperate the car. This is enhanced performance.
  65. 65. http://1.bp.blogspot.com/-7y-e8Fm1_Ik/T6rYexg6AOI/AAAAAAAADOA/ELLTW_Lc5XQ/s1600/Crazy+Hair+Kelli.jpg The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012A delightful feature of a car could be a convertible top. Putting it down lets you sit in the sunand have the wind blow through your hair. It can make a car a lot of fun to drive, but itdoesn’t aid in performance and it is also not a basic function of a car.
  66. 66. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012In approaching a product, we can see how managing features and priorities with the Kanomodel can work. If we are building a car, it has to start with the basics like a frame.
  67. 67. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Then it needs other basic attributes: additional body parts and a steering wheel.
  68. 68. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And it most certainly needs wheels -- another basic requirement.
  69. 69. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012A windshield is mostly a basic requirement as well. But it also has performance attributes: ithelps make the car’s shape more streamlined, which aids in energy efficiency.
  70. 70. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012An add-one feature like a light bar on the roof is mostly a desirable attribute. Some peoplemight think it looks cool; it’s not a basic or performance feature.
  71. 71. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012The right balance of basic, performance, and desirable features makes the owner of the carhappy and satisfied.
  72. 72. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012On the other hand, the wrong balance of the three Kano attributes can get you in trouble.You don’t want to prioritize performance and desirable features until you have the key basicfeatures delivered. Desirable product features can’t make up for missing basic features.
  73. 73. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Determining the Minimal Viable Product, and then prioritizing how to continue improving it,can be done using a variety of tools. The Kano Model is one; a product roadmap is another.The roadmap helps you plan enhancements over time. The next quarter might be morecertain; after that, you might not be sure yet which priorities will rise to the top. Andsometimes priorities change.
  74. 74. http://www.dilbert.com Executives like graphs. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012A blend of these tools and visualizations are very helpful. Not just to help a product managermake decisions, but also to communicate them. Another key element of productmanagement is making everyone— from your customers and stakeholders to your designersand developers— understand how you are setting priorities. Charts and graphs can be veryhelpful and persuasive.
  75. 75. 5 4 http://www.veteranautocsodak.hu/kepek/trabant60126.jpg 3 2 1 Basic Performance Delight Trabant Kano attributes The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Here’s an example of a Kano chart that analyzes the Trabant, an East German car produceduntil the late 1980s when East and West Germany were reunified. As westerners, we wouldprobably assess this product in this way: all 1s on a 5 point scale.
  76. 76. 5 4 http://www.veteranautocsodak.hu/kepek/trabant60126.jpg 3 2 1 Basic Performance Delight Porsche Kano attributes The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Similarly, we might determine that a Porsche, another German car, would be all 5s. It notonly meets basic requirements for a car, its performance is high, it’s beautiful, and verydelightful to drive.
  77. 77. 5 4 http://www.veteranautocsodak.hu/kepek/trabant60126.jpg 3 2 1 Porsche Basic Performance Delight My opinion (2012) Kano attributes The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012On the other hand, it’s important to know your customers. What if the customer I’m trying tosatisfy is a parent of three children? Then a Porsche would rate lower on basics— not enoughroom for those kids. Performance-wise, it’s also an inefficient vehicle for family tasks likegetting groceries. It’s still delightful, but not a solid 5 points when this customer isconsidered.
  78. 78. 5 4 http://www.veteranautocsodak.hu/kepek/trabant60126.jpg 3 2 1 Toyota Minivan Basic Performance Delight My opinion (2012) Kano attributes The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Whereas a Toyota minivan, which is decidedly unexciting and common, would rate highly inall categories for a family with several children. It has a lot of room, is fuel efficient, can haula lot, and has doors you can open remotely. It’s a great mix of basic, performance, anddelight for that customer.
  79. 79. 5 4 http://www.veteranautocsodak.hu/kepek/trabant60126.jpg 3 2 1 Trabant Basic Performance Delight East German opinion (1985) Kano attributes The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Returning a moment to the Trabant: before the demise of the Iron Curtain and theintroduction of a free market to a reunified Germany, the Trabant was a good car. Because itwas the only car available. Another example of context for product success: time and place.
  80. 80. 5 4 http://www.veteranautocsodak.hu/kepek/trabant60126.jpg 3 2 1 Trabant Basic Performance Delight East German opinion (1995) Kano attributes The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012But after reunification and the introduction of a free market and consumer choice, no onebought Trabants and production of it stopped. The larger forces around it changed its value.The dike had broken. Just like the powerful forces of mobile have reduced the value of ourold Victorian web designs. Are our old web designs just as irrelevant and outdated as aTrabant?
  81. 81. <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Mobilizing Web Sites | Kristofer Layon</title> <meta name="author" content="Kristofer Layon" /> <meta name="description" content="Mobilizing Web Sites, with a foreword by Luke Wroblewski, is an introduction to designing web sites for smartphones. Learn how to use responsive design, jQuery Mobile, and PHP to optimize your existing web content for most mobile devices." /> </head> <body> <h1>Mobilizing Web Sites:<br>Develop and Design</h1> <h2>By Kristofer Layon</h2> <h3>Published in December 2011 by <a href="http://www.peachpit.com/authors/bio.aspx? a=d74fb49f-9e78-4f0f-8669-91b1b08c2ac7">Peachpit Press</a></h3> <h3>Contents</h3> <ul> <li><a href="foreword.html">Foreword by Luke Wroblewski</a></li> <li>An iterative approach to learning how to mobilize the web (without starting over)</li> <li>How you can embrace responsive design incrementally</li> <li>Mobilizing user experience design</li> <li>Mobilizing layout </li> <li>Mobilizing navigation</li> <li>Mobilizing images</li> <li>Mobilizing text</li> <li>Mobilizing forms</li> <li>Mobilizing social media</li> <li>Mobilizing content strategy</li> <li>Other methods: using jQuery Mobile</li> <li>Other methods: using PHP and device detection</li> </ul> <h2>News &amp; Reviews</h2> <p>&ldquo;This book reads like a perfectly structured day-long workshop. I like the practicality and humanity in it. Kris isnt a purist or an evangelist. He looks at the continuum of mobile presentation issues, asks you where you are on the continuum, and addresses you there. So dont be daunted by mobile, or wait to design for mobile until you can achieve perfection. Mobile is a journey. Use this book to plot your course.&rdquo;<br/ >Jeffrey Zeldman, author<br/><em>Designing With Web Standards</em></p> The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012To demonstrate how you can focus on delivering a Minimal Viable Web site that focuses onthe right priorities for the right reasons, we’ll consider some HTML from the web site aboutmy book “Mobilizing Web Sites”. The HTML is a basic attribute of this web product.
  82. 82. To purchase my book, people need to know the title. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012One of the priorities, or user stories, for my product is that my potential customers will needto know the title. So I prioritize that element high in my HTML. This is common sense, right?It’s how we build semantic HTML content.
  83. 83. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So the results of setting my title as an H1 looks like this, and it’s at the top of the page.
  84. 84. To be interested in my book, people need to know the contents. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012I determine that second in priority is the table of contents. If people need to scroll on a smallscreen, that’s what I want them to see next.
  85. 85. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So this is the next batch of content that visitors to my mobile site will see. It’s still probably abasic requirement, though it provides more detail on which to base a purchase decision. Soperhaps it’s also a performance attribute.
  86. 86. To want to read my book, people should see what they can learn. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012After knowing the title and the contents, the next user story for a customer is seeing theresults of reading my book. What can reading this book teach them to do afterwards?
  87. 87. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So the next elements a visitor encounters are the three case studies featured in the book.And because it’s on the web, these are links that take them to the three sites they can learnhow to build.
  88. 88. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012These three examples bring the book alive and demonstrate a blend of basic, performance,and delightful attributes. So this level of detail for my site starts veering into the delightfulcategory.
  89. 89. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012And as visitors see each example, they are hopefully getting excited about what they can do.“I can learn some jQuery Mobile, too? Awesome! I like how that looks!” These kinds ofreactions that I’m seeking are delightful — they’re emotional, and not just rational.
  90. 90. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Pushing people immediately into these examples without communicating the title andcontents first would not make sense. So I hope this example helps to explain how userstories for a product help set product priorities, which on the web can also help determinecontent and information hierarchy.
  91. 91. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012The results of this initial web work were, in this case, derived via mobile-first responsivedesign. I started with basic content objectives driven by the most important user stories todeliver. And it still works on the desktop, even though it doesn’t yet have an elaborategraphic design. I can always enhance the design over time. Or, this Minimal Viable approachmight prove to be enough.
  92. 92. The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Working iteratively in this fashion helps teams deliver a Minimal Viable Web product that candeliver all of the intended core value. It does not overreach and try to do too much at once.When you do that, you often end up with something that’s difficult to understand. A productthat tries too hard, to do too much, ends up actually having less value. Most successfulproducts are simple, focused products.
  93. 93. Part One: The Victorian Web The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012So remember the lessions of the CSS Zen Garden. It was very inspirational for its time, and itdemonstrated how to separate content from style in our HTML markup. But pay it another,closer visit today. See how design can be too excessive, too disconnected from content andpurpose, too Victorian.
  94. 94. Minimal Viable Web Design: • Start with people • Design from your content out • The best visual design is the least amount that is necessary • Iterate and add only if people need more • The result: simple + lightweight The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Minimal Viable Web design starts with human needs and the content or services people areseeking. It priorities content in a hierarchy, and then only adds as much visual enhancementas necessary. The results should aim to work on any device. If they work on a small screen,they will work on a large screen (and can always be progressively enhanced further fordesktop).
  95. 95. Web Product Management: • Get away from your desk – talk to people • Write user stories • Road map your product enhancements • Estimate + prototype user story solutions • Agile: iterate quickly, deliver, evaluate, repeat The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012Web Product management are the tools and processes you can use to develop the rightMinimal Viable Web for your customers. They are also the tools and processes you can use todevelop strong relationships with everyone involved: customers, stakeholders, designers, anddevelopers. It’s your job to make everyone understand your web product’s direction.
  96. 96. @klayon kris.layon@gmail.com kristoferlayon.comThe Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012

×