203
November 3, 2011 – Microsoft Web & Phone UX Tour Belgium RESPONSIVE WEB DESIGN

Responsive Webdesign - UXtour Microsoft

Embed Size (px)

DESCRIPTION

I presentation I did for the Microsoft UXtour together with 2 colleagues (Bram Vanderhaeghe and Simon Coudeville)

Citation preview

Page 1: Responsive Webdesign - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

4 Design decisions beyond photoshop

3 Fluid grid vs fixed grid

2 Where to start amp how to start

1 Web design 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 - UXtour Microsoft

4 Design decisions beyond photoshop

3 Fluid grid vs fixed grid

2 Where to start amp how to start

1 Web design 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 - UXtour Microsoft

4 Design decisions beyond photoshop

3 Fluid grid vs fixed grid

2 Where to start amp how to start

1 Web design 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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

3 No unnecessary visual 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 - UXtour Microsoft

3 No unnecessary visual 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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

4 Accessibility amp appropriate hierarchy

3 Content organisation before design

2 A static image doesnrsquot feel like a real page

1 The browser is our canvas

4 Accessibility amp appropriate hierarchy

3 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 - UXtour Microsoft

4 Accessibility amp appropriate hierarchy

3 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 - UXtour Microsoft

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 - UXtour Microsoft

4 Accessibility 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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

3 The designer ne front-end dev

2 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 - UXtour Microsoft

3 The designer ne front-end dev

2 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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

Width

4 old principles of webdesign still stand

3 Dependent of number of modules

2 Dependent of the amount of content

1 Decide on a maximum width

4 old principles of webdesign still stand

3 Dependent of number of modules

2 Dependent of the amount of content

1 Decide on a maximum width

4 old principles of webdesign still stand

3 Dependent of number of modules

2 Dependent of the amount of content

1 Decide on a maximum width

4 old 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 - UXtour Microsoft

4 old principles of webdesign still stand

3 Dependent of number of modules

2 Dependent of the amount of content

1 Decide on a maximum width

4 old principles of webdesign still stand

3 Dependent of number of modules

2 Dependent of the amount of content

1 Decide on a maximum width

4 old principles of webdesign still stand

3 Dependent of number of modules

2 Dependent of the amount of content

1 Decide on a maximum width

4 old 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 - UXtour Microsoft

4 old principles of webdesign still stand

3 Dependent of number of modules

2 Dependent of the amount of content

1 Decide on a maximum width

4 old principles of webdesign still stand

3 Dependent of number of modules

2 Dependent of the amount of content

1 Decide on a maximum width

4 old 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 - UXtour Microsoft

4 old principles of webdesign still stand

3 Dependent of number of modules

2 Dependent of the amount of content

1 Decide on a maximum width

4 old 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 - UXtour Microsoft

4 old 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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

4 Harder to achieve (fluid media)

3 Takes up all the available space

2 Maximum width defined once

1 Page adapts to every possible

4 Harder to achieve (fluid media)

3 Takes up all the available space

2 Maximum width defined once

1 Page adapts to every possible

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 - UXtour Microsoft

4 Harder to achieve (fluid media)

3 Takes up all the available space

2 Maximum width defined once

1 Page adapts to every possible

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

3 Not optimizied for future screen sizes

2 Easier to achieve

1 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 - UXtour Microsoft

3 Not optimizied for future screen sizes

2 Easier to achieve

1 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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

4 Use a fluid layout when possible

3 Design flexible modules

2 Start with a solid grid

1 Define a maximum width

4 Use a fluid layout when possible

3 Design flexible modules

2 Start with a solid grid

1 Define a maximum width

4 Use a fluid 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 - UXtour Microsoft

4 Use a fluid layout when possible

3 Design flexible modules

2 Start with a solid grid

1 Define a maximum width

4 Use a fluid 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 - UXtour Microsoft

4 Use a fluid 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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

4 Multi-column

3 Flexbox

2 Adaptive images

1 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 - UXtour Microsoft

4 Multi-column

3 Flexbox

2 Adaptive images

1 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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

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 - UXtour Microsoft

Media queries

media print print styles here

1 Not new

2 Screen sizes (basics)

Media queries

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

Media queries

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Not new

2 Screen sizes (basics)

Media queries

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

Media queries

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

Media queries

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

Media queries

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

Media queries

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

Media queries

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

Media queries

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

max-width 767px (smartphones landscape)

max-width 1023px (tablets portrait)

min-width 1024px (tablets landscape amp others)

inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

Media queries

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

Media queries

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

Media queries

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

max-width 479px (smartphones portrait)

min-width 480px and max-width 769px (smartphones landscape)

min-width 780px and max-width 1023px (tablets portrait)

min-width 1024px and max-width 1439px (tablets landscape amp

others)

min-width 1440px and max-width 1919px (laptops amp others)

min-width 1920px (larger screens)

no inheritance

Media queries

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

Media queries

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

Check for native browser support

Media queries

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

Modernizr

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

Respondjs

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Not new

2 Screen sizes (basics)

3 Screen sizes (advanced)

4 Polyfills

5 Frameworks

Media queries

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

Skeleton

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

CSS Grid

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

HTML5 Boilerplate

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

Adaptive images

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Lots of screen sizes

Adaptive images

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Lots of screen sizes

2 Devices download speed

Adaptive images

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

image optimization

Adaptive images

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

image optimization

httpimageoptimpornelnet

Adaptive images

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

image optimization

httpimageoptimpornelnet

httpsmushitcom

Adaptive images

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

serve different images

Adaptive images

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

serve different images

write own JS

Adaptive images

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

serve different images

write own JS

existing solution

Adaptive images

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

Adaptive images

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

Flexbox

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Working draft

Flexbox

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Working draft

2 Positioning elements

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Working draft

2 Positioning elements

3 display flexbox

Flexbox

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Working draft

2 Positioning elements

3 display flexbox

4 For now - display box

Flexbox

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

4 Multi-column

3 Flexbox

2 Adaptive images

1 Media queries

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

Multi-column

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Candidate recommendation

Multi-column

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Candidate recommendation

2 Divide content into columns

Multi-column

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

1 Candidate recommendation

2 Divide content into columns

3 column-count 3

Multi-column

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

columns

Multi-column

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

columns

column-width

Multi-column

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

columns

column-width

column-count

Multi-column

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

columns

column-width

column-count

column-gap

Multi-column

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

columns

column-width

column-count

column-gap

column-rule

Multi-column

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

columns

column-width

column-count

column-gap

column-rule

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 - UXtour Microsoft

httpwwww3orgTRcss3-mediaqueries

httpwwww3orgTRcss3-flexbox

httpsdevelopermozillaorgenCSS-moz-box-flex

httpwwww3orgTRcss3-multicol

httpsdevelopermozillaorgenCSS3_Columns

httpwwwslidesharenetstephenhayrealworld-

responsive-design

Useful links

twittercomdecthomasthomasfork-cmscomwwwnetlashcom

QUESTIONS

Page 183: Responsive Webdesign - UXtour Microsoft

twittercomdecthomasthomasfork-cmscomwwwnetlashcom

QUESTIONS

Page 184: Responsive Webdesign - UXtour Microsoft

QUESTIONS