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

10. #DREAMCON2013
10
DESIGN FOR EXPECTATIONS

11. #DREAMCON2013
11
DESIGN FOR FUNNELS

12. #DREAMCON2013
12
DESIGN FOR PERFORMANCE

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

15. #DREAMCON2013
15
CSS PREPROCESSING
LESS VS SASS

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

21. #DREAMCON2013
21
FONT CUSTOMhttp://fontcustom.com
$ fontcustom
compile

22. Matt Felten | @mattfelten
UI Design | Front-end Development
THANKS