View
4.533
Download
0
Category
Preview:
DESCRIPTION
I presentation I did for the Microsoft UXtour together with 2 colleagues (Bram Vanderhaeghe and Simon Coudeville)
Citation preview
November 3 2011 ndash Microsoft Web amp Phone UX Tour Belgium
RESPONSIVE WEB DESIGN
ThomasBram
decthomasscoudevillebram_
Front-end developerWeb designerInformation architect
Simon
You may remember us from such clients as
netlashcomblog
3 Technical challenges
2 Design responsive design
1 Why you should use responsive design
Why responsive design
1 How not to approach mobile web
2 Why responsive design is key
3 Think mobile first
4 It starts with IA
No stats and numbersYoursquore here so you know
mobile is big
HOW NOT TO APPROACH MOBILE WEB
Imagine a mobile operator in 2006
Mark ObistarCEO at random mobile operator
We need a mobile website
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
ThomasBram
decthomasscoudevillebram_
Front-end developerWeb designerInformation architect
Simon
You may remember us from such clients as
netlashcomblog
3 Technical challenges
2 Design responsive design
1 Why you should use responsive design
Why responsive design
1 How not to approach mobile web
2 Why responsive design is key
3 Think mobile first
4 It starts with IA
No stats and numbersYoursquore here so you know
mobile is big
HOW NOT TO APPROACH MOBILE WEB
Imagine a mobile operator in 2006
Mark ObistarCEO at random mobile operator
We need a mobile website
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
You may remember us from such clients as
netlashcomblog
3 Technical challenges
2 Design responsive design
1 Why you should use responsive design
Why responsive design
1 How not to approach mobile web
2 Why responsive design is key
3 Think mobile first
4 It starts with IA
No stats and numbersYoursquore here so you know
mobile is big
HOW NOT TO APPROACH MOBILE WEB
Imagine a mobile operator in 2006
Mark ObistarCEO at random mobile operator
We need a mobile website
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
netlashcomblog
3 Technical challenges
2 Design responsive design
1 Why you should use responsive design
Why responsive design
1 How not to approach mobile web
2 Why responsive design is key
3 Think mobile first
4 It starts with IA
No stats and numbersYoursquore here so you know
mobile is big
HOW NOT TO APPROACH MOBILE WEB
Imagine a mobile operator in 2006
Mark ObistarCEO at random mobile operator
We need a mobile website
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Technical challenges
2 Design responsive design
1 Why you should use responsive design
Why responsive design
1 How not to approach mobile web
2 Why responsive design is key
3 Think mobile first
4 It starts with IA
No stats and numbersYoursquore here so you know
mobile is big
HOW NOT TO APPROACH MOBILE WEB
Imagine a mobile operator in 2006
Mark ObistarCEO at random mobile operator
We need a mobile website
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Why responsive design
1 How not to approach mobile web
2 Why responsive design is key
3 Think mobile first
4 It starts with IA
No stats and numbersYoursquore here so you know
mobile is big
HOW NOT TO APPROACH MOBILE WEB
Imagine a mobile operator in 2006
Mark ObistarCEO at random mobile operator
We need a mobile website
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
No stats and numbersYoursquore here so you know
mobile is big
HOW NOT TO APPROACH MOBILE WEB
Imagine a mobile operator in 2006
Mark ObistarCEO at random mobile operator
We need a mobile website
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
HOW NOT TO APPROACH MOBILE WEB
Imagine a mobile operator in 2006
Mark ObistarCEO at random mobile operator
We need a mobile website
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Imagine a mobile operator in 2006
Mark ObistarCEO at random mobile operator
We need a mobile website
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Mark ObistarCEO at random mobile operator
We need a mobile website
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
mmobileldquoGo to full websiterdquo
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
What about tablet pcrsquos
What about new devices with unknown
display sizes
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Raise your hand if you never used your smartphone laying in bed
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Mobile users ne users on the road
You probably need all your content
A separate mobile website (2)
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
ldquoHow should I configure my phone to use mobile internetrdquo
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
mproximusbe
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
mmobistarbe
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
mbasebe
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
mmobilevikingsbe
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Yoursquoll have to manage all your
content twice
A separate mobile website (3)
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Users share links
Different users use different devices
A separate mobile website (4)
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Only optimized for small screens
Need to provide all content
content has to be managed twice
Issues when sharing content
Pretty expensive for an unsatisfying result
A separate mobile website (conclusion)
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Imagine a newspaper company in 2010
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
P VandermeerschCEO at a random newspaper
company
We need an app
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
FAIL
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Native apps (1)
Cfr separate mobile website
What about tablet pcrsquos
Mobile users ne users on the road
Yoursquoll have to manage all your
content twice
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Which platforms will you support
(iOS Android WindowsPhone)
Each update
- cost per platform
- might take time (approval)
Native apps (2)
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Store owners take a cut on in-app
purchases
Native apps (3)
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
What about search engines
Your content wonrsquot be indexed by them
Native apps (4)
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
links to websites open in a new app ()
no native browser functions
(bookmarking)
non selectable text (no copy-paste)
Apprsquos often have their own interface
language
Native apps (5)
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
issues with links to other websites
no native browser functions like bookmarking
non selectable text (no copy-paste)
each interface is different
Remind you to something
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
PleaseLetrsquos not go there again
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
If you need hardware functions that
browsers donrsquot yet support (camera
compass gyroscope gpu power )
(of course native apps can be the best answer)
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Different platforms to support
Cut on in-app-purchases
Content has to be managed twice and wonrsquot
be indexed by search engines
Risk on usability issues
Only if you need specific hardware functions
Native apps (conclusion)
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
In a lot of cases neither separate mobile websites nor native apps provide an effective answer on todays needs
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
RESPONSIVE IS KEY
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
One website (content)
No issues with sharing or search engines
One design
Layout adapts to any screen size
Responsive web design
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
handelsbeursbe
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
HOW TO START(This is how we do it)
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
THINK MOBILE FIRST
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
What mobile first does not mean
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
We should only focus on mobile from
now on
Mobile is more important than
desktop
What mobile first does not mean
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Mobile first
Desktop first
Creating a website 2 options
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Mobile is harder to use
Smaller screen
Touch instead of keyboard and
mouse(pad)
Slower internet connection
Why mobile first (1)
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Mobile users have typically less
patience
Because itrsquos harder to use
Might be on the move
Need that info to use it right now
Why mobile first (2)
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Forces you to focus
No space for complexity
No space for extrarsquos
Focus on core features and simplicity
Why mobile first (3)
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Itrsquos easier to make a simple thing more complex than to make a complex thing more simple
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
If you can support the mobile web you can support anything
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
IA FOR MOBILE(actually it counts as much for desktop)
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 basics
Target audience
Goal of the client
USP of the client
Know the online strategy
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Top tasks (key services) in main menu
Short and simple copy
Throw away anything that isnrsquot needed
White space is allowed
Conclusion first details later
KISS Keep it simple and straightforward
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
At any point it should be clear how to
get closer to the wanted answer
Extra click is way better than complex
navigation
ldquoDonrsquot make me thinkrdquo (1)
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
2 types of page choice page and
action page
Homepage is a choice page
ldquoDonrsquot make me thinkrdquo (2)
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
CONCLUSION SO FAR
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
For content-driven websites responsive
web design is the future
Think mobile first
KISS focus on core tasks (starts with IA)
Conclusion so far
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
twittercombram_bramnetlashcomwwwnetlashcom
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
designingresponsive websites
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Design decisions beyond photoshop
3 Fluid grid vs fixed grid
2 Where to start amp how to start
1 Web design trends
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Ethan Marcottealistapartcom
Responsive webdesign consists of three components a fluid grid fluid media and media queries
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
informationarchitectsjp
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
simplebitscom
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
bostonglobecom
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
mediaqueries
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Web design trends
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of content first
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 No unnecessary visual design elements
2 Typography
1 Content amp organisation of
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Designing
in the browser
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Accessibility amp appropriate
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Accessibility amp appropriate hierarchy
3 Content organisation before design
2 A static image doesnrsquot feel like a real page
1 The browser is our canvas
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Designing
in photoshop
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Try things not possible with only
2 No limitations
1 Photoshop as creative outlet
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Try things not possible with only css3
2 No limitations
1 Photoshop as creative outlet
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Establish the
global visual design direction
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 The designer ne front-end dev
2 Something to fall back on
1 Starting point
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Before you start
solid IA for hierarchy of info
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Designing
proportions
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Modular
2 Think proportions ratios percentages
1 Forget pixels
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Grid
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportions
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish proportion
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Make your own grid
2 Forget 960 grid system
1 Solid grid helps establish
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Modular grid extension
modulargridorg
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Design decisions
beyond photoshop
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Fluid grid vs fixed grid
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Fluid grid
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible resolution
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Harder to achieve (fluid media)
3 Takes up all the available space
2 Maximum width defined once
1 Page adapts to every possible
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
fixed grid
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
3 Not optimizied for future screen sizes
2 Easier to achieve
1 Different layouts defined in fixed widths
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
flexible modules
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
In close association with
information architect
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
best practices
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Use a fluid layout when possible
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Use a fluid layout when
3 Design flexible modules
2 Start with a solid grid
1 Define a maximum width
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
twittercomscoudevillesimonnetlashcomwwwnetlashcom
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Front-end
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Online strategy
2 Information architecture
3 Design
4 Front-end design
5 Development
Our proces
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Media queries
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Not new
Media queries
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Media queries
media print print styles here
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Not new
2 Screen sizes (basics)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
Media queries
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
max-width 767px (smartphones landscape)
max-width 1023px (tablets portrait)
min-width 1024px (tablets landscape amp others)
inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
Media queries
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
Media queries
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 1024px and max-width 1439px (tablets landscape amp
others)
min-width 1440px and max-width 1919px (laptops amp others)
min-width 1920px (larger screens)
no inheritance
Media queries
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
Media queries
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Check for native browser support
Media queries
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Modernizr
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Respondjs
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Not new
2 Screen sizes (basics)
3 Screen sizes (advanced)
4 Polyfills
5 Frameworks
Media queries
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Skeleton
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
CSS Grid
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
HTML5 Boilerplate
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Adaptive images
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Lots of screen sizes
Adaptive images
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Lots of screen sizes
2 Devices download speed
Adaptive images
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
image optimization
Adaptive images
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
image optimization
httpimageoptimpornelnet
Adaptive images
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
image optimization
httpimageoptimpornelnet
httpsmushitcom
Adaptive images
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
serve different images
Adaptive images
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
serve different images
write own JS
Adaptive images
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
serve different images
write own JS
existing solution
Adaptive images
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Adaptive images
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Flexbox
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Working draft
Flexbox
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Working draft
2 Positioning elements
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Working draft
2 Positioning elements
3 display flexbox
Flexbox
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Working draft
2 Positioning elements
3 display flexbox
4 For now - display box
Flexbox
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
4 Multi-column
3 Flexbox
2 Adaptive images
1 Media queries
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
Multi-column
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Candidate recommendation
Multi-column
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Candidate recommendation
2 Divide content into columns
Multi-column
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
1 Candidate recommendation
2 Divide content into columns
3 column-count 3
Multi-column
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
columns
Multi-column
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
columns
column-width
Multi-column
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
columns
column-width
column-count
Multi-column
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
columns
column-width
column-count
column-gap
Multi-column
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
columns
column-width
column-count
column-gap
column-rule
Multi-column
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
columns
column-width
column-count
column-gap
column-rule
column-span
Multi-column
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
QUESTIONS
Recommended