The Lylo Files » css

Independent.co.uk redesign

Olly — Thu, 24 Jan 2008 13:48:05 +0000

Following the lead of The Guardian and The Times, The Independent’s website has undergone a web standards makeover.

The redesign feels more like a work in progress to me as it looks largely the same as it’s predecessor — fixed width, same fiddly navigation — the only thing which immediately stands out is the switch to a larger Verdana font, inline images in articles and a splash of beige on the header. Hardly inspiring.

It’s bravely marked-up as XHTML Strict but, alas, it doesn’t quite validate. They still have a few (511) errors to deal with on the home page. It also looks like (as with Guardian Unlimited) they’re running a Java-based CMS:

Oops.

Perhaps they’re restricted by short-sighted bosses who only look at the local competition, but you’d think the designers at these huge media companies would spend a little more time browsing other newspaper offerings on the web. In fact, they only need to visit one site to see exactly how a newspaper should be represented on the web — Khoi Vinh’s masterclass in understated elegance, nytimes.com.

No-nonsense sticky footers

Olly — Mon, 26 Mar 2007 17:29:36 +0000

Absolute positioning. It used to be all the rage back when we never had any problems with full-height columns because we could all use tables for layout, guilt-free. Ahh, those were the days.

These days fixed positioning is all the rage even though it doesn’t work on 90% of browsers, but, hey, we don’t care about that any more because we’re accessibility-compliant and we’re gracefully (and oxymoronically) degrading our sites or even, if we’re really of the Zeitgeist, progressively enhancing them. Honest.

But I’m not here to philosophise about the moral issues surrounding onclick(). I’m here merely to point out the CSS which might, just might (sorry, IE4 fans), allow you to put a big fat sticky footer on your website.

Firstly I’m assuming you’re using the common HTML ‘wrapper’ template:

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

The first step is to apply height: 100% to the body and wrapper elements, and give the wrapper min-height: 100% and height: auto:

html, body { height: 100%;}
 
#wrapper {
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;   /* cunning IE hack */
}

Next, we absolutely position the footer at the bottom which, combined with the relative positioning of the wrapper, sticks it to the bottom of the page:

position: absolute;
bottom: 0 !important;
bottom: -1px;  /* thanks IE */

You’ll probably want to apply a height to the footer div and add an equal size to the content div using padding-bottom. This will prevent any content from being hidden behind the footer.

And that as, they say, is that. Absolutely marvellous.

See the footer in action.

Tested in IE 5.01, IE 5.5, IE 6 and Firefox on the PC. Firefox, Opera, Camino and Safari on the Mac.

Are you using Microformats?

Olly — Thu, 03 Aug 2006 21:58:23 +0000

I missed his presentation at @media2006 but I can thoroughly recommend checking out Tantek’s slides from his recent An Event Apart NYC presentation, What are microformats?.

@media 2006 – Day Two

Olly — Fri, 16 Jun 2006 22:22:09 +0000

A perfect London summer morning for the second day of @media 2006 meant I could stroll to the venue and I arrived just in time for Dan Cederholm’s insightful presentation, Bulletproof Web Design. Not only does Dan have heaps of experience and a stunning portfolio of work, he has a seemingly endless attention to detail. Inspiring stuff which I’ve definitely taken to heart. I’m still not sure what DigDug is though :-)

Next up was Javascript Libraries: Friend or Foe? with Cameron Adams, Peter-Paul Koch, Stuart Langridge, Dan Webb, and Simon Willison. As primarily a software developer, I found this rather frustrating. The entire session was a discussion of whether Javascript libraries were useful or not, but I found the arguments on both side lacking in rationale: “I don’t like libraries, I like to cut & paste the code I need”, for example. There was a lot of focus on the Dojo Toolkit but I didn’t really take much away from this.

Enter Cameron Moll presenting Mobile Web Design.

This was of an excellent presentation (and Cameron wins the ‘Slide Design’ award hands down), introducing the issues surrounding designing for mobile devices, discussing how such designs should be approached (think: “What is contextually relevant?”) and introduced me to a worrying number of new acronyms and buzzwords (Flash Lite, LBS, RFID, XHTML-MP, .mobi). There’s no escaping the fact that mobiles are going to be an increasingly large target market for web designers and this was a perfect introduction.

Lack of time management skills (and talking to Cameron) meant I missed the first part of CSS Project Management with Rachel Andrew, Roger Johansson and Dave Shea, but I took a lot out of what I saw. It was a panel discussion of different techniques and tools for managing CSS projects and it was interesting to hear people’s differing approaches. When the topic of development environments was raised, I didn’t get a chance to plug Karlis Blumental’s astonishingly good WeBuilder product, so there’s a quick plug. If only it were available on the Mac. Gah!

The last presentation was the Modfather himself, Andy Clarke, who was looking seriously sharp:

Transcending CSS: The Fine Art of Web Design was great, taking Andy’s scrapbook inspirations and applying them to the web, questioning and challenging designers to take the initiative and push CSS to the limit. In essence, forgot trying to make sites look identical in IE 4, IE5 and Safari 1 and instead, make them look awesome in Firefox and Safari 2 and leave them to just work in older browsers. This is just so right that I’m sure this will be the next web design movement. Look out for the book (”Transcending CSS”) in the autumn.

To wrap up, Molly Holzschlag, Jon Hicks, Jeremy Keith, Eric Meyer and Tantek Çelik held a “hot topics” panel discussion about AJAX, the World Cup, cheese and the Next Big Thing (Microformats – you heard it here last). Here’s the panel, minus Tantek (sorry dude):

You can probably tell I had a great time. I’ve been to a lot of conferences over the years and this was, without question, the best I’ve been to. Not only were the presentations superb, but the atmosphere was friendly and the speakers wanted to talk to people over coffee. If they weren’t speaking, they would have been there anyway! And that pretty much says it all.

@media 2006 – Day One

Olly — Thu, 15 Jun 2006 20:49:56 +0000

Some very good presentations today, kicking of with Eric Meyer’s trip down CSS memory lane, Ten Years of Style. Following that was an interesting panel discussion, Good Design vs. Great Design with Jon Hicks, Veerle Peiters and Cameron Moll. Focusing on grids, typography and colour, the panel provided some thought-provoking insights and Jon declared his love for Comic Sans. Here they are:

Following that, I listened to Chris Wilson talk about what to expect in IE 7. Although this product is always going to be seen as Microsoft catching up with the rest of the browser pack, it does look like it has some rather cool features, namely Open Search. I expect this will be one feature Firefox, Opera et al will all be looking at with interest.

After lunch (nice cakes) was The New Accessibility Guidelines: WCAG 2.0 with Andy Clarke, Patrick H. Lauke, Gez Lemon, and Ian Lloyd. To be honest, this was the one presentation which didn’t work for me and I got the impression that WCAG 2.0 was rather unpopular with the presenters. The gist I got was that the guidelines are complex, hard to understand and, unfortunately, inaccessible. Shame, but perhaps they’ll improve before they’re finalised. Here’s three of the panel:

The final presentation of the day was Designing the Next Generation of Web Apps by the thoroughly energetic and inspiring Jeff Veen. It was an excellent explanation and demonstration of the latest Web 2.0 (i.e. AJAX) applications, providing real insight into the techniques used by the leading companies, using Jeff’s own experience working at the forefront of the web. Go Jeff!

Shamefully I didn’t go to the after party and instead skipped out immediately after Jeff left the stage to watch the match which, for the last 10 minutes at least, was a perfect end to the day. Super Stevie!