SlideShare a Scribd company logo
1 of 134
Download to read offline
Stop Worrying & Get On With It (FOWD Tour 2009)
What are we worried about?
What are we worried about?
Some users see ‘broken’ sites.
What are we worried about?
Some users see ‘broken’ sites.
   Don’t build broken sites: basic support can be
   offered as long as it doesn’t look broken. If it’s a real
   problem for older browsers, use universalie6.css, a
   warning message, or something similar
What are we worried about?
Some users see ‘broken’ sites.
   Don’t build broken sites: basic support can be
   offered as long as it doesn’t look broken. If it’s a real
   problem for older browsers, use universalie6.css, a
   warning message, or something similar
But this visual treatment is integral to the brand!
What are we worried about?
Some users see ‘broken’ sites.
   Don’t build broken sites: basic support can be
   offered as long as it doesn’t look broken. If it’s a real
   problem for older browsers, use universalie6.css, a
   warning message, or something similar
But this visual treatment is integral to the brand!
   Then include it (if not, don’t worry)
What are we worried about?
Some users see ‘broken’ sites.
   Don’t build broken sites: basic support can be
   offered as long as it doesn’t look broken. If it’s a real
   problem for older browsers, use universalie6.css, a
   warning message, or something similar
But this visual treatment is integral to the brand!
   Then include it (if not, don’t worry)
Missing rounded corners don’t matter!
Take Your Design To The Next Level With CSS3 j.mp/smashingcss3
Fearful forabeautifulweb.com/s/598
“                                                              ”
      Great article, thanks but I think to wait that
      the most of browsers support CSS3 totally to
      develop websites for my clients.




Comments from Smashing Magazine readers on j.mp/smashingcss3
“                                                              ”
      I hope CSS3 will be a standard in the near
      future, right now you cant really use anything
      of it ’cause not every browser supports it.




Comments from Smashing Magazine readers on j.mp/smashingcss3
“
      CSS 3 rocks. Unfortunately we need to stay at




                                                               ”
      least 5 more years with CSS 2.1 if we want to
      offer the same design to each user (what in
      most ‘commercial’ projects is necessary).




Comments from Smashing Magazine readers on j.mp/smashingcss3
“
      I can’t wait to use CSS3 in a real project.
      Unfortunately I’m going to be stuck with




                                                               ”
      things as they are for the time being as I wait
      for my clients to catch up. I expect this will be
      the case for most designers for the time being.




Comments from Smashing Magazine readers on j.mp/smashingcss3
“                                                              ”
      CSS3 looks really good however because of IE
      it will be long time before I start using it.




Comments from Smashing Magazine readers on j.mp/smashingcss3
These arguments are
complete and utter bullshit
If 98% of the users can’t see a
text-shadow, it doesn’t matter,
 but it’ll be a nice enrichment
 for the 2% of users who can
Tap Tap Tap taptaptap.com
Tweet CC tweetcc.com
Fusion Ads fusionads.net
Fusion Ads fusionads.net
Progressive means progressive
Progressive means progressive
Fall-back solutions (JS on and off?)
Barclaycard online admin barclaycard.co.uk
Progressive means progressive
Fall-back solutions (JS on and off?)
Enhancements only become features when the
majority of users are experiencing them
Progressive means progressive
Fall-back solutions (JS on and off?)
Enhancements only become features when the
majority of users are experiencing them
Use progressive enrichment in your dull, corporate sites
— the sexy stuff is an add-on, so it’s fine!
Do websites need to look
exactly the same in
every browser?
dowebsitesneedtolookexactlythesameineverybrowser.com
Do websites need to look
exactly the same in
every browser?

Websites will never look consistent across all browsers
Do websites need to look
exactly the same in
every browser?

Websites will never look consistent across all browsers
Rendering engines, operating systems, and user-specific
variables like screen settings and resolution will always
stand in the way
Jon Tan:




“
      Designers will use [technologies like Flash, PDF,
      and hacks like embedding type in images] [...]
      because they won’t have to deal with painful
      inconsistencies between user agents; the bane




                                                          ”
      of the browser wars, and in this instance, the
      bane of web typography in what seems like
      the age of the raster wars.




Display Type & the Raster Wars j.mp/jontan
Bookmark these URLs

Jon Tan: Web Typography tag jontangerine.com/log/tag/web-typography



Web Typography (Richard Rutter) webtypography.net
Do websites need to look
exactly the same in
every browser?

Websites will never look consistent across all browsers
Rendering engines, operating systems, and user-specific
variables like screen settings and resolution will always
stand in the way
So stop trying to reach the unreachable!
Embrace the differences
Usability vs. aesthetics

Usability / accessibility / functionality
= very important
Usability vs. aesthetics

Usability / accessibility / functionality
= very important
But don’t underestimate the importance of beauty!
The experience
The experience

Beauty is the experience’s visual layer
The experience

Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
The experience

Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
Functionality leads to usage; aesthetics lead to emotion
The experience

Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
Functionality leads to usage; aesthetics lead to emotion
The experience layer
The experience

Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
Functionality leads to usage; aesthetics lead to emotion
The experience layer
(See Dan Mall’s FOWD presentation:
events.carsonified.com/fowd/2008/newyork/videos/dan-mall/)
The experience layer




“
      Our emotions change the way we think




                                                    ”
      and serve as constant guides to appropriate
      behaviour, steering us away from the bad
      and guiding us towards the good.




Donald Norman, Emotional Design
Variety in web design.
     I can haz it?
Stop Worrying & Get On With It (FOWD Tour 2009)
BORING
BORING
BORING
BORING
BORING
BORING
BORING
BORING
BORING
Stop Worrying & Get On With It (FOWD Tour 2009)
Who’s pushing things forward?
Who’s pushing things forward?

Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye
Who’s pushing things forward?

Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye
Made By Elephant madebyelephant.com
Atebits atebits.com
Atebits atebits.com/tweetie-mac/
24 Ways 24ways.org
Who’s pushing things forward?

Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye
Stack Overflow stackoverflow.carsonified.com
Carsonified Events events.carsonified.com
Who’s pushing things forward?

Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye
Born Living bornliving.com
Who’s pushing things forward?

Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye
Jason Santa Maria jasonsantamaria.com
Who’s pushing things forward?

Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye
Squared Eye squaredeye.com/work/featured/family-life-network/
Squared Eye squaredeye.com/work/featured/family-life-network/
Squared Eye squaredeye.com/work/featured/family-life-network/
Squared Eye squaredeye.com/work/featured/family-life-network/
Squared Eye squaredeye.com/work/featured/family-life-network/
Squared Eye squaredeye.com/work/featured/family-life-network/
The nicer your site looks...
The nicer your site looks...

... the longer your visitors will look at it...
The nicer your site looks...

... the longer your visitors will look at it...
... the longer your visitors look at it, the longer they’ll
spend on your website...
The nicer your site looks...

... the longer your visitors will look at it...
... the longer your visitors look at it, the longer they’ll
spend on your website...
... and the longer they spend on your website, the easier
it will be for you to sell them your product or service
Web design, for me, is
predominantly full of boring,
unimaginative work.



Let’s change that.
Stop Worrying & Get On With It (FOWD Tour 2009)
N     G
         IN l :
  A R
W oversia
con tr       t
   at     en !
      em ing
st         ch
 ap p r oa
Validation is irrelevant
Yes, yes. Bear with me...
Yes, yes. Bear with me...

New techniques won’t validate...
Validator suggestions css3.info/the-big-css3-validation-debate/
The CSS3 Validator could offer the option to ignore
vendor specific extensions




Validator suggestions css3.info/the-big-css3-validation-debate/
The CSS3 Validator could offer the option to ignore
vendor specific extensions


The CSS3 Validator could highlight vendor specific
extensions with a warning, rather than an error




Validator suggestions css3.info/the-big-css3-validation-debate/
The CSS3 Validator could offer the option to ignore
vendor specific extensions


The CSS3 Validator could highlight vendor specific
extensions with a warning, rather than an error


The validator could mark such code as
‘experimental’ rather than an error or warning




Validator suggestions css3.info/the-big-css3-validation-debate/
Yes, yes. Bear with me...

New techniques won’t validate...
... and it doesn’t matter!
Yes, yes. Bear with me...

New techniques won’t validate...
... and it doesn’t matter!
Recognise the value of intentional invalidation
Jon Hicks hicksdesign.co.uk/journal
Jon Hicks hicksdesign.co.uk/journal
<b>
#tops b {
    display:block;
    float:right;
    width:333px;
    height:15px;
    background:url(/images/paulsmith.gif) no-repeat;
    }




Intentional invalidation in hicksdesign.co.uk/css/layout-9.css
Yes, yes. Bear with me...

New techniques won’t validate...
... and it doesn’t matter!
Recognise the value of intentional invalidation
Validation does not equal conformity to Web Standards:
you can build a site with tables and a complete lack of
semantics yet still have it validate
Stop Worrying & Get On With It (FOWD Tour 2009)
Validation
does
not
equal
conformity
to
Web
Standards
Stop Worrying & Get On With It (FOWD Tour 2009)
We’re looking at it in
the wrong way
We’re looking at it in
the wrong way

“We can’t ensure that all users get the same experience.”
// negative
We’re looking at it in
the wrong way

“We can’t ensure that all users get the same experience.”
// negative
“We can add further enhancements above the norm.”
// positive
We’re looking at it in
the wrong way

“We can’t ensure that all users get the same experience.”
// negative
“We can add further enhancements above the norm.”
// positive
The flexibility the web offers is a blessing, not a curse
We’re looking at it in
the wrong way

“We can’t ensure that all users get the same experience.”
// negative
“We can add further enhancements above the norm.”
// positive
The flexibility the web offers is a blessing, not a curse
Ensure a good experience for most; a great one for some
It’s not just about
 making things look pretty.
Forward-thinking code means
   a future-proof website.
10%
10% of users today will be
100% of users tomorrow
10% of users today will be
100% of users tomorrow

The amount of people who see your enrichments
might seem small right now, but that number
will only grow, not decline
Stop Worrying & Get On With It (FOWD Tour 2009)
My site before Firefox 3.5 (no @font-face support) elliotjaystocks.com
My site after Firefox 3.5 (with @font-face support) elliotjaystocks.com
10% of users today will be
100% of users tomorrow

The amount of people who see your enrichments
might seem small right now, but that number
will only grow, not decline
It’s our duty to push forward-thinking development;
to make the most of the tools made available to us
and our users
10% of users today will be
100% of users tomorrow

The amount of people who see your enrichments
might seem small right now, but that number
will only grow, not decline
It’s our duty to push forward-thinking development;
to make the most of the tools made available to us
and our users
New CSS techniques will never become mainstream
if we designers aren’t using them
All the small things
All the small things

CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes life easier
All the small things

CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes life easier
Consider attribute selectors
<ul class="blogroll">
    <li>
       <a href="http://shauninman.com">Shaun Inman</a>
    </li>
    <li>
       <a href="http://mezzoblue.com">Dave Shea</a>
    </li>
    <li>
       <a href="http://hicksdesign.co.uk">Jon Hicks</a>
    </li>
</ul>




HTML with no need for class names on each <li>
ul.blogroll li a[href="http://shauninman.com"]{
    background:url(http://shauninman.com/favicon.ico);
    }




Attribute selectors
All the small things

CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes life easier
Consider attribute selectors
Consider nth-child selectors
Fusion Ads fusionads.net/blog/
All the small things

CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes life easier
Consider attribute selectors
Consider nth-child selectors
And if a browser doesn’t support these things...
... so what?
Stop Worrying & Get On With It (FOWD Tour 2009)
Slides will be available online at
 elliotjaystocks.com/speaking/
Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)
Thank you!
elliotjaystocks.com | twitter.com/elliotjaystocks

Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158/
Paint textures from The Stock Exchange - sxc.hu
Set in FS Clerkenwell - fontsmith.com/font_details.php?font_num=251
Stop Worrying & Get On With It (FOWD Tour 2009)
Shameless plug!
Sexy Web Design
by Elliot Jay Stocks
Expert reviewers: Jina Bolton & Dan Rubin



Published by SitePoint

More Related Content

Similar to Stop Worrying & Get On With It (FOWD Tour 2009)

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2elliotjaystocks
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Chris Love
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your WebsiteFloown
 
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.meetmicah
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design CLEVER°FRANKE
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignChris Love
 
Responsive web design
Responsive web designResponsive web design
Responsive web designChris Love
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive EnhancementDan Sagisser
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web designNate Walton
 
Atomic design, a problem of expectations
Atomic design, a problem of expectationsAtomic design, a problem of expectations
Atomic design, a problem of expectationsFrancesco Improta
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfChristian Heilmann
 
Your Browser Is The New Photoshop
Your Browser Is The New PhotoshopYour Browser Is The New Photoshop
Your Browser Is The New PhotoshopMatt Puchlerz
 
Essay On Web Development Life Cycle
Essay On Web Development Life CycleEssay On Web Development Life Cycle
Essay On Web Development Life CycleKerry Lewis
 
How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?Helios Solutions
 

Similar to Stop Worrying & Get On With It (FOWD Tour 2009) (20)

Webdesign
WebdesignWebdesign
Webdesign
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website
 
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
Atomic design, a problem of expectations
Atomic design, a problem of expectationsAtomic design, a problem of expectations
Atomic design, a problem of expectations
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
 
Your Browser Is The New Photoshop
Your Browser Is The New PhotoshopYour Browser Is The New Photoshop
Your Browser Is The New Photoshop
 
Essay On Web Development Life Cycle
Essay On Web Development Life CycleEssay On Web Development Life Cycle
Essay On Web Development Life Cycle
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?
 
Custom V CMS
Custom V CMSCustom V CMS
Custom V CMS
 
HR DevFest - Web Design
HR DevFest - Web DesignHR DevFest - Web Design
HR DevFest - Web Design
 

More from elliotjaystocks

Things I have Learned as an Accidental Businessman
Things I have Learned as an Accidental BusinessmanThings I have Learned as an Accidental Businessman
Things I have Learned as an Accidental Businessmanelliotjaystocks
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designerselliotjaystocks
 
Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)elliotjaystocks
 
Professional Photoshop Effects
Professional Photoshop EffectsProfessional Photoshop Effects
Professional Photoshop Effectselliotjaystocks
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline Worldelliotjaystocks
 
We Need To Talk About IE6
We Need To Talk About IE6We Need To Talk About IE6
We Need To Talk About IE6elliotjaystocks
 
Debunking Web Design Myths
Debunking Web Design MythsDebunking Web Design Myths
Debunking Web Design Mythselliotjaystocks
 

More from elliotjaystocks (13)

Things I have Learned as an Accidental Businessman
Things I have Learned as an Accidental BusinessmanThings I have Learned as an Accidental Businessman
Things I have Learned as an Accidental Businessman
 
The Story of 8 Faces
The Story of 8 FacesThe Story of 8 Faces
The Story of 8 Faces
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
 
Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
Professional Photoshop Effects
Professional Photoshop EffectsProfessional Photoshop Effects
Professional Photoshop Effects
 
I Care Because You Do
I Care Because You DoI Care Because You Do
I Care Because You Do
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline World
 
Print Is The New Web
Print Is The New WebPrint Is The New Web
Print Is The New Web
 
We Need To Talk About IE6
We Need To Talk About IE6We Need To Talk About IE6
We Need To Talk About IE6
 
Debunking Web Design Myths
Debunking Web Design MythsDebunking Web Design Myths
Debunking Web Design Myths
 
Reward & Punishment
Reward & PunishmentReward & Punishment
Reward & Punishment
 
FOWD November 2007
FOWD November 2007FOWD November 2007
FOWD November 2007
 

Recently uploaded

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 

Recently uploaded (19)

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 

Stop Worrying & Get On With It (FOWD Tour 2009)

  • 2. What are we worried about?
  • 3. What are we worried about? Some users see ‘broken’ sites.
  • 4. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar
  • 5. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand!
  • 6. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand! Then include it (if not, don’t worry)
  • 7. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand! Then include it (if not, don’t worry) Missing rounded corners don’t matter!
  • 8. Take Your Design To The Next Level With CSS3 j.mp/smashingcss3
  • 10. ” Great article, thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients. Comments from Smashing Magazine readers on j.mp/smashingcss3
  • 11. ” I hope CSS3 will be a standard in the near future, right now you cant really use anything of it ’cause not every browser supports it. Comments from Smashing Magazine readers on j.mp/smashingcss3
  • 12. CSS 3 rocks. Unfortunately we need to stay at ” least 5 more years with CSS 2.1 if we want to offer the same design to each user (what in most ‘commercial’ projects is necessary). Comments from Smashing Magazine readers on j.mp/smashingcss3
  • 13. I can’t wait to use CSS3 in a real project. Unfortunately I’m going to be stuck with ” things as they are for the time being as I wait for my clients to catch up. I expect this will be the case for most designers for the time being. Comments from Smashing Magazine readers on j.mp/smashingcss3
  • 14. ” CSS3 looks really good however because of IE it will be long time before I start using it. Comments from Smashing Magazine readers on j.mp/smashingcss3
  • 15. These arguments are complete and utter bullshit
  • 16. If 98% of the users can’t see a text-shadow, it doesn’t matter, but it’ll be a nice enrichment for the 2% of users who can
  • 17. Tap Tap Tap taptaptap.com
  • 22. Progressive means progressive Fall-back solutions (JS on and off?)
  • 23. Barclaycard online admin barclaycard.co.uk
  • 24. Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them
  • 25. Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them Use progressive enrichment in your dull, corporate sites — the sexy stuff is an add-on, so it’s fine!
  • 26. Do websites need to look exactly the same in every browser?
  • 28. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers
  • 29. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers Rendering engines, operating systems, and user-specific variables like screen settings and resolution will always stand in the way
  • 30. Jon Tan: “ Designers will use [technologies like Flash, PDF, and hacks like embedding type in images] [...] because they won’t have to deal with painful inconsistencies between user agents; the bane ” of the browser wars, and in this instance, the bane of web typography in what seems like the age of the raster wars. Display Type & the Raster Wars j.mp/jontan
  • 31. Bookmark these URLs Jon Tan: Web Typography tag jontangerine.com/log/tag/web-typography Web Typography (Richard Rutter) webtypography.net
  • 32. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers Rendering engines, operating systems, and user-specific variables like screen settings and resolution will always stand in the way So stop trying to reach the unreachable! Embrace the differences
  • 33. Usability vs. aesthetics Usability / accessibility / functionality = very important
  • 34. Usability vs. aesthetics Usability / accessibility / functionality = very important But don’t underestimate the importance of beauty!
  • 36. The experience Beauty is the experience’s visual layer
  • 37. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience
  • 38. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion
  • 39. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion The experience layer
  • 40. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion The experience layer (See Dan Mall’s FOWD presentation: events.carsonified.com/fowd/2008/newyork/videos/dan-mall/)
  • 41. The experience layer “ Our emotions change the way we think ” and serve as constant guides to appropriate behaviour, steering us away from the bad and guiding us towards the good. Donald Norman, Emotional Design
  • 42. Variety in web design. I can haz it?
  • 55. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  • 56. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  • 57. Made By Elephant madebyelephant.com
  • 61. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  • 64. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  • 66. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  • 67. Jason Santa Maria jasonsantamaria.com
  • 68. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  • 75. The nicer your site looks...
  • 76. The nicer your site looks... ... the longer your visitors will look at it...
  • 77. The nicer your site looks... ... the longer your visitors will look at it... ... the longer your visitors look at it, the longer they’ll spend on your website...
  • 78. The nicer your site looks... ... the longer your visitors will look at it... ... the longer your visitors look at it, the longer they’ll spend on your website... ... and the longer they spend on your website, the easier it will be for you to sell them your product or service
  • 79. Web design, for me, is predominantly full of boring, unimaginative work. Let’s change that.
  • 81. N G IN l : A R W oversia con tr t at en ! em ing st ch ap p r oa
  • 83. Yes, yes. Bear with me...
  • 84. Yes, yes. Bear with me... New techniques won’t validate...
  • 86. The CSS3 Validator could offer the option to ignore vendor specific extensions Validator suggestions css3.info/the-big-css3-validation-debate/
  • 87. The CSS3 Validator could offer the option to ignore vendor specific extensions The CSS3 Validator could highlight vendor specific extensions with a warning, rather than an error Validator suggestions css3.info/the-big-css3-validation-debate/
  • 88. The CSS3 Validator could offer the option to ignore vendor specific extensions The CSS3 Validator could highlight vendor specific extensions with a warning, rather than an error The validator could mark such code as ‘experimental’ rather than an error or warning Validator suggestions css3.info/the-big-css3-validation-debate/
  • 89. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter!
  • 90. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Recognise the value of intentional invalidation
  • 93. <b>
  • 94. #tops b { display:block; float:right; width:333px; height:15px; background:url(/images/paulsmith.gif) no-repeat; } Intentional invalidation in hicksdesign.co.uk/css/layout-9.css
  • 95. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Recognise the value of intentional invalidation Validation does not equal conformity to Web Standards: you can build a site with tables and a complete lack of semantics yet still have it validate
  • 98. does
  • 99. not
  • 100. equal
  • 102. to
  • 103. Web
  • 106. We’re looking at it in the wrong way
  • 107. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative
  • 108. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive
  • 109. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive The flexibility the web offers is a blessing, not a curse
  • 110. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive The flexibility the web offers is a blessing, not a curse Ensure a good experience for most; a great one for some
  • 111. It’s not just about making things look pretty. Forward-thinking code means a future-proof website.
  • 112. 10%
  • 113. 10% of users today will be 100% of users tomorrow
  • 114. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline
  • 116. My site before Firefox 3.5 (no @font-face support) elliotjaystocks.com
  • 117. My site after Firefox 3.5 (with @font-face support) elliotjaystocks.com
  • 118. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline It’s our duty to push forward-thinking development; to make the most of the tools made available to us and our users
  • 119. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline It’s our duty to push forward-thinking development; to make the most of the tools made available to us and our users New CSS techniques will never become mainstream if we designers aren’t using them
  • 120. All the small things
  • 121. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier
  • 122. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors
  • 123. <ul class="blogroll"> <li> <a href="http://shauninman.com">Shaun Inman</a> </li> <li> <a href="http://mezzoblue.com">Dave Shea</a> </li> <li> <a href="http://hicksdesign.co.uk">Jon Hicks</a> </li> </ul> HTML with no need for class names on each <li>
  • 124. ul.blogroll li a[href="http://shauninman.com"]{ background:url(http://shauninman.com/favicon.ico); } Attribute selectors
  • 125. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors Consider nth-child selectors
  • 127. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors Consider nth-child selectors And if a browser doesn’t support these things... ... so what?
  • 129. Slides will be available online at elliotjaystocks.com/speaking/
  • 132. Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158/ Paint textures from The Stock Exchange - sxc.hu Set in FS Clerkenwell - fontsmith.com/font_details.php?font_num=251
  • 134. Shameless plug! Sexy Web Design by Elliot Jay Stocks Expert reviewers: Jina Bolton & Dan Rubin Published by SitePoint