Rheal Poirier

Graphic, Web, Email and Variable Data Designer

Let’s get this party started!


The Hangover halloween costume with baby and a bottle of Jagermeister

No babies were harmed in the making of this photo.

That’s it! I’ve gone crazy, deleted my old site and started all over again with this blog. What prompted this? Well for one I hadn’t updated my site since 2006 (you know, when website design wasn’t about mobile design, responsive design and HTML5 goodness). Another motivator just so happens to be a little contest I’ve entered.

I’m sure you’re asking yourself “how would entering a contest make someone want to brave the blogasphere waters again?” Well it’s quite simple. I’ve entered into a competition at unmatched style CSSOff  to code a website. The Photoshop template is provided and it’s the competitors job to code the page. The template is designed by  Paravel which, from my little bit of research, are behind the Do Lectures (I subscribe to their newsletter). They have a pretty nice site and, when I have the time, I’ll be sure to look through more in depth.

The timeframe to create the 1 page site from CSSOff is a bit short to code and blog with my given free time (I think it’s a 14 day competition) but I will try. If I don’t submit my code on time I’ll still finish the site and continue to blog about it. I figure it’s a great way to push my skills, hopefully learn a few things, and share my knowledge with other web people.

Setting up the Work Space

I guess the first thing I need to explain are the tools I’ll be using for this project. For coding I’ll be using TextMate. It’s a great tool for coding as it colour codes everything, has text snippets and is pretty popular amongst designers. I’ve been using this for quite some time and I like it very much.

My next set of  tools are actually extensions for Firefox. I use these extensions to check my work as I go along. These extensions are also great for knowing where you went wrong or how a particular set of css rules are working to create a specific effect. They keep me sane while coding (and that’s not an easy task).

On to the extensions:

Firebug: This is a great web development tool that allows you to inspect html, css and javascript. Once installed understanding how a particular piece of css is effecting your code is as easy as right-clicking on the desired section in your web page and choosing ”Inspect Element” from the contextual menu.

Web Developer: This tool is absolutely fantastic to temporarily disable or enable different portions of your code. With a few clicks you can see what your site looks like with no css, no javascript and/or no images. It can do many other things so be sure to go through all the options.

Operator: Operator allows me to view all of my microformat data so I know that machines, screen readers and search engines can properly understand the content on the site. Microformats are how many aggregators can pull information from all over the web.

Page Speed and ySlow: I’ll be using these tools closer to the end of my project to see how fast my page loads and to see if I can tweak any inefficiencies.

This setup is what I use for pretty much every website I work on and it’s worked great for me so far. Hopefully someone out in interwebland will find this helpful. In my next blog I’ll actually start talking about the project and how I’ll be tackling it.

Leave a Reply

Required fields are marked *.