• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Responsive Web Design

on

  • 1,194 views

Responsive Web Design

Responsive Web Design

Statistics

Views

Total Views
1,194
Views on SlideShare
1,194
Embed Views
0

Actions

Likes
2
Downloads
79
Comments
0

0 Embeds 0

No embeds

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 Web Design Responsive Web Design Presentation Transcript

    • responsive Web design how to adapt websites to any browser or screen size? presented by Vu Tran LamSaturday, March 9, 13
    • when...? 2Saturday, March 9, 13
    • computer evaluation...Saturday, March 9, 13
    • the beginning of an  answer through this man...Saturday, March 9, 13
    • acinto sh… a few ye ars before the M ...in 1980 Steve Jobs recounted the following story...Saturday, March 9, 13
    • released 1984 “ ...and that’s exactly what we’re doing hereSaturday, March 9, 13
    • the computer was just the beginning...Saturday, March 9, 13
    • Steve timeline... 8Saturday, March 9, 13
    • Steve timeline...Saturday, March 9, 13
    • Steve timeline... 10Saturday, March 9, 13
    • Stevetimeline... Steve timeline...Saturday, March 9, 13
    • to be continue...Saturday, March 9, 13
    • the smartphone era begins... original the iPhone 2007Saturday, March 9, 13
    • brings touch, gestures and the real web... web touch iPhone 3G iPhone 2007 2008Saturday, March 9, 13
    • native apps and the rise of Android... android apps iPhone 3GS iPhone 3G 2007 2008 2009Saturday, March 9, 13
    • whither feature phones, and the further rise of Android... htc g-five samsung web os iPhone 4 iPhone 3G 3GS 2007 2008 2009 2010Saturday, March 9, 13
    • blackberry devices go mainstream kindle nook with great expectations... htc LG samsung motorola iPhone 5... 3G 3GS 4 2008 2009 2010 2011Saturday, March 9, 13
    • the bleeding edge... + ish via China opportunitySaturday, March 9, 13
    • welcome to the futureSaturday, March 9, 13
    • today’s digital and connected things may feel incredibly diverse... http://www.flickr.com/photos/_dchris/4652995362Saturday, March 9, 13
    • large stationary public short use (sweaty) touch Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).Saturday, March 9, 13
    • One of many Smart (internet enabled) TVs now shipping. Includes apps and a browser.   Some can be paired with a smartphone or tablet. large social stationary low-ish ppi remote (voice, gesture, app) lean-back powerful (enough)Saturday, March 9, 13
    • The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser. small touch, voice fixed (but not stationary) bandwidth constrainedSaturday, March 9, 13
    • Quantas A380 first class with 17” flat panel display. (Tethered tablets will likely appear soon). large(r) public fixed (but not stationary) manipulation unknown bandwidth constrainedSource: PC MagSaturday, March 9, 13
    • Shipping spring 2012 in Europe LG’s EPD is a 6-inch, 1024×768 e-ink plastic screen. It’s  0.7mm thick, it weighs 14g, and LG claims it’s resistantto scratches and drops from a 1.5 meter height. small(-ish) flexible constrained many unknown unknownsSaturday, March 9, 13
    • old thing (or media, or tool) + connectivity + software + user interface = smart thing old thing (just a bit smarter)Saturday, March 9, 13
    • what...?Saturday, March 9, 13
    • Responsive Web Design (RWD) is an approach to web design in which a site is created to provide an optimal viewing experience - easy reading and navigation - adapt to a wide range of devices (from desktop computer monitors to mobile phones)Saturday, March 9, 13
    • responsive websites respond to their environmentSaturday, March 9, 13
    • small + medium + large 30Saturday, March 9, 13
    • one site for every screen 31Saturday, March 9, 13
    • why...?Saturday, March 9, 13
    • the web is less than 9000 days old http://wwwflickr.com/photos/psd/3149878971Saturday, March 9, 13
    • 1/3 of people on planet using Internet2012 estimates put the population at about 7 billion inhabitants...Saturday, March 9, 13
    • 1/3 people has of a smartphoneSaturday, March 9, 13
    • 76% use mobile while waiting in queues or for appointmentsSource: Compete quarterly smartphone report, Jan 2010 http://www.flickr.com/photos/wonderdawg777/662293238Saturday, March 9, 13
    • how many... in Q4/2012? 22.9M 47.8M 37Saturday, March 9, 13
    • Saturday, March 9, 13
    • yesterday “go to the computer” to use the web/InternetSaturday, March 9, 13
    • yesterday today “go to the computer” “use mobile” to use the web/Internet to use the web/InternetSaturday, March 9, 13
    • the mobility era 2013 is the year of responsive web design 2000 1500 Internet Users (MM) Estimated mobile users =  desktop users 1000 500 0 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile users Desktop usersSource: Morgan Stanley Associates Internet Trends 2010 (PDF)Saturday, March 9, 13
    • display size/width in the beginning we had computers... 512 x 342 1984 1990 1994 1998 2004 2007Saturday, March 9, 13
    • display size/width we came to expect more and more every year... 1024 512 x 342 1024 x 768 800 640 512 1984 1990 1994 1998 2004 2007Saturday, March 9, 13
    • display size/width ..one day in 2007 less became much more 1024 512 x 342 1024 x 768 800 640 512 320 x 480 240 1984 1990 1994 1998 2004 2007Saturday, March 9, 13
    • display size/width today we seem to have a lot less more... 1024 512 x 342 1024 x 768 800 768 x 1024 640 480 x 800 512 320 x 480 240 1984 1990 1994 1998 2004 2007Saturday, March 9, 13
    • display size/width public displays with a lot more less on the horizon... 1920 x 1080 1920 1024 x 768 768 x 1024 1440 1280 600 x 1024 480 x 800 360 x 640 1024 320 x 480 800 640 240 1990 1994 1998 2004 2007 2011 2015Saturday, March 9, 13
    • how to adapt websites to these varied screens...?Saturday, March 9, 13
    • UNDESIRABLE you could not build all websites suitable for every devices... http://www.flickr.com/photos/handwrite/3460075040Saturday, March 9, 13
    • many sites for all devicesSaturday, March 9, 13
    • many sites for all devices mobile websiteSaturday, March 9, 13
    • responsive web design http://www.flickr.com/photos/farleyj/2768941171Saturday, March 9, 13
    • how...? 50Saturday, March 9, 13
    • ...we still cant see the forest for the trees... http://www.flickr.com/photos/clairity/1449248189Saturday, March 9, 13
    • our assets we treat our content as rubbish with no value... http://www.flickr.com/photos/dnorman/3590132503Saturday, March 9, 13
    • what would happen if we designed content... http://www.flickr.com/photos/pasteberlusconi/5352932503Saturday, March 9, 13
    • in a manner similar to how we design software...? http://www.flickr.com/photos/stephi2006/4428932249Saturday, March 9, 13
    • formal web design process CONTENT STRATEGY USER RESEARCH SCREENS VISUAL DESIGN DEV TESTSaturday, March 9, 13
    • ...to adapt to many types of screenSaturday, March 9, 13
    • responsive web design process VISUAL TEST STYLE PROTOTYPE USER CONTENT DESIGNRESEARCH SKETCH STRATEGY IN TEXT VISUAL DESIGN CONVERT SCREENS TO HTMLSaturday, March 9, 13
    • responsive web design process HTML STYLE GUIDE RWD PROTOTYPE VISUAL TEST STYLES PROTOTYPE USER CONTENT DESIGNRESEARCH SKETCH STRATEGY IN TEXT VISUAL DESIGN CONVERT SCREENS TO HTMLSaturday, March 9, 13
    • ways...? 59Saturday, March 9, 13
    • bún đậu mắm tôm a client makes a request to a server... http://www.flickr.com/photos/_ppo/2393063853Saturday, March 9, 13
    • many clients could make varied requests... belong to the context cơm phở cà phê trà đá bún bò nước cam http://www.flickr.com/photos/_ppo/Saturday, March 9, 13 2393063853
    • the server tailors each request to each client... 45K, nước cam... 50K, cơm... 5K, trà đá... 30K, bún... http://www.flickr.com/photos/_ppo/Saturday, March 9, 13 2393063853
    • ensuring they get exactly what they needSaturday, March 9, 13
    • how.. mobile access web on Internet? http://www.flickr.com/photos/fpat/3692425154Saturday, March 9, 13
    • q ...lets first deal with what we mean by context... mobile http://www.flickr.com/photos/sporst/3999795549Saturday, March 9, 13
    • the hell how do we make content meaningful in all of these varied devices? http://www.flickr.com/photos/izzyplante/4009893952Saturday, March 9, 13
    • and stuff you stuff you know wish you didnt... features + constraints • screen size • screen size • local storage • no touch • touch • poor JavaScript • canvas • no canvas • SVG • isMSIE • etc • etc http://www.flickr.com/photos/katerha/4330199412Saturday, March 9, 13
    • feature detection the client with both client & server working together... device database and the server "first-run" http://www.flickr.com/photos/donkeyhotey/5527263186Saturday, March 9, 13
    • first load... http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • Hmm, Huston - we have a problem... JavaScript HTML fonts initial request stylesheets images Flash video no idea what we can deliver to this client... 1 http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • $wurfl->getDevice($id); ...or another dB! PHP, Java, etc. http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • width: 320 px... use what you can... PHP, Java, etc. { width:{ screen:320    } } 2 create profile a cookie http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • we could send smaller images... JavaScript HTML fonts stylesheets images images Flash video reduce images include only those resources suitable for device context... { width:{ screen:320    } } http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • be sure to compress them if you can... { width:{ screen:320    } } http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • initial response { width:{ screen:320    } } http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • { width:{ screen:320    } } 3 detectFeatures(); JavaScript http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • { width:{ screen:320,          document:320 subsequent }, request xhr:true, canvas:true, flash:false, video:true, formats:{ h264:probably, ogg:false, webm:false }, offline:true } 4 update profile ...now with more chips! http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • sync profile 5 { width:{ screen:320,          document:320 }, xhr:true, canvas:true, flash:false, video:true, formats:{ h264:probably, ogg:false, webm:false }, offline:true } same profile on both client & server http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • now, send only whats required 6 fonts { width:{ HTMLJavaScript HTML Javascript images screen:320,          document:320 stylesheets images stylesheets }, Flash video xhr:true, canvas:true, flash:false, video video:true, formats:{ h264:probably, ogg:false, webm:false }, offline:true } ub.com/bryan rieger/profile https://gith sample code* available *fyi the code currently uses a simple profile db idea were playing with instead of WURFL... http://www.flickr.com/photos/wscullin/3770015203Saturday, March 9, 13
    • javascript input methods Ogg or profilestorage colour depth the device context is defined via appcache dpi features & constraints...screen size isBrowserLame xhr media formats custom properties based on your own tacit knowledge...HTML5 CSS isTouch doctype canvas @font-face json H.264 WebM isTabletSaturday, March 9, 13 WebGL http://www.flickr.com/photos/wscullin/3770015203
    • 81Saturday, March 9, 13
    • 82Saturday, March 9, 13
    • 83Saturday, March 9, 13
    • features & constraints device profile but only those that are screen size actually relevant... Flash embed to us HTML5 JavaScript http://www.flickr.com/photos/dullhunk/4422952742Saturday, March 9, 13
    • http://www.flickr.com/photos/aturkus/4040454167Saturday, March 9, 13
    • this is rhetorical...Saturday, March 9, 13
    • 87Saturday, March 9, 13
    • 88Saturday, March 9, 13
    • 89Saturday, March 9, 13
    • 90Saturday, March 9, 13
    • 91Saturday, March 9, 13
    • every stylesheet is not required 3 columns, really? @font support varies desktop scripts arent suitable for mobile typically perhaps a bit ambitious? ...what about scripts & stylesheets that arent suitable? ...a bit late, no? device detect earlySaturday, March 9, 13
    • ...too many HTTP requests requests... provide alternates? ...thats a lot of unsupported JavaScript! media formats... ...is Flash even supported? the right version of ...ah, that is Flash! does every device get the same Flash – if they support Flash?Saturday, March 9, 13
    • http://www.w3.org/TR/html5/video.html ...available bandwidth? ...is orthogonal to... ...screen size? this only deals with codecs - not context*... Text ...or factors that you just cant detect c.2000... Saturday, March 9, 13 fsdfff
    • ...a selection of content filtering + transformation prototypes http://www.flickr.com/photos/digger_twit/1353837770Saturday, March 9, 13
    • 96Saturday, March 9, 13
    • begin with some existing HTML content...Saturday, March 9, 13
    • Raw user agent: Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 ... Device identified as: Nokia N73 Actual Root Device ID: nokia_n73_ver1 WURFL ID: nokia_n73_ver1_submozilla50 physical_screen_height: 49 columns: 21 dual_orientation: false physical_screen_width: 37 $wurfl->getDevice($id); rows: 6 max_image_width: 229 resolution_height: 320 resolution_width: 240 max_image_height: 260 this is what were after! .. http://www.tera-wurfl.com/explore/Saturday, March 9, 13
    • resolution_width: 240 device property $html->find(img[src]);Saturday, March 9, 13
    • resolution_width: 240 device property <img /> <img /> <img />Saturday, March 9, 13
    • resolution_width: 240 device property based on... g pa panda.jpg panda@320.jp nda@240.jpg repeat process for each <img> found in document... replace each image with a more suitable alternate...Saturday, March 9, 13
    • resolution_width: 240 device property FAI L panda.jpg g pa panda@320.jp nda@240.jpg ...how many images are required? ...related elements? ..what about slightly "fuzzier" DOM elements? other elements?Saturday, March 9, 13
    • 103Saturday, March 9, 13
    • ...an interesting idea ... {{mustache}} inspiredSaturday, March 9, 13
    • *HAC K* FAI L yet revolting ...an interesting idea that d... quickly got out of control... {{m ustache}} inspire written in slippery slope PHP hacked together in PHP almost reinvented... to (should have been C for speed)... XSLT! ...apologies to @stephenhaySaturday, March 9, 13
    • 106Saturday, March 9, 13
    • ...use XSLT – after all it was made to style content!? WTF? FAI L found massive inspiration yup, thats "99 for XSLT here! Bottles of Beer" in XSLT...? ...we honestly tried, but we @$*#& XSLT!Saturday, March 9, 13
    • 108Saturday, March 9, 13
    • respon sive design & one web the mobile web is really bloody difficult... http://www.flickr.com/photos/vauvau/3466024918Saturday, March 9, 13
    • hmm... http://www.flickr.com/photos/seatbelt67/502255276Saturday, March 9, 13
    • content.app content as applications... http://www.flickr.com/photos/colindunn/4479309983Saturday, March 9, 13
    • Saturday, March 9, 13
    • make it usable and meaningful... http://www.flickr.com/photos/aubergene/970367879Saturday, March 9, 13
    • add structure to enable manipulation... http://www.flickr.com/photos/aubergene/970367879Saturday, March 9, 13
    • 115Saturday, March 9, 13
    • Saturday, March 9, 13
    • Saturday, March 9, 13
    • Saturday, March 9, 13
    • 119Saturday, March 9, 13
    • the CSS strategySaturday, March 9, 13
    • fixed width layoutsSaturday, March 9, 13
    • fixed width layoutsSaturday, March 9, 13
    • fixed width layoutsSaturday, March 9, 13
    • flexible grids layoutsSaturday, March 9, 13
    • flexible grids layoutsSaturday, March 9, 13
    • flexible grids layoutsSaturday, March 9, 13
    • adaptive (multiple fixed width layouts) or responsive (multiple fluid grid layouts)Saturday, March 9, 13
    • solution mixed approach • fixed width for large and medium • fluid width for smallSaturday, March 9, 13
    • 12 column grids layoutSaturday, March 9, 13
    • Saturday, March 9, 13
    • Saturday, March 9, 13
    • Saturday, March 9, 13
    • Saturday, March 9, 13
    • target ÷ context = result 940 100% 720 220 76.5957447% 23.40425535%Saturday, March 9, 13
    • /*          layout:  two  columns        description:  responsive        940  =  720  +  220        100%  =  76.5957447%  +  23.40425535% */ #container{ float:left; margin:0  -­‐25.5319149%  0  0; width:99%; } #content{ width:685957447%; margin:0  29.787234%  0  20px; } #primary,  #secondary{ overflow:hidden; width:23.40425535%;  /*  200px  /  940px  */ } #site-­‐tite,  #site-­‐into{   width:74.4680851%;  /*  700px  /  940px  */ } #footer-­‐widget-­‐area  .widget-­‐area,  #site-­‐generator,  #site-­‐description{ width:23.40425535%;  /*  200px  /  940px  */ }Saturday, March 9, 13
    • note mobile first design for (the simplest) mobile browser first.Saturday, March 9, 13
    • begin with a lightweight default A fully flexible with default B styles for navigation, C fonts, content and no media querySaturday, March 9, 13
    • note embrace the cascade don’t swap style sheets...let it cascade.Saturday, March 9, 13
    • demoSaturday, March 9, 13
    • each style sheet augments the others breakpoint breakpoint style sheet 1 A A B B augment once C C for another device max xx px wide xx px to xxx px (or unable to understand further instructions)Saturday, March 9, 13
    • each style sheet augments the others breakpoint breakpoint breakpoint style sheet 1 style sheet 2 A A A B B augment B C C once again for C TVs etc. max xx px wide xx px to xxx px min xxx px wide (or unable to understand further instructions)Saturday, March 9, 13
    • technique using breakpoints create breakpoints using media queries for various screens http://www.w3.org/TR/css3-mediaqueries/Saturday, March 9, 13
    • 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) }Saturday, March 9, 13
    • a more robust option multiple style sheets with media queries on the inside MAJOR BREAKPOINTS IN DOCUMENT HEAD basic.css mobile.css desktop.css MINOR typically) @media { @media { BREAKPOINTS no media (min-width: 480px) (min-width: 1024px) WITHIN EACH queries } } STYLE SHEET @media { (min-width: 640px) }Saturday, March 9, 13
    • MAJOR BREAKPOINTS IN DOCUMENT HEAD <link  rel="stylesheet"  type="text/css"  href="stylesheets/base.css" media="screen,handheld"  /> <link  rel="stylesheet"  type="text/css"  href="stylesheets/mobile.css" media="only  screen  and  (min-­‐width:320px)"  /> <link  rel="stylesheet"  type="text/css"  href="stylesheets/desktop.css" media="only  screen  and  (min-­‐width:720px)"  /> MINOR BREAKPOINTSWITHIN EACH STYLE SHEET @media  screen  and  (min-­‐width:1024px)  {   section  ul  li  {     width:20%;   } }Saturday, March 9, 13
    • don’t multiple style sheets cause multiple http requests? (which will affect performance)Saturday, March 9, 13
    • (P) = Portrait Example (L) = Landscape (L*) = Landscape w/ native viewport adaptation major breakpoints major layout changes Major Breakpoint 1 Major Breakpoint 2 (media query in document head) (media query in document head) Major Breakpoint 3 (media query in document head) 1024 320 px to 720 px wide 720 px to 1024 px 320 720 min 320 px wide and/or unable to nothing is understand here...but some tablets further that’s ok! most NetBooks instructions iPhone (P) many Desktops many Android (P) many BlackBerry S60 QWERTY Most S60 (L)Saturday, March 9, 13
    • demoSaturday, March 9, 13
    • technique responsive content create responsive text, media, data table and navigationSaturday, March 9, 13
    • responsive images suitable for any screen 146Saturday, March 9, 13
    • Saturday, March 9, 13
    • HTML <div  class="figure"> <p> <img  src="robot.jpg"  alt=""  />   <b  class="figcaption">Lo,  the  robot  walks</b> </p> </div> CSS .figure{ float:  right; margin-­‐bottom:  0.5em; margin-­‐left:  2.53164557%;    /*  12px  /  474px  */ width:  48.7341772%;    /*  231px  /  474px  */ } img{ img,  embed,  object,  video{ max-­‐width:  100%; width:  100%; } height:  auto; }Saturday, March 9, 13
    • 149Saturday, March 9, 13
    • HTML <picture  width="500"  height="500">      <source  media="(min-­‐width:  45em)"  srcset="l1.jpg  1x,  l2.jpg  2x">      <source  media="(min-­‐width:  18em)"  srcset="m1.jpg  1x,  m2.jpg  2x">      <source  srcset="s1.jpg  1x,  s2.jpg  2x">      <img  src="s1.jpg"  alt="">      <p>Accessible  Text</p> </picture> JAVASCRIPT <script  src=="picturefill.js"></script>Saturday, March 9, 13
    • 62.5% rule em2px • modern browsers have a 16px font default size • body {font-size: 62.5%;} --> 16 x 62.5 = 10px • p {font-size: 1.3em;} • top and line-height should be em’s • avoid nested em definitions 151Saturday, March 9, 13
    • demoSaturday, March 9, 13
    • responsive data table e en data fit into each scr 153Saturday, March 9, 13
    • demoSaturday, March 9, 13
    • responsive navigation r each screen navigation suitable fo horizontal menu for desktop screen drop down list menu for mobile deviceSaturday, March 9, 13
    • demoSaturday, March 9, 13
    • where...?Saturday, March 9, 13
    • references 158Saturday, March 9, 13
    • references Ethan Marcotte Author of Responsive Web DesignBrains behind the Boston Globe redesign unstoppablerobotninja.com Tuts+Great web design tutorials and articles webdesign.tutsplus.com 158Saturday, March 9, 13
    • references Ethan Marcotte Treehouse Author of Responsive Web Design Web Design and Development Learning SiteBrains behind the Boston Globe redesign teamtreehouse.com unstoppablerobotninja.com Tuts+ This Is ResponsiveGreat web design tutorials and articles Patterns, resources and news webdesign.tutsplus.com bradfrost.github.com/this-is-responsive 158Saturday, March 9, 13
    • frameworksSaturday, March 9, 13
    • frameworks Simple, fluid HTML/CSS/JS framework from Twitter Bootstrap Flexible 6 and 12-grid framework. FoundationSaturday, March 9, 13
    • frameworks Simple, fluid HTML/CSS/JS framework Fixed width for medium & large screens, from Twitter fluid single column for small Bootstrap goldilocksapproach.com Flexible 6 and 12-grid framework. Minimal responsive framework. Foundation Includes Wordpress theme. SkeletonSaturday, March 9, 13
    • ...and plenty moreSaturday, March 9, 13
    • please say xin chào lamvt@fpt.com.vn thank you the font used is Museo http://www.exljbris.com/museo.html many thanks to flickr http://www.flickr.com/creativecommons/by-2.0 @yiibu http://.yiibu.com http://www.flickr.com/photos/tinou/453593446Saturday, March 9, 13