-
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
I don’t mean lazy in the “sit on the couch and eat cheetos” way
I mean I want to get the most things done in the least amount of time
I want to optimize
I don’t want to waste me time
“Who wishes they had more time? Raise your hands.”
Very unscientific survey
What’s the point of this talk?
“I just want to share some ideas and some technical things I’ve been doing recently.”
Problems: Flash intros (they still exisit..)
Flash in general
Websites aren’t resorts. People don’t sit around admiring the nice fonts and images you use (well, I do)
When you visit a website you want it to work (and the same content) no matter what browser/machine you're on
Use restaurant websites as an example
Restaurant websites where the menu / hours is hard to get to
“It’s about time for a chart”
It took me weeks to get this data
Media query example is targeting tablets and desktops
Don’t target specific devices though
The best way is to target the size when the content needs to shift
Easy to add on to an existing site
Good for web apps, native apps are even better (speed)
Gotchas:
Google will penalize your site for bad mobile redirects
Tend to strip out content that you assume mobile users won’t need
Doesn’t work the same or feel the same as the desktop equivalent
The closer to the users expectations you design, the easier it will be to learn the interface.
Goal is not to have to learn anything. Feel natural.
Design decisions, not options
Decision overload
Not every action needs to be one click away
As long as the user feels like their getting closer to their intended goal, they're happy.
Decisions in just 50 milliseconds
Halo Effect: if you can snare people with an attractive design, they are more likely to overlook other minor faults with the site, and may rate its actual content more favourably.
Cognitive Bias: People enjoy being right, so continuing to use a website that gave a good first impression helps to 'prove' to themselves that they made a good initial decision.
Reduce load time, use less images
Assume success with AJAX
Actions that are reversible or there's no real repercussions, let the UI update automatically.
It’s a question I’m always thinking about
Optimize workflow
I’m gonna cover 4 different techniques that I’m loving
The slowest part of designing anything is the “static mockups”
If designing for mobile, which you should be, you could have 3+ different versions of a single page
Figure out layout, then work on aesthetics in the browser
You can see exactly how it’s going to look
What is CSS Preprocessing?
Lets you write CSS easier
Pretty similar to the jQuery vs Mootools war
There hasn’t been a winner yet
More features: Math, built-in color tweaks like lighten and darken
Compiles into standard CSS and minifies to save space
What are UI frameworks?
Why are they good?Good for prototyping, testing out an idea
Why are they bad?
Bad for making something unique and rememberable
Explain image sprites
Why are they terrible?
Hard to update. Create new images for every size and color
Technique I first started seeing around 2011
What does it benefit?
SVGs are vector so they can be infinitely sized
Uses font color so you can use any color, set through CSS
Anything you can do with type on the web, you can do with an icon font
I didn’t use icon fonts before, even though I’ve heard about it, because it was hard to create.
You had to use a font program, manually set kerning.
Very trial and error.
A few months ago I found Font Custom on Github
“Raise your hand. Who wishes they had more time?”