Matt Felten | @mattfeltenUI Design | Front-end Development
I'M LAZY AND YOU SHOULD BE TOO
#DREAMCON2013
2
100% OF PEOPLE WISH THEY HAD MORE TIMEI ASKED 12 PEOPLE AND THEY ALL SAID YES
#DREAMCON2013
THESE ARE SOME THEORIES AND TECHNIQUES I’VE BEEN USING RECENTLY TO SAVE TIME
3
#DREAMCON2013
4
USERSUSERS COME TO A WEBSITE TO GET SOMETHING DONE AND GET ON WITH THEIR LIVES
#DREAMCON2013
5
MOBILERESPONSIVE 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
#DREAMCON2013
6
THE MOST SCIENTIFIC MOBILE USAGE CHART EVER
#DREAMCON2013
7
MOBILEUSE MEDIA QUERIES TO TARGET DEVICE WIDTHS
@media only screen and (min-width: 768px) { /* CSS */}
#DREAMCON2013
8
DEDICATED MOBILE SITESPROS AND CONS
#DREAMCON2013
9
THREE MAIN DESIGN GOALSTHAT BENEFIT USERS
#DREAMCON2013
10
DESIGN FOR EXPECTATIONS
#DREAMCON2013
11
DESIGN FOR FUNNELS
#DREAMCON2013
12
DESIGN FOR PERFORMANCE
#DREAMCON2013
13
FRONT-ENDHOW CAN I DO MY JOB HARDER BETTER FASTER STRONGER
#DREAMCON2013
14
NO PSDMOVE FROM WIREFRAMES STRAIGHT TO PROTOTYPES
#DREAMCON2013
15
C S S P R E P R O C E S S I N GLESS VS SASS
#DREAMCON2013
16
L E S S S A S SNODE.JS RUBY
SLIGHTLY DIFFERENT SYNTAX
#DREAMCON2013
17
V A R I A B L E S N E S T I N GLESS
@pink: #f938ab;
body { color: @pink;}
SASS
$pink: #f938ab;
body { color: @pink;}
a { span { color: #111; }
&:hover { color: #111; }}
#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);}
M I X I N SLESS SASS
#DREAMCON2013
19
U I F R A M E W O R K STwitter Bootstrap
ZURB Foundation
Blueprint
Compass
Skeleton
Preboot
Roll your own
#DREAMCON2013
20
I C O N F O N T SBECAUSE IMAGE SPRITES ARE MISERABLE
#DREAMCON2013
21
F O N T C U S T O Mhttp://fontcustom.com
$ fontcustom compile
Matt Felten | @mattfeltenUI Design | Front-end Development
THANKS