Lean responsive - Expanded
•Als PPTX, PDF herunterladen•
1 gefällt mir•2,205 views
This is an expanded, longer version of my Lean Responsive presentation, with full notes.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (17)
Andere mochten auch
Ähnlich wie Lean responsive - Expanded
Ähnlich wie Lean responsive - Expanded (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Lean responsive - Expanded
- 1. Build and Test Just What You Need, When You Need it, On Any Screen.
- 2. Minimum Viable Introduction I’m Josh Jeffryes, Lead UI Developer at The College Board
- 3. Minimum Viable Introduction I also help startups around the world with UX, Technology, and Lean Methodology
- 4. What Is Lean Responsive? ?
- 5. What Is Lean Responsive? +
- 6. It’s Two Buzzwords. What Is Lean Responsive?
- 7. It’s Two Buzzwords. I admit it. What Is Lean Responsive?
- 8. It’s also the best way to build anything on the web. What Is Lean Responsive?
- 9. Lean Part 1: Build only what you need, at the stage of development when you need it. What Is Lean Responsive?
- 10. Lean Part 2: Gain maximum understanding at each step, before you build the next step. What Is Lean Responsive?
- 11. In Other Words: Only one assumption should be provably wrong with each step. What Is Lean Responsive?
- 12. 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
- 13. Lean: Replaces ego with actually knowing things. What Is Lean Responsive?
- 14. Responsive Design: Build experiences that adapt to any screen, even ones that don’t exist yet. What Is Lean Responsive?
- 15. 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.
- 16. What Is Lean Responsive? We do this by adapting the layout and design based on screen size. Things move, shrink, or disappear. A B C A B C B A C B Desktop Tablet Phone
- 17. What Is Lean Responsive? This happens through the magic of media queries And sometimes JavaScript.
- 18. What Is Lean Responsive? So now what?
- 19. You Got Responsive in my Leanupbutter What Is Lean Responsive?
- 20. 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?
- 21. 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.
- 22. jpHTML How is this possible? jpHTML
- 24. jpHTML jpHTML is: • Automatically Responsive • Universally Supported • 100% Accessible • Generates Perfect SEO
- 25. jpHTML stands for: Just Plain HTML
- 26. <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>
- 27. Desktop Mobile
- 28. 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
- 29. 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.
- 30. An Example Let me give you an example.
- 31. An Example Cat Wars - Pretty - Full of wonderful candy - Client loves it
- 32. An Example Cat Wars - Pretty - Full of wonderful candy - Client loves it - Completely useless for testing
- 33. An Example Cat Wars - Takes a long time - Wastes money - Always wrong
- 34. An Example Cat Wars - This many layer effects can never be right.
- 35. An Example Now you can test the most important thing: The Idea
- 36. An Example If people won’t do this...
- 37. An Example They’ll never do this.
- 38. An Example This = This
- 39. An Example No CSS was harmed in the making of this test
- 40. An Example If it takes more than an hour to build your prototype, you’re testing the wrong thing.
- 41. A Pinch of Code { }
- 42. It just takes a few lines of code to make your plain HTML more responsive. A Pinch of Code
- 43. A page margin, base font, and more readable color: Html { font: 10px/12px Arial; } Body { margin: 1rem; color: #222; } A Pinch of Code
- 44. 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
- 45. Easy responsive images: Img { width: 100%; height: auto; } A Pinch of Code
- 46. A persistent navigation bar: Nav { position: fixed; padding: 10px; background: #ccc; color: #fff; } A Pinch of Code
- 47. The Wild, Wild Test
- 48. The Wild, Wild Test Testing your apps in the wild is only slightly harder. You just have to use the internet.
- 49. The Wild, Wild Test First, get hosting. Your Site Here
- 50. The Wild, Wild Test Google Analytics is great for analytics. One snippet of JavaScript
- 51. The Wild, Wild Test Test forms and collect data Use Wufoo
- 52. The Wild, Wild Test All the Data You Need for Lean Responsive
- 54. 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
- 55. You can do cool things with data on-screen. Sufficiently Advanced Angular – make HTML do JavaScripty stuff KnockOut – a lightweight MVC framework
- 56. Sufficiently Advanced If you know JavaScript but not backend, you don’t need a backend. Deployd FireBase Backlift
- 57. Thank You Lead UI Developer at The College Board @jjeffryes jjeffryes@gmail.com
Hinweis der Redaktion
- Hi there. My name is Josh Jeffryes. I’m the lead UI developer at the College Board. We make websites that are used by roughly half the students in the United States.
- I also work with a variety of startups, advising them on UX, technology, and how to do lean startup the right way.
- But you’re not here to learn about me. You’re here to learn about Lean Responsive. What is this amazing new technique for testing web sites?I’ll tell you. It’s two things.
- You may have heard of them.
- The Lean Startup methodology and Responsive Design are both pretty hot right now.
- I’m a fan, and a practicioner, of both.
- And I have discovered, through my work, that combining these two ideas gives you something very powerful.Something that I honestly think is the single best way to build anything on the web. Any app, any site, any anything. But before I explain how they work together, let me explain what they are.
- The first part of Lean methodology is don’t waste time. Don’t build things that you don’t need yet. And the reason you don’t want to build things you don’t need, is that with Lean, you may find out that you don’t ever need to build them.Lean is not about knowing what the final product will be. Because no one, no matter what they believe, does. No one. And it is a huge waste of time, money, and effort to build things that you later learn were the wrong things. So don’t do that.
- The second part of Lean is you don’t proceed to building the next thing until you’ve maximized your learning from what you’ve built now. This is how you make sure you build as few wasted things as possible. You build something, learn from it, iterate it, learn more, and keep repeating that pattern until you have that step right. Only then, when you’ve learned what is right, do you proceed with building the next thing.
- Another way to say this is “only one assumption should be provably wrong with each step.” Each thing you build should give you an opportunity to prove exactly one of your assumptions wrong.That doesn’t always turn out. Sometimes you prove a lot of your assumptions are wrong, or an assumption you weren’t planning to test is wrong. It happens. But ideally Lean lets you be wrong in small, easily fixable pieces.In my opinion finding out you’re wrong after a little work is a lot better than finding out you’re wrong at the end of a huge project.
- Here’s a nice flowchart of this in action.Step 1: what do you need to understand before you build the next thing?Step 2: build something that will create that understanding for youStep3: test it and iterate it until you fully understand what the right solution isStep 4: Repeat this process with the next piece of your project
- This is a great process, and one I try to apply to all my projects. It gives some people the heebiejeebies, because it takes away the false assurances of elaborate plans or big leaders that say they know the right answer. We all know no one knows the right answers. So let’s work like it.
- The other half of Lean Responsive is Responsive Design. This is a pretty easy concept to understand, even if it’s a little hard to actually do. In the real market, people use all kinds of devices to access web sites. Phones. Tablets. Computers. TVs. Watches. Glasses.
- We don’t know what device someone will use to view our product. No one knows all of the devices that exist today, and no one knows which ones will exist tomorrow even less. This is why the only design that works is one that assumes nothing, and works with everything.
- You can do this by adapting your layout and design based on the size of the screen viewing your product. Blocks of content rearrange, type sizes shrink or grow, and graphics or other style elements mutate.
- This sounds pretty complicated, but it really isn’t. All you need is a type of CSS rule called a media query, some careful planning, and perhaps a bit of JavaScript. I’ll give some examples later.
- That is Lean and Responsive in a nutshell.
- Now let’s put them together.
- Responsive gives you the ability to test your product anywhere, on any device. This is vital, because that’s how your final product will actually be used. Unless you want to fail.Lean gives you the ability to build and test ideas very quickly, in small pieces without wasting effort. You prove your ideas, not your code or design. Those things may be very cool, and you might be very proud of them, but the best code or design in the world won’t help you if you made the wrong thing.
- But most importantly, none of this is hard. It doesn’t require fancy frameworks or complicated code libraries. You absolutely do not need to be a code ninja to implement Lean Responsive on your project.
- So, how is this possible? It’s possible through a technology I’ve discovered that I like to call “jpHTML.”
- This is some powerful stuff.I’ve spent my entire career as a web developer working towards mastery of jpHTML, since the very first time I opened the Mosaic web browser.
- jpHTML is automatically responsive, without any extra work, it works in every single modern browser and device, and mostly works in all the non-modern ones, and on top of that it’s completely accessible and creates perfect SEO.Sounds pretty cool, huh?
- What is jpHTML?It stands for “Just Plain HTML”.
- Just plain HTML, with no CSS, is fluid out of the box, and fits any horizontal space. That’s minimally viable responsiveness that will work anywhere.It does have the limitation that it only works with linear layouts. But that’s fine. Human brains are linear. People perceive things in order, one thing at a time. I think it’s smart to test things that way too.
- Here’s the code from the previous page as screenshots. No CSS was required for it to work on every screen there is.
- All you need to create jpHTML is basic knowledge of HTML. You use headlines, paragraphs, lists, forms, and links the way they are intended to be used. If you need interactivity, you do it with links that load new pages. This can be done with any free text editor. You’re writing simple code, so you’re not going to make many mistakes. You can even use Dreamweaver for this.
- And what’s great about this is once you’ve tested your ideas and proven they work, you don’t have to throw what you’ve done away. You already have SEO friendly, 100% accessible text. Build on top of it for your final product. If you preserve that structure and flow, you’ll still have SEO friendly, accessible code when you’re done. Reinventing it isn’t just unnecessary, it’s also dumb.If your idea worked when it was plain and ugly, it’s going to work when it’s pretty too.
- Let me give you an example.
- Here’s a hypothetical app we’d like to test called Cat Wars. This is a very sexy app. It has buttons, and drop shadows, andvoting, and social, and cats, and pull tabs, and just all kinds of glorious, wonderful, terrible uselesscrap all over itthatmakestestingit impossible.
- No, really. Testing this is useless. There’s so much noise here, you can’t tell why anyone is doing anything. You might as well just randomly generate results.
- Everyone wants rush to the end and see the final product before they know what final product their audience actually wants. This is really dumb. It takes a long time to do, it wastes a lot of money, and no matter how many shiny buttons you put on it, you are always, always, always wrong.
- Always.
- So let’s do something different. Let’s test what actually matters. Let’s test our idea.
- It we build something like this, we can find out if people are interested in clicking on which of two cats they like the best.And if they won’t do it with something that looks like this…
- They’re never going to do this.
- Think about how long it would take to design and tweek and revise that ridiculous app with all the shiny buttons. Now look at the code up there one the screen. Making something something that works on every device in the world, that gives you superior testing results, takes about ten minutes. Maybe a few more if you have to learn HTML while you’re doing it.
- That’s all it takes to test your ideas. Just. Plain. HTML. You don’t even need to use CSS.
- This is the Lean part of Lean Responsive. You test things fast, in small, non-wasteful steps. If, at any time, you find yourself spending more than an hour to build something for testing, you need to stop, because you’re testing the wrong thing.
- OK, now you know how to use jpHTML to build simple tests. If you can write a little more code, you can kick things up a knotch.
- I’m going to show you some snippets of code you can use with your Just Plain HTML to make it more responsive, and easy to use for tests.
- First, add a nice 10 pixel base font with a decent line height. That 10 pixels will come in handy later, and make the math much easier.We can also make the text a dark grey, which is less irritating to look at on a white background, and give a margin to the edges of the screen. No one likes it when stuff touches the edge of the screen.
- Next, if you want to size things on your page, size everything with Rems. These are a new unit, it stands for “Root Em”. It’s always a multiple of the font size on your HTML element.By doing that, you can use a media query to change parts of your page to be bigger or smaller based on the screen size while scaling in synch.If you don’t want part of your page to scale up and down, size it in pixels.
- If you want your images to completely fill their space, and proportionally grow, just add this CSS. This won’t help with image quality, so use a reasonably large image if you plan for it to get big.
- And if you want to have one of those cool navigation bars that are always at the top of the page, you just need to do something like this.But only do this with the top. Mobile devices do weird things with the bottom of the page, if you try to use CSS to put something there you’re not going to like it.
- So far so good. These techniques are great for building things you can test in the same room as someone else.But if you want to go farther, you’ll need to do more.
- To test apps across the internet, all you need is… the internet.
- To do that, you’ll need a web host. If you’re in this business, you should have one already. If not, fix that.
- Next, you need a way to record what people have done. For that, I like Google Analytics.Since all your interactions are based on clicks, it’s very easy to measure what people do with Google Analytics. And it’s free.
- If you want to test forms and collect the data from them, there are several free or cheap services for doing this. They all generate code that you can cut and paste into your Just Plain HTML.My favorite is Wufoo. It’s easy to use, has advanced features, has built-in responsiveness, and if you really want to do some hard core testing, it integrates with payment services like Paypal. There’s no better test than finding out if people will actually pay money for something.
- And that’s enough to get all the data you need for Lean Responsive testing. All using simple, free or cheap tools that don’t require ninja level coding.
- But wait, there’s more.
- If you want to get more advanced, you can.You can even use some of those fancy frameworks and cool libraries that you really don’t need.I use them for some projects, usually after we’ve tested all the important stuff.
- If you want to try complex interactions with data, there are lots of options out there. Search for “JavaScript MVC” and spend a few weeks reading through the results.I like Angular, KnockOut is also fairly good.
- And if you know JavaScript well, but you don’t know backend programming, you can use a Backend As A Service like Deployd, Firebase, or Backlift. They let you create and communication with a backend all from JavaScript. I’ve used Deployd, but lately I like Backlift. It’s so new it doesn’t have a cool logo yet.
- That’s all I have. Now you know how to build and test web sites and application extremely quickly, very effectively, and lean and responsively.Now go out and build something.