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

定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
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
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
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
 
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
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Designforuminternational
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
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
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 

Recently uploaded (20)

定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
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
 
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
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
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
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 

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