The Minimal Viable Web

The
Minimal
Viable
Web
Kristofer
Layon
<br/>
development
:focus
on
responsive
June
4,
2012
Minneapolis,
MN

Welcome to my presentation about the Minimal Viable Web. “Minimally viable” is a product
management term, used to bring a disciplined focus to increasing the value of a product. So
as the title implies, this presentation focuses on how to improve the web by managing it as a
product that can be continually and iteratively improved.

Part 1:
The Victorian Web

The Minimal Viable Web | Kristofer Layon | <br/> development :focus on responsive — June 4, 2012

To best understand the Minimal Viable Web, we should ﬁrst review how the web has been
designed up until a few years ago. For the ﬁrst 15 years or so, the web was stuck in the
equivalent of the Victorian Age. An age in which designers paid a lot of attention to visual
presentation, often at the expense of content quality and overall responsiveness.

Part One:
The Victorian Web


I remember when I was pulled into the Victorian Web — it was nine years ago, when the CSS
Zen Garden web site was brand new. Dave Shea created the site to showcase the power of
CSS; two years later, Peachpit published a book that was inspired by the site and written by
Shea and co-author Molly Holzschlag.

Part One:
The Victorian Web


CSS Zen Garden is still pretty cool. The trouble is, it’s also kind of dangerous. As what CSS
does in web standards, CSS Zen Garden separates style from content. So at the time, this felt
liberating because it freed designers from cramming visual design into HTML tables.

Part One:
The Victorian Web


Except I think these examples separate design from content a bit *too* much. As you look
through the CSS Zen Garden designs today, you get pulled into them as pictures. At the
expense of the content, which becomes secondary to the visual examples.

Part One:
The Victorian Web


And when you get to themes like “Under the Sea” that feature a giant squid, you realize that
there’s a complete disconnect between the style and content. It’s fun, beautiful, and
graphically well-designed. But the designs in these examples are superﬂuous. They’re pure
ornamentation.

http://karenswhimsy.com/public-domain-images/victorian-dresses/images/victorian-dresses-2.jpg

We’ve had plenty of other examples of elaborate ornamentation in design. This example of an
illuminated manuscript is not only much older, but it is a bit different: it’s a complete fusion
of style and content. It’s actually the print equivalent of laying out web pages in tables. So the
situation of favoring elaborate ornamentation in design is several centuries old.

http://sf.blueherontours.com/2010/09/victorian-ferndale.html

We see predecessors of the Victorian Web in Victorian architecture too. And I don’t mean to
say that this design is terrible — it isn’t. Nonetheless, the vibrant colors and intricate
ornamentation don’t have anything to do with the function of the architecture. Arguably, it’s
another example of excessive design. At least, it’s certainly not minimally viable.

http://karenswhimsy.com/public-domain-images/victorian-dresses/images/victorian-dresses-2.jpg

And in fashion: quite a bit like CSS Zen Garden for the web. Only here, apparel is mostly
ornamentation and style. It’s not designed to be lived in, to be accommodating, to be
responsive. This is stiff, formal dress. Excessively so. And it reﬂected values of the era: lack
of freedom, lack of ﬂexibility, lack of self-expression. Again, not at all minimally viable.


And here’s an ironic example of Victorian design: “Keep It Simple,” typeset in elaborate,
ﬂowery typography. As the comment testiﬁes, the typeface is far from simple. This is a
complete disconnect between content and style.

http://extraecclesiam.files.wordpress.com/2010/03/haiti-earthquake-damage-ee602c9091fd9e2b.jpg

Not only have we pushed the level of design detail and control, people sometimes take too
many risks when they design. Here’s the palace in Port-au-Prince, Haiti — destroyed because
that city was designed and built on a massive fault line. We can only control design until the
uncontrollable forces of an earthquake take over.

http://media.sacbee.com/static/weblogs/photos/images/2010/aug10/katrina_five_sm/katrina_five_18.jpg

Similarly, if we design beautiful houses but build them in places subject to hurricanes, we
take risks. Are the risks worth it? What are we really in control of here? This is another way to
see what happens when we push beyond what is minimally viable in our designs.

http://papers.risingsea.net/images-for-rolling-easements/Photo29.jpg

Hurricane Katrina was the ultimate example of demonstrating human folly: designing an
entire modern city in a place where it can be completely inundated by a hurricane. So once
again, our design is only viable until it is exposed to forces that we cannot control.

http://en.wikipedia.org/wiki/File:New_Orleans_Elevations.jpg

This graphic that shows how we can ﬂaunt our design conﬁdence in the face of threats. The
entire city is under sea level! Once a hurricane raises the sea over the top of the dikes, it’s all
over. Our hubris has been exposed. We are designing well beyond what we can control.

The
dike
has
broken
on
our
web
designs.


And so it is with mobile devices and the web: the dike has broken around the designs we
thought were beautiful and safe. The sea change of small screens can wipe out all of our
elaborate desktop designs. We are not in control. And we never have been, really.

Part One:
The Victorian Web


One example of this is Twitter. We can spend a lot of time designing the perfect background
image for our Twitter stream when viewed on desktop.


And here’s how mobile screens wipe out too much effort invested into design. It’s gone. And
the majority of Twitter use is mobile, so a minority of users ever see the design of the
background images. But here, at least it’s still minimally viable... and that’s the difference: in
this case, what matters is still there and it works. Only the additional ornamentation has been
lost.

Part 2:
Modernism to the Rescue


So if elaborate design and excessive ornamentation are risky, how do we proceed? Perhaps
Modernism can help us — Modernism appears to do a better job at focusing on what is
minimally needed.

(form follows function)


In fact, Modernism was itself a sea change and has been helping to reinvent design for a
century. The central tenet of Modernism is paring back form and ornamentation, and
prioritizing function instead. Sounds like a good way to proceed with a web that is minimally
viable instead of excessively ornamented in ways that won’t always deliver value.


An iconic example of Modernist design is the Savoy Vase by Alvar Aalto. It demonstrates how
elegant 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 and
truth. Just as web material — content — should.

http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg

Modernist homes follow a similar sensibility. They break down the barriers between form and
function, and even between inside and outside. Modernist architecture also reduces barriers
between nature and human life via its transparent, expansive planes. In many ways, it works
very nicely.


And by allowing materials to be presented in a pure and unadulterated manner, their inner
beauty and inherent structural qualities are allowed to be directly expressed. The design is
minimal — just enough to enhance the material and structure.

Part 3:
Human Modernism — Focus on People


Modernism is sometimes criticized for being cold, detached, and mechanical. And some
examples are. I would argue that the best Modernism, however, is intensely focused on
human needs and desires. Human Modernism.

(or the advent of user-centered product design)


Human 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.


Another example from Aalto: this isn’t just an aesthetic design for a sink. Aalto studied how
water came out of faucets and splashed in and out of sinks. His sink design minimizes
splashing, thereby also making the sink quieter to use.

http://en.wikipedia.org/wiki/File:Edward_Johnston.png
Edward
Johnston
(1872-‐1944)


One of my favorite examples of human-centered Modernism is in graphic design. It involved
two contributors, Edward Johnston and Harry Beck. Johnston designed one of the ﬁrst
Modern sans-serif typefaces for the London Underground. Named after him, Johnston is still
used today for all signage and the London Underground’s map.

http://harrybeck.com/
Harry
Beck
(1902-‐1974)

Harry Beck redesigned the map itself, reconceptualizing how mapping could be done.

http://silviakarcheva91.files.wordpress.com/2011/04/img00311.jpg

Prior to Beck’s and Johnston’s involvement, the London Underground’s map was rather
typical: the map was a bit too literal to be very useful, and the typographic design was not
very reﬁned.

http://www.tfl.gov.uk/assets/images/general/beckmap1.jpg

The new design is a reﬁned minimalism. The rail lines are much more cleanly depicted, make
it much easier to pick routes from one point to another. Stations are more clearly labeled with
type that is easier to read. And it is all color-coded to help customers quickly distinguish one
line from another.

http://shop.tfl.gov.uk/SiteData/Root/PrintShop/underground_map.gif

The redesign persists today, and even though it has been updated the core design is very
much unchanged. Moreover, the London Underground map has become the template for all
nearly other mass transit maps in production today around the world.

http://markoffaith.files.wordpress.com/2011/10/london_underground_sign.jpg

Beck and Johnston did more than redesign the map: they extended their typography and
graphic standards to station signage and other communications. The result is one of the ﬁrst
corporate branding standards in history, and it remains one of the most recognizable brands
in the world — even to people who have never been to London.


An example of a London Underground station sign, showing how outstanding its readability
is and how easy to spot it is (even in the midst of busy Victorian architecture!).


Analyzing the London Underground further, it is important to consider its advertising. Note
the content: it is not focused on the service itself or its technology. It is instead focused on
people’s needs and interests. Here, the ad makes the case that one can take the train to see
the Wimbledon tennis tournament.


And this poster isn’t selling the Underground as much as it is selling the London Zoo.


Once again, this poster design is less about the service itself and more about the reason for
traveling: getting to Chinatown. The London Underground has had a long tradition of
commissioning these posters and having the content focused on things people do.

It is always better to be
slightly underdressed.

Coco Chanel


Fashion is another example of design being revolutionized by Modernist thinking. One would
think that clothing has always been human-centered, but remember those elaborate Victorian
dresses? Enter Coco Chanel: she pared fashion back to simple elegance, and made the case
that women’s fashion could be progressive and liberating, not stiﬂing.

http://www.chanel.com/

Of course, Chanel is also a widely-recognized brand represented by a clean wordmark. The
double-C design has a double-meaning: it is Coco’s initials, and also represents the gold and
silver chains that she adorned her handbags with.

http://www.chanel.com/

Today, the tradition of Chanel is still the same: simple and elegant design, best represented
by the classic “little black dress” and black handbag accessory.

Part 4:
Mobile Can Help Us Make the Web Better


So what can we learn from these examples? I think the lessons are: we should learn how to
design better by taking fewer risks, focusing more on customer needs, and letting the
essence of our design be the least amount of design necessary to facilitate our product’s
content or service.

Pack Your Speedo,
We’re Mobilizing Web Sites!


One metaphor for looking at how we should design for mobile is looking at how we can travel
with a carry-on bag instead of checking a large suitcase. Traveling lighter means traveling
faster: no waiting at the baggage claim when we arrive, and less to carry around afterwards
when we’re underway.

Packing
a
carry-‐on
bag
vs.
a
full-‐size
suitcase

• Some
of
the
contents
need
to
be
packed

diﬀerently
• Other
items
need
to
be
a
smaller
or
less

bulky
version
• And
someWmes
you
need
to
leave
some

things
behind


Traveling with just a carry-on bag does require a different approach or design. You might
need to roll some things up tightly instead of folding them loosely; travel-size toiletries are
important; you have to more carefully edit what you decide to bring or leave behind.

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


But traveling with just a carry-on doesn’t have to mean that our trip has to change. We can
go to the same place we intended. We just pack differently. But if we do it right, we will still
have what we need. And it will be less of a burden than trying to bring more than we really
need.


Stephanie Rieger made a similar case about web design in May 2012.


I like how she is thinking here, because it’s less about making a new mobile site or even an
existing site mobile-optimized. She’s instead posing a different question: shouldn’t all sites
be lightweight? Shouldn’t all sites be minimally designed and with minimal content?


Also in May 2012, Jeffrey Zeldman asked a similar question rhetorically by redesigning his
site with a typeface that scales well to mobile screens. So he turned the tables, optimizing for
mobile only — and this results in type that arguably feels quite large for desktop.


But he clearly articulates that this design supports the core transaction that is being sought: a
transaction between reader and writer. It’s not delivering more than is necessary. It will still
work just ﬁne on desktop, too.


The design is simple yet powerful: it makes the case that a single design, even simply and
starkly optimized for mobile instead of desktop, is a design for all use cases.

Part 5:
Web Product Management


Zeldman’s example and Rieger’s question both point in the same direction: managing the
web as a product, down to the barest core essentials. It’s about the Minimal Viable Web: what
is 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.

To design is to
communicate clearly by
whatever means you can
control or master.

Milton Glaser


Milton Glaser helps us circle back to the hurricane and earthquake devastation slides from
earlier: clear communications, and successful design, are centered on things that we can
control. We should minimize our investment in design that can be changed by external forces
or eliminated by others. Such design investment in more than is necessary is risky. How much
risk do we want to take?


Like 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 from
minimally viable design can result in some absurd product decisions.

http://www.kfc.com/doubledown/

To the point that the very deﬁnition of what you’re designing can go off the tracks. Seriously,
isn’t a sandwich a balance of bread and ﬁllings? 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 enough
that it doesn’t need reassurance?


Authenticity in design is extremely important. And authenticity is also an important part of
the Minimal Viable Web. In August 2011, Dan Cederholm wrote a great post on his Simplebits
blog about mobile optimization.


Dan has always struck a chord with me: his low-key, sincere, New England sensibility results
in clear, beautiful designs and outstanding presentations.


Dan’s August 2011 blog post made me happy for two reasons: ﬁrst, he validated my
excitement for mobile and responsive design, saying that it ﬁnally felt like web design. Yes!


But more importantly, he also walked through the ﬁrst mobile version of Dribbble.com. He
noted that because it was an existing site with a tiny team, building anew with mobile ﬁrst
wasn’t a great option for them.


So taking baby steps is what they did: doing something, even if it’s not perfect or starting
with mobile ﬁrst. This is exactly what I think everyone should do, too, if they’re not in a
position to jump into mobile ﬁrst. Just take baby steps instead. Small, iterative
improvements. You can always do more later.

Determining
priority:
Maslow’s
Hierarchy
of
Needs


But not going mobile ﬁrst does present other challenges. If you can’t do it all at once with
respect to mobile optimization, where do you begin? How do you decide? I suggest taking a
look at Maslow’s Hierarchy of Needs.

http://en.wikipedia.org/wiki/Abraham_Maslow
Abraham
Maslow
(1908-‐1970)


Abraham Maslow was a pioneering developmental psychologist whose research and writing
focused on his theory of a hierarchy needs, motivation, self-actualization, and human
potential.

Abraham Maslow, A Theory of Human Motivation, 1943


This graphic of Maslow’s theory of human motivation illustrates needs in a pyramid, with the
most fundamental needs at the bottom. Each layer needs to be met before you are able to
focus on the next level of needs. The ﬁrst four layers are basic or “deﬁciency needs”; the top
layer is unique and the most advanced, considered “being needs”.

Local
storage Oﬄine

Web
sockets Transi'ons
HTML
5

Performance
Respond Share
Read Pinch+Zoom
See Navigate
Mobile
Kristofer Layon, A Theory of Human Motivation, 2012


I think this hierarchy can be used to systematically analyze features or enhancements to the
web, too. We need to be able to see and navigate above all else. Then we can focus on
reading, and thereafter responding and sharing. After that, how fast or well this happens
(performance) is important. Then there are “extras” like HTML 5.

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 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 right
time, for the right reasons. It requires a blend of market understanding, savvy
communications and diplomacy, and enthusiasm for improving a product. But also patience
for doing smaller amounts at a time.

Kano
Model

http://assets.baymard.com/blog/kano-model-full-res.png

Maslow’s hierarchy of needs is one way to discern priorities. Another is to use the Kano
Model, developed by Noriaki Kano, which classiﬁes product attributes into three types: those
that are basic, those that enhance performance, and those that delight people.

http://www.van-cafe.com/shop/images/22S.419.091C.jpg

A quick explanation by way of analyzing a car: a basic feature of a car is a steering wheel. In
other 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).

http://wac.450f.edgecastcdn.net/80450F/973thedawg.com/files/2011/11/fuel-gauge.jpg

A performance attribute of a car is fuel efficiency. The less fuel it needs, the less it costs to
operate the car. This is enhanced performance.

http://1.bp.blogspot.com/-7y-e8Fm1_Ik/T6rYexg6AOI/AAAAAAAADOA/ELLTW_Lc5XQ/s1600/Crazy+Hair+Kelli.jpg


A delightful feature of a car could be a convertible top. Putting it down lets you sit in the sun
and have the wind blow through your hair. It can make a car a lot of fun to drive, but it
doesn’t aid in performance and it is also not a basic function of a car.


In approaching a product, we can see how managing features and priorities with the Kano
model can work. If we are building a car, it has to start with the basics like a frame.


Then it needs other basic attributes: additional body parts and a steering wheel.


And it most certainly needs wheels -- another basic requirement.


A windshield is mostly a basic requirement as well. But it also has performance attributes: it
helps make the car’s shape more streamlined, which aids in energy efficiency.


An add-one feature like a light bar on the roof is mostly a desirable attribute. Some people
might think it looks cool; it’s not a basic or performance feature.


The right balance of basic, performance, and desirable features makes the owner of the car
happy and satisﬁed.


On 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 basic
features delivered. Desirable product features can’t make up for missing basic features.


Determining 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 more
certain; after that, you might not be sure yet which priorities will rise to the top. And
sometimes priorities change.

http://www.dilbert.com
Executives like graphs.


A blend of these tools and visualizations are very helpful. Not just to help a product manager
make decisions, but also to communicate them. Another key element of product
management is making everyone— from your customers and stakeholders to your designers
and developers— understand how you are setting priorities. Charts and graphs can be very
helpful and persuasive.

5
4

http://www.veteranautocsodak.hu/kepek/trabant60126.jpg
3
2
1 Basic Performance Delight
Trabant
Kano attributes

Here’s an example of a Kano chart that analyzes the Trabant, an East German car produced
until the late 1980s when East and West Germany were reuniﬁed. As westerners, we would
probably assess this product in this way: all 1s on a 5 point scale.

5
4

3
2
1 Basic Performance Delight
Porsche
Kano attributes

Similarly, we might determine that a Porsche, another German car, would be all 5s. It not
only meets basic requirements for a car, its performance is high, it’s beautiful, and very
delightful to drive.

5
4

3
2
1 Porsche
Basic Performance Delight
My opinion (2012)
Kano attributes

On the other hand, it’s important to know your customers. What if the customer I’m trying to
satisfy is a parent of three children? Then a Porsche would rate lower on basics— not enough
room for those kids. Performance-wise, it’s also an inefficient vehicle for family tasks like
getting groceries. It’s still delightful, but not a solid 5 points when this customer is
considered.

5
4

3
2
1 Toyota Minivan
My opinion (2012)
Kano attributes

Whereas a Toyota minivan, which is decidedly unexciting and common, would rate highly in
all categories for a family with several children. It has a lot of room, is fuel efficient, can haul
a lot, and has doors you can open remotely. It’s a great mix of basic, performance, and
delight for that customer.

5
4

3
2
1 Trabant
East German opinion (1985)
Kano attributes

Returning a moment to the Trabant: before the demise of the Iron Curtain and the
introduction of a free market to a reuniﬁed Germany, the Trabant was a good car. Because it
was the only car available. Another example of context for product success: time and place.

5
4

3
2
1 Trabant
East German opinion (1995)
Kano attributes

But after reuniﬁcation and the introduction of a free market and consumer choice, no one
bought 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 our
old Victorian web designs. Are our old web designs just as irrelevant and outdated as a
Trabant?

<!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 & Reviews</h2>
<p>“This book reads like a perfectly structured day-long workshop. I like the practicality and humanity in
it. Kris isn't 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 don't 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.”<br/
>Jeffrey Zeldman, author<br/><em>Designing With Web Standards</em></p>


To demonstrate how you can focus on delivering a Minimal Viable Web site that focuses on
the right priorities for the right reasons, we’ll consider some HTML from the web site about
my book “Mobilizing Web Sites”. The HTML is a basic attribute of this web product.

To purchase my book,
people need to know the title.


One of the priorities, or user stories, for my product is that my potential customers will need
to 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.


So the results of setting my title as an H1 looks like this, and it’s at the top of the page.

To be interested in my book,
people need to know the contents.


I determine that second in priority is the table of contents. If people need to scroll on a small
screen, that’s what I want them to see next.


So this is the next batch of content that visitors to my mobile site will see. It’s still probably a
basic requirement, though it provides more detail on which to base a purchase decision. So
perhaps it’s also a performance attribute.

To want to read my book,
people should see what they can learn.


After knowing the title and the contents, the next user story for a customer is seeing the
results of reading my book. What can reading this book teach them to do afterwards?


So 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 learn
how to build.


These 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 delightful
category.


And 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 of
reactions that I’m seeking are delightful — they’re emotional, and not just rational.


Pushing people immediately into these examples without communicating the title and
contents ﬁrst would not make sense. So I hope this example helps to explain how user
stories for a product help set product priorities, which on the web can also help determine
content and information hierarchy.


The results of this initial web work were, in this case, derived via mobile-ﬁrst responsive
design. I started with basic content objectives driven by the most important user stories to
deliver. And it still works on the desktop, even though it doesn’t yet have an elaborate
graphic design. I can always enhance the design over time. Or, this Minimal Viable approach
might prove to be enough.


Working iteratively in this fashion helps teams deliver a Minimal Viable Web product that can
deliver 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 product
that tries too hard, to do too much, ends up actually having less value. Most successful
products are simple, focused products.

Part One:
The Victorian Web


So remember the lessions of the CSS Zen Garden. It was very inspirational for its time, and it
demonstrated 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 and
purpose, too Victorian.

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


Minimal Viable Web design starts with human needs and the content or services people are
seeking. It priorities content in a hierarchy, and then only adds as much visual enhancement
as 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 for
desktop).

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


Web Product management are the tools and processes you can use to develop the right
Minimal Viable Web for your customers. They are also the tools and processes you can use to
develop strong relationships with everyone involved: customers, stakeholders, designers, and
developers. It’s your job to make everyone understand your web product’s direction.

@klayon
kris.layon@gmail.com
kristoferlayon.com


The Minimal Viable Web

More Related Content

Viewers also liked (13)

Similar to The Minimal Viable Web (20)

More from Kristofer Layon (6)

Recently uploaded (20)

The Minimal Viable Web