Good luck!

100% Fluid Layout?

There are fixed width layouts (everything specified in pixels), and there are elastic layouts (most things specified in pixels but one main fluid column), but I’m talking about a 100% fluid layout. All widths, margins and padding specified in percentages and all text sizes specified in em. The entire site grows and shrinks with the browser and when the text size is increased and decreased everything flows to accommodate. When calculating percentages I left as many decimal places as possible in the style sheet so that the browser could interpret it to the best of it’s ability. It’s 100% fluid and it’s beautiful, until you start using it.

Paragraphs And Images

The biggest problem with fluid layouts is that they’re fluid, when the browser is wide the site is wide and when the browser is squished the site is squished, obviously. But what happens when the browser is so wide an entire paragraph fits on one line? Suddenly your site is a little less usable than it used to be. Maybe width isn’t something that should be left up to the end user.

When my new design was done I started adding my portfolio which includes screen shots of some of the work I’ve done. The images are 700px wide and jpgs do not scale, so when the browser width drops below a certain amount of pixels the images start falling out of their containers. My only option was to add a min-width declaration to the entire site. The second I added min-width my site was no longer 100% fluid.

Fluid Layouts In A Professional Setting

I work for a media company as a Front-End Web Developer where I cut everything from full websites and micro sites to video players, email newsletters and everything in between. I have never even considered using anything but 100% fixed width layouts when cutting anything at work, it’s just not practical.

When I am asked to cut a Photoshop mock it is expected that I make it pixel for pixel exactly the same as the mock. I’ve never worked on a project that wasn’t short for time and when the clock is ticking it isn’t worth it to try to figure out “what happens when the user expands their browser window” or “what if the guy with the 30 inch monitor has his browser maximized?”. We go out of our way to make sure every site has a sweet scalable background image so the site doesn’t look broken in those situations but there are too many variables and too much hacking older browsers involved to make a 100% fluid layout a viable business option.

I Did Learn A Few Things

Despite all of my complaining I am still glad I got the chance to attempt a 100% fluid layout. The math involved to figure out the margins was the hardest math I’ve done in the past few years and it was a little exciting to see the entire site scale on a huge monitor at work. If the ability to scale images was easier than it currently is fluid layouts would be the norm but as it stands fixed width wins every time.

Margins In EMs?

I was under the impression that margins should be in percentages but doesn’t it make more sense for them to be in ems so they scale with the text? Someone please explain this to me.

I’m Not The First

A lot of people, all smarter than me, have already written about this subject. See what they have to say.

The old theme was excellent and I still really like it but I felt the need to do some of the more creative things I’ve had in mind that I don’t get to use while working for other people. The new design is all about experimenting and pushing the boundaries of CSS and XHTML. Don’t get me wrong, none of this is ground breaking, but it’s my playground where I can use some more advanced code and not have to worry about selling ads.

The old theme was created when I was a Web Designer so it was very graphic heavy. I am now a Front-End Developer so I’ve focused on code more than graphics.

Some Highlights

100% fluid layout

I was determined to finally create a 100% fluid layout and I did, but I don’t really see the point. It’s never practical when doing client work and as soon as you add graphics or even images to your posts you have to start adding fixed width or min-widths otherwise things get messy. It turned out to be more work than it was worth and it broke my heart to have to add a min-width when I started adding photos to posts.

Dynamic Background Images

At An Event Apart in Boston earlier this year Jason Santa Maria spoke about how design helps to reinforce the story. He explained that his site allows for “art direction on the fly” to bring the web experience closer to the rich visual experience of print. His presentation got me thinking and, since I’m not anywhere near as amazing as Jason, the best I could do was dynamic background images. I add the background parameters to a custom field and use JavaScript to extract those parameters and change the body background. Each post will eventually have it’s own custom background, here’s an example.

So Here It Is

Have a look around, there are still a few things I’m not 100% with (I struggle with type-setting) so like any other personal site, treat it as a work in progress. I’ve added my entire portfolio to WordPress (it was static HTML before) so there are a few kinks to be worked out there. I’m really excited to blog about snowboarding with high resolution snowboarding pictures as the background! I also plan on getting heavy into JavaScript this winter so that should lead to some cool (progressive) enhancements. I already have plans for some way to allow you to make the content semi-transparent to allow you to view the sweet background images.

Thanks for checking out my new theme, enjoy.

Also, let me know if you need any designs cut into perfect XHTML and CSS….

Tables? iFrames?

Here are a few reasons this accessible flyer is not as accessible as it could be:

1. The links to get to the store nearest you don’t have title attributes. This isn’t a huge deal since the words you need are there as the linked text anyway but the title attribute is still an accessibility recommendation.
2. The entire flyer is in an iFrame. There’s no real reason I can see to do this except to prevent loading the header and footer each time or to make it impossible to permalink to expired deals. I wouldn’t have such a problem with the iFrame if it had a heading but as it is it just contains a table.
3. Tables! The entire accessible flyer is laid out in tables. There’s no reason for tables, it’s not tabular data, there’s no layout, it’s just headings and descriptions. It looks more like a definition list to me. The table doesn’t even have a summary.

I think including an accessible flyer is a great idea but this is not the way to do it. For the extreme cases a screen reader (or search engine) is going to have a really hard time figuring out how to interpret that table if it can even get to it in the first place. Not to mention how much extra code was used to mark up that definition list as a table.

Accessible flyer – great idea, poor implementation.

The conference was great and I think there’s something for everyone in these live blogs. Take a look, I’ve marked my personal favourites with an asterisk:

• Understanding Web Design – Jeffrey Zeldman
• The Lessons of CSS Frameworks – Eric Meyer
• Good Design Ain’t Easy – Jason Santa Maria*
• Web Application Hierarchy – Luke Wroblewski
• Design To Scale – Doug Bowman
• When Style Is The Idea – Christopher Fahey
• The Scent of a Web Page: Five Types of Navigation Pages – Jared Spool*
• Debug / Reboot – Eric Meyer*
• Comps and Code: Couples’ Therapy – Ethan Marcotte
• Principles of Unobtrusive JavaScript – Peter-Paul Koch
• Standards in the Enterprise – Kimberly Blessing
• Designing the User Experience Curve – Andy Budd*
• Designing the Next Generation of Web Apps – Jeff Veen*

The internet exists so people can get information quickly, when you take that statement into consideration you might come to the conclusion that drop downs are a good idea, allow users to drill down right from the start. Not so fast, if you give people 20 options right away it’s gonna slow them down, a lot. Let’s use a band website as an example, when you show up looking for tour dates you don’t want to be met with a drop down with the options “upcoming tour dates, past tour dates, booking information, tour photos”, you just want tour dates. If you want past tour dates, that’s fine, have a sub menu containing the other sections inside the tour dates section.

Presenting every option available right from the start is never a good idea, make your main menu options very broad and just get the users inside your website. When you walk into a department store you want to go to a specific department and go from there, you don’t want 100 signs hanging from the ceiling saying “men’s underwear, hula hoops, cat food”, you’d have to read all 100 signs before acting rather than just getting into the department you want and going from there.

Don’t make people stand there at the front of the store reading signs for 5 minutes before buying underwear!

Kat was trying to send her friend an image of a colour of eye shadow, but every time she sent the image it was grey instead of the colour of the eye shadow. She asked me “WTF?”. I checked it out, they’re using a solid background colour with a transparent PNG over top. Amazing.

Instead of having to generate thousands of images and load them individually, they have one image with a bunch of background colour hex codes stored in a database. It’s genius and it probably saves them a bunch of money.

Check it out by clicking on the link below and then checking out any of the thumbnails. You can also click on the thumbnails for a bigger version of what’s going on. They have to use some simple JavaScript to force the PNG transparency in IE6 but it’s well worth it.

MAC Cosmetics

To be honest, I still can’t stop watching the Comedy Network’s video player. How can you go wrong with every single episode of South Park, Chappelle’s Show and Reno 911?!

The site is a 100% custom WordPress skin created by me and based on the Photoshop files supplied by Ryan, the site’s owner. There are a bunch of plugins at work for the events, the Twitter feed, the Flickr feed and the YouTube feed. Thanks to some last minute help from Andre the Flickr plugin was fixed while I was on my way to Vermont for a snowboard trip, thanks Andre.

I learned a lot about WordPress while working on this site and I’m happy with how it has turned out so far. I know Ryan has some big plans and I’m excited to see how this site will grow.

The new Love You To Death website is a custom WordPress theme (made by me) with 2 plugins, Gigpress for tour dates and the Flickr Photo Album plugin for photos. I did all of the HTML and CSS and I did a little bit of design (background images) based on the logo, I did not do the logo.

I’m pretty proud of how it has turned out so far. Looks like they need a new store now since they’re still using a static one I built years ago but that will have to wait until after we snowboard in Vermont next week.

Go see the new Love You To Death website!