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

I'm Lazy and You Should Be Too

601 views

Published on

My first time presenting. I learned a lot.

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

Published in: Design
no profile picture user

  • Be the first to comment

  • Be the first to like this

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

×