Responsive Web Design 101

357 views
324 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
357
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design 101

  1. 1. jonathanBell(webDesign) { webDesign(adaptive || responsive); } • @Work • HTML, CSS, JS, the usual • You asked for it! Now I’m telling you. • # where stuff comes fromTuesday, 5 March, 13 1I’m Jonathan Bell and I’m here to talk about web design - specifically this new(but actually very vintage) style of web design called, “responsive” or“adaptive” design or whatever you want to call it (more on that later). Thereare some differences to the terms, but for now – I really don’t care which oneyou use. I’m here to just try and make the front-end experience better for theuser and to help make the sites that I (and you) code easier to use on amultitude of different devices. Maybe we can save some money and help‘future proof’ our sites along the way so that we don’t have to have a redesignevery 2 years (or less, in some cases). Just a sidenote: I’m not going to talkabout specific platform applications for these techniques (like with the use inCMS’s) but more give you an overview of the techniques before we go aheadand apply them to any specific system. Which will actually be a lot easier to doonce you’ve got the principals down.Little more about me:I work on the @Work site – that’s gww.gov.bc.ca for those of you who don’thave us as your homepage. And I just wanna say: If we ever get permission touse at replies on @Work, I want to put in dibs right now to have my handle be‘Work’ so that I can have the @Work callsign.
  2. 2. Disclaimer: There will be code! (It will not hurt you.)Tuesday, 5 March, 13 2A little fair warning: There will be some code in this presentation. I’m a coder(front-end at least), and I’ve tried to make the presentation useful fordesigners, coders and even (maybe) exec. I feel that I’ve accomplished that.Mostly, I’ll talk about some principles first and then how to apply them (thecodey bit) after or at the end. So, you can leave at that point if you want..
  3. 3. Again, I view myself as the messenger.Tuesday, 5 March, 13 3So, again, I’m the messenger here and we all know what NOT to do with themessenger, right? *nodding *nodding...
  4. 4. Again, I view myself as the messenger. (And, I bring excellent news.)Tuesday, 5 March, 13 3So, again, I’m the messenger here and we all know what NOT to do with themessenger, right? *nodding *nodding...
  5. 5. Tuesday, 5 March, 13 4So, if I’m the messenger, the message writer is Ethan Marcotte. Ethan Marcotte is quickly becomingconsidered as the grandfather of responsive design. When I first watched his presentation at the Futureof Web Design New York 2010, I had one of those moments when you know what you are watching/listening to is really going to be big, and change something. So, like, maybe half of this presentation isbased on Ethan Marcotte’s ideas. I liked his presentation so much that I’m hosting it on my dropbox andyou can see me for the link if you like.
  6. 6. If I am Gabriel... Then Ethan Marcotte is God.Tuesday, 5 March, 13 4So, if I’m the messenger, the message writer is Ethan Marcotte. Ethan Marcotte is quickly becomingconsidered as the grandfather of responsive design. When I first watched his presentation at the Futureof Web Design New York 2010, I had one of those moments when you know what you are watching/listening to is really going to be big, and change something. So, like, maybe half of this presentation isbased on Ethan Marcotte’s ideas. I liked his presentation so much that I’m hosting it on my dropbox andyou can see me for the link if you like.
  7. 7. You + Responsive DesignTuesday, 5 March, 13 5So, what is responsive design?In order to understand that we’re going to take a look at the past becauseremember that I said responsive design is kinda old and vintage in a way? We’lltake a look at some old design principals and try and make sense of why peopleused these methods and not others when it came to the web.
  8. 8. You may know this + you may not... • Browser specific code is bad. • We bow to the standards (W3C, WHATWG). • ‘Responsive’ is trendy. ‘Liquid’ is not. • Trees bend in the wind, buildings fall. • People use websites.Tuesday, 5 March, 13 6So:-Responsive design responds to the environment that it is in. The design adaptsand (more importantly) works inside the parameters of the device or unitdisplaying the design. So, with that in mind: browser specific code is bad.Browser specific code does not adapt and in fact, expects a certainenvironment to run in! And, this would be the same with browser sniffing.-And with that all being said, we do need to set limits and parameters to theenvironments (in other words, the browsers) that our code runs and displaysin. We do need to know that if I write a table tag, that I’m going to get a table –and, on the flipside of the coin, I’m telling the world that, “Hey, I’ve got sometabular data to display”. (so, that’s where the semantics come in) ..but that’s atalk for another day.-Responsive is built upon the ‘liquid’ design principals. The principals thatallows flexibility in the viewport and elasticity to our designs. This is the vintagepart to responsive design.-Our designs of yesteryear were made for one (maybe two) different sized
  9. 9. Tuesday, 5 March, 13 7So, to go a little further on this point: I took some pictures of all the deviceswithin a ten foot radius of me at my desk that could connect to the internet. Icame up with 4!-Right in front of me was my government supplied phone (an older modelBlackberry), beside that was my iPod with moblie Safari.-Of course there was my large widscreen monitor and then (within the tenfoot radius) was my co-workers laptop, with two screens (a smaller laptop-sized one) and a larger one.We have lots of screen sizes going on here! And just as importantly, we have atleast four different browsers! I happened to be using Chrome. I know Tom hasIE and Chrome. I’ve got Firefox and Opera and more. The Blackberry uses itsown browser (Blackberry version I don’t know what!). I think I disabledJavaScript on the device and then there’s good old mobile Safari on the top-right.So, all of these devices display HTML. Keep this in mind as we move forward.
  10. 10. Tuesday, 5 March, 13 8So, indeed, the Android OS now comes on over 100 different resolutions(making it harder and harder to target a certain resolution or even a certaindevice) and I’m sure we’ve all heard that within 5 years mobile devices will bethe MAGORITY (!!!) of devices that are connecting to the internet, leaving thedesktop in the minority.
  11. 11. # yfrog.com/z/ob5kndjTuesday, 5 March, 13 8So, indeed, the Android OS now comes on over 100 different resolutions(making it harder and harder to target a certain resolution or even a certaindevice) and I’m sure we’ve all heard that within 5 years mobile devices will bethe MAGORITY (!!!) of devices that are connecting to the internet, leaving thedesktop in the minority.
  12. 12. Tuesday, 5 March, 13 9The devices that are out in the wild right now have vastly varying support forCSS2.1 (let’s leave CSS 3 out of it for a moment) and JS support is very variedas well. There screen sizes are pretty darn small too. So how are we ever goingto be able to design, develop and test for all of these? Well, I think the answeris, we don’t. But, more on that later....
  13. 13. • 800x600 • 1024x768 • 1680x1050Tuesday, 5 March, 13 10So, we can’t just do this anymore. We can’t just design for one of these threeresolutions and hope for the best. ;)Why? Because (if we do so) we are punishing the user, and ourselves! We’repunishing the user with a poorly designed interface. We’re literally shoving awidescreen/desktop design into an area 5 times as small as the size that it wasdesigned for! We punish them with horizontal scrollbars, impossibly unscalableand SMALL text, hard to read articles that scroll all weird, occasionally abroken navigation, and even at times unclickable content (I’ve experienced allof that on my government issued BB). So no, I’m not talking entirely iphonehere either, I should note that. I more just want to speak of ‘mobile’ in general.Currently, our success in viewing webpages varies depending on the device weare on, but it shouldn’t! That’s the key here. A design might look different on alarge screen compared to a small screen but we really have to ask: “Is itallowing our users to do what they are trying to do?” If yes, then it’s a win. Weneed websites that work and provide information on the browser. Anyone here(like me) carry around two devices that browse the web only because thesecond one “does it better”? [show of hands]Well, I say that all those manufactures of the “good device” have done, is
  14. 14. “Ima design a website!” • 800x600 • 1024x768 • 1680x1050Tuesday, 5 March, 13 10So, we can’t just do this anymore. We can’t just design for one of these threeresolutions and hope for the best. ;)Why? Because (if we do so) we are punishing the user, and ourselves! We’repunishing the user with a poorly designed interface. We’re literally shoving awidescreen/desktop design into an area 5 times as small as the size that it wasdesigned for! We punish them with horizontal scrollbars, impossibly unscalableand SMALL text, hard to read articles that scroll all weird, occasionally abroken navigation, and even at times unclickable content (I’ve experienced allof that on my government issued BB). So no, I’m not talking entirely iphonehere either, I should note that. I more just want to speak of ‘mobile’ in general.Currently, our success in viewing webpages varies depending on the device weare on, but it shouldn’t! That’s the key here. A design might look different on alarge screen compared to a small screen but we really have to ask: “Is itallowing our users to do what they are trying to do?” If yes, then it’s a win. Weneed websites that work and provide information on the browser. Anyone here(like me) carry around two devices that browse the web only because thesecond one “does it better”? [show of hands]Well, I say that all those manufactures of the “good device” have done, is
  15. 15. LOL! • 800x600 • 1024x768 • 1680x1050Tuesday, 5 March, 13 10So, we can’t just do this anymore. We can’t just design for one of these threeresolutions and hope for the best. ;)Why? Because (if we do so) we are punishing the user, and ourselves! We’repunishing the user with a poorly designed interface. We’re literally shoving awidescreen/desktop design into an area 5 times as small as the size that it wasdesigned for! We punish them with horizontal scrollbars, impossibly unscalableand SMALL text, hard to read articles that scroll all weird, occasionally abroken navigation, and even at times unclickable content (I’ve experienced allof that on my government issued BB). So no, I’m not talking entirely iphonehere either, I should note that. I more just want to speak of ‘mobile’ in general.Currently, our success in viewing webpages varies depending on the device weare on, but it shouldn’t! That’s the key here. A design might look different on alarge screen compared to a small screen but we really have to ask: “Is itallowing our users to do what they are trying to do?” If yes, then it’s a win. Weneed websites that work and provide information on the browser. Anyone here(like me) carry around two devices that browse the web only because thesecond one “does it better”? [show of hands]Well, I say that all those manufactures of the “good device” have done, is
  16. 16. Put your content in my pocket...Tuesday, 5 March, 13 11Put your content in my pocket! I love this saying. I’m not sure who actuallydreamed it up but it’s been floating around twitter and the blogosphere for awhile now... So, it just had to go into this presentation. :)
  17. 17. Tuesday, 5 March, 13 12...Anyways. So, it used to be easy to design for web design, now it’s moreinteresting. We used to just have to worry about the desktop browsers (and ifit was going to work in IE)... and we’d just design for this static width of acertain resolution - a certain space - and we’d fill that space with our design.Yes indeed, we’d fill that fixed, physical space with our beautiful web designs.
  18. 18. They were the best of times... ...and they were the worst of times.Tuesday, 5 March, 13 12...Anyways. So, it used to be easy to design for web design, now it’s moreinteresting. We used to just have to worry about the desktop browsers (and ifit was going to work in IE)... and we’d just design for this static width of acertain resolution - a certain space - and we’d fill that space with our design.Yes indeed, we’d fill that fixed, physical space with our beautiful web designs.
  19. 19. They were the best of times... ...they were the worst of times.Tuesday, 5 March, 13 13So these large, straightforward and impressive designs are kind of likebuildings. Architecture enjoys the fact that it occupies a given amount ofspace for a long time and it also enjoys the fact that it can become timeless,beautiful works of art - cherished forever.
  20. 20. ...they were the worst of times.Tuesday, 5 March, 13 14...But architecture is not flexible.See, this is where the web wins. Although you’ll never know where your site willend up – that’s kinda the nature (and beauty) of the web. It’s world wide,flexible and can fit in the palm of your hand. A browser is not made of marble,that’s true. But, a browser is meant to get you information quickly and in orderto that, it has to be flexible. We’re talking information at your fingertips. -- Notstatic monuments.Browsers come in all shapes and sizes. Well, ok - any shape that’s a square.. :)
  21. 21. “I need an iPhone website website!”Tuesday, 5 March, 13 15So, this is an interesting little phrase. Has anyone ever heard this phrase from aclient? [show off hands]I think it’s great that people are starting to realize that they need their businessto run on mobile devices and to be accessible. That’s great. It’s great thatthey’ve realized that they could be missing out of business or communicationif they don’t allow users to interact properly with their site and that the web is aflexible platform that can even perform well on a phone![start build]But, it looks kinda funny when you take that noun there out of context. Like, isthis a website about iPhones? Why do you need an “iPhone website”?[build]Maybe what they mean to say is they need a mobile website. A website that’sbeen re-designed to fit onto the small screen platform - the cabin to themansion.[build start]
  22. 22. iPhone websiteTuesday, 5 March, 13 15So, this is an interesting little phrase. Has anyone ever heard this phrase from aclient? [show off hands]I think it’s great that people are starting to realize that they need their businessto run on mobile devices and to be accessible. That’s great. It’s great thatthey’ve realized that they could be missing out of business or communicationif they don’t allow users to interact properly with their site and that the web is aflexible platform that can even perform well on a phone![start build]But, it looks kinda funny when you take that noun there out of context. Like, isthis a website about iPhones? Why do you need an “iPhone website”?[build]Maybe what they mean to say is they need a mobile website. A website that’sbeen re-designed to fit onto the small screen platform - the cabin to themansion.[build start]
  23. 23. mobile websiteTuesday, 5 March, 13 15So, this is an interesting little phrase. Has anyone ever heard this phrase from aclient? [show off hands]I think it’s great that people are starting to realize that they need their businessto run on mobile devices and to be accessible. That’s great. It’s great thatthey’ve realized that they could be missing out of business or communicationif they don’t allow users to interact properly with their site and that the web is aflexible platform that can even perform well on a phone![start build]But, it looks kinda funny when you take that noun there out of context. Like, isthis a website about iPhones? Why do you need an “iPhone website”?[build]Maybe what they mean to say is they need a mobile website. A website that’sbeen re-designed to fit onto the small screen platform - the cabin to themansion.[build start]
  24. 24. desktop websiteTuesday, 5 March, 13 15So, this is an interesting little phrase. Has anyone ever heard this phrase from aclient? [show off hands]I think it’s great that people are starting to realize that they need their businessto run on mobile devices and to be accessible. That’s great. It’s great thatthey’ve realized that they could be missing out of business or communicationif they don’t allow users to interact properly with their site and that the web is aflexible platform that can even perform well on a phone![start build]But, it looks kinda funny when you take that noun there out of context. Like, isthis a website about iPhones? Why do you need an “iPhone website”?[build]Maybe what they mean to say is they need a mobile website. A website that’sbeen re-designed to fit onto the small screen platform - the cabin to themansion.[build start]
  25. 25. websiteTuesday, 5 March, 13 15So, this is an interesting little phrase. Has anyone ever heard this phrase from aclient? [show off hands]I think it’s great that people are starting to realize that they need their businessto run on mobile devices and to be accessible. That’s great. It’s great thatthey’ve realized that they could be missing out of business or communicationif they don’t allow users to interact properly with their site and that the web is aflexible platform that can even perform well on a phone![start build]But, it looks kinda funny when you take that noun there out of context. Like, isthis a website about iPhones? Why do you need an “iPhone website”?[build]Maybe what they mean to say is they need a mobile website. A website that’sbeen re-designed to fit onto the small screen platform - the cabin to themansion.[build start]
  26. 26. Tuesday, 5 March, 13 16See, for a long time we were borrowing so much from the graphic designcommunity. The idea of a fixed area where our work is displayed with borders,height and width. We borrowed other term from print like:“fold”, “gutter”,“margin”, even “canvas”. [build]We wanted to give our work and sites a scope, a boundary, an edge over whichthey wouldn’t spill. We need to start learning that the browser viewport is thatboundary, we just will never know where it’ll fall (but it will fall). We just needto accept that ebb and flow, that variableness - that flexibility.
  27. 27. <canvas> can vas> < <canvas>Tuesday, 5 March, 13 16See, for a long time we were borrowing so much from the graphic designcommunity. The idea of a fixed area where our work is displayed with borders,height and width. We borrowed other term from print like:“fold”, “gutter”,“margin”, even “canvas”. [build]We wanted to give our work and sites a scope, a boundary, an edge over whichthey wouldn’t spill. We need to start learning that the browser viewport is thatboundary, we just will never know where it’ll fall (but it will fall). We just needto accept that ebb and flow, that variableness - that flexibility.
  28. 28. Josef Müller-Brockmann ftw!Tuesday, 5 March, 13 17When we give up our control over those boundaries, it feels like our sites couldbecome very hard to control in terms of layout. It doesn’t actually mean thatour sites have to loose their layout (and, just a sidenote here layout is notdesign - but the two are interwinded, so it’s worth mentioning). We can stillachieve this using something called the typographic grid. Josef MullerBrockmann first thoughtup the concept of the typographic grid up. He likedorder, I guess (he’s Swiss, btw). It gives work scope and order, and it’s still inuse today... It was very popular at the time of its invention.
  29. 29. Tuesday, 5 March, 13 18In fact, when I was putting this presentation together in MS PowerPoint, itoffered me some gridlines in order to give my layout boundary and scope. Ifyou look carefully here you’ll see I have the gridlines turned on in PowerPoint.Now, the fact that this presentation ended up in Keynote -- let’s just let thatbe for now and I’ll tell you about that after if you like...
  30. 30. William BlakeTuesday, 5 March, 13 19And, in case you were wondering, this is what we had before the typographicgrid, darn romanticists! I mean, yes, great poem William Blake but I can’t read itwith this darn tree and tiger in the way... So, content wins again and along withit...
  31. 31. Tuesday, 5 March, 13 20...the typographic grid. Like I say, it’s a pretty popular system. It’s just that inprint this grid is a fixed size, as the page is a fixed size. Now, it’s called a fluidgrid, in terms of responsive web design! Which is what Josef always intended itto be!  He realized that, yes - you could actually print the same content ondifferent sized media (such as a brochure or a billboard). We’ll get to how youmake one (in code) soon! 
  32. 32. The Dao of Web Design # alistapart.com/articles/daoTuesday, 5 March, 13 21So it’s not actually like people didn’t know that this fixed-width obsession wascoming... There was this guy, John Allsopp, who wrote about it in April of2000. Now, that’s a while ago! That’s what his article looked like originally onthe right there and the that’s what his article looks like today on the left. Butguess what?! The words are the same! Same content, different colors, sameideas. John was defiantly on to something with his article, “The Dao of WebDesign”. He knew things like...
  33. 33. “...layout aspects of a page can be designed using percentages to create adaptable pages. Margins can be specified as a percentage of the width of the element which contains them. Using percentages (or other relative values) to specify page layout in CSS automatically creates adaptive pages. ... Readers can choose the window size they find appropriate to their needs.” # alistapart.com/articles/dao #Ethan MarcotteTuesday, 5 March, 13 22“...layout aspects of a page can be designed using percentages to createadaptable pages. Margins can be specified as a percentage of the width of theelement which contains them.Using percentages (or other relative values) to specify page layout in CSSautomatically creates adaptive pages. As browser windows widen and narrow,the layout of an element adapts to maintain the same proportions, and so thewhole page layout adapts. Readers can choose the window size they findappropriate to their needs.”In other words, the design will adapt to the size of the window, and theviewport, that is displaying it. 
  34. 34. “... accepts the ebb and flow of things, Nurtures them, but does not own them ...” # Tao Te Ching; 2 Abstraction # Also sighted by Ethan MarcotteTuesday, 5 March, 13 23John goes on quite a bit about this in his article and even sights the Tao TeChing: “... accepts the ebb and flow of things,Nurtures them, but does not own them ...”I really like the sound of that. Flexible. Allow the webpage to fill its viewportadaptively according to the dimensions and properties of that viewport. Nowwe are getting somewhere! When working in the medium of the web, we needto accept the ebb and flow of things and let our content become our greateststrength. We shouldn’t try to control our design too much when practicingresponsive/adaptive design. Doing so prevents its own ability to adapt.
  35. 35. So, accept that you have no target. “How?” The only target we have is the browser itself. There’s one thing that all browsers do very well, they render HTML! Write proper, semantic HTML to start!Tuesday, 5 March, 13 24[see slide] No browser is your target!Recall that if I say table, then I have tabular data that I want to display and if Isay h1, I’ve got a heading at the highest level of the document.
  36. 36. Get the information in front of the people! (“content is king”)Tuesday, 5 March, 13 25So... Let’s write some html! [code example ONE, next slide]http://dl.dropbox.com/u/7573777/_assets/presentations/responsive-web-design_Jonathan_Bell/code/example1.html
  37. 37. Tuesday, 5 March, 13 26so yes, it’s plain, yes it’s boring, but guess what?! it works! and it works on ANYdevice! This HTML will deliver itself on any browser to the eyes of the reader!It’s even written in English, an official language of Canada...http://dl.dropbox.com/u/7573777/_assets/presentations/responsive-web-design_Jonathan_Bell/code/example1.htmlhyperlinkSo i just want to point out our main heading, our sub heading, we have the datein there, body copy, we’ve even got a picture in there ‘cause as we all know - apicture says a thousand words :) And that picture is actually proportionate tothe size of the viewport.This will even work on those government issued BlackBerrys!... anybody everhad an issue getting their site to work on a government blackberry (aka OLDblackberry)? [show of hands]
  38. 38. Tuesday, 5 March, 13 27...to prove this, I even recorded the page in use on my BlackBerry.So, your BB can actually be used on the internet! I told you I have good news!And here is the page on the right - same page - displayed on an iPod.
  39. 39. Simple, semantic, beauty ... <body> <div class="blog section"> <h1 class="lede">...<h1> <div class="main">...</div> <div class="other">...</div> </div> </body> ...Tuesday, 5 March, 13 28Here’s our document’s outline: Nice semantic markup. No, we’re not using thenew HTML5 semantic elements here but at least the class names on our blockelements are pretty easy to understand. We have a pre-existing wrapper,<body>, and then we use another wrapper inside that and give it a class of“blog” for a little meaning in the css. I thought maybe this markup would beuseful for a blogger theme or something similar. [return to live example] solet’s just take one last look at the fluidity of this. See? The text reflows and theimage resizes itself according to the viewport.
  40. 40. Hallelujah We call this the liquid approach. This is old schOoL!Tuesday, 5 March, 13 29So really, there are no unsported browsers, when it comes to HTML, all displayHTML. And guess what!? Our page works! We’ve accomplished our goal:We’ve got the content in front of the user! :)It’s communiation people! MESSAGES! TEXT! AND PICTURES! :)This is cause for celebration. So, we can go home, right? OK, admittedly thepage is a little ugly... but we have to work within the confines of that tiny screenand the capabilities of the device. So changing the colors might affect it’sreadability (it might not) and changing its layout might affect its usability.Remember: all devices can display HTML. Without this attribute the“displayers” (the “renderers” of content) are simply not browsers. Browsersdisplay markup.Moving on.... Consider this:To style something for a big screen and then force it in a little one, that’s hard -but to style something for a small screen and then style it up as the screenitself gets biggier, that’s much easier.
  41. 41. Tuesday, 5 March, 13 30It’s like when my parents had to redo their bedroom, the bed wouldn’t fitthrough the second story window or door. So what they did was they built thebed from inside the room. So don’t show a big bed into a small room. Besmarter about it.
  42. 42. /* Basic Page Margins and Width */ html { width: 100%; } body { margin: 36px auto; width: 90%; }Tuesday, 5 March, 13 31So how did we accomplish our liquid design? How do we use thosepercentages that that John guy was talking about. Well, it’s pretty simple..We’ve set HTML to be 100% as wide as its containing element, in other wordsthe “window” so our HTML document is going to be 100% as wide as thebrowser. Remember that not all devices are going to allow the user to scale theviewport, like the desktop browser.We then go ahead and tell the browser that the body of the document is goingto be 90% of whatever the width of HTML element is going to be (in otherwords <body> is 90% as wide as the browsers own viewport aka window).[build] -- if we were to do something like this, it would be a very differentsituation. Here we are setting the width of our <body> container to exactly960px wide. The browser has to do less math, but we don’t have any flexibilityin this design. This design width would fit on most desktop and laptop screensbut not on my girlfriend’s ASUS tablet (for example) and certainly not on myBlackberry. I would be scrolling all over the place in order to find the content(zooming in and out) and the font would more than likely be very small andhard to read as the document itself would be really big in proportion to thefont. Like I say, the user would be required to “zoom in” if their device
  43. 43. /* Basic Page Margins and Width */ html { width: 100%; } body { margin: 36px auto; width: 960px; /* not responsive! */ }Tuesday, 5 March, 13 31So how did we accomplish our liquid design? How do we use thosepercentages that that John guy was talking about. Well, it’s pretty simple..We’ve set HTML to be 100% as wide as its containing element, in other wordsthe “window” so our HTML document is going to be 100% as wide as thebrowser. Remember that not all devices are going to allow the user to scale theviewport, like the desktop browser.We then go ahead and tell the browser that the body of the document is goingto be 90% of whatever the width of HTML element is going to be (in otherwords <body> is 90% as wide as the browsers own viewport aka window).[build] -- if we were to do something like this, it would be a very differentsituation. Here we are setting the width of our <body> container to exactly960px wide. The browser has to do less math, but we don’t have any flexibilityin this design. This design width would fit on most desktop and laptop screensbut not on my girlfriend’s ASUS tablet (for example) and certainly not on myBlackberry. I would be scrolling all over the place in order to find the content(zooming in and out) and the font would more than likely be very small andhard to read as the document itself would be really big in proportion to thefont. Like I say, the user would be required to “zoom in” if their device
  44. 44. What Apple did... <head> ... <meta name="viewport" content="width=device-width, initial-scale=1"> ... </head>Tuesday, 5 March, 13 32So Apple knew this. They knew that if we have static, fixed width designs out inthe wild (and there are a few of them on the internet) then it’s going to be verycumbersome to place wide designs onto a small screen. So what they did (anda lot of manufactures followed suit) is they said “OK, we are creating a devicethat is only 320px wide in physical terms and then we are going to rendercontent from the web at a higher resolution than that (which I believe is 960pxwide in portrait mode). They did this by just dropping pixels and allowing theuser to zoom the page to its actual size.I’m sure we’ve all done this on an iDevice. Spread your two fingers on thescreen and the content will zoom. Now, this was great and othermanufacturers followed Apple in this thinking. But when it comes toresponsive/adaptive design this is not such a good thing. We don’t want thedevice to render our content at any other resolution than that of the nativeresolution of the device! Which is what the desktop browsers do by default. So,to get around this, Apple created a <meta> tag with the initial scale param.What this did, was it allowed the coder to opt in to using the native resolutionof the device.So when you are creating your responsive design, you can use this and put it in
  45. 45. Not practical. <head> ... <meta name="viewport" content="width=320px, initial-scale=1"> <!–- 320px is not adaptive! NFG. --> </head>Tuesday, 5 March, 13 33Just a side note here: you can set the width on the viewport meta tag to astatic value if you like. Like, if you were targeting a certain device. Butremember, browser specific code is bad. People used to do this when werekinda on the cusp of adaptive design. I never really figured out why completely.So, speak up if you do know why this is the old convention.
  46. 46. /* More on this later... :) */ img { width: 39.5833333333%; /* 380px / 960px = 0.395833333333 */ } a { text-decoration: none; }Tuesday, 5 March, 13 34Back to our liquid design here. Another thing we’ve done in the CSS is set thewidth for that image as a percentage. Now, this may look at little strange, andI’ll explain that in a moment but for now I just wanted to point out that that is apercentage, hence it’s still liquid. And we’ve also removed the defaultunderline on the links on our page which is also really a good practice... ;)[switch back to live example]This works! and that’s great :) but... it’s ugly, you say! Well, I’d agree with you.. Iget it, you want layout! OK...OK...
  47. 47. Tuesday, 5 March, 13 35How’s this? OK, it’s not the most beautiful site every made, but it’ssomething! :) And, I would say that this design would work well on mid sizedscreens, like the iPad..[click link, note fluid design and fluid image]We’re still using the liquid design here and we’ve still got a flexible image.So, how do we get this design and the plain design from before into the samesite? Well, we don’t... as they ARE the same site! And that’s where theadaptiveness comes into play.
  48. 48. @mediaTuesday, 5 March, 13 36And enter @media... Otherwise known as media queries. @media is really atthe heart of the modern responsive web design. With @media and mediaqueries we can ask questions of the viewport and the environment that ourCSS is being used in. So really, this is a cornerstone of responsive sites. Thislittle guy knows how to ask questions of the browser.
  49. 49. @media (mr. media query, you may have heard of me...)Tuesday, 5 March, 13 36And enter @media... Otherwise known as media queries. @media is really atthe heart of the modern responsive web design. With @media and mediaqueries we can ask questions of the viewport and the environment that ourCSS is being used in. So really, this is a cornerstone of responsive sites. Thislittle guy knows how to ask questions of the browser.
  50. 50. /* How @media works */ @media only screen and (min-width: 320px) { body { /* styles for viewport 320px+ wide */ } }Tuesday, 5 March, 13 37So let’s take a look at a media query example.It looks a little syntax heavy at first but it’s not actually too bad. So here wedeclare a media query starting with “@media” and we ‘only’ want to query thescreen and we only want to apply this style if the screen condition here issatisfied (not other features that the device may or may not support or have).The screen property has to be at least 320 pixels in width. As an aside: you mayhave noticed we are much more concerned with the width of a page ratherthan its height in all of this. That’s because pages scroll vertically as aconvention, but we could actually use ‘min-height’ here too, in order to querythe window’s height. We place some curly braces and then we type regular cssinside the statement. In this case, we are targeting the body. Now, normallyyou’ll find these at the end of a CSS stylesheet, this allows the non-mediaqueried styles and rules to apply themselves and be overwritten in the normalcascade of CSS with the media queries.And, btw, I chose min-width: 320 here as the iPod 4th generation is still only320px wide in portrait mode. -- just say’n
  51. 51. width (min/max) height (min/max) device-width (js?) device-height (js?) orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scanTuesday, 5 March, 13 38Here’s a list of everything that you can query on with media queries. [gothrough list]You might want to use JS to query a device’s width -- little more on that later.But really you’re only ever going to be concerned with the current width of theviewport, be it in portrait or landscape mode. That’ll be the biggie there. Just soyou know tho, there are other properties that you can query.
  52. 52. width (min/max) height (min/max) device-width (js?) device-height (js?)Tuesday, 5 March, 13 38Here’s a list of everything that you can query on with media queries. [gothrough list]You might want to use JS to query a device’s width -- little more on that later.But really you’re only ever going to be concerned with the current width of theviewport, be it in portrait or landscape mode. That’ll be the biggie there. Just soyou know tho, there are other properties that you can query.
  53. 53. @media only screen and (device-aspect-ratio: 16/9) { body { margin: 0; } }Tuesday, 5 March, 13 39So, again, you might see something like this out in the wild. Just an examplehere: In this case only if the screen of the device matched the aspect ratio of16:9 would this zero margin apply itself to the body element.
  54. 54. Tuesday, 5 March, 13 40So let’s go back now to our live site and see how this all comes together.[back on live site]http://dl.dropbox.com/u/7573777/_assets/presentations/responsive-web-design_Jonathan_Bell/code/example3.htmlSo, a few things to bring into focus here:[resize browser] Our design is starting to look more and more like a desktopwebsite and that’s fine as we are currently on a desktop computer. Our imagein content scales nicely and our content sits at 90% width, our sidebar is nowtruely an aside. And if we scale the site in the viewport we see it respond to thatchange. And while it’s not the most beautiful thing, it’s a start and it certainlyworks, and it’s a good example if I do say so muself! We can’t scale this desktopbrowser any smaller that around 370px wide but if we could get it down to320px wide, we would not be catching any of the media queries and we wouldbe viewing that plain site again.
  55. 55. Tuesday, 5 March, 13 41One other little trick to show before I show you guys before the real magicpotions behind all this is this JS trick.[switch to live site] http://dl.dropbox.com/u/7573777/_assets/presentations/responsive-web-design_Jonathan_Bell/code/example4.htmlLet’s just say our designer or someone out there really liked this amazingscaling background that is generated with the backstrech.js jQuery plugin. Itdidn’t work on all of our design widths and made the design too cluttered atlower resolutions. In fact, it froze on our government issued BB. (no way!!!OMG!)
  56. 56. screen.widthTuesday, 5 March, 13 42well, there is a simple solution for that one too! just use js to query to screenwidth.and this is cool because while your old BB might not support @media, it’llsupport plain JS - or at least you hope so..
  57. 57. if (screen.width >= 1024) { // do stuff if screen is // wider than 1024px $.backstretch(”img/background.jpg”); }Tuesday, 5 March, 13 42well, there is a simple solution for that one too! just use js to query to screenwidth.and this is cool because while your old BB might not support @media, it’llsupport plain JS - or at least you hope so..
  58. 58. Browser Support Oh boy, here we go...Tuesday, 5 March, 13 43So, speaking of support.....[chcukles] I know that some of you have just been dying to ask this one. Itsounds too good to be true, doesn’t it!?... So simple! We just use @media in ourdesigns and everything just works as it is supposed to. It sounds really goodright!? Yeah, well, it’s pretty close to that! Firefox, Chrome, Safari, Android, allthe good browsers and a few more can use @media today (no problem). Thereis a teency weency problem though... and that is support for IE8 and 7 and uh..oh yeah, older blackberries... sound familiar?so, i’m gonna purpose two solutions.
  59. 59. Firefox 3+ Chrome 7+ Safari 3+ IE9+ Mobile Safari 3+ Android 2+ Opera & Opera Mobile # caniuse.com/#search=@mediaTuesday, 5 March, 13 43So, speaking of support.....[chcukles] I know that some of you have just been dying to ask this one. Itsounds too good to be true, doesn’t it!?... So simple! We just use @media in ourdesigns and everything just works as it is supposed to. It sounds really goodright!? Yeah, well, it’s pretty close to that! Firefox, Chrome, Safari, Android, allthe good browsers and a few more can use @media today (no problem). Thereis a teency weency problem though... and that is support for IE8 and 7 and uh..oh yeah, older blackberries... sound familiar?so, i’m gonna purpose two solutions.
  60. 60. Tuesday, 5 March, 13 44and uh.. it’s not this. this is kinda like a last resort like, “your browser is so awful- we can’t make our stuff work on it” -- i kinda want to simplify my content forthese browsers, so here goes.this by the way is what you’ll get if you try Facebook nowadays in IE 6.
  61. 61. /* browsers who just don’t get it... */ body { background: red; } /* real browsers */ @media only screen and (min-width: 320px) { body { background: green; } }Tuesday, 5 March, 13 45The first solutions is pretty simple. IE and BB won’t understand nor use themedia queried rules (and because of a process called “fault tolerance”, theywon’t throw errors or crash when they encounter them, they’ll just ignorethem), so just put some widths and/or properties for those browsers above themedia queries in your stylesheet and give them the plain design. You’ll run intotrouble with this one though when you want to catch BB and IE in the samebreath. They will both catch, but you probably don’t want both of them at thesame time. And the reason being well, one is a mobile browser and one is adesktop browser. Then again, remember, HTML displays on all browsers somaybe this could work (just deliver the same design to both browsers), keep itsimple for poor IE and BB.... (Think, liquid design.. Like we talked about..)There is some BlackBerry browser sniffing JS out there but browser specificcode is bad, so we’ll leave that be for now.You could start off your CSS with the rules for the desktop widths first andthen add in media queries and scale down as you go along. I prefer, however, tostart off basic and build up, like the bed in my parent’s house.So, with that being said, this is not a magic bullet and at a certain point,everything breaks - but I really believe that this will help to future proof sites,
  62. 62. Old Browsers: Holding Back The Web!Tuesday, 5 March, 13 46If you care a lot about these “little” caveats, maybe take a look at this smashingmagazine article and push the people around you to use modern webtechnology when they themselves are requesting modern features on modernwebsites. I mean, no one even knew what social media was in 2006, the yearIE7 came out. We were all using like, Live Journal. Anybody rememberLiveJournal??
  63. 63. Old Browsers: Holding Back The Web! # smashingmagazine.com/2012/07/09/old-browsers-are-holding-back-the-web (The future cannot be now.)Tuesday, 5 March, 13 46If you care a lot about these “little” caveats, maybe take a look at this smashingmagazine article and push the people around you to use modern webtechnology when they themselves are requesting modern features on modernwebsites. I mean, no one even knew what social media was in 2006, the yearIE7 came out. We were all using like, Live Journal. Anybody rememberLiveJournal??
  64. 64. JavaScript polyfills/support for IETuesday, 5 March, 13 47OK, the second solution I propose for the IE slash old browser support is this.There are some JavaScript solutions out there that help support media queriesin older versions of Internet Explorer and some even support other types ofbrowsers, like mobile browsers. These are sometimes called polyfils.
  65. 65. JavaScript polyfills/support for IE css3-mediaqueries.js respond.js adapt.js modernizr.js (polyfill) +more!Tuesday, 5 March, 13 47OK, the second solution I propose for the IE slash old browser support is this.There are some JavaScript solutions out there that help support media queriesin older versions of Internet Explorer and some even support other types ofbrowsers, like mobile browsers. These are sometimes called polyfils.
  66. 66. Object doesn’t support this property or method.Tuesday, 5 March, 13 48The only thing is, they can be kinda heavy and we all know that theJavaScript interpreter in IE6/7 aint’t the best out there.So, I’ve had varying success with these, especially in an environmentwhere there’s already a lot of JavaScript firing, like that of Drupal oranother big site or a CMS. So try and use ‘em if you like but you mayencounter this highly detailed error message if you’re already firing a lotof JS in older versions of IE.They could be useful though.
  67. 67. “JavaScript performance is the biggest problem with the old BlackBerry browser...” “...OS4.61 and higher offer at least some script functionality, but it’s very cumbersome up until OS6, so you should just forget about scripting entirely for older BlackBerry browsers.” # Peter-Paul Koch # alistapart.com/articles/smartphone-browser-landscapeTuesday, 5 March, 13 49*sigh... OK, now on to the BlackBerry... [read slide]and that comes from an article for A List Apart by Peter-Paul Koch..In my experience, I couldn’t agree more. :)So again, browser specific code is bad -- and maybe we should just keepit simple for simple browsers and modern for modern browsers... Up toyou, just sayn....
  68. 68. Tuesday, 5 March, 13 50OK, let’s try and have a little more FUN! - get out of that browser funk... moredesign! :)So, let’s take a look at a real life scenario..Our graphic designer has sent over a comp to be put to code. Yaaaaaay!
  69. 69. Tuesday, 5 March, 13 51and, they’ve very nicely -- used the typographic grid system...
  70. 70. Tuesday, 5 March, 13 52so what we can do is identify the main semantic areas and blocks on the compand determine the percentage widths of all the various reusable blocks andclasses on the page based off of just one static measurement that is reallyquite arbitrary. (they’ll be an actual formula for that in a minute ) [build]our designer has designed the page with normal gutters and pretty standardwidth of 960px - so with 10px gutters that’s a total design width of 940px. - so,that’s that static measurement that we’ll need in a minute. [build]they’ve also added 2 main content modules at 700px wide [build] and somesmall menu items that have the same width and positioning as the bottomsitemap links and finally [build], they’ve placed us a twitter feed and infosidebar at 220px wide to the left.
  71. 71. <--------------------------- 940px ----------------------->Tuesday, 5 March, 13 52so what we can do is identify the main semantic areas and blocks on the compand determine the percentage widths of all the various reusable blocks andclasses on the page based off of just one static measurement that is reallyquite arbitrary. (they’ll be an actual formula for that in a minute ) [build]our designer has designed the page with normal gutters and pretty standardwidth of 960px - so with 10px gutters that’s a total design width of 940px. - so,that’s that static measurement that we’ll need in a minute. [build]they’ve also added 2 main content modules at 700px wide [build] and somesmall menu items that have the same width and positioning as the bottomsitemap links and finally [build], they’ve placed us a twitter feed and infosidebar at 220px wide to the left.
  72. 72. <--------------------------- 940px -----------------------> < ----------------- 700px-----------------> < ----------------- 700px----------------->Tuesday, 5 March, 13 52so what we can do is identify the main semantic areas and blocks on the compand determine the percentage widths of all the various reusable blocks andclasses on the page based off of just one static measurement that is reallyquite arbitrary. (they’ll be an actual formula for that in a minute ) [build]our designer has designed the page with normal gutters and pretty standardwidth of 960px - so with 10px gutters that’s a total design width of 940px. - so,that’s that static measurement that we’ll need in a minute. [build]they’ve also added 2 main content modules at 700px wide [build] and somesmall menu items that have the same width and positioning as the bottomsitemap links and finally [build], they’ve placed us a twitter feed and infosidebar at 220px wide to the left.
  73. 73. < 140px > <--------------------------- 940px -----------------------> < ----------------- 700px-----------------> < ----------------- 700px-----------------> < 140px >Tuesday, 5 March, 13 52so what we can do is identify the main semantic areas and blocks on the compand determine the percentage widths of all the various reusable blocks andclasses on the page based off of just one static measurement that is reallyquite arbitrary. (they’ll be an actual formula for that in a minute ) [build]our designer has designed the page with normal gutters and pretty standardwidth of 960px - so with 10px gutters that’s a total design width of 940px. - so,that’s that static measurement that we’ll need in a minute. [build]they’ve also added 2 main content modules at 700px wide [build] and somesmall menu items that have the same width and positioning as the bottomsitemap links and finally [build], they’ve placed us a twitter feed and infosidebar at 220px wide to the left.
  74. 74. < 140px > <--------------------------- 940px -----------------------> <--220px--> < ----------------- 700px-----------------> < ----------------- 700px-----------------> < 140px >Tuesday, 5 March, 13 52so what we can do is identify the main semantic areas and blocks on the compand determine the percentage widths of all the various reusable blocks andclasses on the page based off of just one static measurement that is reallyquite arbitrary. (they’ll be an actual formula for that in a minute ) [build]our designer has designed the page with normal gutters and pretty standardwidth of 960px - so with 10px gutters that’s a total design width of 940px. - so,that’s that static measurement that we’ll need in a minute. [build]they’ve also added 2 main content modules at 700px wide [build] and somesmall menu items that have the same width and positioning as the bottomsitemap links and finally [build], they’ve placed us a twitter feed and infosidebar at 220px wide to the left.
  75. 75. body { width: 960px; } #wrapper { width: 940px; margin: auto; }Tuesday, 5 March, 13 53So if this was 2006 (the year IE7 came out), we could just lay this out like this..Throw in the static width of the page, place a wrapper inside of that sized tothe total design width and center it.
  76. 76. .main { width: 700px; float: left; }Tuesday, 5 March, 13 54give a width to our main content areas...
  77. 77. .sidebar { width: 220px; float: right; }Tuesday, 5 March, 13 55and one to our sidebar... float ‘er right..
  78. 78. .menu li.menuItem { width: 140px; float: left; }Tuesday, 5 March, 13 56and a width to our menu items... I mean, sure you’d add more to this - butwe’re just making a point here.
  79. 79. However...Tuesday, 5 March, 13 57However, we’re not here to do that... we want responsive... :)So, recall that i told ya’ll that there was a really important thing in responsiveweb design, “@media”? well, the other really important thing is this...
  80. 80. target width ÷ its parent’s width * 100 = width as in % # ethan marcotteTuesday, 5 March, 13 58A formula!...so if you want to use the typographic grid and apply it to the ideas ofresponsive design, this formula is gonna help you out a lot.[explain formula]so let’s see an example of that.. That should become a little clearer....
  81. 81. < 140px > <--------------------------- 940px -----------------------> <--220px--> < ----------------- 700px-----------------> < ----------------- 700px-----------------> < 140px >Tuesday, 5 March, 13 59so coming back to our comp, if we want to calculate the width of that maincontent module. we do something like this...
  82. 82. 700px ÷ 940px * 100 = 74.468085106383%Tuesday, 5 March, 13 60Our target is looking to be 700px wide (the width of the container on thecopm) and our wrapper’s - our containing element’s width is set as 940pxin the comp. (the total design width). So we divide 700 by 940 and that’llgive you 0.74468...... multiply that by 100 and you’ll have the width of thatelement for your CSS as expressed exactly and proportionally to thewidth of its parent container. And while this is an ugly #, i suggest justputting that right into the stylesheet and letting the browser do therounding. Once you’ve repeated this process for all of your calculationsfor all of your containers widths, then you can even remove the staticwidth on you parent’s parent’s parent’s container (usually <body> tag)and set that to a percentage too, like say 90%.
  83. 83. .main { width: 74.468085106383%; float: left; }Tuesday, 5 March, 13 61So that would look like this for the main content module.
  84. 84. body, html { width: 100%; } #wrapper { width: 90%; max-width: 940px; margin: auto; }Tuesday, 5 March, 13 62So folks like to do this, use max-width to say, “hey, design you can go pasthere!” but it’s actually a big discussion right now in the world of design if thisshould be done. some say, if you have the space of a super high res televisionor project, why not use it? - find a way to fill that space with useful goodies -also, begs the question is your design is meant to be displayed on this really bigmonitor with lots of pixels, and if so, is it also meant to be viewed from adistance and, if so, should we then be uping the font size and maybe the size ofthe graphics etc?? See, this can go pretty deep... Anyways, there’s one littlesmall trick: “max-width”.
  85. 85. * { box-sizing: border-box; } # paulirish.com/2012/box-sizing-border-box-ftw # coding.smashingmagazine.com/2012/06/14/coding-qa-with-chris-coyier-box-sizing-and-css-spritesTuesday, 5 March, 13 63And, while im giving you tips on such things, maybe you’d like to knowabout “box-sizing” and the box model. this one is just from personalexperience and paul irish...It’s pretty useful if you are making a responsive design. So, you may ormay not know that in the classic box model based css, if I say I want abox 200 units wide then that’s what I will get, until i add padding of (in thiscase let’s say 20 units), now in some browsers if I add text to my box, I’llhave a box that is 240 units wide. So, adding this rule in will really helpwith that. Now, if I say a box is 200 wide, it’s 200 - gosh darnit.As you can imagine, this can be very helpful when dealing with grids andpositioning. An Example on that: maybe you want to divide your columnsup using percentages but want padding as in px units. Now you can! :)
  86. 86. Breakpoints make responsive design go ‘round...Tuesday, 5 March, 13 64So breakpoints are the points at which you choose to manipulate your design,your css, from one layout and/or design to another one.[show live example]If we don’t use breakpoints and just use percentages, we’ve got liquid design -once we throw in the ability to ask questions (to query) of the viewport - thenwe can start to respond to those responses (those answers).
  87. 87. Breakpoints = aesthetics “...Im a big, big believer of matching breakpoints to the design, not to individual devices. If were after more future- proof responsive designs, we should stop thinking in terms of 320px, “...we should focus on breakpoints 480px, 768px, or tailored to the design were working whatever – the webs so on. And whether those breakpoints much more flexible than are pixel-driven or em-based is up that...” to you...” # Ethan MarcotteTuesday, 5 March, 13 65This screen capture on the left is from a presentation by Ethan Marcotte.it kind of shows you where you might want to slip in some breakpoints inyour design and CSS. Remember these are certainly not set in stone.You may have more than these, you might have less than these. Irecently wrote a theme for a blogging platform. The theme only had onebreakpoint and that was 321px. So, in other words above really smallscreen and below. The theme was only one coloum so it’s doughtful thatthis approach would fit all designs. Point is, you can have as many or asfew breakpoints as you like :)as ethan says [read slide] [build]so we don’t have to place our reference resolution anywhere, but Ibelieve that we should have a reference resolution. it’s just easier todesign with one. but, again, there no rules out there saying we have tostart at any one place.
  88. 88. mobile first?Tuesday, 5 March, 13 65This screen capture on the left is from a presentation by Ethan Marcotte.it kind of shows you where you might want to slip in some breakpoints inyour design and CSS. Remember these are certainly not set in stone.You may have more than these, you might have less than these. Irecently wrote a theme for a blogging platform. The theme only had onebreakpoint and that was 321px. So, in other words above really smallscreen and below. The theme was only one coloum so it’s doughtful thatthis approach would fit all designs. Point is, you can have as many or asfew breakpoints as you like :)as ethan says [read slide] [build]so we don’t have to place our reference resolution anywhere, but Ibelieve that we should have a reference resolution. it’s just easier todesign with one. but, again, there no rules out there saying we have tostart at any one place.
  89. 89. “I like tailoring the code to the design, and finishing up with a responsive design thats optimised for small screens by default, but progressively enhances up to wider displays.” # Ethan MarcotteTuesday, 5 March, 13 66one more from ethan marcotte here..[read slide] and progressive enhancement will allow you to do just that(among other things).
  90. 90. Tuesday, 5 March, 13 67just accept though that at some point everything breaks out of the parametersfor which it was designed -- eventually... maybe after like four of five seasons...maybe...-- As the doa of web design teaches, remember to accept the natural ebb andflow of things. Things come and go, but the web (I would say) is here to stay :)-- Also, we should take something from the programmers book here: “A goodprogrammer expects their code to break.”
  91. 91. Disclaimer: You may have just wasted the last 60 mins. of your life.Tuesday, 5 March, 13 68I guess the last thing to say here is that you may not actually need a responsivesite!Consider that using media queries to simply hide 80% of your content is a realpunishment as well for the end user. It’s almost just as frustrating for them asusing your old clunky desktop design on their 2007 smartphone. That’s awhole lottah bandwidth to take up for a mobile user. So pick your content well,if you are going to go responsive. Leave out the lard, the fat.Ethan Marcotte has an actual formula to help you chose a responsiveapproach: Are the goals of the site closely tided to the context and content ofthe site, if so then maybe go responsive. But if can’t get the context of the“mobile version” of your site to match that of the goal of your sitethen maybeall you need is a small scaled down mobile site - or another approach alltogether. So, something to ask yourself. :)
  92. 92. Disclaimer: You may have just wasted the last 60 mins. of your life. Shared goals and context?Tuesday, 5 March, 13 68I guess the last thing to say here is that you may not actually need a responsivesite!Consider that using media queries to simply hide 80% of your content is a realpunishment as well for the end user. It’s almost just as frustrating for them asusing your old clunky desktop design on their 2007 smartphone. That’s awhole lottah bandwidth to take up for a mobile user. So pick your content well,if you are going to go responsive. Leave out the lard, the fat.Ethan Marcotte has an actual formula to help you chose a responsiveapproach: Are the goals of the site closely tided to the context and content ofthe site, if so then maybe go responsive. But if can’t get the context of the“mobile version” of your site to match that of the goal of your sitethen maybeall you need is a small scaled down mobile site - or another approach alltogether. So, something to ask yourself. :)
  93. 93. one last quote... “... Getting all semantic about what is and isn’t ‘responsive’ doesn’t help push us forward. Saying, “well that’s not *really* responsive because it uses Javascript instead of media queries,” or “that’s not responsive because it doesn’t have flexible images,” takes away from the much more important point: adaptive layout is good for the web, regardless of how you get there.” # jeff croft # zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-meansTuesday, 5 March, 13 69just one more quote guys: this one is from a comment by jeff croft onzeldman.com [read slide]i couldn’t have put it better myself. in fact, i didn’t
  94. 94. Tuesday, 5 March, 13 70So, thanks for letting me bring the good news. I’m sure you have questions - atleast I hope you do. I’ll try to answer them as best I can and i promise that iwon’t make anything up if I don’t know the answer. :)
  95. 95. Thank you.Tuesday, 5 March, 13 70So, thanks for letting me bring the good news. I’m sure you have questions - atleast I hope you do. I’ll try to answer them as best I can and i promise that iwon’t make anything up if I don’t know the answer. :)
  96. 96. Questions?Tuesday, 5 March, 13 71

×