I'm Lazy and You Should Be Too
- 1. Matt Felten | @mattfelten UI Design | Front-end Development I'M LAZY AND YOU SHOULD BE TOO
- 2. #DREAMCON2013 2 100% OF PEOPLE WISH THEY HAD MORE TIME I ASKED 12 PEOPLE AND THEY ALL SAID YES
- 3. #DREAMCON2013 THESE ARE SOME THEORIES AND TECHNIQUES I’VE BEEN USINGRECENTLYTO SAVE TIME 3
- 4. #DREAMCON2013 4 USERS USERS COME TO A WEBSITE TO GET SOMETHING DONE AND GET ON WITH THEIR LIVES
- 5. #DREAMCON2013 5 MOBILE RESPONSIVE DESIGN IS THE WAY FORWARD MOBILE USAGE IS SKYROCKETING 28% of Internet usage comes from a mobile phone Global mobile data traffic grew 70 percent in 2012
- 6. #DREAMCON2013 6 THE MOST SCIENTIFIC MOBILE USAGE CHART EVER
- 7. #DREAMCON2013 7 MOBILE USE MEDIA QUERIES TO TARGET DEVICE WIDTHS @media only screen and (min-width: 768px) { /* CSS */ }
- 8. #DREAMCON2013 8 DEDICATED MOBILE SITES PROS AND CONS
- 9. #DREAMCON2013 9 THREE MAIN DESIGN GOALS THAT BENEFIT USERS
- 13. #DREAMCON2013 13 FRONT-END HOW CAN I DO MY JOB HARDER BETTER FASTER STRONGER
- 14. #DREAMCON2013 14 NO PSD MOVE FROM WIREFRAMES STRAIGHT TO PROTOTYPES
- 16. #DREAMCON2013 16 LESS SASS NODE.JS RUBY SLIGHTLY DIFFERENT SYNTAX
- 17. #DREAMCON2013 17 VARIABLES NESTING LESS @pink: #f938ab; body { color: @pink; } SASS $pink: #f938ab; body { color: @pink; } a { span { color: #111; } &:hover { color: #111; } }
- 18. #DREAMCON2013 18 @mixin transition($string) { -webkit-transition: $string; -moz-transition: $string; -o-transition: $string; transition: $string; } div { @import transition(* .2s linear); } .transition($string) { -webkit-transition: $string; -moz-transition: $string; -o-transition: $string; transition: $string; } div { .transition(* .2s linear); } MIXINS LESS SASS
- 19. #DREAMCON2013 19 UI FRAMEWORKS Twitter Bootstrap ZURB Foundation Blueprint Compass Skeleton Preboot Roll your own
- 20. #DREAMCON2013 20 ICON FONTS BECAUSE IMAGE SPRITES ARE MISERABLE
- 22. Matt Felten | @mattfelten UI Design | Front-end Development THANKS
Editor's Notes
- #2: I don’t mean lazy in the “sit on the couch and eat cheetos” way I mean I want to get the most things done in the least amount of time I want to optimize I don’t want to waste me time “Who wishes they had more time? Raise your hands.”
- #3: Very unscientific survey
- #4: What’s the point of this talk? “I just want to share some ideas and some technical things I’ve been doing recently.”
- #5: Problems: Flash intros (they still exisit..) Flash in general Websites aren’t resorts. People don’t sit around admiring the nice fonts and images you use (well, I do)
- #6: When you visit a website you want it to work (and the same content) no matter what browser/machine you're on Use restaurant websites as an example Restaurant websites where the menu / hours is hard to get to “It’s about time for a chart”
- #7: It took me weeks to get this data
- #8: Media query example is targeting tablets and desktops Don’t target specific devices though The best way is to target the size when the content needs to shift
- #9: Easy to add on to an existing site Good for web apps, native apps are even better (speed) Gotchas: Google will penalize your site for bad mobile redirects Tend to strip out content that you assume mobile users won’t need Doesn’t work the same or feel the same as the desktop equivalent
- #11: The closer to the users expectations you design, the easier it will be to learn the interface. Goal is not to have to learn anything. Feel natural.
- #12: Design decisions, not options Decision overload Not every action needs to be one click away As long as the user feels like their getting closer to their intended goal, they're happy.
- #13: Decisions in just 50 milliseconds Halo Effect: if you can snare people with an attractive design, they are more likely to overlook other minor faults with the site, and may rate its actual content more favourably. Cognitive Bias: People enjoy being right, so continuing to use a website that gave a good first impression helps to 'prove' to themselves that they made a good initial decision. Reduce load time, use less images Assume success with AJAX Actions that are reversible or there's no real repercussions, let the UI update automatically.
- #14: It’s a question I’m always thinking about Optimize workflow I’m gonna cover 4 different techniques that I’m loving
- #15: The slowest part of designing anything is the “static mockups” If designing for mobile, which you should be, you could have 3+ different versions of a single page Figure out layout, then work on aesthetics in the browser You can see exactly how it’s going to look
- #16: What is CSS Preprocessing? Lets you write CSS easier
- #17: Pretty similar to the jQuery vs Mootools war There hasn’t been a winner yet
- #19: More features: Math, built-in color tweaks like lighten and darken Compiles into standard CSS and minifies to save space
- #20: What are UI frameworks? Why are they good?Good for prototyping, testing out an idea Why are they bad? Bad for making something unique and rememberable
- #21: Explain image sprites Why are they terrible? Hard to update. Create new images for every size and color Technique I first started seeing around 2011 What does it benefit? SVGs are vector so they can be infinitely sized Uses font color so you can use any color, set through CSS Anything you can do with type on the web, you can do with an icon font
- #22: I didn’t use icon fonts before, even though I’ve heard about it, because it was hard to create. You had to use a font program, manually set kerning. Very trial and error. A few months ago I found Font Custom on Github
- #23: “Raise your hand. Who wishes they had more time?”