lean responsive
DESCRIPTION
Build better web and mobile experiences faster by building and testing only what you need on any device.TRANSCRIPT
![Page 1: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/1.jpg)
Build and Test Just What You Need, When You Need it, On Any Screen.
![Page 2: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/2.jpg)
What Is Lean Responsive?
+
![Page 3: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/3.jpg)
It’s Two Buzzwords.
What Is Lean Responsive?
![Page 4: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/4.jpg)
I admit it.
What Is Lean Responsive?
![Page 5: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/5.jpg)
It’s also the best way to build anything on the web.
What Is Lean Responsive?
![Page 6: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/6.jpg)
Lean Part 1:
Build only what you need, at the stage of development when you need it.
What Is Lean Responsive?
![Page 7: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/7.jpg)
Lean Part 2:
Gain maximum understanding at each step,
before you build the next step.
What Is Lean Responsive?
![Page 8: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/8.jpg)
What Is Lean Responsive?
What do we need to understand to advance beyond this step?
Build the minimum product that will produce that understanding.
Test product.Iterate
product.
Repeat until optimal solution
understood
Go to next step.
A L
ean
It
era
tion
![Page 9: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/9.jpg)
Responsive Design:
Build experiences that adapt to any screen, even ones that don’t exist yet.
What Is Lean Responsive?
![Page 10: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/10.jpg)
You Got Responsive in my Leanupbutter
What Is Lean Responsive?
![Page 11: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/11.jpg)
Responsive• Test anywhere, any device• The same way the final product
will be used
Lean• Build and test fast• Prove your ideas, not your code• No fancy frameworks or libraries
required
What Is Lean Responsive?
![Page 12: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/12.jpg)
jpHTML
How does this happen?
jpHTML
![Page 13: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/13.jpg)
Behold, the Awesome Power of jpHTML
![Page 14: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/14.jpg)
jpHTML
jpHTML is:• Automatically Responsive• Universally Supported• 100% Accessible• Generates Perfect SEO
![Page 15: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/15.jpg)
jpHTML stands for:
Just Plain HTML
![Page 16: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/16.jpg)
<h1>jpHTML</h1><p>Just Plain HTML is fluid, it expands to fill it's horizontal space.</p>
<h2>Minimally Viable Responsiveness</h2> <p>But only for linear layouts.</p> <h2>Brains are Linear</h2> <p>People perceive ideas in order. You should test them that way.</p>
![Page 17: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/17.jpg)
Desktop Mobile
![Page 18: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/18.jpg)
jpHTML
All you need is basic knowledge of HTML.• Headlines, paragraphs, lists• Form elements• Links• Simulate interactivity with links
that go to new pages • It’s even a legit use of
Dreamweaver
![Page 19: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/19.jpg)
jpHTML
Basic HTML is completely accessible and SEO friendly. It forces you to use H tags and paragraphs correctly.
Make this the foundation of your final product. Add CSS and JavaScript, but don’t change the structure.
If your idea works like this, it will work when it’s pretty too.
![Page 20: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/20.jpg)
Bread Before Jam
>
![Page 21: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/21.jpg)
Bread Before Jam
>
Your Idea Design & Code
![Page 22: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/22.jpg)
Bread Before Jam
Jam tells you what flavor a sandwich is.
Bread tells you it is a sandwich.
If you start with the jam, all you get is a mess.
![Page 23: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/23.jpg)
Bread Before Jam
An example.
![Page 24: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/24.jpg)
Bread Before Jam
Cat Wars- Fully designed
experience- Takes a long time- Too much noise, you
can’t learn anything
![Page 25: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/25.jpg)
Bread Before Jam
Now you can test the most important thing:The Idea
![Page 26: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/26.jpg)
Bread Before Jam
If people won’t do this...
![Page 27: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/27.jpg)
Bread Before Jam
They’ll never do this.
![Page 28: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/28.jpg)
Bread Before Jam
This = This
![Page 29: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/29.jpg)
Bread Before Jam
If it takes more than an hour to build your prototype, you’re testing the wrong
thing.
![Page 30: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/30.jpg)
A Pinch of Code
{ }
![Page 31: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/31.jpg)
It just takes a few lines of code to make your plain HTML more responsive.
A Pinch of Code
![Page 32: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/32.jpg)
A page margin, base font, and more readable color:
Html {font: 10px/12px Arial;
}
Body {margin: 1rem;color: #222;
}
A Pinch of Code
![Page 33: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/33.jpg)
Scale everything by media queries using rem (root em):
@media screen and (max-width: 959px) {html {font-size: 12px;}}
@media screen and (max-width: 480px) {html {font-size: 15px;}}
A Pinch of Code
![Page 34: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/34.jpg)
Easy responsive images:
Img {width: 100%;height: auto;
}
A Pinch of Code
![Page 35: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/35.jpg)
A persistent navigation bar:
Nav {position: fixed;padding: 10px;background: #ccc;color: #fff;
}
A Pinch of Code
![Page 36: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/36.jpg)
Sufficiently Advanced
![Page 37: Lean Responsive](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7af174a7959d3328b46fe/html5/thumbnails/37.jpg)
Know that you know how to do things right, you can kick it up a notch.
Components and Grids: Bootstrap, Foundation
CRUD operations: Angular, Knockout
Light Backend: Deployd, Firebase
Look these up, you’ll be amazed at what they can do.
Sufficiently Advanced