Upload
josh-jeffryes
View
1.504
Download
0
Tags:
Embed Size (px)
DESCRIPTION
This is an expanded, longer version of my Lean Responsive presentation, with full notes.
Citation preview
Build and Test Just What You Need, When You Need it, On Any Screen.
Minimum Viable Introduction
I’m Josh Jeffryes, Lead UI Developer at The College Board
Minimum Viable Introduction
I also help startups around the world with UX, Technology, and Lean
Methodology
What Is Lean Responsive?
?
What Is Lean Responsive?
+
It’s Two Buzzwords.
What Is Lean Responsive?
It’s Two Buzzwords.
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?
In Other Words:
Only one assumption should be provably wrong with each 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
Lean:
Replaces ego with actually knowing things.
What Is Lean Responsive?
Responsive Design:
Build experiences that adapt to any screen, even ones that don’t exist yet.
What Is Lean Responsive?
What Is Lean Responsive?
From 1” To 20” To 84”
We can’t predict what size screen a user will have...
so we have to design for all of them.
What Is Lean Responsive?
We do this by adapting the layout and design based on screen size.
Things move, shrink, or disappear.
A B CA
BC
B A
C
B
Desktop Tablet Phone
What Is Lean Responsive?
This happens through the magic of media queries
And sometimes JavaScript.
What Is Lean Responsive?
So now what?
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 or design
What Is Lean Responsive?
Most Importantly...
None of this requires any fancy
frameworks or libraries, and you don’t need a black belt in code ninja-
ing to do it.
jpHTML
How is this possible?
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.
An Example
Let me give you an example.
An Example
Cat Wars- Pretty- Full of wonderful
candy- Client loves it
An Example
Cat Wars- Pretty- Full of wonderful
candy- Client loves it- Completely useless
for testing
An Example
Cat Wars- Takes a long time- Wastes money- Always wrong
An Example
Cat Wars- This many layer
effects can never be right.
An Example
Now you can test the most important thing:The Idea
An Example
If people won’t do this...
An Example
They’ll never do this.
An Example
This = This
An Example
No CSS was harmed in the making of this test
An Example
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;}}
H1 { font-size: 2rem; }
A Pinch of Code
Desktop Tablet
Headline is 20px Headline is 24px
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
The Wild, Wild Test
The Wild, Wild Test
Testing your apps in the wild is only slightly harder.
You just have to use the internet.
The Wild, Wild Test
First, get hosting.
Your Site Here
The Wild, Wild Test
Google Analytics is great for analytics.
One snippet of JavaScript
The Wild, Wild Test
Test forms and collect dataUse Wufoo
The Wild, Wild Test
All the Data You Need for Lean Responsive
Sufficiently Advanced
If you want, you can get really responsive.
Sufficiently Advanced
Twitter Bootstrap – grids and components
Foundation – pretty much the same thing
Mobify.js – this is more for ninja stuff
You can do cool things with data on-screen.
Sufficiently Advanced
Angular – make HTML do JavaScripty stuff
KnockOut – a lightweight MVC framework
Sufficiently Advanced
If you know JavaScript but not backend, you don’t need a backend.
Deployd
FireBase
Backlift