Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lean Responsive


Published on

Build better web and mobile experiences faster by building and testing only what you need on any device.

Published in: Technology
  • Be the first to comment

Lean Responsive

  1. 1. Build and Test JustWhat YouNeed, When YouNeed it, On AnyScreen.
  2. 2. What Is Lean Responsive?+
  3. 3. It’s Two Buzzwords.What Is Lean Responsive?
  4. 4. I admit it.What Is Lean Responsive?
  5. 5. It’s also the best way to buildanything on the web.What Is Lean Responsive?
  6. 6. Lean Part 1:Build only what you need, at the stage ofdevelopment when you need it.What Is Lean Responsive?
  7. 7. Lean Part 2:Gain maximum understanding at each step,before you build the next step.What Is Lean Responsive?
  8. 8. What Is Lean Responsive?What do we need to understand to advancebeyond this step?Build the minimum product that will producethat understanding.Test product. Iterate product.Repeat untiloptimal solutionunderstoodGo to next step.ALeanIteration
  9. 9. Responsive Design:Build experiences that adapt to anyscreen, even ones that don’t exist yet.What Is Lean Responsive?
  10. 10. You Got Responsive inmy LeanupbutterWhat Is Lean Responsive?
  11. 11. Responsive• Test anywhere, any device• The same way the final product willbe usedLean• Build and test fast• Prove your ideas, not your code• No fancy frameworks or librariesrequiredWhat Is Lean Responsive?
  12. 12. jpHTMLHow does this happen?jpHTML
  13. 13. jpHTMLjpHTML is:• Automatically Responsive• Universally Supported• 100% Accessible• Generates Perfect SEO
  14. 14. jpHTML stands for:Just Plain HTML
  15. 15. <h1>jpHTML</h1><p>Just Plain HTML is fluid, it expands to fill itshorizontal 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. Youshould test them that way.</p>
  16. 16. Desktop Mobile
  17. 17. jpHTMLAll you need is basic knowledge of HTML.• Headlines, paragraphs, lists• Form elements• Links• Simulate interactivity with links that goto new pages• It’s even a legit use of Dreamweaver
  18. 18. jpHTMLBasic HTML is completely accessible andSEO friendly. It forces you to use H tagsand paragraphs correctly.Make this the foundation of your finalproduct. Add CSS and JavaScript, but don’tchange the structure.If your idea works like this, it will work whenit’s pretty too.
  19. 19. Bread Before Jam>
  20. 20. Bread Before Jam>Your Idea Design & Code
  21. 21. Bread Before JamJam tells you what flavor a sandwich is.Bread tells you it is a sandwich.If you start with the jam, all you get isa mess.
  22. 22. Bread Before JamAn example.
  23. 23. Bread Before JamCat Wars- Fully designedexperience- Takes a long time- Too much noise, youcan’t learn anything
  24. 24. Bread Before JamNow you cantest the mostimportantthing:The Idea
  25. 25. Bread Before JamIf people won’tdothis...
  26. 26. Bread Before JamThey’ll neverdo this.
  27. 27. Bread Before JamThis = This
  28. 28. Bread Before JamIf it takes more than anhour to build yourprototype, you’re testingthe wrong thing.
  29. 29. A Pinch of Code{ }
  30. 30. It just takes a few lines of code to makeyour plain HTML more responsive.A Pinch of Code
  31. 31. A page margin, base font, and morereadable color:Html {font: 10px/12px Arial;}Body {margin: 1rem;color: #222;}A Pinch of Code
  32. 32. Scale everything by media queries usingrem (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
  33. 33. Easy responsive images:Img {width: 100%;height: auto;}A Pinch of Code
  34. 34. A persistent navigation bar:Nav {position: fixed;padding: 10px;background: #ccc;color: #fff;}A Pinch of Code
  35. 35. Sufficiently Advanced
  36. 36. Know that you know how to do thingsright, you can kick it up a notch.Components and Grids:Bootstrap, FoundationCRUD operations: Angular, KnockoutLight Backend: Deployd, FirebaseLook these up, you’ll be amazed at what they can do.Sufficiently Advanced
  37. 37. Thank YouLead UI Developer atThe College