Idiot Banter

Because it’s business not people….

Posted By:

Matt

Posted On:

September 28th, 2008

Posted In:

Blog, Music, Nonsense

Comments:

No Comments, Start The Conversation

The lyrics to one of my favourite Hot Water Music songs seem very relevant to me right now. Everyone should step back and think about others before they act.

Hot Water Music - At The End Of A Gun

We can waste we can come and go
We can act like we don’t know about suffering and pain
We can live our lives in shame for never helping anyone we know, or don’t
But we need to recognize that we are dying if we live alone
Let’s send our energy out with what we know and unify today
Because our freedom sits at the end of a gun
We’re all here getting beat up and held back
We’re all here digging knives from our backs
We’ve all been betrayed
Because it’s business not people
It’s always take and it is never give and that’s not the way I want to live
Because that’s nothing but dying and we’re nothing if we sell ourselves
Close your eyes never hear never cry for living an empty life

Free Band iPhone Wallpaper

Posted By:

Matt

Posted On:

September 19th, 2008

Posted In:

Blog, Design

Comments:

One Response, Join The Conversation.

I was getting bored of my current iPhone wallpaper so I decided to make my own. I like music so I made a a few of my favourite album covers into wallpaper. I didn’t really do too much, I mostly just resized the covers. Use them if you like them. There you go, free iPhone wallpaper and free iPod Touch wallpaper.

To install them just visit this page with your iPhone or iPod Touch and hold your finger on the image you want. It will ask if you’d like to save the image. Open settings and change your wallpaper.

For some awesome iPhone wallpaper check out Adam Finley’s iPhone wallpaper.

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

Posted By:

Matt

Posted On:

September 16th, 2008

Posted In:

Blog, CSS & XHTML

Comments:

One Response, Join The Conversation.

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.

Check Out Those Backgrounds…

Posted By:

Matt

Posted On:

September 9th, 2008

Posted In:

Blog, Design

Comments:

3 Responses, Join The Conversation.

My new design should have launched with the ability to temporarily hide the content so you can see the backgrounds that I spend so much time crafting for your enjoyment (just kidding, I spend as little time as possible… always). I didn’t realize how needed this feature would be until I started adding the backgrounds and realized a bunch of them were useless when they were all covered by content (stupid, boring content). So I added a little button in the top right of the page, click it and the content becomes 90% transparent, click it again and the content comes back. Simple. Enjoy it.

This Website Has Been Re-Designed

Posted By:

Matt

Posted On:

September 6th, 2008

Posted In:

Blog, CSS & XHTML, Design

Comments:

4 Responses, Join The Conversation.

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

Sick Ship - Songwriting - July 31 2008

Posted By:

Matt

Posted On:

July 31st, 2008

Posted In:

Drumming, Music

Comments:

2 Responses, Join The Conversation.

We got together and did some more songwriting today. We talk more than we play and I’m too stupid to remember complicated parts these days so all we have to show is half a song but it has bass! Check it out, it’s the only time you’ll ever hear me play a straight up punk beat.

July 31 2008

The Original Sick Ship

Posted By:

Matt

Posted On:

July 23rd, 2008

Posted In:

Drumming, Music

Comments:

2 Responses, Join The Conversation.

When writing about the start of the Sick Ship songwriting project I forgot to mention that Steve and I had a very similar band about a year ago with Kristen of Wheels On The Bus. We wrote a bunch of songs at a real rehearsal space, no headphone jams, but we recorded the same way, in my apartment live off the floor into a mixer into one track in GarageBand.

Here are 3 complete songs, these ones even have bass!

As usual, Sick Ship wasn’t our real name, we didn’t have a name and that was the best we could come up with.

No Frills Accessible Flyer

Posted By:

Matt

Posted On:

July 18th, 2008

Posted In:

CSS & XHTML

Comments:

One Response, Join The Conversation.

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.

Creative Commons Desktop Background

Posted By:

Matt

Posted On:

July 18th, 2008

Posted In:

Design

Comments:

No Comments, Start The Conversation

A friend of mine is currently battling a giant media company that thinks it owns his company, it’s a mess. In sympathy I made this Creative Commons desktop wallpaper, I know, big help…

Here is it in 3 sizes:

• 1440 x 900 (My MacBook Pro)
• 1280 x 1024 (The size of my work monitors)
• 1024 x 768 (The old Standard)

Sick Ship - Song Writing - July 13 2008

Posted By:

Matt

Posted On:

July 14th, 2008

Posted In:

Drumming

Comments:

6 Responses, Join The Conversation.

I’ve started playing drums again with some old friends of mine. We all grew up playing in different bands in the Brampton area and now we’re old and just looking to have a good time playing whatever we feel like.

The band consists of me, Steve Fennell (Wheels On The Bus) and Pat Kelly (Ten Speed Hero). We play in my apartment, we call it a headphone jam. We run electronic drums, bass and guitar into a mixer and out to a headphone amp, it always ends up sounding good and it doesn’t make your ears ring like a real jam, but it also doesn’t rattle your soul like standing in front of a wall of amps. We’re not really called Sick Ship, we don’t have a name yet.

We do a lot of recording direct from the extra headphone output into my Macbook Pro using Garage Band. We write songs collectively so I thought I’d start recording that process and put it up for anyone who is interested. It’s rough as we work things out and unfortunately you can’t hear us talking because that’s an important part of it.

Here’s the first in this series.

Pat brought in a riff he’d come up with earlier that day and we just jammed on it. Near the end we Started working on a riff Steve and I had messed around with a few months ago. Have a listen, there might be something good there.

July 13 2008 - #1

July 13 2008 - #2