Lean Responsive
-
Upload
josh-jeffryes -
Category
Technology
-
view
3.801 -
download
2
description
Transcript of Lean Responsive
Build and Test Just What You Need, When You Need it, On Any Screen.
What Is Lean Responsive?
+
It’s Two Buzzwords.
What Is Lean Responsive?
I admit it.
What Is Lean Responsive?
It’s also the best way to build anything on the web.
What Is Lean Responsive?
Lean Part 1:
Build only what you need, at the stage of development when you need it.
What Is Lean Responsive?
Lean Part 2:
Gain maximum understanding at each step,
before you build the next step.
What Is Lean Responsive?
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
Responsive Design:
Build experiences that adapt to any screen, even ones that don’t exist yet.
What Is Lean Responsive?
You Got Responsive in my Leanupbutter
What Is Lean Responsive?
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?
jpHTML
How does this happen?
jpHTML
Behold, the Awesome Power of jpHTML
jpHTML
jpHTML is:• Automatically Responsive• Universally Supported• 100% Accessible• Generates Perfect SEO
jpHTML stands for:
Just Plain HTML
<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>
Desktop Mobile
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
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.
Bread Before Jam
>
Bread Before Jam
>
Your Idea Design & Code
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.
Bread Before Jam
An example.
Bread Before Jam
Cat Wars- Fully designed
experience- Takes a long time- Too much noise, you
can’t learn anything
Bread Before Jam
Now you can test the most important thing:The Idea
Bread Before Jam
If people won’t do this...
Bread Before Jam
They’ll never do this.
Bread Before Jam
This = This
Bread Before Jam
If it takes more than an hour to build your prototype, you’re testing the wrong
thing.
A Pinch of Code
{ }
It just takes a few lines of code to make your plain HTML more responsive.
A Pinch of Code
A page margin, base font, and more readable color:
Html {font: 10px/12px Arial;
}
Body {margin: 1rem;color: #222;
}
A Pinch of Code
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
Easy responsive images:
Img {width: 100%;height: auto;
}
A Pinch of Code
A persistent navigation bar:
Nav {position: fixed;padding: 10px;background: #ccc;color: #fff;
}
A Pinch of Code
Sufficiently Advanced
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