Embed Size (px)
DESCRIPTION
Accessibility questions? Get in contact: [email protected]. July 2013 NOTE: I posted an updated, more comprehensive version of this presentation at http://www.slideshare.net/GeorgeZamfir/responsive-web-design-a-tool-for-accessibility. How responsive web design is making the case for accessibility. Many of the RWD best practices ARE in fact best practices for accessibility as well. And there's nothing revolutionary about them, however with people using them more and more under the RWD umbrella they basically became more attractive. "Responsive web design is accessibility in disguise". "RWD is designing for more accessible content". Presentation delivered at Accessibility Camp Toronto (AccessibilityCampTO.org) on Nov 17, 2012. Podcast: http://www.webaxe.org/podcast-97-responsive-design-and-accessibility/ Responsive Accessible Web Design KIT: https://github.com/GeorgeZamfir/RAWD-KIT
Citation preview
goodwallyca 127758 good_wally
Responsive Web Designamp
Web Accessibility
george zamfirmeetupcoma11yTO
a11yTOa11yCampTO
Tuesday 20 November 12
RWD amp A11Y = heartsThey are really good together
Tuesday 20 November 12
goodwallyca 127758 good_wally
Responsive Web Design (RWD)amp
Web Accessibility
30 min presentation amp 20 min of conversations
bull part case studybull part primer on responsive web design
bull RWD amp A11Y = hearts
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
For my day job I work on this stuff
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
In my spare time
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD amp A11Y = heartsThey are really good together
Tuesday 20 November 12
goodwallyca 127758 good_wally
Responsive Web Design (RWD)amp
Web Accessibility
30 min presentation amp 20 min of conversations
bull part case studybull part primer on responsive web design
bull RWD amp A11Y = hearts
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
For my day job I work on this stuff
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
In my spare time
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wally
Responsive Web Design (RWD)amp
Web Accessibility
30 min presentation amp 20 min of conversations
bull part case studybull part primer on responsive web design
bull RWD amp A11Y = hearts
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
For my day job I work on this stuff
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
In my spare time
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
For my day job I work on this stuff
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
In my spare time
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wally
For my day job I work on this stuff
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
In my spare time
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
In my spare time
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
In my spare time
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
In my spare time
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
In my spare time
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wally
In my spare time
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wallyTuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wally
But I also get to work on cool stuff like this ghiglioneca
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
What is Responsive Web Design (rwd)
Started off as a technique for building one website that
would work on all devices
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Why do we needResponsive Web Design (rwd)
Rather than tailoring disconnected designs for an ever-increasing number of web devices we can treat them as facets of the same experience
- Ethan Marcotte alistapartcomarticlesresponsive-web-design
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Under the hood
Fluid Foundationno fixed-width layouts or PXs seriously
Media Queriestarget media types and media features
Responsive Imagespercentage widths (+ sigh serving multiple images)
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Fluid FoundationDeclare percentage () or ratio (em) widths
instead of absolute values (px)in order to adapt to the size of the viewport
section margin 05em width 75 height 10em
ltmeta name=viewport content=width=device-widthgt
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Media QueriesItrsquos how you target specific media AND media features
30em = 480px media screen and (min-width 30em) h1 font-size 1em
30em = 480px and 48em = 768px media screen and (min-width 30em) and (max-width 48em) h1 font-size 15em
How about them breakpoints
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Responsive Images
How do you make fixed-width elements (ie images) work with your awesome fluid layout
img max-width 100 height auto
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Responsive Images
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Responsive ImagesNew problem
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - Responsive Images
SolutionsImage OptimizationScalable Vector Graphics (SVG)Media Queries - (background) image replacementIcon Fonts - css-trickscomexamplesIconFontA new HTML element - w3orgcommunityrespimg
Unfortunately there is no ldquoone solution to rule them allrdquo
css-trickscomwhich-responsive-images-solution-should-you-use
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD - SummaryFluid Foundation + Media Queries + Responsive Images
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD = FutureFriendly
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD amp A11Y = heartsTuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
So why are RWD amp A11Yreally good together
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD amp A11Y = hearts Why
Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First + Progressive Enhancement
Caters to Users Needs Devices Context
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Personal Overriding Stylesheet
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Personal Overriding Stylesheet
Think about itWersquore changing the CSS stylesheet to suit our needs
Less about the design more about the content
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Personal Overriding Stylesheet
ldquoMy basic point is that it should be the content that dictates the media queriesrdquo
adactio
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
ldquoMobile users want to see our menu hours and delivery number Desktop users definitely want this 1mb png of someone smiling at a saladrdquo
wilto
Personal Overriding Stylesheet
ldquoRWD is designing for more accessible contentrdquo
George Zamfir
Moaaar Accessible Content
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Personal Overriding Stylesheet
Reduced Cognitive amp Visual Load
RWD goes beyond layouts amp images wersquore now tackling line amp letter spacing (leading amp kerning) readable typefaces (even dyslexia) AND responsive typography
ldquoGeorgia works perfectly as body text up until 16 pixels As soon as you go over that size it starts to look odd This is not a design deficiency of the typeface It was simply not designed to work for big body text sizes and dense screensrdquo
- informationarchitectsnet
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role=banner] nav a padding04em 1em 05em
What does it mean for a11y1 finger no fingers motor control dexterity novice IT users etc
Donrsquot make me think (Steve Krug)
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Embracing Web Standards
no moreplatform specific hacks custom controls mouse-only wankery
HTML5 amp ARIA
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (lt320px) and use it as the base for the next larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices browsers first and incrementally enhance for the more capable ones
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Progressive Enhancement
An escalator can never break--it can only become stairs
You would never see an Escalator Temporarily Out Of Order sign just Escalator Temporarily Stairsrdquo
Sorry for the convenience We apologize for the fact that you can still get up there
- Mitch Hedberg
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Progressive Enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Mobile First
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Itrsquos all good news for accessibility
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Mobile First amp Progressive Enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Caters to Users Needs Devices Context
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD amp A11Y = hearts
Accessibility is not lagging behind (for once)
accessibility amp web standards are core to RWD
RWD is a champion for web accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD amp A11Y = hearts
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
RWD amp A11Y = hearts
ldquoRWD is A11Y in disguiserdquo - George Zamfir
Try it for yourself goodwallycarawd_kitzip
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
goodwallyca 127758 good_wally
Thank you
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Credits Photos Sources
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Credits Photos Sourcesfreevectorcom
photobucketcom
phombocom
ipadwallsdepotcom
wwwentypocom
spliocomresponsive
flickrcomphotosmerlin1343376738
lukewcomffentryasp1649
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Research amp Resources
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
Research amp ResourcesResponsive Web Designalistapartcomarticlesresponsive-web-designbradfrostwebcom + bradfrostgithubcomthis-is-responsiveresourceshtmlnetmagazinecomtutorialsbuild-responsive-site-week-designing-responsively-part-1stuffandnonsensecoukblogabouti_dont_care_about_responsive_web_designmsdnmicrosoftcomen-usmagazinehh653584aspxcodingsmashingmagazinecom20110112guidelines-for-responsive-web-designresponsivedesigncablogslidecast-rwd-introduction-workflow-overviewjohnpolacekgithubcomscrolldeckjsdecksresponsivegithubcomfilamentgroupResponsive-Imagesinformationarchitectsnetblogresponsive-typographymatanichcom20121106picture-polyfillcss-trickscomwhich-responsive-images-solution-should-you-usemediaqueries + quirksmodeorghttpwwwlukewcomffentryasp1649
Mobile First amp Progressive EnhancementgithubcombradfrostMobile-First-RWDlukewcomresourcesmobile_firstasp lukewcompresospresoasp26 (preso slides + audio + video)christianheilmanncomtagprogressive-enhancement
Tuesday 20 November 12
![Responsive Design Fundamentals [Read-Only] - … Design Fundame… · Responsive Design Fundamentals Carolyn Yon, PMI-ACP Development Manager ... Responsive Design • web design](https://img.dokumen.tips/doc/110x75/5b7c060b7f8b9adb4c8df8c4/responsive-design-fundamentals-read-only-design-fundame-responsive-design.jpg)
