• Save
Responsible Web Design
Upcoming SlideShare
Loading in...5
×
 

Responsible Web Design

on

  • 7,502 views

A talk I gave at the annual EVRY Summer Symposium, aiming to inspire developers to develop responsibly and responsively.

A talk I gave at the annual EVRY Summer Symposium, aiming to inspire developers to develop responsibly and responsively.

Statistics

Views

Total Views
7,502
Views on SlideShare
7,498
Embed Views
4

Actions

Likes
7
Downloads
0
Comments
0

3 Embeds 4

http://pinterest.com 2
http://www.linkedin.com 1
http://www.redditmedia.com 1

Accessibility

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

Responsible Web Design Responsible Web Design Presentation Transcript

  • responsible web design JONAS PÄCKOS EVRY SENSOMMARSYMPOSIUM 2012
  • web and mobile ux developer WEB DESIGNER ++
  • changes in personal computing http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
  • changes in personal computing http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
  • http://thenextweb.com/apple/2012/01/25/there-are-now-more-iphones-sold-than-babies-born-in-the-world-every-day/
  • responsive web design
  • responsive web design Fluid grids Flexible Media Media Queries
  • fluid gridshttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  • 640 x 480 800 x 6001024 x 768
  • http://www.floridadisaster.org/SiteView.htm
  • flexible media Images Video
  • flexible media
  • flexible media 1024px 683px
  • flexible mediaimg, video { max-width: 100%;}
  • media queries@media screen and (min-width:320px) and (max-width: 768px){...}
  • common breakpoints 320px mobile portrait 480px mobile landscape 600px small tablet 768px tablet portrait1024px tablet landscape / netbook1280px desktop
  • ”Responsive design is not about“designing for mobile.” But it’s notabout “designing for the desktop,”either. - Ethan Marcotte http://unstoppablerobotninja.com/entry/toffee-nosed/
  • ”Rather, it’s about adopting a moreflexible, device-agnostic approachto designing for the web. - Ethan Marcotte http://unstoppablerobotninja.com/entry/toffee-nosed/
  • ”Fluid grids, flexible images, andmedia queries are the tools we useto get a bit closer to that somewhatabstract-sounding philosophy. - Ethan Marcotte http://unstoppablerobotninja.com/entry/toffee-nosed/
  • common breakpoints 320px mobile portrait 480px mobile landscape 600px small tablet 768px tablet portrait1024px tablet landscape / netbook1280px desktop
  • Today’s common breakpoints aren’ttomorrow’s. Create a device-agnosticflexible platform. - Brad Frost http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
  • android fragmentationThe Study. Over the past 6 months weve been logging the new devices that download OpenSignalMaps, weve based this study on 681,900 of these devices. Weve lat model, brand, API level (i.e. the version of Android) and screen size and weve tried to present this in the clearest form we can. http://opensignalmaps.com/reports/fragmentation.php
  • Over the past 6 months weve beenlogging the new devices that downloadOpenSignalMaps, weve based this studyon 681,900 of these devices. http://opensignalmaps.com/reports/fragmentation.php
  • Weve looked at model, brand, API level(i.e. the version of Android) and screensize and weve tried to present this inthe clearest form we can. http://opensignalmaps.com/reports/fragmentation.php
  • android fragmentation http://opensignalmaps.com/reports/fragmentation.php
  • android versionshttp://opensignalmaps.com/reports/fragmentation.php
  • screen resolutionhttp://opensignalmaps.com/reports/fragmentation.php
  • screen resolution Android
  • screen resolutionAndroid, most common screen sizes
  • screen resolution iPhone and iPad
  • http://designmind.frogdesign.com/blog/the-coming-zombie-apocalypse-small-cheap-devices- will-disrupt-our-old-school-ux-assumptions.htm
  • responsive web design contentperformance strategy feature touch detection conditional rwd with server-side loading components Photo Credit: http://howthehellshouldiknow-wallyworld.blogspot.se/2011/08/this-is-just-tip-of-iceberg.html
  • performance
  • 71% Mobile web users expect websites to load as fast if not faster than desktop siteshttp://www.compuware.com/d/release/592528/new-study-reveals-the-mobile-web-disappoints-global-consumers
  • 74%Mobile users will abandon a site if it takes more than 5 seconds to load http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile/
  • 1 MB Average page sizehttp://gigaom.com/2012/05/23/the-growing-epidemic-of-page-bloat/
  • Average Page, 2012JS IMG CSS FLASH HTML OTHER 196kb 31kb46kb 82kb 674kb 37kb
  • http://mobitest.akamai.com/m/index.cgi
  • http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  • structure content first
  • work with real content
  • start with mobile
  • WYSIWYG
  • Do websites need to look exactly the same in every browser?
  • screen resolutionhttp://opensignalmaps.com/reports/fragmentation.php
  • WYSIWTF
  • http://styletil.es
  • http://styletil.es
  • http://foundation.zurb.com
  • http://twitter.github.com/bootstrap/
  • http://twitter.github.com/bootstrap/examples/fluid.html
  • twitter bootstrap mediaqueries @media (min-width: 1200px) {...} @media (max-width: 980px) {...} @media (max-width: 768px) {...} @media (max-width: 480px) {...} @media (max-width: 320px) {...} http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
  • a more mobile-first approach@media (min-width: 320px) {...}@media (min-width: 480px) {...}@media (min-width: 768px) {...}@media (min-width: 980px) {...}@media (min-width: 1200px) {...} http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
  • common breakpoints 320px mobile portrait 480px mobile landscape 600px small tablet 768px tablet portrait1024px tablet landscape / netbook1280px desktop
  • Today’s common breakpoints aren’ttomorrow’s. Create a device-agnosticflexible platform. - Brad Frost http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
  • a mobile-first and content connected approach@media (min-width: 44em) {...}@media (min-width: 56em) {...}@media (min-width: 72em) {...}@media (min-width: 100em) {...} http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
  • ”The absence of a media query isin fact, the first media query. - Bryan Rieger http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  • begin with a lightweight defaultA fully flexible with defaultB styles for navigation, fonts, content andC no media query http://www.slideshare.net/yiibu/pragmatic-responsive-design
  • each style sheet augments the others breakpoint breakpoint style sheet 1 augment original A A B style sheet with B C (only) the style C changes that are needed to enhance the layout < xx px wide xx px to xxx px (or unable tounderstand further http://www.slideshare.net/yiibu/pragmatic-responsive-design instructions)
  • each style sheet augments the others breakpoint breakpoint breakpoint style sheet 1 style sheet 2 A C A A B B augment B C once again for C TVs etc. < xx px wide xx px to xxx px >xxx px wide (or unable tounderstand further http://www.slideshare.net/yiibu/pragmatic-responsive-design instructions)
  • a common approach One style sheet with media queries on the inside. styles.css @media { (min-width: 320px) } a single css file is network @media { efficient, but includes (min-width: 480px) unnecessary style data that } all devices end up downloading @media { (min-width: 640px) } @media { (min-width: 768px)http://www.slideshare.net/yiibu/pragmatic-responsive-design }
  • a more robust option Multiple style sheets with media queries on the inside.MAJORBREAKPOINTSIN DOCUMENTHEAD basic.css mobile.css desktop.cssMINOR (typically) @media { @media {BREAKPOINTS no media (min-width: 480px) (min-width: 768px)WITHIN EACH queries } }STYLE SHEET @media { (min-width: 640px) } http://www.slideshare.net/yiibu/pragmatic-responsive-design
  • http://scottjehl.github.com/CSS-Download-Tests/
  • http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu
  • http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu
  • To load the Facebook,Twitter and Google socialmedia buttons for a total of19 requests takes 246.7k inbandwidth. http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu
  • https://twitter.com/stephenhay/status/157430546396483587
  • progressively enhanced social icons<a href="http://www.facebook.com/sharer.php?u=URL&t=TITLE">link or image</a><a href="http://twitter.com/home?status=STATUS" title="Clickto share this post on Twitter">Share on Twitter</a><a href="https://m.google.com/app/plus/x/?v=compose&content=CONTENT">Image or text</a>
  • progressive enhancement JavaScript Behaviour CSS Presentation HTML Stabile foundation
  • aggressive enhancementSome devices can’t display carousels, so why burden those devices with content that they don’t need? Progressive enhancement is where you gradually layer new functionality into a site according to the capabilities of the browser or device. Aggressive enhancement goes further, treating content itself as an enhancement. http://globalmoxie.com/blog/making-of-people-mobile.shtml
  • aggressive enhancement If a browser doesn’t have JavaScript, it doesn’t evendownload the secondary carousel content. The result is a light page that lets the browser start rendering that basic content right away. It’s a technique that’s respectful of visitors’ bandwidth, computing power, and time. It’s not only responsive, it’s responsible. http://globalmoxie.com/blog/making-of-people-mobile.shtml
  • south street enhancement toolsEnhancea tiny JavaScript framework designed to help developers determine if a browser iscapable of handling additional JavaScript and CSS enhancements, and load specificenhancements for that browser as fast and simply as possible.eCSSentialan experimental utility for making browsers load responsive CSS in a more responsibleway.QuickConcata simple dynamic concatenator for html, css, and js files, written in PHPAjaxIncludea plugin that is designed for modular content construction, that runs on jQueryAppendAroundA JavaScript pattern for responsive, roving markup. IA L SOUTH NT DE EC S SE STREET AJ A XIN C LUPictureFilla simple pattern for overhead-free responsive images today. https://github.com/filamentgroup/Southstreet
  • http://www.lukew.com/ff/entry.asp?1392
  • the smart tv
  • http://www.alistapart.com/articles/dao/http://www.alistapart.com/articles/dao/
  • ”Make pages which are accessible,regardless of the browser, platformor screen that your reader choosesor must use to access your pages. - John Allsop http://www.alistapart.com/articles/dao/
  • ”Designing adaptable pages isdesigning accessible pages. - John Allsop http://www.alistapart.com/articles/dao/
  • ”Design responsibly! - Jonas Päckos
  • thank you.http://about.me/pekkoshttp://www.slideshare.net/pekkos @pekkos