Your SlideShare is downloading. ×
  • Like
Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive Web Design

  • 1,100 views
Published

Responsive Web Design

Responsive Web Design

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,100
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
96
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. responsive Web design how to adapt websites to any browser or screen size? presented by Vu Tran Lam Saturday, March 9, 13
  • 2. 2 when...? Saturday, March 9, 13
  • 3. computer evaluation... Saturday, March 9, 13
  • 4. the beginning of an  answer through this man... Saturday, March 9, 13
  • 5. ...in 1980 Steve Jobs recounted the following story... a few years before the Macintosh… Saturday, March 9, 13
  • 6. released 1984 ...and that’s exactly what we’re doing here “ Saturday, March 9, 13
  • 7. the computer was just the beginning... Saturday, March 9, 13
  • 8. 8 Steve timeline... Saturday, March 9, 13
  • 9. Steve timeline... Saturday, March 9, 13
  • 10. 10 Steve timeline... Saturday, March 9, 13
  • 11. Steve timeline...Steve timeline... Saturday, March 9, 13
  • 12. to be continue... Saturday, March 9, 13
  • 13. 2007 the iPhone original era begins... the smartphone Saturday, March 9, 13
  • 14. brings touch, gestures iPhone 3G web touch and the real web... iPhone 2007 2008 Saturday, March 9, 13
  • 15. 20082007 2009 3GiPhone iPhone 3GS native apps and android apps the rise of Android... Saturday, March 9, 13
  • 16. iPhone 2007 iPhone 4 2010 3GS whither feature phones, htc g-five samsung and the further rise of Android... 2008 web os 3G 2009 Saturday, March 9, 13
  • 17. 2008 2009 3G 2010 3GS 2011 4 blackberry kindle nook devices go mainstream iPhone 5... with great expectations... samsung motorola htc LG Saturday, March 9, 13
  • 18. opportunity the bleeding edge... 'ish via China+ Saturday, March 9, 13
  • 19. welcome to the future Saturday, March 9, 13
  • 20. http://www.flickr.com/photos/_dchris/4652995362 today’s digital and connected things may feel incredibly diverse... Saturday, March 9, 13
  • 21. large stationary Internet enabled treadmill. Currently considered a luxury product (...give it 18 months). public short use (sweaty) touch Saturday, March 9, 13
  • 22. stationarysocial lean-back powerful (enough)remote (voice, gesture, app) One of many Smart (internet enabled) TVs now shipping. Includes apps and a browser.   Some can be paired with a smartphone or tablet. low-ish ppi large Saturday, March 9, 13
  • 23. The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser. small touch, voice fixed (but not stationary) bandwidth constrained Saturday, March 9, 13
  • 24. Quantas A380 first class with 17” flat panel display. (Tethered tablets will likely appear soon). manipulation unknown large(r) fixed (but not stationary) bandwidth constrained public Source: PC Mag Saturday, March 9, 13
  • 25. 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. constrained flexible small(-ish) many unknown unknowns Saturday, March 9, 13
  • 26. + + = + connectivity software old thing (or media, or tool) thing smart old thing (just a bit smarter) user interface Saturday, March 9, 13
  • 27. what...? Saturday, March 9, 13
  • 28. 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
  • 29. responsive websites respond to their environment Saturday, March 9, 13
  • 30. 30 small + medium + large Saturday, March 9, 13
  • 31. 31 one site for every screen Saturday, March 9, 13
  • 32. why...? Saturday, March 9, 13
  • 33. the web is less than 9000 days old http://wwwflickr.com/photos/psd/3149878971 Saturday, March 9, 13
  • 34. 1/3 2012 estimates put the population at about 7 billion inhabitants... Internet of people on planet using Saturday, March 9, 13
  • 35. 1/3 people has a smartphone of Saturday, March 9, 13
  • 36. Source: Compete quarterly smartphone report, Jan 2010 http://www.flickr.com/photos/wonderdawg777/662293238 76% use mobile while waiting in queues or for appointments Saturday, March 9, 13
  • 37. 37 how many... in Q4/2012? 22.9M 47.8M Saturday, March 9, 13
  • 38. Saturday, March 9, 13
  • 39. yesterday “go to the computer” to use the web/Internet Saturday, March 9, 13
  • 40. yesterday “go to the computer” to use the web/Internet today “use mobile” to use the web/Internet Saturday, March 9, 13
  • 41. InternetUsers(MM)Estimated 1000 2007 2008 2009 2010 2011 2012 2013 2014 2015 Desktop users Source: Morgan Stanley Associates Internet Trends 2010 (PDF) mobile users =  desktop users 2000 1500 500 Mobile users the mobility era 0 2013 is the year of responsive web design Saturday, March 9, 13
  • 42. 1984 1990 1994 1998 2004 2007 display size/width 512 x 342 in the beginning we had computers... Saturday, March 9, 13
  • 43. 1984 1990 1994 1998 2004 2007 640 800 1024 x 768512 x 342 1024 512 we came to expect more and more every year... display size/width Saturday, March 9, 13
  • 44. 240 320 x 480 1984 1990 1994 1998 2004 2007 640 800 1024 x 768512 x 342 1024 512 ..one day in 2007 less became much more display size/width Saturday, March 9, 13
  • 45. 768 x 1024 240 320 x 480 1984 1990 1994 1998 2004 2007 640 800 1024 x 768512 x 342 1024 512 480 x 800 today we seem to have a lot less more... display size/width Saturday, March 9, 13
  • 46. 1990 1994 1998 2004 2007 2011 2015 640 800 1280 1024 x 768 240 1440 600 x 1024 768 x 1024 with a lot more less on the horizon... public displays 1920 x 1080 1920 1024 320 x 480 480 x 800 360 x 640 display size/width Saturday, March 9, 13
  • 47. how to adapt websites to these varied screens...? Saturday, March 9, 13
  • 48. you could not build all websites http://www.flickr.com/photos/handwrite/3460075040 UNDESIRABLE suitable for every devices... Saturday, March 9, 13
  • 49. many sites for all devices Saturday, March 9, 13
  • 50. many sites for all devices mobile website Saturday, March 9, 13
  • 51. http://www.flickr.com/photos/farleyj/2768941171 responsive web design Saturday, March 9, 13
  • 52. 50 how...? Saturday, March 9, 13
  • 53. http://www.flickr.com/photos/clairity/1449248189 ...we still can't see the forest for the trees... Saturday, March 9, 13
  • 54. http://www.flickr.com/photos/dnorman/3590132503 as rubbish with no value... we treat our content our assets Saturday, March 9, 13
  • 55. http://www.flickr.com/photos/pasteberlusconi/5352932503 what would happen if we designed content... Saturday, March 9, 13
  • 56. http://www.flickr.com/photos/stephi2006/4428932249 to how we design software...? in a manner similar Saturday, March 9, 13
  • 57. CONTENT STRATEGY SCREENS VISUAL DESIGN USER RESEARCH DEV TEST formal web design process Saturday, March 9, 13
  • 58. ...to adapt to many types of screen Saturday, March 9, 13
  • 59. USER RESEARCH CONTENT STRATEGY DESIGN IN TEXT VISUAL STYLE CONVERT TO HTML VISUAL DESIGN PROTOTYPE TEST SKETCH SCREENS responsive web design process Saturday, March 9, 13
  • 60. USER RESEARCH CONTENT STRATEGY DESIGN IN TEXT VISUAL STYLES CONVERT TO HTML VISUAL DESIGN PROTOTYPE TEST SKETCH SCREENS HTML STYLE GUIDE RWD PROTOTYPE responsive web design process Saturday, March 9, 13
  • 61. 59 ways...? Saturday, March 9, 13
  • 62. bún đậu mắm tôm http://www.flickr.com/photos/_ppo/2393063853 a client makes a request to a server... Saturday, March 9, 13
  • 63. bún bò phở trà đá cà phê cơm many clients could make belong to the context nước cam http://www.flickr.com/photos/_ppo/ 2393063853 varied requests... Saturday, March 9, 13
  • 64. 45K, nước cam... 5K, trà đá... the server tailors each request to each client... 30K, bún... 50K, cơm... http://www.flickr.com/photos/_ppo/ 2393063853Saturday, March 9, 13
  • 65. what they need ensuring they get exactly Saturday, March 9, 13
  • 66. http://www.flickr.com/photos/fpat/3692425154 how.. mobile access web on Internet? Saturday, March 9, 13
  • 67. q http://www.flickr.com/photos/sporst/3999795549 ...let's first deal with what we mean by 'context'... mobile Saturday, March 9, 13
  • 68. http://www.flickr.com/photos/izzyplante/4009893952 in all of these varied devices? how do we make content meaningful the hell Saturday, March 9, 13
  • 69. stuff you know and stuff you wish you didn't... features constraints+ • screen size • local storage • touch • canvas • SVG • etc • screen size • no touch • poor JavaScript • no canvas • isMSIE • etc http://www.flickr.com/photos/katerha/4330199412 Saturday, March 9, 13
  • 70. http://www.flickr.com/photos/donkeyhotey/5527263186 the client and the server working together... with both client & server feature detection device database "first-run" Saturday, March 9, 13
  • 71. http://www.flickr.com/photos/wscullin/3770015203 first load... Saturday, March 9, 13
  • 72. fontsJavaScript images video initial request 1 Hmm, Huston - we have a problem... HTML stylesheets Flash no idea what we can deliver to this client... http://www.flickr.com/photos/wscullin/3770015203 Saturday, March 9, 13
  • 73. http://www.flickr.com/photos/wscullin/3770015203 $wurfl->getDevice($id); PHP, Java, etc. ...or another dB! Saturday, March 9, 13
  • 74. width: 320 px... use what you can... create profile 2 { width:{ screen:320    } } a cookie http://www.flickr.com/photos/wscullin/3770015203 PHP, Java, etc. Saturday, March 9, 13
  • 75. fontsJavaScript images video reduce images http://www.flickr.com/photos/wscullin/3770015203 we could send smaller images... include only those resources suitable for device context... HTML Flash stylesheets images { width:{ screen:320    } } Saturday, March 9, 13
  • 76. http://www.flickr.com/photos/wscullin/3770015203 be sure to compress them if you can... { width:{ screen:320    } } Saturday, March 9, 13
  • 77. http://www.flickr.com/photos/wscullin/3770015203 initial response { width:{ screen:320    } } Saturday, March 9, 13
  • 78. detectFeatures(); 3 JavaScript http://www.flickr.com/photos/wscullin/3770015203 { width:{ screen:320    } } Saturday, March 9, 13
  • 79. update profile subsequent request 4 ...now with more chips! http://www.flickr.com/photos/wscullin/3770015203 { width:{ screen:320,          document:320 }, xhr:true, canvas:true, flash:false, video:true, formats:{ h264:probably, ogg:false, webm:false }, offline:true } Saturday, March 9, 13
  • 80. 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/3770015203 Saturday, March 9, 13
  • 81. fonts imagesimages video http://www.flickr.com/photos/wscullin/3770015203 https://github.com/bryanrieger/profile now, send only what's required 6 HTML video Flash JavaScript stylesheetsstylesheets HTML Javascript sample code* available *fyi the code currently uses a simple profile db idea we're playing with instead of WURFL... { width:{ screen:320,          document:320 }, xhr:true, canvas:true, flash:false, video:true, formats:{ h264:probably, ogg:false, webm:false }, offline:true } Saturday, March 9, 13
  • 82. Ogg dpi isBrowserLamescreen size HTML5 WebM colour depth javascript storage doctype canvas json @font-face H.264 WebGL input methods or profile the device context is defined via xhr isTouch media formats features & constraints... http://www.flickr.com/photos/wscullin/3770015203 isTablet appcache CSS custom properties based on your own tacit knowledge... Saturday, March 9, 13
  • 83. 81 Saturday, March 9, 13
  • 84. 82 Saturday, March 9, 13
  • 85. 83 Saturday, March 9, 13
  • 86. device profile Flash embed http://www.flickr.com/photos/dullhunk/4422952742 JavaScript to us actually relevant... but only those that are features & constraints HTML5 screen size Saturday, March 9, 13
  • 87. http://www.flickr.com/photos/aturkus/4040454167 Saturday, March 9, 13
  • 88. this is rhetorical... Saturday, March 9, 13
  • 89. 87 Saturday, March 9, 13
  • 90. 88 Saturday, March 9, 13
  • 91. 89 Saturday, March 9, 13
  • 92. 90 Saturday, March 9, 13
  • 93. 91 Saturday, March 9, 13
  • 94. perhaps a bit ambitious? ...a bit late, no? every stylesheet is not required device detect early typically desktop scripts aren't suitable for mobile @font support varies 3 columns, really? ...what about scripts & stylesheets that aren't suitable? Saturday, March 9, 13
  • 95. ...too many HTTP requests provide alternates? unsupported media formats... ...that's a lot of JavaScript! requests... ...is Flash even supported? does every device get the same Flash – if they support Flash? ...ah, that is Flash! the right version of Saturday, March 9, 13
  • 96. http://www.w3.org/TR/html5/video.html this only deals with codecs - not context*... ...screen size? ...available bandwidth? you just can't detect ...or factors that ...is orthogonal to... c.2000... Text fsdfffSaturday, March 9, 13
  • 97. http://www.flickr.com/photos/digger_twit/1353837770 ...a selection of content filtering + transformation prototypes Saturday, March 9, 13
  • 98. 96 Saturday, March 9, 13
  • 99. begin with some existing HTML content... Saturday, March 9, 13
  • 100. 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 rows: 6 max_image_width: 229 resolution_height: 320 resolution_width: 240 max_image_height: 260 .. $wurfl->getDevice($id); http://www.tera-wurfl.com/explore/ this is what we're after! Saturday, March 9, 13
  • 101. resolution_width: 240 $html->find('img[src]'); device property Saturday, March 9, 13
  • 102. resolution_width: 240 <img /> device property <img /> <img /> Saturday, March 9, 13
  • 103. panda.jpg panda@320.jpg based on... repeat process for each <img> found in document... panda@240.jpg resolution_width: 240 device property replace each image with a more suitable alternate... Saturday, March 9, 13
  • 104. ...how many images are required? other elements? ..what about slightly "fuzzier" DOM elements? ...related elements? panda@320.jpg panda@240.jpg resolution_width: 240 device property FAIL panda.jpg Saturday, March 9, 13
  • 105. 103 Saturday, March 9, 13
  • 106. ...an interesting idea {{mustache}} inspired... Saturday, March 9, 13
  • 107. quickly got out of control... yet revolting *HACK* PHP {{mustache}} inspired... slippery slope to XSLT! ...apologies to @stephenhay FAIL ...an interesting idea that hacked together in PHP (should have been C for speed)... almost reinvented... written in Saturday, March 9, 13
  • 108. 106 Saturday, March 9, 13
  • 109. ...use XSLT – after all it was made to style content!? WTF? yup, that's "99 Bottles of Beer" in XSLT...? found massive inspiration for XSLT here! FAIL ...we honestly tried, but we @$*#& XSLT! Saturday, March 9, 13
  • 110. 108 Saturday, March 9, 13
  • 111. http://www.flickr.com/photos/vauvau/3466024918 responsive design & one web really bloody difficult... the mobile web is Saturday, March 9, 13
  • 112. http://www.flickr.com/photos/seatbelt67/502255276 hmm... Saturday, March 9, 13
  • 113. http://www.flickr.com/photos/colindunn/4479309983 content.app content as applications... Saturday, March 9, 13
  • 114. Saturday, March 9, 13
  • 115. http://www.flickr.com/photos/aubergene/970367879 make it usable and meaningful... Saturday, March 9, 13
  • 116. http://www.flickr.com/photos/aubergene/970367879 add structure to enable manipulation... Saturday, March 9, 13
  • 117. 115 Saturday, March 9, 13
  • 118. Saturday, March 9, 13
  • 119. Saturday, March 9, 13
  • 120. Saturday, March 9, 13
  • 121. 119 Saturday, March 9, 13
  • 122. the CSS strategy Saturday, March 9, 13
  • 123. fixed width layouts Saturday, March 9, 13
  • 124. fixed width layouts Saturday, March 9, 13
  • 125. fixed width layouts Saturday, March 9, 13
  • 126. flexible grids layouts Saturday, March 9, 13
  • 127. flexible grids layouts Saturday, March 9, 13
  • 128. flexible grids layouts Saturday, March 9, 13
  • 129. adaptive (multiple fixed width layouts) or responsive (multiple fluid grid layouts) Saturday, March 9, 13
  • 130. • fixed width for large and medium • fluid width for small solution mixed approach Saturday, March 9, 13
  • 131. 12 column grids layout Saturday, March 9, 13
  • 132. Saturday, March 9, 13
  • 133. Saturday, March 9, 13
  • 134. Saturday, March 9, 13
  • 135. Saturday, March 9, 13
  • 136. target ÷ context = result 940 100% 720 76.5957447% 220 23.40425535% Saturday, March 9, 13
  • 137. /*          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
  • 138. design for (the simplest) mobile browser first. note mobile first Saturday, March 9, 13
  • 139. fully flexible with default styles for navigation, fonts, content and no media query begin with a lightweight default B C A Saturday, March 9, 13
  • 140. embrace the cascade don’t swap style sheets...let it cascade. note Saturday, March 9, 13
  • 141. demo Saturday, March 9, 13
  • 142. each style sheet augments the others augment once for another device A B C xx px to xxx px breakpoint A B C max xx px wide (or unable to understand further instructions) style sheet 1 breakpoint Saturday, March 9, 13
  • 143. A B C xx px to xxx px B min xxx px wide A B C max xx px wide (or unable to understand further instructions) augment once again for TVs etc. breakpoint each style sheet augments the others breakpoint style sheet 1 breakpoint style sheet 2 C A Saturday, March 9, 13
  • 144. using breakpoints create breakpoints using media queries for various screens technique http://www.w3.org/TR/css3-mediaqueries/ Saturday, March 9, 13
  • 145. a single css file is network efficient, but includes unnecessary style data that all devices end up downloading a common approach @media { (min-width: 320px) styles.css one style sheet with media queries on the inside @media { (min-width: 480px) } @media { (min-width: 640px) } @media { (min-width: 768px) } Saturday, March 9, 13
  • 146. MAJOR BREAKPOINTS IN DOCUMENT HEAD mobile.css @media { (min-width: 640px) } desktop.cssbasic.css typically) no media queries @media { (min-width: 480px) } @media { (min-width: 1024px) } MINOR BREAKPOINTS WITHIN EACH STYLE SHEET a more robust option multiple style sheets with media queries on the inside Saturday, March 9, 13
  • 147. @media  screen  and  (min-­‐width:1024px)  {   section  ul  li  {     width:20%;   } } <link  rel="stylesheet"  type="text/css"  href="stylesheets/base.css" media="screen,handheld"  /> <link  rel="stylesheet"  type="text/css"  href="stylesheets/desktop.css" media="only  screen  and  (min-­‐width:720px)"  /> <link  rel="stylesheet"  type="text/css"  href="stylesheets/mobile.css" media="only  screen  and  (min-­‐width:320px)"  /> MAJOR BREAKPOINTS IN DOCUMENT HEAD MINOR BREAKPOINTSWITHIN EACH STYLE SHEET Saturday, March 9, 13
  • 148. (which will affect performance) don’t multiple style sheets cause multiple http requests? Saturday, March 9, 13
  • 149. min 320 px wide and/or unable to understand further instructions Major Breakpoint 1 (media query in document head) Major Breakpoint 3 320 px to 720 px wide 720 px to 1024 px Example Major Breakpoint 2 (media query in document head) 720 (P) = Portrait (L) = Landscape (L*) = Landscape w/ native viewport adaptation some tablets most NetBooks many DesktopsiPhone (P) many Android (P) many BlackBerry S60 QWERTY Most S60 (L) 320 major breakpoints major layout changes nothing is here...but that’s ok! (media query in document head) 1024 Saturday, March 9, 13
  • 150. demo Saturday, March 9, 13
  • 151. responsive content create responsive text, media, data table and navigation technique Saturday, March 9, 13
  • 152. 146 responsive images suitable for any screen Saturday, March 9, 13
  • 153. Saturday, March 9, 13
  • 154. HTML CSS <div  class="figure"> <p> <img  src="robot.jpg"  alt=""  />   <b  class="figcaption">Lo,  the  robot  walks</b> </p> </div> .figure{ float:  right; margin-­‐bottom:  0.5em; margin-­‐left:  2.53164557%;    /*  12px  /  474px  */ width:  48.7341772%;    /*  231px  /  474px  */ } img{ max-­‐width:  100%; } img,  embed,  object,  video{ width:  100%; height:  auto; } Saturday, March 9, 13
  • 155. 149 Saturday, March 9, 13
  • 156. HTML JAVASCRIPT <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> <script  src=="picturefill.js"></script> Saturday, March 9, 13
  • 157. 151 62.5% rule • 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 em2px Saturday, March 9, 13
  • 158. demo Saturday, March 9, 13
  • 159. 153 data fit into each screen responsive data table Saturday, March 9, 13
  • 160. demo Saturday, March 9, 13
  • 161. navigation suitable for each screen responsive navigation horizontal menu for desktop screen drop down list menu for mobile device Saturday, March 9, 13
  • 162. demo Saturday, March 9, 13
  • 163. where...? Saturday, March 9, 13
  • 164. 158 references Saturday, March 9, 13
  • 165. 158 references Ethan Marcotte Author of Responsive Web Design Brains behind the Boston Globe redesign unstoppablerobotninja.com Tuts+ Great web design tutorials and articles webdesign.tutsplus.com Saturday, March 9, 13
  • 166. 158 references Treehouse Web Design and Development Learning Site teamtreehouse.com This Is Responsive Patterns, resources and news bradfrost.github.com/this-is-responsive Ethan Marcotte Author of Responsive Web Design Brains behind the Boston Globe redesign unstoppablerobotninja.com Tuts+ Great web design tutorials and articles webdesign.tutsplus.com Saturday, March 9, 13
  • 167. frameworks Saturday, March 9, 13
  • 168. frameworks Simple, fluid HTML/CSS/JS framework from Twitter Bootstrap Flexible 6 and 12-grid framework. Foundation Saturday, March 9, 13
  • 169. frameworks Simple, fluid HTML/CSS/JS framework from Twitter Bootstrap Flexible 6 and 12-grid framework. Foundation Fixed width for medium & large screens, fluid single column for small goldilocksapproach.com Minimal responsive framework. Includes Wordpress theme. Skeleton Saturday, March 9, 13
  • 170. ...and plenty more Saturday, March 9, 13
  • 171. thank youlamvt@fpt.com.vn please say @yiibu the font used is many thanks to http://www.flickr.com/photos/tinou/453593446 http://www.exljbris.com/museo.html http://www.flickr.com/creativecommons/by-2.0 Museo flickr http://.yiibu.com xin chào Saturday, March 9, 13