9. Responsive design
= CSS3 media queries
/* Default CSS */
#page { width:1060px; }
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* CSS for this particular view-port */
#page { width:436px }
}
10. No support in IE6, IE7, IE8 (as usual)
http://www.smashingmagazine.com/2010/02/11/the-life-times-and-death-of-
internet-explorer-6-comic-strip/
11. Supported by IE9 – yeay!
http://www.smashingmagazine.com/the-smashing-cartoons/
12. Browsers without support for CSS3
and media queries get served the
default version of the site, just as they did
before implementing the framework.
25. steppenwolf.info
name = Steppenwolf
description = Steppenwolf Less Framwork 4.0 Demo Theme by Popolo
version = VERSION
core = 7.x
; Stylesheets
stylesheets[all][] = css/less-framework.css The LESS framework
stylesheets[screen][] = css/style.css The default style
stylesheets[screen][] = css/responsive.css The ”responsiveness” goes here
; Regions
regions[header] = Header
regions[searchbar] = Search bar
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar] = Sidebar
regions[footer_left] = Footer left
regions[footer_right] = Footer right
32. Play around with it...
Drupal.org, download Steppenwolf: http://drupal.org/sandbox/
leanderlindahl/1306334
Notas del editor
\n
This is me. I’m Leander Lindahl from Malmö. I’m a designer and I have a history of working both with traditional print design and web. And I’ve been into the whole Drupal thingy for about two years, and let me tell you... it can be frightening at first for a designer. But it is well worth the effort...\n
So what is Responsive Design all about? \n
The ”legendary” article by Ethan Marcotte that coined the expression. The ”thing” with responsive design is that now with CSS3 and media queries you can style your content according to the view port the user is accessing the content with.\n
This is not a new idea. But this time around it doesn’t suck.\nAs far as fixed-width goes, I prefer it. Look at A List Apart – a site done by pros for other web designers. They use fixed width. It just makes sense to me, as you wouldn’t encounter a physical newspaper made out of spandex.\nPeople are used to reading their text at a set width. It wasn’t until the advent of the web browser that this became an issue. And, let’s not forget that the original measurement of the web was pixels, and not percentage. Nathan Smith\nOctober 5, 2005\nhttp://www.churchmarketingsucks.com/2005/10/top-10-web-design-mistakes/\n
In reality Responsive design is about media queries (CSS3). These allow you to control which layout (CSS) get’s used by which view port.\n
This is what media queries are...\n
IE wohoo!\n
IE9 shaped up\n
\n
\n
\n
The ”full width” defautl layout with 10 columns. I slightly deviated from the grid for the ”image gallery”, because I wanted three equal columns for image gallery and blog. \n
The tablet 8 column ”grid”\n
Mobile layout, only two columns\n
Wide mobile laoyt with 5 columns\n
So these are the various layouts, all CSS-based variations\n
So how can we use this with drupal\n
Activate/ deactivate responsive.css\n
In most examples of LESS you’ll find that they are neatly based on the new HTML5 structure, we won’t quite get there today. We’re using basic drupal templates...\n
This is the basic structure. The wrappers are simply to make a continuous ”unlimited width” horisontal background. The header, main and footer are the divs that we apply the different view ports fixed width to.\n
The basic layout is done like this. We assign the grid width of 896 plus padding (48px) to the #header, #main and #footer. We subdivide the ”columns” of #content area and #sidebar following the suggested column widths from the grid template\n
The tablet layout is done much in the same way as the default layout, but with encapsuled in a media query condition min-width:712px, max-width: 991px;\nWe adjust the columns #content and #sidebar in the #main div\n
The mobile layout, yet again, follows the same pattern. They main effort is really deciding in the design process, how to use the varying view ports. If you prepare your thinking about the visual design and interaction well, then the coding shouldn’t be all too hard. \nThis time media queri condition is max-width: 767px;\nWe adjust the columns #content and #sidebar in the #main div\n
The wide mobile layout… \nThis time media query condition is min-width: 480px, max-width: 767px; That means that below 480 px width we get \nWe adjust the columns #content and #sidebar in the #main div\n
Try it out for yourself! Drupal can be difficult to create example themes for because to creat anything at all you generally need some vews and som blocks. Hence I included the database with the theme. Install, try it, throw it away and apply the concept to your own designs...\n