Page 1 of 1

28

AUG

IE8 Beta 2 Released

@4:32 Leave a commentLeave a comment

The new beta of Internet Explorer 8 has been released.

Complete with the new InPrivate option that's been all over the news the past week or so. They've also got Compatibility View, which quickly switches to render the page as IE7 would render it (so.. incorrectly). They had IE7 rendering in the old beta, but it was crap, as you had to reload the browser. Apparently this one does it instantly.

It fares well against current CSS standards though, a lot better than any current iteration of IE. There's an updated compliance table over at quirksmode.org.

I shall be trying it out myself later on to see how it is.

Tags : ie, web

13

AUG

Number 10 goes Web 2.0

@4:02 Leave a commentLeave a comment

Yes, another in the long list of sites to redesign this year (I can't really complain, as I'm re-doing mine too), number10.gov.uk, the website of the prime minister's office has taken on the whole web 2.0 thing.

It's got Flickr, YouTube and Twitter all in the sidebar, plus links to submit stories to Facebook, Digg, etc andof course, RSS feeds.. just in case you want to keep up to date on everything Downing Street it twittering.

Seems like it's built on top of WordPress (based on the code), despite the fact there's no mention of it anywhere. They've already got some rather interesting code cock-ups. Nested anonymous <div>'s for absolutely no reason, links pointing to local IP addresses (e.g. the "Home" link, which points to http://10.10.0.215/), not to mention the fact they're not clearing floats on the "Communicate" page, so the images are pushed off to the left.

There's a grand total of 72 errors if you try and validate the XHTML. Nice :) Although to be fair, most of those are because of using & instead of &amp;. At least the CSS is valid, although they didn't write it, it's a pre-made WordPress theme called NetWorker.

Also, no print stylesheet. C'mon people!!! All websites should have a print stylesheet. Trying to print their website is painful, and is going to waste a hell of a lot of paper, along with lots of ink. Is that really the environmental message they want to give out?

It's even in "Beta", a true web 2.0 site! Which would explain the above issues, can't expect everything to be perfect first time.

It does look very good though, and is definitely an improvement on the old site. Nice to see they're actually making an effort!

Tags : design, web

8

AUG

A Redesign is in Order

@7:47 Leave a commentLeave a comment

It's been nearly two years now since I've bothered to even attempt to fiddle with the code of this site, and it's amazing just how much you can learn in that time.

I look back on this code here, and cringe at some of the techniques and things I've done. How against my current practice it is. Of course, that used to happen all the time, and I would tweak the code at least every 4 months. Unfortunately with my current work schedule I just haven't had time to do that.

The projects section is the worst hit by this 2 year gap, it's pretty much entirely out of date, which doesn't really help matters. The blue background doesn't sit well with me any more, the drop shadow effects are so.. 2006.

So, I've decided a change is in order. I'm still busy with work, but I'll be making time to work on a new version of the front-end for this site. Who knows, maybe I'll actually keep the new one up to date!

Tags : redesign

7

AUG

Separation of content and presentation with HTML and CSS

@8:02 Leave a commentLeave a comment

Almost every day I come across sites which have missed this vital point entirely. They think that just by adding CSS to a site, it's suddenly now much better. This is not the case, and I admit I've been in this category myself in the past.

The whole concept of HTML and CSS is to separate the content of a site, from the presentation. To layer it. This means that there should be absolutely NO content in the CSS, and absolutely NO presentation in the HTML.

Over and over I'm seeing sites with things like id="left" in the code. What happens when the design changes? "left" gives no semantic meaning to the element at all, that is presentational, and should not be used. A better way is to name it something relevant to the content it contains id="home-page-quote", etc. Now when the design changes, the HTML still semantically represents the content.

I'm also seeing the use of spacer.gif's. Back in the days of table based layouts, people would use spacer.gif files ( a small transparent image ) to space out the content. Not only is this very bad practice, as it will mess up the layout for people who use mobile devices, but also because when the page is viewed without style (such as for screen readers) there will be images all over the place, that lend absolutely nothing to the content. If you use CSS, there is absolutely no need for a spacer.gif file, you can do everything you need in CSS, with no exceptions! Padding and margins can space out the content and you can use letter-spacing, text-indent or line-height to space out text.

Another thing I've noticed, is the use of a div or hr which has class="clear", yet they have no content whatsoever. Again, these add nothing to the content of the page, they don't make semantic sense. This is presentational, as you want to clear a float. But again, what if the design changes? The markup will need to be changed too. It is possible to use CSS to make self clearing floats with minimal effort, and with valid standards compliant CSS. A quick Google search will reveal many different pages discussing the matter of self-clearing floats.

When viewing HTML without the CSS applied it should be in a suitable order so that it reads well, and only images which are part of the content should be shown (logos are included here, as they're part of the page content). If the page is in an odd order, screenreaders will be confusing for people and if random style images are showing, then it detracts from the content. You should be able to completely change the layout of a page by only editing the CSS. If you have to edit the markup, then you've done something wrong and need to re-think the code. This includes extra markup only used for presentational purposes. You shouldn't have a div called "coloured-line" for example, as this is specific to the current design. Yes, you can hide it in later designs with display:none, but ideally you want to make the coloured line just part of the CSS and give no reference to it in the markup.

Nobody's perfect, and I've done many of the things I've mentioned here in the past myself (and a lot more recently I've found myself naming classes "left" without realising until later). The whole point is that we find new and better ways to do things, and constantly strive for perfect code. Hopefully this will help some people to use HTML/CSS the way they were meant to be used.

Tags : web, html, css

1