SlideShare a Scribd company logo
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

More Related Content

Similar to I'm Lazy and You Should Be Too

SCCI'14 - Appsplash [1] Intro
SCCI'14 - Appsplash [1] IntroSCCI'14 - Appsplash [1] Intro
SCCI'14 - Appsplash [1] Intro
Essam Hassan
 
Smartphones - the ultimate recruitment tool
Smartphones - the ultimate recruitment toolSmartphones - the ultimate recruitment tool
Smartphones - the ultimate recruitment tool
ThirtyThree
 
BP110: The Mobile Distruption - Why XPages Development is targeting Mobile First
BP110: The Mobile Distruption - Why XPages Development is targeting Mobile FirstBP110: The Mobile Distruption - Why XPages Development is targeting Mobile First
BP110: The Mobile Distruption - Why XPages Development is targeting Mobile First
John Head
 
Mobile Cloud Computing
Mobile Cloud ComputingMobile Cloud Computing
Mobile Cloud Computing
Neoedge Pte Ltd
 
Mobile Cloud Computing
Mobile Cloud ComputingMobile Cloud Computing
Mobile Cloud Computing
guestc37919f
 
Mobile Cloud Computing
Mobile Cloud ComputingMobile Cloud Computing
Mobile Cloud Computing
Simeon Oriko
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIP
RZasadzinski
 
How To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud ChampionHow To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud Champion
Chris Love
 
eZ Unconference#2 - Future of the internet 2020 - C. Zahneissen (cpo)
eZ Unconference#2 - Future of the internet 2020 - C. Zahneissen (cpo)eZ Unconference#2 - Future of the internet 2020 - C. Zahneissen (cpo)
eZ Unconference#2 - Future of the internet 2020 - C. Zahneissen (cpo)
eZ Publish Community
 
Making the case for moble
Making the case for mobleMaking the case for moble
Making the case for moble
Stellar Media Marketing
 
7 Questions to Consider When Selecting a Cloud Service
7 Questions to Consider When Selecting a Cloud Service7 Questions to Consider When Selecting a Cloud Service
7 Questions to Consider When Selecting a Cloud Service
David Laubner
 
Business Strategy and Policy For Next Generation: Social Media Related DC
Business Strategy and Policy  For Next Generation: Social Media Related DCBusiness Strategy and Policy  For Next Generation: Social Media Related DC
Business Strategy and Policy For Next Generation: Social Media Related DC
Software Park Thailand
 
Mobile Strategy and Trends for Developers
Mobile Strategy and Trends for DevelopersMobile Strategy and Trends for Developers
Mobile Strategy and Trends for Developers
Mobinett Interactive, Inc.
 
IT Technology Trends 2014 for Thailand
IT Technology Trends 2014 for ThailandIT Technology Trends 2014 for Thailand
IT Technology Trends 2014 for Thailand
IMC Institute
 
ELearning trends 2015: #2 Mobile learning
ELearning trends 2015: #2 Mobile learningELearning trends 2015: #2 Mobile learning
ELearning trends 2015: #2 Mobile learning
Nine Lanterns
 
SharePoint 2013 and the Enterprise Mobile Revolution
SharePoint 2013 and the Enterprise Mobile RevolutionSharePoint 2013 and the Enterprise Mobile Revolution
SharePoint 2013 and the Enterprise Mobile Revolution
Joel Oleson
 
2023 communication.
2023 communication.2023 communication.
2023 communication.
jabrown07
 
2023 communication.
2023 communication.2023 communication.
2023 communication.
jabrown07
 
TMPGov_WhitePaper_ResponsiveDesign
TMPGov_WhitePaper_ResponsiveDesignTMPGov_WhitePaper_ResponsiveDesign
TMPGov_WhitePaper_ResponsiveDesign
John Bersentes
 
How Technology is Revolutionizing Property Assessments
How Technology is Revolutionizing Property AssessmentsHow Technology is Revolutionizing Property Assessments
How Technology is Revolutionizing Property Assessments
EDR
 

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

SCCI'14 - Appsplash [1] Intro
SCCI'14 - Appsplash [1] IntroSCCI'14 - Appsplash [1] Intro
SCCI'14 - Appsplash [1] Intro
 
Smartphones - the ultimate recruitment tool
Smartphones - the ultimate recruitment toolSmartphones - the ultimate recruitment tool
Smartphones - the ultimate recruitment tool
 
BP110: The Mobile Distruption - Why XPages Development is targeting Mobile First
BP110: The Mobile Distruption - Why XPages Development is targeting Mobile FirstBP110: The Mobile Distruption - Why XPages Development is targeting Mobile First
BP110: The Mobile Distruption - Why XPages Development is targeting Mobile First
 
Mobile Cloud Computing
Mobile Cloud ComputingMobile Cloud Computing
Mobile Cloud Computing
 
Mobile Cloud Computing
Mobile Cloud ComputingMobile Cloud Computing
Mobile Cloud Computing
 
Mobile Cloud Computing
Mobile Cloud ComputingMobile Cloud Computing
Mobile Cloud Computing
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIP
 
How To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud ChampionHow To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud Champion
 
eZ Unconference#2 - Future of the internet 2020 - C. Zahneissen (cpo)
eZ Unconference#2 - Future of the internet 2020 - C. Zahneissen (cpo)eZ Unconference#2 - Future of the internet 2020 - C. Zahneissen (cpo)
eZ Unconference#2 - Future of the internet 2020 - C. Zahneissen (cpo)
 
Making the case for moble
Making the case for mobleMaking the case for moble
Making the case for moble
 
7 Questions to Consider When Selecting a Cloud Service
7 Questions to Consider When Selecting a Cloud Service7 Questions to Consider When Selecting a Cloud Service
7 Questions to Consider When Selecting a Cloud Service
 
Business Strategy and Policy For Next Generation: Social Media Related DC
Business Strategy and Policy  For Next Generation: Social Media Related DCBusiness Strategy and Policy  For Next Generation: Social Media Related DC
Business Strategy and Policy For Next Generation: Social Media Related DC
 
Mobile Strategy and Trends for Developers
Mobile Strategy and Trends for DevelopersMobile Strategy and Trends for Developers
Mobile Strategy and Trends for Developers
 
IT Technology Trends 2014 for Thailand
IT Technology Trends 2014 for ThailandIT Technology Trends 2014 for Thailand
IT Technology Trends 2014 for Thailand
 
ELearning trends 2015: #2 Mobile learning
ELearning trends 2015: #2 Mobile learningELearning trends 2015: #2 Mobile learning
ELearning trends 2015: #2 Mobile learning
 
SharePoint 2013 and the Enterprise Mobile Revolution
SharePoint 2013 and the Enterprise Mobile RevolutionSharePoint 2013 and the Enterprise Mobile Revolution
SharePoint 2013 and the Enterprise Mobile Revolution
 
2023 communication.
2023 communication.2023 communication.
2023 communication.
 
2023 communication.
2023 communication.2023 communication.
2023 communication.
 
TMPGov_WhitePaper_ResponsiveDesign
TMPGov_WhitePaper_ResponsiveDesignTMPGov_WhitePaper_ResponsiveDesign
TMPGov_WhitePaper_ResponsiveDesign
 
How Technology is Revolutionizing Property Assessments
How Technology is Revolutionizing Property AssessmentsHow Technology is Revolutionizing Property Assessments
How Technology is Revolutionizing Property Assessments
 

Recently uploaded

CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 

Recently uploaded (20)

CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 

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?”