Successfully reported this slideshow.

I'm Lazy and You Should Be Too

0

Share

Loading in …3
×
1 of 22
1 of 22

I'm Lazy and You Should Be Too

0

Share

Download to read offline

My first time presenting. I learned a lot.

Besides the linkbait title, this talk was actually about UI design, Sass and front-end frameworks.

My first time presenting. I learned a lot.

Besides the linkbait title, this talk was actually about UI design, Sass and front-end frameworks.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

I'm Lazy and You Should Be Too

  1. 1. Matt Felten | @mattfelten UI Design | Front-end Development I'M LAZY AND YOU SHOULD BE TOO
  2. 2. #DREAMCON2013 2 100% OF PEOPLE WISH THEY HAD MORE TIME I ASKED 12 PEOPLE AND THEY ALL SAID YES
  3. 3. #DREAMCON2013 THESE ARE SOME THEORIES AND TECHNIQUES I’VE BEEN USINGRECENTLYTO SAVE TIME 3
  4. 4. #DREAMCON2013 4 USERS USERS COME TO A WEBSITE TO GET SOMETHING DONE AND GET ON WITH THEIR LIVES
  5. 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. 6. #DREAMCON2013 6 THE MOST SCIENTIFIC MOBILE USAGE CHART EVER
  7. 7. #DREAMCON2013 7 MOBILE USE MEDIA QUERIES TO TARGET DEVICE WIDTHS @media only screen and (min-width: 768px) { /* CSS */ }
  8. 8. #DREAMCON2013 8 DEDICATED MOBILE SITES PROS AND CONS
  9. 9. #DREAMCON2013 9 THREE MAIN DESIGN GOALS THAT BENEFIT USERS
  10. 10. #DREAMCON2013 10 DESIGN FOR EXPECTATIONS
  11. 11. #DREAMCON2013 11 DESIGN FOR FUNNELS
  12. 12. #DREAMCON2013 12 DESIGN FOR PERFORMANCE
  13. 13. #DREAMCON2013 13 FRONT-END HOW CAN I DO MY JOB HARDER BETTER FASTER STRONGER
  14. 14. #DREAMCON2013 14 NO PSD MOVE FROM WIREFRAMES STRAIGHT TO PROTOTYPES
  15. 15. #DREAMCON2013 15 CSS PREPROCESSING LESS VS SASS
  16. 16. #DREAMCON2013 16 LESS SASS NODE.JS RUBY SLIGHTLY DIFFERENT SYNTAX
  17. 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. 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. 19. #DREAMCON2013 19 UI FRAMEWORKS Twitter Bootstrap ZURB Foundation Blueprint Compass Skeleton Preboot Roll your own
  20. 20. #DREAMCON2013 20 ICON FONTS BECAUSE IMAGE SPRITES ARE MISERABLE
  21. 21. #DREAMCON2013 21 FONT CUSTOMhttp://fontcustom.com $ fontcustom compile
  22. 22. Matt Felten | @mattfelten UI Design | Front-end Development THANKS

Editor's Notes

  • 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.”
  • Very unscientific survey
  • What’s the point of this talk?
    “I just want to share some ideas and some technical things I’ve been doing recently.”
  • 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)
  • 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”
  • It took me weeks to get this data
  • 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
  • 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
  • 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.
  • 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.
  • 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.
  • It’s a question I’m always thinking about
    Optimize workflow
    I’m gonna cover 4 different techniques that I’m loving
  • 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
  • What is CSS Preprocessing?
    Lets you write CSS easier
  • Pretty similar to the jQuery vs Mootools war
    There hasn’t been a winner yet
  • More features: Math, built-in color tweaks like lighten and darken
    Compiles into standard CSS and minifies to save space
  • 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
  • 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
  • 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
  • “Raise your hand. Who wishes they had more time?”
  • ×