Some ponderings on CSS3

I’m starting to get properly interested in CSS3 for a few reasons. I’ve subscribed to the mailing list, read up on some of the working group goings on and done a bit of research ahead of really jumping in with some code play. Some of this could be of interest to others so here goes:

The best two resources I’ve found are the CSS Working group home page and the CSS3 Info

The CSS Working Group Under Construction site over at the W3C has a huge ammount of information. For those that dont know CSS is being split into a number of distinct modules, namely:

  • Advanced layout
  • Aural Style Sheets
  • Backgrounds and Borders
  • Basic User Interfaces
  • Box Model
  • Cascading and Inheritance
  • Color
  • Fonts
  • Generated Content for Paged Media
  • Generated and Replaced Content
  • Hyperlink Presentation
  • Introduction
  • Line Layout
  • Lists
  • Maths
  • Multi Column Layout
  • Namespaces
  • Object Model
  • Paged Media
  • Positioning
  • Presentation Levels
  • Reader Media Types
  • Ruby
  • Scoping
  • Speech
  • Syntax
  • Tables
  • Text
  • Text Layout
  • Values and Units
  • Web Fonts

Phew. Their is also some work going on on profiles for TV, Printed media and Mobile. I’m interested in a few of these modules – particularly those dealing with Web Typography and the Basic User Interface module which deals with the look of form elements in their various states and more cursors and colors to describe GUIs (graphical user interfaces) that blend well with the user’s desktop environment.

CSS3 Info also has lots of information worth reading, including some good examples of parts of CSS3 that have been implemented ahead of recommendation in the preview section. My favourite bit however has to be the CSS selector test by Niels Leenheer. You can read a little more about that, and how different browsers do, or at least how they did in October. The W3C test suite is available too, but no where near as slick.

I’ve even gone and installed a WebKit nighly build to try out some of the features only supported their at the moment. Who knows? I might even add new designs to the site using new selectors as a treat for those silly enough to be using such experimental browsers.

Fluidflash

Their is nothing wrong with a nice header graphic. Clients, designers and customers alike love them. But I often see them used as an excuse for fixed width designs. Well no more I say (unless, of course you have a perfectly good reason for a fixed width design in which case you dont really need this technique.)

The plan was simple. Find a way of incorporating flash headers into sites using liquid or elastic designs in much the same way you might use lots of sliding doors background-image goodness.

And all it takes is a snippet of actionscript goodness:

Stage.scaleMode = "noScale" Stage.align = "TL" var width var height function resizeEvent ( ) { width = Stage.width height = Stage.height dimensions.text = 'width : ' + width+ ' height : ' + height topRight._x = width bottomLeft._y = height bottomRight._y = height bottomRight._x = width } resizeEvent ( ) var stageListener = new Object ( ); stageListener.onResize = resizeEvent Stage.addListener ( stageListener );

Download example

New year New site

If you’re viewing this post in your feedreader then you might not notice anything different but it’s all change around these parts. I’ve gone all Radiant and with it a new slightly minimal design.

Radiant, for those that missed my earlier gushing post is a Rails based Content Management System that looks something like this:

Morethanseven admin panel from Radiant

I’m going to post a few follow ups about how I did certain things using Radiant and my particular setup. All in all it’s been fun. Always a good sign when developing something. I ported all my old posts across from Textpattern and I’ve posted a project post (in my new project feed) about TXP2Radiant for anyone else looking to do the same.

Their will likely be a few gremlins lying around that I’ll get to over the coming weeks, and I have some decent posts in mind to keep people interested. Expect less about what I’m up to and more about the pressing issues of web design and development that I keep meaning to write about.

The design is a little on the minimal side at the moment but on purpose. I want to play around with different designs for the site while keeping everything clean and simple. I might even set a file size limit for the CSS and I definately want to start playing more with CSS3 selectors (more than 80% of you dont use IE6, for the other 20% please upgrade). I’m not going to say anything I’d regret, like one new design every other month, but I can dream.

As I get more familiar with Rails (one of the reasons for the move) and Radiant I’ll likely add some bits like a Flickr powered gallery and maybe something to do with Twitter but for the moment it’s all about the content.

PyGunFog

My first real foray into writing some simple Python scripts was a few scripts to establish the Gunning-Fog index of some given text. I wont go into lots of details about the uses of such a script; if you’re interested read Gez Lemons writeup over on Juicy Studio.

I took quite a bit of inspiration, and some code, from a similar script, PyFlesch, for establising the Flesch reading score of text.

I expanded things a little, using the Feedparser module to parse content from RSS and Atom feeds and give a Flesch or Gunning-Fog score of the summaries.

Download all scripts

TXP2Radiant

Having just moved from a couple of year old Textpattern site to Radiant I didn’t feel much like copy and pasting lots of articles. The script simply copies all your posts from textpattern into the relevant place in Radiant.

Download PHP

At the moment this is undocumented and pretty rough but it saved me time and works. I’ll try and work up and potentially rewrite in Ruby for possible inclusion in the Radiant core if time permits.

Web.php

Web.py is a really nice lightweight web framework written in Python. It’s not trying to be Rails or Django, it’s trying to be as simple as possible. Web.php is my homage to Web.py. I’ve unashamedly copied the ideas and build a very simple web framework in PHP. It’s not a complete port, nor does it do everything in the same way.

The code example from the project home page was what originally piqued my interest:

import web urls = ( '/(.*)', 'hello' ) class hello: def GET(self, name): i = web.input(times=1) if not name: name = 'world' for c in xrange(int(i.times)): print 'Hello,', name+'!' if __name__ == "__main__": web.run(urls, globals())

My PHP versions goes something like this, I’m sure you can see the similarities:

<?php require('webphp/web.php'); $urls = array( '/' => 'hello', ); class hello { function GET($path) { echo 'hello world'; } } web::run($urls); ?>

I’ve used it so far on a couple of projects, but it’s never been properly tested as such nor do I have lots of time to develop it. It’s purposely feature and code light (the core file is only 80 odd lines of code, includig comments).

Download Zip

Backgarden

I’m a fan of Backpack from 37signals. Although you can make pages public their is currently no way to style those differently, or to add content from outside Backpack. That’s where Backgarden comes in. It’s a simple PHP (4 and 5, the XML/XSL implementations are slighly different) application that builds a page via the Backpack API and some XSL magic that you can put on your site. You just enter the page address and your API key.

Download Zip

CMS on Rails

Content management is one of those subjects I often get involved in at work, and something I find pretty interesting as a whole – even if I keep having to reiterate most of the problems with content management are people problems rather than technological ones.

I’ve been using Textpattern for this site and a few others for a couple of years. I’ve spoken before about the recent move to more hand rolled solutions, and the flexibility that gives people to innovate. As well as occasionally threatening to really kick the tyres on Django, Rails or similar (Seaside, Web.py, ...). I’ve been wandering the halls of the web development frameworks all year it seems – playing with Python and Ruby along the way.

To a point however these seemed more developer focused that something I could see being used by a web designer or small company (some intentionally so in fairness) or in education. However I’m back playing with Rails and started looking at existing apps to see how they are put together (I love open source) and a quick recce of Rails based CMS products turned up (amongst others that didn’t interest) Radiant. It appears to have been developed along side the new Ruby site launched in September and boy is it a nice piece of kit.

Assuming you have Rails installed, installation of Radiant is as simple as one command (It’s available as a Gem) and then another to get a site up and running (Ok, plus a couple of other simple commands to configure a database). First impressions it looks well put together, with a strong concept well executed and a lovely Interface. It’s chunky without being cliched and simple without being simplistic. I’m in the process of making plans for next year and this is hopefully going to feature somewhere. I love looking for a problem where I might just already have the solution.

Oh, and a only vaguely related note (well, Wordpress is a content management system of sorts) a couple of friends have started blogging over on breadlinedesign.com and anotherblog.com. Consider this a shameless plug.

Food 2.0

I’m something of a want to be foodie. I’ve been a fan of food since working in a restaurant as a KP way back when I was at school. I like staying in and cooking, watching the odd food related progamme and going out to nice restaurants. However, I suddently realised it’s one of those things I dont yet do online. Most of the other things I do, or am interested in, I do at least in part online – except food.

So I set out to see what I could find. I’d signed up for Cork’d a while back after the buzz around the site in the web standards and Rails community. I’ve added a few wines and a few drinking buddies and keep thinking I should keep it up to date but…

A quick search threw up Chug’d, Menuism and Recipe matcher to name but a few – all complete with Web 2.0 cliches. But nothing that really made me want to sign up. I’m not looking for a food community really, more a useful tool to store food related tit bits. Recipes. Which wine goes with what and when the best time to get perculier beers might be. Like a food focused version of backpack maybe? A mobile interface, hey maybe even a Palm based data entry setup would top things off nicely.

Any other food people reading with a workflow that works? We’re always talking about software workflow or getting things done but what about something important like food!

Background Images in Email

Whatever you might think about image rich emails you have to admit clients are a fan, and sometimes needs must.

The web, as always, comes to the rescue and their are a few good articles around – many of them over on campaignmonitor.com including a set of Email Design Guidelines for 2006, Optimizing CSS presentation in HTML emails and the excellent A Guide to CSS Support in Email

A List Apart also has an older article and their is some good infmation over on xavierfrenette.com about the support in web mail clients.

Another little bit of useful info I thought worth posting, after a quick conversation with a colleague, concerns the use of background images in emails.

Assuming your going down the inline styles route you might want to have something like this:

<div style="background: url(image.jpg) top left no-repeat; width: 500px;"></div>;

But this just doesn’t work. The image doesn’t appear when the email is sent. A quick fix is to include the image inline, but hide it as much as possible with a height and width of 1px and a style of display: none.

<img src="image.jpg" width="1px" height="1px" style="display: none;"/>

This throws up one of those interesting annoyances in Outlook. If you’re sending the email using Outlook the image appears twice in the editing pane, hence the 1px trick as well as the style display: none. When it’s received the style rule gets applied.

This assumes you are sending the images along with the email, rather than simply linking to them online were you dont have this problem – but do have a host of other issues with blocked images and the like.

I haven’t admittedly tested this extensively, however I’ve had a lot of luck with Outlook, which for business to business emails accouts for something like 75% of the audience according to Campaign Monitor (and probably around what I’d expect based on my experience).