Responsive Web Design

Editor's Notes

1. The Web is Young No History, very few best practices in comparison to other “artists”. Conditioned to think the way of the graphic designer, or artist. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
2. We're conditioned to think the way of the graphic designer, or artist. When an artist starts a new piece of work he or she chooses very carefully. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
3. We're conditioned to think the way of the graphic designer, or artist. When an artist starts a new piece of work he or she chooses very carefully. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
4. Artists have their constraints. Constraints are good because they provide boundaries In Web Design we struggle with boundaries So we create our own.
5. Start with no canvas We set the minimum width of the smallest monitor that we want to design for, probably 960 pixels because that also fits nicely into a grid. This gives us boundaries to begin building the site, because after all boundaries are great because the give us limitations and provide focus. Can you imagine the highway with no lines painted on the road? Or a game of football without markings on the pitch? Or houses without your allotted land parchment? The next time you start looking at designing a site.......
6. Don’t do it! Don’t automatically on your next project go down that road. If we pick a canvas size we might be wrong.
7. But what happens when that occurs and we get the dimensions wrong? We run the risk of the website being clipped and not showing the full extent of what ins supposed to be seen. (include a picture of a scene that has horizontal and vertical scroll bars).
8. Mobile devices are increasing every day. We could look at browser sniffing but there’s a whole bunch of issues there - no js, sending incorrect request headers, overriding headers etc
9. Shorten the list by focussing on widths instead of devices These will increase as well, but it’s easy to accomodate. SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN?
10. SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN? Not as complicated as that looks.
11. SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN? Not as complicated as that looks.
12. The first thing that we’re going to be doing is creating a flexible Grid based layout. Let’s take a look at our example file. http://dev.justinavery.me/design/fixed/
13. 1024 px #container auto margin to center, some box shadow 620px Header 360px navigation 730px content 250px side bar numerous padding & margins
14. The reason we start here is because it doesn’t make our head hurt as much.
15. The first thing that we’re going to be doing is creating a flexible Grid based layout. Let’s take a look at our example file. http://dev.justinavery.me/design/fixed/
16. You will see this a lot. If you choose responsive design You will live and breathe this algorithm
17. You will see this a lot. If you choose responsive design You will live and breathe this algorithm
18. The default body size for browsers is 16px Set body to 100%, and base all typographical decisions from there. This is just typography, so ignore the layout aspects of padding and margins for now.
19. Finish typography and start the Layout
20. Same principal.
21. The first thing that we’re going to be doing is creating a flexible Grid based layout. Let’s take a look at our example file. http://dev.justinavery.me/design/fixed/
22. You will see this a lot. If you choose responsive design You will live and breathe this algorithm
23. 1024 px #container auto margin to center, some box shadow (i’m going to pick an artibrary figure of 90% for this size because...... 620px Header 360px navigation 730px content 250px side bar numerous padding & margins
24. You will see this a lot. If you choose responsive design You will live and breathe this algorithm 360px navigation 730px content 250px side bar
25. You will see this a lot. If you choose responsive design You will live and breathe this algorithm 360px navigation 730px content 250px side bar
26. BE CAREFULL ABOUT THE CONTEXT
27. The context may change throughout the document
28. now before you round, don't. Browsers will round that themselves to a suitable size, so we want to give them as much information to make that computed change as possible.
29. Go through all the measurements in the site and change them. Paddings. Margins. Widths. Sometimes Heights (height is difficult to have a context)
30. Enter max-width: 100%;
31. this rule allows our image to size to it's maximum size, or the width of the containing element... Which ever comes first. Remove the fixed width provided width= height=. this might fault.
32. this rule allows our image to size to it's maximum size, or the width of the containing element... Which ever comes first.
33. There are some issues with IE6 around the max-width. i.e. it doesn’t work exactly right Do some searches, read the Ethans book for more information.
34. There are some issues with IE6 around the max-width. i.e. it doesn’t work exactly right Do some searches, read the Ethans book for more information.
35. You do need to watch out for ie7 rendering image sizes however Simply download the script (available at http://bkaprt.com/rwd/16/ ) and include it on any page with flexible images; it will scour your document to create a series of flexible, high-quality AlphaImageLoader objects.
36. Create a MASSIVE background image, and use the repeat-y “algorithm”
37. There is a CSS3 property called background-size ( http://bkaprt.com/rwd/20/ ), which would allow us to create truly flexible background images, but—you guessed it—browser support is still pretty immatureScott Robbin’s jQuery Backstretch plugin ( http://bkaprt.com/rwd/21/ ) simulates resizable bac kground images on the body element.
38. W3C had an idea Media Types came first These were the types you could choose
39. The phones started getting smarter. Not much support for “handheld”, so phone browsers sent “screen” headers by default
40. The phones started getting smarter. Not much support for “handheld”, so phone browsers sent “screen” headers by default
41. Now, every media query—including the one above—has two components:1. Each query still begins with a media type (screen), drawn from the CSS 2.1 specification’s list of approved media types ( http://bkaprt.com/rwd/26/ ).2. Immediately after comes the query itself, wrapped in parentheses: (min-width: 1024px). And our query can, in turn, be split into two components: the name of a feature (min-width) and a corresponding value (1024px).
42. Think of a media query like a test for your browser. When a browser reads your stylesheet, the Browser asks two questions: first, if it belongs to the screen media type; and if it does, if the browser’s viewport is at least 1024 pixels wide. If the browser meets both of those criteria, then the styles enclosed within the query are rendered; if not, the browser happily disregards the styles, and continues on its merry way.
43. Explain slide. Now there can be some confusion over max-width, min-width, max-device-width etc So we get taken to the age old question.....
44. DOES SIZE of the browser MATTER?
45. DOES SIZE MATTER?
46. Here are two quick guidelines that helped me sort it out: I won’t get into iphone 4 rendering more pixels from a display area than is available on the rendering surface though
47. Visit this link for a list of queries that you can call with CSS3.
48. WAIT - THERE'S MOARChain conditions together so that you can even better target specifics such as width and orientation.@media screen and (min-device-width: 480px) and (orientation: landscape) { … }Be warned though, iPhone iPad example... Moral is test for specific devices, do not assume just because thou might be able.
49. Lets take a closer look.
50. css3-mediaqueries.js - explain it’s hefty and checks all parenthis next screen for respond.js
51. very light weight and quick, but you’re still relying on JS
52. getting away from the code for a whole I wanted to reflect on the application of responsive design. While responsive design is an amazing option for web developers to offer up different layouts and designs for different devices and sizes, it certainly is not the answer in every situation.You could easily code up an entirely two different sites in the HTML markup and set display:none; for the mobile version when viewed on desktop size screens, and switch them in the media queries. Possible, but not a great idea. You're making both users download a whole bunch of extra markup that simply doesn't matter, and that's just not cool. Uncool. UNCOOL!!!In these cases it's better to offer two completely separate solutions and rely on some server side of JavaScript based redirection.
53. Don’t break a design down from the full size Build it linear to start with Forces you to prioritise content. In a linear environment there is no "this is as important as the that on" because there IS no equal. (insert a picture for the slide of a row of kids shortest to tallest).
54. Don’t break a design down from the full size Build it linear to start with Forces you to prioritise content. In a linear environment there is no "this is as important as the that on" because there IS no equal. (insert a picture for the slide of a row of kids shortest to tallest).
55. there is no substitute for testing on the actual devices, but if you don't have them then you can check out web developer tools. In fact, set them up as presets for you to push them through. All your business comes online, then buy devices
56. Taking for granted what the user wants to see.