Django, compass and the less framework - Idan Gazit (djangocon.eu)¶

Tags: djangocon, django

Idan Gazit’s last year’s talk on design for developers was one of the highlights for me, so I was filled with anticipation for this talk about compass and the less framework in combination with django.

You should go and read http://www.alistapart.com/articles/responsive-web-design/ about responsive web design. Responsive web is all about having mobile devices with the Whole Full Internet accessible on them.

One option to support those devices was to render two sites. One for mobile, one regular. Now you have two problems. Now you have iPads, so three sites and three problems. Oh, and people will use their HD screen TV sets.

But, it is a bit of a known problem. Desktop PCs had different resolutions. You could do “designed for 1024x786” and let the rest weep. Or a fixed 960 pixel width layout whatever the monitor. Or fluid layouts, but there you’d have no control over line length and so.

So if you’ve got problems on the desktop and other bigger devices, too, why do we have that mobile/the_rest split anyway? Why not just accept the continuous spectrum regarding screen sizes?

The trick: chopping up that continuous spectrum into a couple of limited screen ranges. Each building a bit on the others. You can use css3 media queries for that. They work almost everywhere (except most of IE), even on most mobile devices.

So you make a basic layout that works reasonably well on an IE on a regular screen and use @media queries “above” and “below” that resolution-wise. IE doesn’t understand the @media queries, so it degrades gracefully.

It is also easy to get into. You can start out with the regular site and at a certain moment add a mobile site with a media query. Progressive enhancement and css cascading means you can keep a lot of common stuff.

Check out http://mediaqueri.es for examples of responsive layouts. See how the pages change using only css when you resize your browser. Everything you can change is everything css can touch.

What cannot be touched this way? The content. That’s actually the point of css. That’s also the drawback, for instance for images that you want to show. Do you show the Big Resolution image to the mobile user? Or does the large display get the small grainy mobile image? You could handle this more elegantly with a bit of javascript.

“Responsive web design” is regarded by some as a bad term. It is actually just good “modern web design”. It is just the current best way to do it.

How to do it? Well, there’s nothing really special about it so you can roll your own. But there’s stuff out there that you can use:

• http://sass-lang.com (css precompiler).

• compass adds a lot of encapsulated reusable goodness on top of sass

• less framework gives you some grid layouts for many screen sizes. See http://gist.github.com/1009952 for some of Idan’s changes to it.

Idan: “I will never ever willingly develop without compass again.” The drawback: it is ruby. So when you’re used to installing python packages in an isolated way, dealing with ruby gems can be a bit of a pain.

How do you manage it? He uses django 1.3’s staticfiles support (a static/ directory just like templates/ but for images/css/js). His sheets showed how to generate the compass file structure (too fast for me to type over).

But there’s a newer better way on the horizon! django-compressor is adding support for compass files so it can generate css on the fly!

Note: it might still make sense to have a separate mobile layout if the content should also be different. A train time table website for a mobile phone is probably aimed at people in a hurry that just need the next train’s time. A desktop version probably needs more information and more interaction.

Be aware of the responsive web design technique. Idan thinks it is the quiet future of web design.

(The presentation is online at http://db.tt/2Nt6JZV (warning: direct 7.5 MB PDF download link)).