Is 1024 OK?

With all the hoo-hah over the launch of the new ALA, I read with interest the interview with Jason Santa Maria over at Malarkeys place. What strikes me about this redesign is that it has been so focussed on typography. Jason has spent a long time on the details, as well as the overall, and by god it shows.

Now, I’m going to have to be careful here, because Jason is a friend, but there was one thing in the interview that just didn’t sit right with me:

“We don’t support 800×600 anymore, nor do we 640×480. Do you? People flipped when sites stopped supporting 640×480… now no one says a word. Things change. Trust me, you are going to see more sites stretching out their legs and putting their feet up.”

As a designer (coming from a print design background) I’m with Jason. I would LOVE to think ‘to hell with 800×600’, and get that bigger canvas to work on. However, I also know that not everyone maximizes their window. They may have 1024, or much higher, but thats not to say that they don’t keep their browser windows at only 800px wide. For the record I have mine in a widescreen letterboxy format- full width, but leaving room so that I can see my Stattoo dock. Thats what its all about – everyone has their own preference.

What about future proofing? The ideal that’s touted when using web standards. Its always amusing to come across a site from the 90’s that was rigidly designed for 640×480. This tiny site sits up in the top left corner of the screen, with a large repeating background image (surely no ones going to see that?!) throughout the rest of the window. A fluid layout would mean that sites that we build have more chance of fitting the screens of tomorrow.

Now, I’m one of those people who’s gone for a ‘fixed 760px horizontally centred’ boring layout thats so common these days, but I’m Increasingly of the opinion that fluid – or at least fluid up to a point, is the way to go. I’ve been working on a fluid redesign for a while now – I just wish I had time to finish it!

This isn’t a post about fluid vs fixed though. Nor is it criticising Jason or anyone who decides to design for larger resolutions. Its about a dilemma I have – designer sensibilities vs user preference. Some may not see the two in opposition, and a lot of times they aren’t. However, I’d love to say ta-ta to 800×600, but a little nagging voice is telling me it isn’t that straightforward. Believe me, I’m not so far up my web-standards-arse that I wouldn’t just put up one big gif image for the page if I thought no one was looking.

Maybe I need to lighten up and not worry quite so much about pissing off ‘users’? ;o)

Tags: design, webstandards

3D Box Model is now Creative Commons

To save me signing contracts, the 3D Box Model diagram is now released under a Creative Commons license.

Tags: boxmodel, cc, webstandards

Providing CSS for just Internet Explorer

(*Disclaimer* – although this didn’t turn out to be the valid replacement for the underscore hack that I hoped it was, I thought I’d leave the post here as proof of what happens when you don’t check your facts thoroughly enough. Or more specifically, when you’re so tired, that you confuse a vaild HTML result to be valid CSS – hey ho!)

Today, I had one of those little CSS accidents, which led me to discover that an easy way to provide css for only IE (PC and Mac 5, 5.5 and 6) is to simply to add a comma after the the selector, but before the opening brace:

Tags: css, internetexplorer, webstandards, windows

Forcing scrollbars (now even better)

The massive trend of centering content horizontally brings with it a small problem. When moving from pages with short to long content, a nasty shift happens. The only way to avoid this is to force scrollbars to appear all the time. Here are a few solutions…

Tags: code, css, howto, webstandards

IE Whitespace Bug

Its been a sort of Holy Grail for me (well maybe a Holy Teacup) to find a solution the IE Whitespace bug. If you’re not familiar with this, then you probably haven’t applied display:block to links within an unordered list. Adding this CSS property creates a solid ‘button’ out of what would’ve been a humble inline link, one that can be sized and prettied up as you like. The trouble is, IE windows adds another line height between all these links – unless you remove every bit of whitespace from the HTML.

Tags: bugs, code, css, internetexplorer, webstandards

Are web sites identical?

François Briatte has wondered this, which led him to conduct a survey of 10 CSS designers web sites and their similarities. The results are really interesting reading. Eric Meyer made the suggestion that we explain our reasons for our choices, and there a few points where I feel I’m a bit lacking.

Here are the ones I wanted to briefly comment on:

Are links underlined?

No – I still uhm and ahh about this one. There are good basic usability reasons for underlining links, but I haven’t yet brought myself to do it. I don’t like seeing links underlined, it breaks up the text too much for me. I know precious visual sensibilities should take second place, and I might reconsider this one.

Tags: css, design, surveys, webstandards

3D CSS Box Model

Please Note : This has now been updated and moved to its own section here.

Here’s a thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram. I’m not sure if this is of any use at all, but here it is anyway – the 3D CSS Box Model.

Tags: boxmodel, css, webstandards

I laugh at your spacer gifs

I’ve just been redoing a designer’s table-based layout as CSS. The code was a soup of table cells and spacer gifs. One thing I found interesting was that rather than use a 1×1 pixel gif and resize it everytime with HTML markup, they’d created a whole folder of spacers of varying sizes! Wow, this is old-school at its best!

Needless to say, the pages are now lighter and consistent, but you can be so blinkered in your minority ‘web standards world’ you can easily forget that there are still designers using these methods today.

Tags: gifs, webstandards

web standards awards

I could hardly believe my eyes when I was told I was the latest recipient of a web standards award. I’ve been following the progress of the awards keenly, which has featured personal favourites Jason Santa Maria and Shaun Inman, but I never thought I’d ever be up there too. Thanks Andy, you’ve made my year.

Tags: awards, hicksdesign, webstandards

Highlighting current page

Just recently I’ve realised how useful adding an id to the body tag of page can be. I’d always wondered why others had done it, and now I know. It gives that extra bit of flexibility to layout a page and set variations in page style depending on its id. So, I’ve just added another wee article on how to highlight the current page with CSS in your navigation.

Tags: css, design, webstandards

Highlighting current page with CSS

With handy online resources such as List-o-Matic, its now easier than ever to use unordered lists to create navigation. As an extra help to users, why not highlight the current page in the navigation? A recent article on A List Apart called Keeping Navigation current, showed how to do this with PHP. Here’s an easy solution using CSS.

Tags: css, design, webstandards

Beware the CSS Hackers!

If you haven’t already, go and read Peter Paul Koch’s article ‘Keep it Simple’ for Digital Web Magazine. I was left speechless, not sure whether this was a spoof or that he really thinks these things.

Basically, his assertion is that ‘CSS Hackers’ are actively spending time creating hacks just to feel superior and to dazzle, deceive and seduce ‘innocent newbies’. Tee hee! Or am I being naivé? Is there really an underlying conspiracy that I’m blissfully unaware of in my ‘happy and poppy’ world?

Tags: css, rants, webstandards

accessible drop downs

For a recent website redesign, a client wanted to use a DHTML drop down menu. Originally I’d bunged in one of the many free javascript based menus that are ten a penny on the web. As the project developed, I wanted to replace this with a more accessible menu.

My criteria were:

• I wanted to use unordered lists to list all the links, not bury them deep within a javascript file. This would also make it easy to mantain and be database driven in the future
• I’d prefer to not have javascript event handlers in the markup, but this wasn’t essential
• It had to show all links ‘flat’ if the user had javascript disabled
• Good cross browser/platform compatibility, no ‘IE Win only’ disclaimers.
• I’m using it within a centered layer, and want to avoid the need for absolute positioning if possible
• I wanted to control the look completely with CSS
• And the moon on a stick please

Gazingus.org’s menu’s would’ve fitted the bill perfectly, but the site doesn’t seem to have been around for a while (does anyone what happened to this? I hope its not gone for good). Time was running out, and I was doing a late night/early morning to find something quick to make the deadline the next day.

Tags: css, design, menus, webstandards

zen garden #2

I’ve finally finished off my second submission to the CSS Zen Garden, and its been accepted! I’ve been wanting to have another go, and do something more comtemporary, but I really felt the pressure after recent entries. Release One, sub:lime and si6 have all been beautiful examples of slick modern design.

Tags: css, webstandards, zengarden

gettin' all strict

I’ve just changed the site from being XHTML Transitional to Strict, and I was surprised how little work was involved. What follows is a list of everything that didn’t validate, and had to be changed:

• remove target=”_blank” from <a> tags. Opening new windows breaks the back button anyway, which is an accessibility problem. You can always use a simple javascript to open new windows, which is what I’ve done for the desktops section
• remove border=“0” from <img> tags (use css instead – img {border:0} )
• add <fieldset> tags around form elements. (You can actually use p, h1 etc, to validate, but fieldset makes more sense.
• remove language=“javascript” from javascript tags
• change any remaining name=” “ attributes to id=” “

The last 2 were leftovers from the original Movable Type templates. In a matter of an hour the site was converted. The search and replace function within Movable Type meant I didn’t have to go through every entry individually.

Tags: css, hicksdesign, updates, webstandards, xhtml

Compliant style

Joe Clarks’ Fawny blog talks about a category of web design he’s noticed and labelled “The International Compliant Style” (IC-Style). He describes this as being “employed, though not necessarily through conscious decision, by the majority of developers and designers who are committed to following official specifications”. He mentions stopdesign as an example of someone subverting the rules of the style, but I thought that mezzoblue would be an even more radical example. Hicksdesign is one the of the sites that Joe lists as following the rules of IC-Style.

Tags: design.colourblindness, webstandards

skip navigation links

A recent article at The Web Standards Project alerted designers that ‘Skip Navigation’ links, traditionally hidden with the CSS property display:none, are invisible to screenreaders. This hadn’t occurred to me, even though I knew it was a problem with Fahner Image Replacement, which also uses display:none.

Tags: accessibility, css, webstandards, xhtml

skip links update

The suggestion in my last post was kindly tested by Bob Easton, who wrote the original article on CSS Discuss. It only worked in 2 of the top 3 screenreaders. It works in Jaws 4.51 and IBM Home Page Reader 3.02, but failed in the number 2 – Window-Eyes 4.5(beta). However, Bob suggests the following, which he has tested and does work in all 3:

.hide {
	position: absolute;
	left: -1000px;
	width: 990px;
	font-size:1px; line-height:1;
	}

As you can see, it places the content off the screen to the left. He also added width, font-size and line-height to “allow placing very large blocks of assistive text over there in hidden space”. Great – at least we know of a tested way of working with all 3. Thanks Bob!

Tags: accessibility, css, webstandards, xhtml

skip navigation solutions

I’ve just been reading on The Web Standards Project about the fact that ‘Skip Navigation’ links hidden with the CSS property display:none are invisible to screenreaders. This hadn’t occurred to me, even though I knew it was a problem with Fahner Image Replacement, which uses the same property.

Tags: accessibility, css, webstandards, xhtml

vertical & horizontal centering 2

I’ve been busy improving the way this site looks in smaller screen resolutions and windows. The technique I was using achieves vertical and horizontal centering by using absolute positioning and negative margins. If the window was too small for the content, it cut it off without giving you the option of scrolling to see it all.

So instead of using absolute positioning to center horizontally, I’ve now used the auto margin method. This is the best way, as it stops trying to centre the content when the window is too small. Originally when I’d tested this, it was still cutting of the the left side in Mozilla/Camino/Firebird, so I’d left it out as an option. I eventually discovered that all it needs is a ‘min-width’ value adding to the containing