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