Responsive webdesign
Upcoming SlideShare
Loading in...5
×
 

Responsive webdesign

on

  • 7,745 views

Presentation about Responsive Webdesign for the Microsoft UX Tour.

Presentation about Responsive Webdesign for the Microsoft UX Tour.

Statistics

Views

Total Views
7,745
Views on SlideShare
7,599
Embed Views
146

Actions

Likes
22
Downloads
350
Comments
0

12 Embeds 146

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive webdesign Responsive webdesign Presentation Transcript

  • 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 first4. 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 configure 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 specific 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 first does not mean
  • What mobile first does notmean:‣ We should only focus on mobile from now on‣ Mobile is more important than desktop
  • Creating a website: 2 options‣ Mobile first‣ Desktop first
  • Why mobile first (1)Mobile is harder to use‣ Smaller screen‣ Touch instead of keyboard and mouse(pad)‣ Slower internet connection
  • Why mobile first (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 first (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.
  • Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  • 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 first, 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 first‣ KISS, focus on core tasks (starts with IA)
  • twitter.com/bram_bram@netlash.comwww.netlash.com
  • designingresponsive websites
  • Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  • 1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
  • 1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
  • 1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
  • 1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
  • Responsive webdesign consists of threecomponents: a fluid grid, fluid media andmedia queries Ethan Marcotte alistapart.com
  • informationarchitects.jp
  • simplebits.com
  • bostonglobe.com
  • mediaqueri.es
  • Web design trends
  • 1. Content & organisation of content first2. Typography3. No unnecessary visual design elements
  • 1. Content & organisation of content first2. 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 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
  • 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
  • 1. Starting point2. Something to fall back on3. The designer ≠ front-end dev
  • 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!
  • 1. Forget pixels!2. Think proportions, ratios, percentages3. Modular!
  • 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. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of webdesign still stand
  • 1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of webdesign still stand
  • 1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of webdesign still stand
  • Grid!
  • 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 fixed grid
  • Fluid grid
  • 1. Page adapts to every possible resolution2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid media)
  • 1. Page adapts to every possible2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid media)
  • 1. Page adapts to every possible2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid media)
  • 1. Page adapts to every possible2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid media)
  • fixed grid
  • 1. Different layouts defined in fixed widths2. Easier to achieve.3. Not optimizied for future screen sizes?
  • 1. Different layouts defined in fixed widths2. Easier to achieve.3. Not optimizied for future screen sizes?
  • 1. Different layouts defined in fixed widths2. Easier to achieve.3. Not optimizied for future screen sizes
  • flexible 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 possible
  • 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
  • Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  • 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 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. Polyfills
  • Media queries ‣ Check for native browser support
  • Modernizr
  • Respond.js
  • Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced) 4. Polyfills 5. Frameworks
  • Less Framework
  • Golden Grid System
  • Skeleton
  • CSS Grid
  • HTML5 Boilerplate
  • 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 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
  • 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • Flexbox
  • Flexbox 1. Working draft
  • Flexbox 1. Working draft 2. Positioning elements
  • Flexbox 1. Working draft 2. Positioning elements 3. display: flexbox;
  • Flexbox 1. Working draft 2. Positioning elements 3. display: flexbox; 4. For now - display: box;
  • 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 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-flexbox/ ‣ https://developer.mozilla.org/en/CSS/-moz-box-flex ‣ 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?