CSS & XHTML

100% Fluid Layouts - More Effort Than They’re Worth

Posted By:
Matt
Posted On:
September 16th, 2008
Posted In:
Blog, CSS & XHTML
Comments:
1 Comment

One of my main goals while re-designing this website was to create a 100% fluid layout. 100% fluid layouts aren’t something you see very often and I wanted the experience of having created one. I also figured that, as with doing anything for the first time, I might learn something new, and I did. I learned that 100% fluid layouts are more effort than they are worth.

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.

This Website Has Been Re-Designed

Posted By:
Matt
Posted On:
September 6th, 2008
Posted In:
Blog, CSS & XHTML, Design
Comments:
4 Comments

After 3 months of pixel-pushing Idiot Banter has a new look.

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….

No Frills Accessible Flyer

Posted By:
Matt
Posted On:
July 18th, 2008
Posted In:
CSS & XHTML
Comments:
1 Comment

The other day I came across this “accessible flyer” on the No Frills website. Upon first glance it seems pretty good, it’s basically just plain text which is way more accessible than the usual scanned images they use for their regular online flyer. If you look behind the scenes it doesn’t look so accessible to me.

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.

An Event Apart Boston 2008 Live Blogs

Posted By:
Matt
Posted On:
June 25th, 2008
Posted In:
CSS & XHTML
Comments:
3 Comments

For the past 2 days I’ve been in Boston at the An Event Apart conference. I kept a live blog of all of the presentations on the controversial upstart Scribble Live.

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:

Stop Drop Downs… And Roll

Posted By:
Matt
Posted On:
June 9th, 2008
Posted In:
CSS & XHTML
Comments:
1 Comment

If any option in the main menu of your website drops down to reveal more options you’ve failed at usability 101 (according to me, and I’m all that matters.. according to me).

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!

Efficient Use Of Transparent PNGs

Posted By:
Matt
Posted On:
May 27th, 2008
Posted In:
CSS & XHTML
Comments:
1 Comment

You can do a lot with transparent PNGs but it’s not very often that I come across someone doing something useful with them. Sure you can make a scuba divers light get brighter as you scroll deeper (CSS Zen Garden) or make icons look sweet with a drop shadow on all types of different backgrounds but that’s basic, almost useless stuff compared to what MAC cosmetics is doing with transparent PNGs on their site.

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

New CTV Video Player

Posted By:
Matt
Posted On:
April 4th, 2008
Posted In:
CSS & XHTML
Comments:
1 Comment

The most recent roll out in the CTV beta broadband video player series is the CTV prime time broadband video player. You can watch 4 seasons of Degrassi: The Next Generation, 2 seasons of Whistler, or season 5 of Corner Gas (Mom & Dad), but in my personal opinion the best part of the player is the CSS… wow… breathtaking.

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?!

New Website: Devil Strip Rollers

Posted By:
Matt
Posted On:
March 18th, 2008
Posted In:
CSS & XHTML
Comments:
No Comments

The second of the two websites I’ve been working on as favours to friends has finally gone live. A devil strip is “The strip of concrete between the rails of street car tracks in urban centers.”, The Devil Strip Rollers are people who ride bikes in the city of Toronto. The website will be a central place for all cycling related info, pictures, videos and events.

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.

New Website: Love You To Death

Posted By:
Matt
Posted On:
March 10th, 2008
Posted In:
CSS & XHTML, Design
Comments:
3 Comments

I’ve been working evenings and weekends for the past couple of months making some websites as favours to friends. The first of those websites to officially go live is a website for the power pop band Love You To Death. Love You To Death needed a new site because they changed their name from The Pettit Project and I know them because I used to play drums in The Pettit Project.

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!

New Discovery Channel & TSN Video Players

Posted By:
Matt
Posted On:
February 26th, 2008
Posted In:
CSS & XHTML
Comments:
No Comments

Discovery Channel Video PlayerTSN Video Player

The roll out of the new broadband video players we’ve been working on continues… The beta version of the Discovery Channel Broadband Video Player has been live for a couple of weeks now and the beta version of the TSN Broadband Video Player launched last Thursday. TSN has the usual sports clips if you’re into that kind of stuff (Dad, check it out!). Discovery Channel has a few shows that I really like including Jetstream, Doctor*ology, and How It’s Made.

Wondering what I had to do with it? Check out my post about the Comedy Network Broadband Video Player. Use these players! Watch TV on demand for free. All of the players are still beta so leave some feedback on the CTV Developer Blog.

« Older Entries
Show Background