Responsive webdesign

RESPONSIVEWEB DESIGNNovember 3, 2011 – Microsoft Web & Phone UX Tour Belgium

Bram Simon Thomas @bram_ @scoudeville @decthomasInformation architect Web designer Front-end developer

You may remember us from such clients as:

netlash.com/blog

1. Why you should use responsive design2. Design responsive design3. Technical challenges

Why responsive design?1. How not to approach mobile web2. Why responsive design is key3. Think mobile ﬁrst4. It starts with IA

No stats and numbers.You’re here so you knowmobile is big.

HOW NOT TOAPPROACHMOBILE WEB

Imagine:a mobile operator in 2006

We need a mobile website! Mark Obistar CEO at random mobile operator

m.*mobile.*“Go to full website”

A separate mobile website (1)‣ What about tablet pc’s?‣ What about new devices with unknown display sizes?

Raise your hand if you never usedyour smartphone laying in bed.

A separate mobile website (2)‣ Mobile users ≠ users on the road‣ You probably need all your content

“How should I conﬁgure my phoneto use mobile internet?”

m.proximus.be

m.mobistar.be

m.base.be

m.mobilevikings.be

A separate mobile website (3)‣ You’ll have to manage all your content twice

A separate mobile website (4)‣ Users share links.‣ Different users use different devices.

A separate mobile website(conclusion)‣ 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

Imagine:a newspaper company in 2010

We need an app! P. Vandermeersch CEO at a random newspaper company

FA I L

Native apps (1)Cfr. separate mobile website:‣ What about tablet pc’s?‣ Mobile users ≠ users on the road‣ You’ll have to manage all your content twice

Native apps (2)‣ Which platforms will you support? (iOS, Android, WindowsPhone)‣ Each update: - cost per platform - might take time (approval)

Native apps (3)‣ Store owners take a cut on in-app purchases

Native apps (4)‣ What about search engines?‣ Your content won’t be indexed by them

Native apps (5)‣ links to websites open in a new app (!)‣ no native browser functions (bookmarking!)‣ non selectable text (no copy-paste)‣ App’s often have their own interface language

Remind you to something?‣ issues with links to other websites‣ no native browser functions like bookmarking‣ non selectable text (no copy-paste)‣ each interface is different

Please.Let’s not go there again.

(of course native apps canbe the best answer)‣ If you need hardware functions that browsers don’t yet support (camera, compass, gyroscope, gpu power, ...).

Native apps (conclusion)‣ Different platforms to support‣ Cut on in-app-purchases‣ Content has to be managed twice and won’t be indexed by search engines‣ Risk on usability issues‣ Only if you need speciﬁc hardware functions

In a lot of cases, neither separatemobile websites nor native appsprovide an effective answer ontodays needs.

RESPONSIVEIS KEY

Responsive web design:‣ One website (content!)‣ No issues with sharing or search engines‣ One design‣ Layout adapts to any screen size

handelsbeurs.be

HOW TO START?(This is how we do it)

Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development

THINK MOBILEFIRST

What mobile ﬁrst does not mean

What mobile ﬁrst does notmean:‣ We should only focus on mobile from now on‣ Mobile is more important than desktop

Creating a website: 2 options‣ Mobile ﬁrst‣ Desktop ﬁrst

Why mobile ﬁrst (1)Mobile is harder to use‣ Smaller screen‣ Touch instead of keyboard and mouse(pad)‣ Slower internet connection

Why mobile ﬁrst (2)Mobile users have typically lesspatience‣ Because it’s harder to use‣ Might be on the move‣ Need that info to use it right now

Why mobile ﬁrst (3)Forces you to focus:‣ No space for complexity‣ No space for extra’s‣ Focus on core features and simplicity

It’s easier to make a simple thingmore complex than to make acomplex thing more simple.

If you can support the mobileweb, you can support anything.

IA FOR MOBILE(actually it counts as much for desktop)

Know the online strategy3 basics:‣ Target audience‣ Goal of the client‣ USP of the client

KISS: Keep it simple andstraightforward‣ Top tasks (key services) in main menu‣ Short and simple copy‣ Throw away anything that isn’t needed‣ White space is allowed‣ Conclusion ﬁrst, details later

“Don’t make me think” (1)‣ At any point it should be clear how to get closer to the wanted answer‣ Extra click is way better than complex navigation

“Don’t make me think” (2)‣ 2 types of page: choice page and action page‣ Homepage is a choice page

CONCLUSIONSO FAR

Conclusion so far‣ For content-driven websites, responsive web design is the future‣ Think mobile ﬁrst‣ KISS, focus on core tasks (starts with IA)

twitter.com/bram_bram@netlash.comwww.netlash.com

designingresponsive websites

1. Web design trends2. Where to start & how to start3. Fluid grid vs ﬁxed grid4. Design decisions beyond photoshop

Responsive webdesign consists of threecomponents: a ﬂuid grid, ﬂuid media andmedia queries Ethan Marcotte alistapart.com

informationarchitects.jp

simplebits.com

bostonglobe.com

mediaqueri.es

Web design trends

1. Content & organisation of content ﬁrst2. Typography3. No unnecessary visual design elements

1. Content & organisation of2. Typography3. No unnecessary visual design elements

Designingin the browser

1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessibility & appropriate hierarchy

1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessibility & appropriate

1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessibility & appropriate hierarchy

Designingin photoshop

1. Photoshop as creative outlet2. No limitations3. Try things not possible with only

1. Photoshop as creative outlet2. No limitations3. Try things not possible with only css3

Establish theglobal visual design direction

1. Starting point2. Something to fall back on3. The designer ≠ front-end dev

Before you start:solid IA for hierarchy of info

Designingproportions.

1. Forget pixels!2. Think proportions, ratios, percentages3. Modular!

Width?

1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of webdesign still stand

1. Solid grid helps establish proportions2. Forget 960 grid system3. Make your own grid

1. Solid grid helps establish proportion2. Forget 960 grid system3. Make your own grid

1. Solid grid helps establish2. Forget 960 grid system3. Make your own grid

Modular grid extension modulargrid.org

Design decisionsbeyond photoshop

Fluid grid vs ﬁxed grid

Fluid grid

1. Page adapts to every possible resolution2. Maximum width deﬁned once3. Takes up all the available space4. Harder to achieve (ﬂuid media)

1. Page adapts to every possible2. Maximum width deﬁned once3. Takes up all the available space4. Harder to achieve (ﬂuid media)

ﬁxed grid

1. Different layouts deﬁned in ﬁxed widths2. Easier to achieve.3. Not optimizied for future screen sizes?

1. Different layouts deﬁned in ﬁxed widths2. Easier to achieve.3. Not optimizied for future screen sizes

ﬂexible modules

In close association withinformation architect

best practices

1. Define a maximum width2. Start with a solid grid3. Design flexible modules4. Use a fluid layout when possible

1. Define a maximum width2. Start with a solid grid3. Design flexible modules4. Use a fluid layout when

twitter.com/scoudevillesimon@netlash.comwww.netlash.com

Front-end

1. Media queries2. Adaptive images3. Flexbox4. Multi-column

Media queries

Media queries 1. Not new

Media queries @media print { /* print styles here */ }

Media queries 1. Not new 2. Screen sizes (basics)

Media queries ‣ max-width 479px (smartphones portrait)

Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape)

Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape) ‣ max-width 1023px (tablets portrait)

Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape) ‣ max-width 1023px (tablets portrait) ‣ min-width 1024px (tablets landscape & others)

Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape) ‣ max-width 1023px (tablets portrait) ‣ min-width 1024px (tablets landscape & others) ‣ inheritance!

Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced)

Media queries ‣ max-width 479px (smartphones portrait)

Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape)

Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape) ‣ min-width 780px and max-width 1023px (tablets portrait)

Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape) ‣ min-width 780px and max-width 1023px (tablets portrait) ‣ min-width 1024px and max-width 1439px (tablets landscape & others)

Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape) ‣ min-width 780px and max-width 1023px (tablets portrait) ‣ min-width 1024px and max-width 1439px (tablets landscape & others) ‣ min-width 1440px and max-width 1919px (laptops & others)

Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape) ‣ min-width 780px and max-width 1023px (tablets portrait) ‣ min-width 1024px and max-width 1439px (tablets landscape & others) ‣ min-width 1440px and max-width 1919px (laptops & others) ‣ min-width 1920px (larger screens)

Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape) ‣ min-width 780px and max-width 1023px (tablets portrait) ‣ min-width 1024px and max-width 1439px (tablets landscape & others) ‣ min-width 1440px and max-width 1919px (laptops & others) ‣ min-width 1920px (larger screens) ‣ no inheritance

Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced) 4. Polyﬁlls

Media queries ‣ Check for native browser support

Modernizr

Respond.js

Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced) 4. Polyﬁlls 5. Frameworks

Less Framework

Golden Grid System

Skeleton

CSS Grid

HTML5 Boilerplate

Adaptive images

Adaptive images 1. Lots of screen sizes

Adaptive images 1. Lots of screen sizes 2. Devices: download speed

Adaptive images ‣ image optimization

Adaptive images ‣ image optimization ‣ http://imageoptim.pornel.net/

Adaptive images ‣ image optimization ‣ http://imageoptim.pornel.net/ ‣ http://smushit.com

Adaptive images ‣ serve different images

Adaptive images ‣ serve different images ‣ write own JS

Adaptive images ‣ serve different images ‣ write own JS ‣ existing solution

Adaptive images

Flexbox

Flexbox 1. Working draft

Flexbox 1. Working draft 2. Positioning elements

Flexbox 1. Working draft 2. Positioning elements 3. display: ﬂexbox;

Flexbox 1. Working draft 2. Positioning elements 3. display: ﬂexbox; 4. For now - display: box;

Multi-column

Multi-column 1. Candidate recommendation

Multi-column 1. Candidate recommendation 2. Divide content into columns

Multi-column 1. Candidate recommendation 2. Divide content into columns 3. column-count: 3;

Multi-column ‣ columns

Multi-column ‣ columns ‣ column-width

Multi-column ‣ columns ‣ column-width ‣ column-count

Multi-column ‣ columns ‣ column-width ‣ column-count ‣ column-gap

Multi-column ‣ columns ‣ column-width ‣ column-count ‣ column-gap ‣ column-rule

Multi-column ‣ columns ‣ column-width ‣ column-count ‣ column-gap ‣ column-rule ‣ column-span

Useful links ‣ http://www.w3.org/TR/css3-mediaqueries/ ‣ http://www.w3.org/TR/css3-ﬂexbox/ ‣ https://developer.mozilla.org/en/CSS/-moz-box-ﬂex ‣ http://www.w3.org/TR/css3-multicol/ ‣ https://developer.mozilla.org/en/CSS3_Columns ‣ http://www.slideshare.net/stephenhay/realworld- responsive-design

twitter.com/decthomasthomas@fork-cms.comwww.netlash.com

QUESTIONS?

http://www.scoop.it	78
http://a0.twimg.com	27
http://singhnehaj.blogspot.in	9
https://twimg0-a.akamaihd.net	5
http://paper.li	5
http://singhnehaj.blogspot.com	4
http://tweetedtimes.com	3
http://www.linkedin.com	2
http://us-w1.rockmelt.com	1
http://singhnehaj.blogspot.be	1
http://www.singhnehaj.blogspot.in	1

Responsive webdesign

by Bart De Waele

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 136

Statistics

Responsive webdesign Presentation Transcript