responsive webdesign
Post on 15-Sep-2014
21 views
DESCRIPTION
Presentation about Responsive Webdesign for the Microsoft UX Tour.TRANSCRIPT
![Page 1: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/1.jpg)
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
![Page 2: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/2.jpg)
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
![Page 3: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/3.jpg)
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
![Page 4: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/4.jpg)
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
![Page 5: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/5.jpg)
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
![Page 6: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/6.jpg)
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
![Page 7: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/7.jpg)
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
![Page 8: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/8.jpg)
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
![Page 9: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/9.jpg)
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
![Page 10: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/10.jpg)
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
![Page 11: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/11.jpg)
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
![Page 12: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/12.jpg)
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
![Page 13: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/13.jpg)
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
![Page 14: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/14.jpg)
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
![Page 15: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/15.jpg)
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
![Page 16: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/16.jpg)
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
![Page 17: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/17.jpg)
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
![Page 18: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/18.jpg)
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
![Page 19: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/19.jpg)
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
![Page 20: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/20.jpg)
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
![Page 21: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/21.jpg)
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
![Page 22: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/22.jpg)
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
![Page 23: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/23.jpg)
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
![Page 24: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/24.jpg)
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
![Page 25: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/25.jpg)
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
![Page 26: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/26.jpg)
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
![Page 27: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/27.jpg)
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
![Page 28: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/28.jpg)
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
![Page 29: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/29.jpg)
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
![Page 30: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/30.jpg)
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
![Page 31: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/31.jpg)
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
![Page 32: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/32.jpg)
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
![Page 33: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/33.jpg)
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
![Page 34: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/34.jpg)
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
![Page 35: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/35.jpg)
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
![Page 36: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/36.jpg)
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
![Page 37: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/37.jpg)
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
![Page 38: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/38.jpg)
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
![Page 39: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/39.jpg)
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
![Page 40: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/40.jpg)
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
![Page 41: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/41.jpg)
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
![Page 42: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/42.jpg)
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
![Page 43: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/43.jpg)
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
![Page 44: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/44.jpg)
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
![Page 45: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/45.jpg)
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
![Page 46: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/46.jpg)
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
![Page 47: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/47.jpg)
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
![Page 48: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/48.jpg)
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
![Page 49: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/49.jpg)
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
![Page 50: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/50.jpg)
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
![Page 51: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/51.jpg)
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
![Page 52: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/52.jpg)
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
![Page 53: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/53.jpg)
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
![Page 54: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/54.jpg)
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
![Page 55: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/55.jpg)
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
![Page 56: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/56.jpg)
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
![Page 57: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/57.jpg)
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
![Page 58: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/58.jpg)
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
![Page 59: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/59.jpg)
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
![Page 60: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/60.jpg)
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
![Page 61: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/61.jpg)
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
![Page 62: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/62.jpg)
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
![Page 63: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/63.jpg)
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
![Page 64: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/64.jpg)
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
![Page 65: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/65.jpg)
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
![Page 66: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/66.jpg)
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
![Page 67: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/67.jpg)
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
![Page 68: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/68.jpg)
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
![Page 69: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/69.jpg)
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
![Page 70: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/70.jpg)
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
![Page 71: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/71.jpg)
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
![Page 72: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/72.jpg)
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
![Page 73: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/73.jpg)
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
![Page 74: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/74.jpg)
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
![Page 75: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/75.jpg)
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
![Page 76: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/76.jpg)
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
![Page 77: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/77.jpg)
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
![Page 78: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/78.jpg)
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
![Page 79: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/79.jpg)
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
![Page 80: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/80.jpg)
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
![Page 81: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/81.jpg)
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
![Page 82: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/82.jpg)
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
![Page 83: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/83.jpg)
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
![Page 84: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/84.jpg)
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
![Page 85: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/85.jpg)
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
![Page 86: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/86.jpg)
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
![Page 87: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/87.jpg)
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
![Page 88: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/88.jpg)
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
![Page 89: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/89.jpg)
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
![Page 90: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/90.jpg)
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
![Page 91: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/91.jpg)
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
![Page 92: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/92.jpg)
Width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old 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
![Page 93: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/93.jpg)
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old 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
![Page 94: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/94.jpg)
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old 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
![Page 95: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/95.jpg)
4 old principles of webdesign still stand
3 Dependent of number of modules
2 Dependent of the amount of content
1 Decide on a maximum width
4 old 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
![Page 96: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/96.jpg)
4 old 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
![Page 97: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/97.jpg)
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
![Page 98: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/98.jpg)
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
![Page 99: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/99.jpg)
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
![Page 100: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/100.jpg)
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
![Page 101: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/101.jpg)
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
![Page 102: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/102.jpg)
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
![Page 103: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/103.jpg)
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
![Page 104: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/104.jpg)
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
![Page 105: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/105.jpg)
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
![Page 106: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/106.jpg)
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
![Page 107: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/107.jpg)
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
![Page 108: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/108.jpg)
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
![Page 109: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/109.jpg)
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
![Page 110: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/110.jpg)
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
![Page 111: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/111.jpg)
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
![Page 112: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/112.jpg)
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
![Page 113: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/113.jpg)
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
![Page 114: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/114.jpg)
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
![Page 115: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/115.jpg)
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
![Page 116: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/116.jpg)
4 Use a fluid 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
![Page 117: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/117.jpg)
4 Use a fluid 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
![Page 118: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/118.jpg)
4 Use a fluid 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
![Page 119: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/119.jpg)
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
![Page 120: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/120.jpg)
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
![Page 121: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/121.jpg)
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
![Page 122: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/122.jpg)
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
![Page 123: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/123.jpg)
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
![Page 124: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/124.jpg)
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
![Page 125: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/125.jpg)
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
![Page 126: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/126.jpg)
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
![Page 127: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/127.jpg)
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
![Page 128: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/128.jpg)
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
![Page 129: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/129.jpg)
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
![Page 130: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/130.jpg)
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
![Page 131: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/131.jpg)
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
![Page 132: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/132.jpg)
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
![Page 133: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/133.jpg)
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
![Page 134: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/134.jpg)
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
![Page 135: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/135.jpg)
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
![Page 136: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/136.jpg)
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
![Page 137: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/137.jpg)
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
![Page 138: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/138.jpg)
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
![Page 139: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/139.jpg)
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
![Page 140: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/140.jpg)
max-width 479px (smartphones portrait)
min-width 480px and max-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
![Page 141: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/141.jpg)
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 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
![Page 142: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/142.jpg)
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 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
![Page 143: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/143.jpg)
max-width 479px (smartphones portrait)
min-width 480px and max-width 769px (smartphones landscape)
min-width 780px and max-width 1023px (tablets portrait)
min-width 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
![Page 144: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/144.jpg)
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
![Page 145: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/145.jpg)
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
![Page 146: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/146.jpg)
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
![Page 147: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/147.jpg)
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
![Page 148: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/148.jpg)
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
![Page 149: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/149.jpg)
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
![Page 150: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/150.jpg)
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
![Page 151: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/151.jpg)
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
![Page 152: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/152.jpg)
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
![Page 153: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/153.jpg)
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
![Page 154: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/154.jpg)
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
![Page 155: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/155.jpg)
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
![Page 156: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/156.jpg)
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
![Page 157: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/157.jpg)
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
![Page 158: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/158.jpg)
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
![Page 159: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/159.jpg)
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
![Page 160: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/160.jpg)
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
![Page 161: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/161.jpg)
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
![Page 162: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/162.jpg)
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
![Page 163: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/163.jpg)
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
![Page 164: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/164.jpg)
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
![Page 165: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/165.jpg)
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
![Page 166: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/166.jpg)
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
![Page 167: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/167.jpg)
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
![Page 168: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/168.jpg)
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
![Page 169: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/169.jpg)
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
![Page 170: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/170.jpg)
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
![Page 171: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/171.jpg)
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
![Page 172: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/172.jpg)
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
![Page 173: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/173.jpg)
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
![Page 174: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/174.jpg)
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
![Page 175: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/175.jpg)
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
![Page 176: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/176.jpg)
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
![Page 177: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/177.jpg)
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
![Page 178: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/178.jpg)
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
![Page 179: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/179.jpg)
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
![Page 180: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/180.jpg)
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
![Page 181: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/181.jpg)
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
![Page 182: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/182.jpg)
httpwwww3orgTRcss3-mediaqueries
httpwwww3orgTRcss3-flexbox
httpsdevelopermozillaorgenCSS-moz-box-flex
httpwwww3orgTRcss3-multicol
httpsdevelopermozillaorgenCSS3_Columns
httpwwwslidesharenetstephenhayrealworld-
responsive-design
Useful links
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
![Page 183: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/183.jpg)
twittercomdecthomasthomasfork-cmscomwwwnetlashcom
QUESTIONS
![Page 184: Responsive webdesign](https://reader036.vdocuments.net/reader036/viewer/2022081412/541643837bef0ac1768b6a7c/html5/thumbnails/184.jpg)
QUESTIONS