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