54
responsive awareness
| Date post: | 25-Dec-2014 |
| Category: |
Technology |
| Upload: | onehundredbe |
| View: | 2,644 times |
| Download: | 2 times |
responsive awareness
onehundredweb ninja with these days
_be
thatrsquos me
bull in general
bull design
bull development
who
responsive awareness
in general
definition
ldquoresponsive is the way the web should berdquothere i said it
quotable
bull one interface fits all
bull all web capable devices
bull optimized user experience at all times
wait what
bull one interface fits all (website app)
bull all web capable devices
bull optimized user experience at all times
wait what
bull letrsquos take a look at a live example
in action
httpplaygroundthesedayscomresponsive
bull depending on the screen width an appropriate version gets served
awesome
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
onehundredweb ninja with these days
_be
thatrsquos me
bull in general
bull design
bull development
who
responsive awareness
in general
definition
ldquoresponsive is the way the web should berdquothere i said it
quotable
bull one interface fits all
bull all web capable devices
bull optimized user experience at all times
wait what
bull one interface fits all (website app)
bull all web capable devices
bull optimized user experience at all times
wait what
bull letrsquos take a look at a live example
in action
httpplaygroundthesedayscomresponsive
bull depending on the screen width an appropriate version gets served
awesome
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull in general
bull design
bull development
who
responsive awareness
in general
definition
ldquoresponsive is the way the web should berdquothere i said it
quotable
bull one interface fits all
bull all web capable devices
bull optimized user experience at all times
wait what
bull one interface fits all (website app)
bull all web capable devices
bull optimized user experience at all times
wait what
bull letrsquos take a look at a live example
in action
httpplaygroundthesedayscomresponsive
bull depending on the screen width an appropriate version gets served
awesome
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
responsive awareness
in general
definition
ldquoresponsive is the way the web should berdquothere i said it
quotable
bull one interface fits all
bull all web capable devices
bull optimized user experience at all times
wait what
bull one interface fits all (website app)
bull all web capable devices
bull optimized user experience at all times
wait what
bull letrsquos take a look at a live example
in action
httpplaygroundthesedayscomresponsive
bull depending on the screen width an appropriate version gets served
awesome
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
definition
ldquoresponsive is the way the web should berdquothere i said it
quotable
bull one interface fits all
bull all web capable devices
bull optimized user experience at all times
wait what
bull one interface fits all (website app)
bull all web capable devices
bull optimized user experience at all times
wait what
bull letrsquos take a look at a live example
in action
httpplaygroundthesedayscomresponsive
bull depending on the screen width an appropriate version gets served
awesome
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
ldquoresponsive is the way the web should berdquothere i said it
quotable
bull one interface fits all
bull all web capable devices
bull optimized user experience at all times
wait what
bull one interface fits all (website app)
bull all web capable devices
bull optimized user experience at all times
wait what
bull letrsquos take a look at a live example
in action
httpplaygroundthesedayscomresponsive
bull depending on the screen width an appropriate version gets served
awesome
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull one interface fits all
bull all web capable devices
bull optimized user experience at all times
wait what
bull one interface fits all (website app)
bull all web capable devices
bull optimized user experience at all times
wait what
bull letrsquos take a look at a live example
in action
httpplaygroundthesedayscomresponsive
bull depending on the screen width an appropriate version gets served
awesome
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull one interface fits all (website app)
bull all web capable devices
bull optimized user experience at all times
wait what
bull letrsquos take a look at a live example
in action
httpplaygroundthesedayscomresponsive
bull depending on the screen width an appropriate version gets served
awesome
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull letrsquos take a look at a live example
in action
httpplaygroundthesedayscomresponsive
bull depending on the screen width an appropriate version gets served
awesome
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull depending on the screen width an appropriate version gets served
awesome
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull discrimination sucks
bull no standard in display sizes
bull smartphone sales will surpass worldwide pc sales by the end of 2011
bull easier amp faster maintenance
bull much lower cost
bull user agent detection is unreliable and evolves too fast
why
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull will we need a 5 times bigger budget
bull will we need 5 times more time
bull do all websites need to be responsive from now on
in general wrap up
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
responsive awareness
design
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull letrsquos make a couple of things clear
bull make a distinction between design and layout
bull 960 px is so nineties
get this
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull how are we going to achieve this
bull through a combination of lsquobreakpointsrsquo and scaling
what do we do
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull the lsquobreakpointsrsquo are actually called mediaqueries
bull wersquoll need at least 4 layouts
bull think of max as everything below
bull think of min as everything above
bull think of max and min as everything between
practical
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
numbers donrsquot lie
max 479 px (smartphones portrait)
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
numbers donrsquot lie
max 767 px (smartphones landscape)
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
numbers donrsquot lie
max 1023 px (tablets portrait)
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
numbers donrsquot lie
min 1024 px
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
those numbers again
bull max 479 px (smartphones portrait)
bull max 767 px (smartphones landscape)
bull max 1023 px (tablets portrait)
bull min 1024 px (tablets landscape en other devices)
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
ldquosorry to say 4 isnrsquot enoughrdquo
seriously
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
DESIGNbull sorry to say 4 isnrsquot enough
bull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px(tablets landscape en other devices)
bull min 1281 px and max 1439 px
bull min 1440 px and max 1919 px
bull min 1920 px
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
DESIGNbull max 479 px (smartphones portrait)
bull min 480 px and max 767 px (smartphones landscape)
bull min 768 px and max 1023 px (tablets portrait)
bull min 1024 px and max 1280 px (tablets landscape en other devices)
bull min 1281 px and max 1439 px (laptops dekstops)
bull min 1440 px and max 1919 px (pcrsquos tvrsquos)
bull min 1920 px (HD screens)
thatrsquos more like it
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull itrsquos not as bad as it seems
bull there might not be a need to make 7 different designs
bull remember the breakpoints and the scaling
bull same layout scale up or down without redesigning
not so bad
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
ldquosuggested workflowrdquo
cycle
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
1 sketch
cycle
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
2 information architecture
cycle
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
3 visual mockups
cycle
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
4 start design
cycle
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
5 prototype layout
51 see how it behaves on screens and devices
52 if itrsquos not whatrsquos expected revise mockups repeat layout
cycle
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
6 implement design
cycle
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
1 sketches
2 information architecture
3 visual mockups
4 start design
5 prototype layout
1 see how it behaves on screens and devices
2 if itrsquos not whatrsquos expected revise mockups repeat layout
6 implement design
cycle
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
ldquothatrsquos not how we do thingsrdquo
oh really
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
ldquothatrsquos not how we do thingsrdquo
embrace change
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull design functional
bull images suck
bull donrsquot punish slow connections with unnecessary media
bull think mobile
bull think touch
bull different behavior
bull design contextual stuff together using illustrator or fireworks
design tips
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull information architecture is so important
bull do not change layout during development
bull small changes might have a big impact on development
bull get familiar with smartphones and tablets
just saying
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
responsive awareness
development
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull itrsquos all about speed
bull graceful degradation or progressive enhancement
bull donrsquot spoil old browsers otherwise people will never upgrade
keep in mind
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
ldquoa broken escalator is just stairsrdquomitch hedberg
graceful degradation
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull start from a framework or build your own
bull configure your server
bull be smart with resources
bull please make sexy urls
in general
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull html5
bull css3
bull javascript
technologies
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull semantics
bull appcache
bull use field types (url phone email)
bull donrsquot stop there
html5
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull use mediaqueries
bull split stylesheets
bull take advantage of less or sass
bull remember all vendor prefixes
bull try out flexbox system
bull if layout changes use multicolumn
bull use gradients borders amp shadows instead of images
bull make your images responsive and adaptive
css3
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull build a custom modernizr
bull do feature detection
bull load resources conditionally
bull use polyfills
bull check code
javascript
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull make downloads parallel
bull use CDNrsquos with optional fallback to local version
bull minify your code
bull if you use images make sprites
bull photoshop save for web isnrsquot enough use further optimization
bull javascript in the bottom
bull combine javascript
speed tips
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull smartphone screen resolutions exceed those of computers
bull amount of resources and file size
bull internet connection type amp speed
bull screen height isnrsquot taken into account
responsive problems
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull better compatibility
bull support for DPI
bull lots of happy web users
future
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull httpflickrcomphotosdynamosquito4132923995bull httpscreenshotworldblogspotcom200706pulp-fiction-1994htmlbull httpwwwmorganstanleycominstitutionaltechresearchinternet_ad_trends102009htmlbull httpwwwmorganstanleycominstitutionaltechresearchpdfsMS_Economy_Internet_Trends_102009_FINALpdfbull httpwwwpcworldcomarticle171380more_smartphones_than_desktop_pcs_by_2011htmlbull httpventurebeatcom20090827admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-usersbull httpwwwslidesharenetyiibupragmatic-responsive-designbull httpwwwslidesharenetlivefrontresponsive-design-7877412bull httpwwwslidesharenetnzakasprogressive-enhancement-20-conference-agnosticbull httpwwwwebdesignerdepotcom201109the-ultimate-responsive-web-design-roundup
sources
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
bull mediaqueriesbull less cssbull less compiler macbull less compiler windowsbull sass cssbull css prefixerbull responsive imagesbull adaptive imagesbull polyfills bull imageoptim
useful links
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
ldquoquestionsrdquo
letrsquos talk
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
ldquodiscussion and questionsrdquo
letrsquos talk
ldquothank yourdquo
much obliged
ldquothank yourdquo
much obliged
