I'm Lazy and You Should Be Too

Matt Felten | @mattfelten
UI Design | Front-end Development
I'M LAZY AND YOU SHOULD BE TOO
#DREAMCON2013
2
100% OF PEOPLE WISH THEY HAD MORE TIME
I ASKED 12 PEOPLE AND THEY ALL SAID YES
#DREAMCON2013
THESE ARE SOME THEORIES AND TECHNIQUES I’VE BEEN
USINGRECENTLYTO SAVE TIME
3
#DREAMCON2013
4
USERS
USERS COME TO A WEBSITE TO GET SOMETHING DONE AND GET ON WITH THEIR LIVES
#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
#DREAMCON2013
6
THE MOST SCIENTIFIC MOBILE USAGE CHART EVER
#DREAMCON2013
7
MOBILE
USE MEDIA QUERIES TO TARGET DEVICE WIDTHS
@media only screen and (min-width:
768px) {
/* CSS */
}
#DREAMCON2013
8
DEDICATED MOBILE SITES
PROS AND CONS
#DREAMCON2013
9
THREE MAIN DESIGN GOALS
THAT BENEFIT USERS
#DREAMCON2013
10
DESIGN FOR EXPECTATIONS
#DREAMCON2013
11
DESIGN FOR FUNNELS
#DREAMCON2013
12
DESIGN FOR PERFORMANCE
#DREAMCON2013
13
FRONT-END
HOW CAN I DO MY JOB HARDER BETTER FASTER STRONGER
#DREAMCON2013
14
NO PSD
MOVE FROM WIREFRAMES STRAIGHT TO PROTOTYPES
#DREAMCON2013
15
CSS PREPROCESSING
LESS VS SASS
#DREAMCON2013
16
LESS SASS
NODE.JS RUBY
SLIGHTLY DIFFERENT SYNTAX
#DREAMCON2013
17
VARIABLES NESTING
LESS
@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);
}
MIXINS
LESS SASS
#DREAMCON2013
19
UI FRAMEWORKS
Twitter Bootstrap
ZURB Foundation
Blueprint
Compass
Skeleton
Preboot
Roll your own
#DREAMCON2013
20
ICON FONTS
BECAUSE IMAGE SPRITES ARE MISERABLE
#DREAMCON2013
21
FONT CUSTOMhttp://fontcustom.com
$ fontcustom
compile
Matt Felten | @mattfelten
UI Design | Front-end Development
THANKS
1 of 22

More Related Content

Similar to I'm Lazy and You Should Be Too(20)

Recently uploaded(20)

Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdf
Atiqur Rahaman15 views
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa16 views
polarispolaris
polaris
scribddarkened352233 views
Benzodiazepines--Medicinal ChemistryBenzodiazepines--Medicinal Chemistry
Benzodiazepines--Medicinal Chemistry
NarminHamaaminHussen6 views
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media12 views
Task 3.pptxTask 3.pptx
Task 3.pptx
ZaraCooper217 views
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear Factory
Doing Footwear8 views
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
Atiqur Rahaman13 views
My Creative Resume DIAPOS.pptxMy Creative Resume DIAPOS.pptx
My Creative Resume DIAPOS.pptx
BrayanQuispe239 views
Design System.pdfDesign System.pdf
Design System.pdf
Atiqur Rahaman10 views
Here_Process bookHere_Process book
Here_Process book
nykimstudio15 views
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28213 views
Big Deal Curmel Moton ShirtBig Deal Curmel Moton Shirt
Big Deal Curmel Moton Shirt
brandshop18 views
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECT
Rabius Sany38 views
Anthelmintic Drugs-Medicinal ChemistryAnthelmintic Drugs-Medicinal Chemistry
Anthelmintic Drugs-Medicinal Chemistry
NarminHamaaminHussen5 views
Anti-Cancer Drugs-Medicinal ChemistryAnti-Cancer Drugs-Medicinal Chemistry
Anti-Cancer Drugs-Medicinal Chemistry
NarminHamaaminHussen7 views
The Last GrainsThe Last Grains
The Last Grains
pulkkinenaliisa36 views
3 Dark Design Templates3 Dark Design Templates
3 Dark Design Templates
Pixeldarts14 views

I'm Lazy and You Should Be Too

Editor's Notes

  1. 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.”
  2. Very unscientific survey
  3. What’s the point of this talk? “I just want to share some ideas and some technical things I’ve been doing recently.”
  4. 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)
  5. 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”
  6. It took me weeks to get this data
  7. 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
  8. 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
  9. 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.
  10. 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.
  11. 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.
  12. It’s a question I’m always thinking about Optimize workflow I’m gonna cover 4 different techniques that I’m loving
  13. 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
  14. What is CSS Preprocessing? Lets you write CSS easier
  15. Pretty similar to the jQuery vs Mootools war There hasn’t been a winner yet
  16. More features: Math, built-in color tweaks like lighten and darken Compiles into standard CSS and minifies to save space
  17. 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
  18. 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
  19. 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
  20. “Raise your hand. Who wishes they had more time?”