SlideShare a Scribd company logo
1 of 38
Download to read offline
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.
ALeanIteration
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
Lean Responsive
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
Thank You
Lead UI Developer at
The College Board
@jjeffryes
jjeffryes@gmail.com

More Related Content

What's hot

what's blocking our way
what's blocking our waywhat's blocking our way
what's blocking our waytanvir afzal
 
Agile Software Development for Non-Developers
Agile Software Development for Non-DevelopersAgile Software Development for Non-Developers
Agile Software Development for Non-Developershamvocke
 
What Happens After The Prototype
What Happens After The Prototype What Happens After The Prototype
What Happens After The Prototype Steve Owens
 
Project Management Growth Practices
Project Management Growth PracticesProject Management Growth Practices
Project Management Growth PracticesAmir Shokri
 
Learn Unit Testing and Improve Sexual Performance
Learn Unit Testing and Improve Sexual PerformanceLearn Unit Testing and Improve Sexual Performance
Learn Unit Testing and Improve Sexual PerformanceBill Shelton
 
Working without a Product Owner by Maaret Pyhajarvi at #AgileIndia2019
Working without a Product Owner by Maaret Pyhajarvi at #AgileIndia2019Working without a Product Owner by Maaret Pyhajarvi at #AgileIndia2019
Working without a Product Owner by Maaret Pyhajarvi at #AgileIndia2019Agile Software Community of India
 
Software Craftsmanship @ Ntnu
Software Craftsmanship @ NtnuSoftware Craftsmanship @ Ntnu
Software Craftsmanship @ Ntnugoeran
 
Too Frequent Continuous Integration Build Failures?
Too Frequent Continuous Integration Build Failures?Too Frequent Continuous Integration Build Failures?
Too Frequent Continuous Integration Build Failures?Vivek Ganesan
 
Agileee 2013: Andrii Dzynia "How To Manage Testing in Agile World"
Agileee 2013: Andrii Dzynia "How To Manage Testing in Agile World"Agileee 2013: Andrii Dzynia "How To Manage Testing in Agile World"
Agileee 2013: Andrii Dzynia "How To Manage Testing in Agile World"SCRUMguides
 
Better than google.
Better than google.Better than google.
Better than google.JooLino11
 
Making your design vision a reality
Making your design vision a realityMaking your design vision a reality
Making your design vision a realityGrant Thomas-Lepore
 
The Software Craftsman (2nd edition)
The Software Craftsman (2nd edition)The Software Craftsman (2nd edition)
The Software Craftsman (2nd edition)goeran
 
corporateJavascript
corporateJavascriptcorporateJavascript
corporateJavascriptclimboid
 
The Software Craftsman
The Software CraftsmanThe Software Craftsman
The Software Craftsmangoeran
 
Good Enough Prototype (Ivan Pashko Product Stream)
Good Enough Prototype (Ivan Pashko Product Stream)Good Enough Prototype (Ivan Pashko Product Stream)
Good Enough Prototype (Ivan Pashko Product Stream)IT Arena
 
Open NTF OpenSource is collaboration at its best and matters
Open NTF OpenSource is collaboration at its best and mattersOpen NTF OpenSource is collaboration at its best and matters
Open NTF OpenSource is collaboration at its best and mattersChristian Güdemann
 
The Software Developer
The Software DeveloperThe Software Developer
The Software DeveloperOlaogunJames
 
Are you a good scout? - PHPNW15 Track 3
Are you a good scout? - PHPNW15 Track 3Are you a good scout? - PHPNW15 Track 3
Are you a good scout? - PHPNW15 Track 3phpboyscout
 

What's hot (20)

what's blocking our way
what's blocking our waywhat's blocking our way
what's blocking our way
 
Agile Software Development for Non-Developers
Agile Software Development for Non-DevelopersAgile Software Development for Non-Developers
Agile Software Development for Non-Developers
 
What Happens After The Prototype
What Happens After The Prototype What Happens After The Prototype
What Happens After The Prototype
 
Project Management Growth Practices
Project Management Growth PracticesProject Management Growth Practices
Project Management Growth Practices
 
Learn Unit Testing and Improve Sexual Performance
Learn Unit Testing and Improve Sexual PerformanceLearn Unit Testing and Improve Sexual Performance
Learn Unit Testing and Improve Sexual Performance
 
Working without a Product Owner by Maaret Pyhajarvi at #AgileIndia2019
Working without a Product Owner by Maaret Pyhajarvi at #AgileIndia2019Working without a Product Owner by Maaret Pyhajarvi at #AgileIndia2019
Working without a Product Owner by Maaret Pyhajarvi at #AgileIndia2019
 
Better than google.
Better than google.Better than google.
Better than google.
 
Software Craftsmanship @ Ntnu
Software Craftsmanship @ NtnuSoftware Craftsmanship @ Ntnu
Software Craftsmanship @ Ntnu
 
Too Frequent Continuous Integration Build Failures?
Too Frequent Continuous Integration Build Failures?Too Frequent Continuous Integration Build Failures?
Too Frequent Continuous Integration Build Failures?
 
Agileee 2013: Andrii Dzynia "How To Manage Testing in Agile World"
Agileee 2013: Andrii Dzynia "How To Manage Testing in Agile World"Agileee 2013: Andrii Dzynia "How To Manage Testing in Agile World"
Agileee 2013: Andrii Dzynia "How To Manage Testing in Agile World"
 
Better than google.
Better than google.Better than google.
Better than google.
 
Making your design vision a reality
Making your design vision a realityMaking your design vision a reality
Making your design vision a reality
 
The Software Craftsman (2nd edition)
The Software Craftsman (2nd edition)The Software Craftsman (2nd edition)
The Software Craftsman (2nd edition)
 
corporateJavascript
corporateJavascriptcorporateJavascript
corporateJavascript
 
The Software Craftsman
The Software CraftsmanThe Software Craftsman
The Software Craftsman
 
Good Enough Prototype (Ivan Pashko Product Stream)
Good Enough Prototype (Ivan Pashko Product Stream)Good Enough Prototype (Ivan Pashko Product Stream)
Good Enough Prototype (Ivan Pashko Product Stream)
 
Open NTF OpenSource is collaboration at its best and matters
Open NTF OpenSource is collaboration at its best and mattersOpen NTF OpenSource is collaboration at its best and matters
Open NTF OpenSource is collaboration at its best and matters
 
The Software Developer
The Software DeveloperThe Software Developer
The Software Developer
 
Better than google.
Better than google.Better than google.
Better than google.
 
Are you a good scout? - PHPNW15 Track 3
Are you a good scout? - PHPNW15 Track 3Are you a good scout? - PHPNW15 Track 3
Are you a good scout? - PHPNW15 Track 3
 

Viewers also liked

Lean responsive - Expanded
Lean responsive - ExpandedLean responsive - Expanded
Lean responsive - ExpandedJosh Jeffryes
 
Replicon UX Presentation
Replicon UX PresentationReplicon UX Presentation
Replicon UX PresentationJosh Jeffryes
 
The anatomy of an international checkout page
The anatomy of an international checkout pageThe anatomy of an international checkout page
The anatomy of an international checkout pagemrscammels
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design mrscammels
 
jQuery Stack Overflow DevDays DC 2009
jQuery Stack Overflow DevDays DC 2009jQuery Stack Overflow DevDays DC 2009
jQuery Stack Overflow DevDays DC 2009Richard D. Worth
 

Viewers also liked (7)

Born mobile
Born mobileBorn mobile
Born mobile
 
Lean responsive - Expanded
Lean responsive - ExpandedLean responsive - Expanded
Lean responsive - Expanded
 
Changing media landscape 08022011
Changing media landscape 08022011Changing media landscape 08022011
Changing media landscape 08022011
 
Replicon UX Presentation
Replicon UX PresentationReplicon UX Presentation
Replicon UX Presentation
 
The anatomy of an international checkout page
The anatomy of an international checkout pageThe anatomy of an international checkout page
The anatomy of an international checkout page
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
jQuery Stack Overflow DevDays DC 2009
jQuery Stack Overflow DevDays DC 2009jQuery Stack Overflow DevDays DC 2009
jQuery Stack Overflow DevDays DC 2009
 

Similar to Lean Responsive

Get Faster - While You're Getting Better
Get Faster - While You're Getting BetterGet Faster - While You're Getting Better
Get Faster - While You're Getting Betterantoineg
 
Pragmatic guide to AB testing - Agile and Automation days 2019
Pragmatic guide to AB testing - Agile and Automation days 2019Pragmatic guide to AB testing - Agile and Automation days 2019
Pragmatic guide to AB testing - Agile and Automation days 2019Jakub Kurcek
 
Grails Worst Practices
Grails Worst PracticesGrails Worst Practices
Grails Worst PracticesBurt Beckwith
 
Upwork time log and difficulty 20160523
Upwork time log and difficulty 20160523Upwork time log and difficulty 20160523
Upwork time log and difficulty 20160523Sharon Liu
 
AD - Developer communication and Technology
AD - Developer communication and TechnologyAD - Developer communication and Technology
AD - Developer communication and TechnologyEnplore AB
 
DeKnowledge - Try us
DeKnowledge - Try usDeKnowledge - Try us
DeKnowledge - Try usBob Pinto
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your WebsiteFloown
 
JAZOON'13 - Sven Peters - How to do Kick-Ass Software Development
JAZOON'13 - Sven Peters - How to do Kick-Ass Software DevelopmentJAZOON'13 - Sven Peters - How to do Kick-Ass Software Development
JAZOON'13 - Sven Peters - How to do Kick-Ass Software Developmentjazoon13
 
DevDay 2013 - Building Startups and Minimum Viable Products
DevDay 2013 - Building Startups and Minimum Viable ProductsDevDay 2013 - Building Startups and Minimum Viable Products
DevDay 2013 - Building Startups and Minimum Viable ProductsBen Hall
 
Preparing for the WebGeek DevCup
Preparing for the WebGeek DevCupPreparing for the WebGeek DevCup
Preparing for the WebGeek DevCupbryanbibat
 
Selenium Users Anonymous
Selenium Users AnonymousSelenium Users Anonymous
Selenium Users AnonymousDave Haeffner
 
How to successfully grow a code review culture
How to successfully grow a code review cultureHow to successfully grow a code review culture
How to successfully grow a code review cultureNina Zakharenko
 
Agile Methodologies And Extreme Programming - Svetlin Nakov
Agile Methodologies And Extreme Programming - Svetlin NakovAgile Methodologies And Extreme Programming - Svetlin Nakov
Agile Methodologies And Extreme Programming - Svetlin NakovSvetlin Nakov
 
Test Driven Development and Automation
Test Driven Development and AutomationTest Driven Development and Automation
Test Driven Development and AutomationMahesh Salaria
 
Driving application development through behavior driven development
Driving application development through behavior driven developmentDriving application development through behavior driven development
Driving application development through behavior driven developmentEinar Ingebrigtsen
 
2009 10 28 The Lean Startup In Paris
2009 10 28 The Lean Startup In Paris2009 10 28 The Lean Startup In Paris
2009 10 28 The Lean Startup In ParisEric Ries
 
How To Do Kick-Ass Software Development, by Sven Peters
How To Do Kick-Ass Software Development, by Sven PetersHow To Do Kick-Ass Software Development, by Sven Peters
How To Do Kick-Ass Software Development, by Sven PetersZeroTurnaround
 
Enterprise Workflows When You Aren't Enterprise
Enterprise Workflows When You Aren't EnterpriseEnterprise Workflows When You Aren't Enterprise
Enterprise Workflows When You Aren't EnterpriseChris Tankersley
 

Similar to Lean Responsive (20)

Automated tests
Automated testsAutomated tests
Automated tests
 
That worked before
That worked beforeThat worked before
That worked before
 
Get Faster - While You're Getting Better
Get Faster - While You're Getting BetterGet Faster - While You're Getting Better
Get Faster - While You're Getting Better
 
Pragmatic guide to AB testing - Agile and Automation days 2019
Pragmatic guide to AB testing - Agile and Automation days 2019Pragmatic guide to AB testing - Agile and Automation days 2019
Pragmatic guide to AB testing - Agile and Automation days 2019
 
Grails Worst Practices
Grails Worst PracticesGrails Worst Practices
Grails Worst Practices
 
Upwork time log and difficulty 20160523
Upwork time log and difficulty 20160523Upwork time log and difficulty 20160523
Upwork time log and difficulty 20160523
 
AD - Developer communication and Technology
AD - Developer communication and TechnologyAD - Developer communication and Technology
AD - Developer communication and Technology
 
DeKnowledge - Try us
DeKnowledge - Try usDeKnowledge - Try us
DeKnowledge - Try us
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website
 
JAZOON'13 - Sven Peters - How to do Kick-Ass Software Development
JAZOON'13 - Sven Peters - How to do Kick-Ass Software DevelopmentJAZOON'13 - Sven Peters - How to do Kick-Ass Software Development
JAZOON'13 - Sven Peters - How to do Kick-Ass Software Development
 
DevDay 2013 - Building Startups and Minimum Viable Products
DevDay 2013 - Building Startups and Minimum Viable ProductsDevDay 2013 - Building Startups and Minimum Viable Products
DevDay 2013 - Building Startups and Minimum Viable Products
 
Preparing for the WebGeek DevCup
Preparing for the WebGeek DevCupPreparing for the WebGeek DevCup
Preparing for the WebGeek DevCup
 
Selenium Users Anonymous
Selenium Users AnonymousSelenium Users Anonymous
Selenium Users Anonymous
 
How to successfully grow a code review culture
How to successfully grow a code review cultureHow to successfully grow a code review culture
How to successfully grow a code review culture
 
Agile Methodologies And Extreme Programming - Svetlin Nakov
Agile Methodologies And Extreme Programming - Svetlin NakovAgile Methodologies And Extreme Programming - Svetlin Nakov
Agile Methodologies And Extreme Programming - Svetlin Nakov
 
Test Driven Development and Automation
Test Driven Development and AutomationTest Driven Development and Automation
Test Driven Development and Automation
 
Driving application development through behavior driven development
Driving application development through behavior driven developmentDriving application development through behavior driven development
Driving application development through behavior driven development
 
2009 10 28 The Lean Startup In Paris
2009 10 28 The Lean Startup In Paris2009 10 28 The Lean Startup In Paris
2009 10 28 The Lean Startup In Paris
 
How To Do Kick-Ass Software Development, by Sven Peters
How To Do Kick-Ass Software Development, by Sven PetersHow To Do Kick-Ass Software Development, by Sven Peters
How To Do Kick-Ass Software Development, by Sven Peters
 
Enterprise Workflows When You Aren't Enterprise
Enterprise Workflows When You Aren't EnterpriseEnterprise Workflows When You Aren't Enterprise
Enterprise Workflows When You Aren't Enterprise
 

Recently uploaded

Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 

Recently uploaded (20)

Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 

Lean Responsive

  • 1. Build and Test Just What You Need, When You Need it, On Any Screen.
  • 2. What Is Lean Responsive? +
  • 3. It’s Two Buzzwords. What Is Lean Responsive?
  • 4. I admit it. What Is Lean Responsive?
  • 5. It’s also the best way to build anything on the web. What Is Lean Responsive?
  • 6. Lean Part 1: Build only what you need, at the stage of development when you need it. What Is Lean Responsive?
  • 7. Lean Part 2: Gain maximum understanding at each step, before you build the next step. What Is Lean Responsive?
  • 8. 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. ALeanIteration
  • 9. Responsive Design: Build experiences that adapt to any screen, even ones that don’t exist yet. What Is Lean Responsive?
  • 10. You Got Responsive in my Leanupbutter What Is Lean Responsive?
  • 11. 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?
  • 12. jpHTML How does this happen? jpHTML
  • 14. jpHTML jpHTML is: • Automatically Responsive • Universally Supported • 100% Accessible • Generates Perfect SEO
  • 16. <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>
  • 18. 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
  • 19. 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.
  • 21. Bread Before Jam > Your Idea Design & Code
  • 22. 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.
  • 24. Bread Before Jam Cat Wars - Fully designed experience - Takes a long time - Too much noise, you can’t learn anything
  • 25. Bread Before Jam Now you can test the most important thing: The Idea
  • 26. Bread Before Jam If people won’t do this...
  • 27. Bread Before Jam They’ll never do this.
  • 29. Bread Before Jam If it takes more than an hour to build your prototype, you’re testing the wrong thing.
  • 30. A Pinch of Code { }
  • 31. It just takes a few lines of code to make your plain HTML more responsive. A Pinch of Code
  • 32. A page margin, base font, and more readable color: Html { font: 10px/12px Arial; } Body { margin: 1rem; color: #222; } A Pinch of Code
  • 33. 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
  • 34. Easy responsive images: Img { width: 100%; height: auto; } A Pinch of Code
  • 35. A persistent navigation bar: Nav { position: fixed; padding: 10px; background: #ccc; color: #fff; } A Pinch of Code
  • 37. 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
  • 38. Thank You Lead UI Developer at The College Board @jjeffryes jjeffryes@gmail.com