I failed.

So this is where I recant multiple excuses to explain my failure. While I got off to a good start with some posts that generated a fair number of comments everything seems to be happening at once and the amount of ‘free’ time I can devote to writing has all but vanished into thin air for a short while. As well as some new projects coming my way in my ‘day job’ which I’ve been working flat-out on for a couple of weeks I’ve also started to dip my toe back into the freelance waters and have been working on a couple of small projects on an evening as well as off bits of wedding planning here and there and the odd job interview to mix things up a bit leaving very little time to blog. Plus (and I know @garyvee might disagree) there’s 24, Lost and a whole host of other fine television programming which demand my attention.

I do plan on, and want to write regularly but once a week just doesn’t seem sustainable for a whole year, life and work will invariably get in the way. I’d rather take the time to write posts than crack out half-assed ones every week. So I’m handing in my #p52 membership card and commemorative plate and will be writing when I can from now on.

Selling concepts

I endured a misspent youth in retail sales and one of the things I’m good at is finding the best way to sell things to clients, even if it’s a concept like progressive enhancement rather than a physical product, the concept can be ‘sold’ in a way that the client understands and, more importantly, accepts.

Let’s start with the definition from Wikipedia:

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic mark-up, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.
Wikipedia

While this is a clear and concise definition it does assume a certain level of knowledge and so isn’t the most ideal method to explain the concept to clients.

I tend to use analogies to explain a lot of things to people, taking something that may be alien to them, such as the differing capabilities of web browsers, and use something they may be familiar with to explain the point. My favourite analogy uses games consoles as a replacement for web browsers.

my favourite analogy

So let’s take a popular sports game, Say ‘Tiger Woods Golf’, this game is available on just about every popular games console on the market such as the Nintendo Wii, Xbox 360 and Playstation 3 as well as handheld consoles such as the Nintendo DS, does the game look the same on each console? Absolutely not! It’s physically impossible and there’s a clear and defined difference with games consoles, the ‘high-end’ consoles like the 360 and PS3 cost the most, and undoubtedly give the best visual representation of the game, with better textures, realistic faces, perfect trees and water effects but the Nintendo Wii, having less power will have blockier graphics, jagged edges and rougher details like trees and water. The games don’t look exactly the same, but the most important thing is that — despite these obvious visual differences — it doesn’t stop you playing a round of golf.

Image showing the difference between the game on the Wii (left) and the 360 (right)

Every client I’ve ever explained this to has understood the analogy really well. Nearly all own, or have owned games consoles or have children with them and so can understand that a £300 console might give a better overall experience than a £150 console, even if the game costs the same. The game is designed to take advantage of the increased power available in high end machines, and cut back on certain things on low end machines to make sure that you can still do the core task in the game. Everyone will remember owning an older system when they were younger and wouldn’t expect their Atari, NES or Master System to be able to cope with the latest video games on the market, but they could still get a game that would let them play a round of golf. Even if the balls are square.

the ‘convincers’

There’s a couple of conscious decisions here which help to ‘sell’ the analogy, Firstly: games such as Tiger Woods Golf, Fifa Football or Formula 1 are extremely widespread and mainstream, you can be sure that even if your audience isn’t familiar with a specific game, they know the sport. You can tailor the analogy on-the-fly with the client also, if you know they’re a football fan, switch to Fifa Football as your reference.

Secondly: I use a sports game as they’re the most likely to be ported across all major consoles and contain familiar elements which stay consistent regardless of the platform, such as golf courses, race tracks or sports stadiums. It’s the graphical detail that is the major difference and this is what we’re using to compare.

Thirdly: sports games attract huge investment and sponsorship and sell and make millions. This helps to sell the fact that even EA Sports, with their millions of dollars can make a game look the same across every console.

what about you?

Do you have a favourite analogy? what do you use to explain certain things to clients? It doesn’t have to be progressive enhancement, hit up the comment box below and let me know!

if..endif syntax

We’ll start with a simple example of a ‘regular’ statement which includes a foreach and an if statement which is extremely common among PHP scripts.

Now, just for funzies, let’s make this a tiny bit more complex and mix in some HTML markup in there for good measure, just like you’d see in, say, a WordPress template where we’re jumping back and forth between HTML and PHP mode.

See the closing braces on lines 9 & 10? With a relatively small example like this you can scan back through the code to see wether they close the if or the elseif. Now imagine a much larger statement, the only way to find out what the closing brace actually closes is to either pay attention to the tab levels (providing the tab levels have been maintained properly), or to read back through the whole statement and match them up. There is an alternate syntax which makes life a little easier.

Alternate syntax

By using the alternate if..elseif syntax we can replace those closing braces with something a little more useful.

This alternate syntax is expecially useful when mixing PHP and HTML and works for if/while/for control structures.

Ternary operator

For simple evaluations you can use the ternary operator which is a slimline version of an if/else statement, for example, the following statement which pluralises a string based on an integer variable.

Alternate syntax

Using the ternary operator this can be condensed to a single line:

Have a try!

By learning and adopting these alternate syntaxes you will ensure that your code remains readable and maintainable, especially if you’re writing code to be used by other people. Give them a try!

Why redesign?

I first registered the coffeepowered.co.uk domain in 2007 and over time my use of the site has changed. In 2007 it served as a freelance identity with a basic online portfolio, then in 2008/2009 I scaled back the freelance angle of the site and used it as a landing page which linked off to my various and disparate identies around the web. While I still like that approach I felt that I needed to build the site back up to be my main online identity and as well as injecting some life into my previously feeble attempts at blogging. I will also be working on a new portfolio in the near future to highlight some of the projects I’ve been involved with recently (which can be currently seen on my CV).

Sketching concepts

Before any photoshop layers were created or lines of code were written I sharpened my pencil and went to work in my Stuff and Nonsense Moleskine, I started with some basic wireframe sketches which roughly blocked out areas of content for the homepage and a couple of inside pages.

I had a clear idea in my mind at this stage which involved using the same leather texture I had previously in the header of the site as I loved the embossed text and stitching, as you can probably tell at this point the design ended up taking a vastly different direction during my design process so I’ll probably keep the leather and stitching for another design in the future.

After the wireframes I started sketching some individual elements which I wanted to implement, one of those which persisted throughout the design was the ‘Macbook Mission’ thermometer graph. As I’m saving for a new Macbook I wanted to have a bit of fun with the situation and have an old-school fundraising thermometer like we used to always have on T.V. when I was a kid. Immediately the idea of working in the Apple logo into the thermometer came to me and a couple of pencil strokes later, I knew that I had to use it!

Designing in the browser

While I do the majority of my design these days in the browser, I did fire up Photoshop at this stage to throw together some visuals for the main page frame and to draw the Macbook Mission thermometer to see how it looked.

After coming to a layout which I was generally happy with, I moved into the browser as quickly as possible and started building the design concepts as a custom WordPress theme, styling and laying out the main blog elements according to the baseline and vertical grid that I’d worked out in Photoshop.

I wanted to experiment with font embedding on this project and during my daily browsing I’d spotted the wonderful Tandelle font which I wanted to implement. As this font was available on Typekit I was able to quickly and easily bring it into the design, initially within the blog comments section and loved the aesthetic immediately however Tandealle really didn’t work with the leather/elegant look I had previously been working with. I did initially play with Typekit to include this font but during the build I opted to take the opportunity to play with ‘proper’ @font-face embedding seeing as the font family was only $13.95 from myfonts.com

“the font reminded me of the numbers painted on the side of racing cars — to which I pay a minor homage in my blog comments bubble”

I sat for quite a while staring at Tandelle and having my mind swim with vintage race car imagery, the font reminded me of the numbers painted on the side of racing cars — which I pay a minor homage in my blog comments bubble — and this was the major turning point in the design. After spending a while flicking through vintage racing car photography I took away a couple of simple visual cues which I wanted to focus on.

• use of uppercase, large fonts
• faded, predominantely one-colour-on-white colour pallette
• horizontal striping

I kept the layout I’d wireframed initially and started to tweak the look and feel based around the new direction, redesigning the header section based on the typography and style I’d been researching and ended up very happy with the result, I brought in a paper texture to give the background some depth and to extend the muted colour theme around the site itself and set about re-theming some of the other elements.

I’d never been happy with the original ‘ribbon’ type navigation but in keeping with the very vague ‘vintage race car’ aesthetic I worked in a flag type motif which seemed to work quite well. I tried to keep the elments of my inspiration quite abstract even though in my own mind I had quite a strong source of inspiration, I didn’t want to over-do the theme.

Overall I felt that by doing the vast majority of my design work on paper and in the browser — avoiding Photoshop where possible — enabled me to very quickly change design direction and experiment with a completely different design aesthetic quickly and easily. I’ll definately be relying on my sketchbook more as a major tool when designing new sites as it seemed to bring back a skill I’d forgotten I have. During my academic life I had an interest in automotive engineering and was involved in building an electric racing car and petrol powered go-kart from scratch. This involved a significant amount of technical drawing which I quite enjoyed and I felt come back naturally as I worked with my mechanical pencil, pigment liners and french curves. I might have to try and find my old technical drawing portfolio to use it in a future design, I wonder if exploded diagrams of axles and gear assemblies might be good inspiration.

“Overall, I felt that by doing the vast majority of my design work on paper and in the browser — avoiding Photoshop where possible — enabled me to change design direction very fast and experiment with a completely different design aesthetic quickly and easily.”

Degrading gracefully

One of the issues with using the Tandelle font arose in situations where the browser didn’t support @font-face. I’m using Tandelle for headings and navigation items and based on my 18px typographic baseline, the elements using Tandelle are set to 4em. For browsers not supporting @font-face the font stack falls back to Helvetica Neue and eventually Arial. This is fine for the x-height of all the fonts but far to large for the character width as Tandelle is a far narrower font than either Helvetica or Arial.

I used the modernizr script to allow me to test if the browser was capable of supporting @font-face, if so then the headings were set to 4em, if not then they were set to a more sensible 2em. There were also other minor positioning rules which differed for each situation so modernizr allowed me to test the capabilities of the browser and deliver a slightly tweaked design to suit.

What’s next?

There’s still lots to do on the site such as the portfolio and contact section, and I’ve had a couple of ideas on how to develop the footer a bit further, all in all I’m extremely happy with it and I hope I’ll be sticking with this design for a while. What do you think? Hit up the comment box below! If you’d like to see more of the sketches that I did during this design you can take a look at the set on Flickr and if you take pity on me, you could dontate to my Macbook Mission! (details at the top of this page)

I sometimes struggle with the common problem of finding time to devote to pet projects, making sure I don’t neglect my day-job or my fiancée and while some people may advocate working until the early hours of the morning, it’s not an option for everyone (and I like my sleep), but as Elliot said recently: “A pet project is for life, not just for Christmas

So, for my second #p52 blog, I thought I’d write a little about the pet projects I currently have on the go and list some of the immediate goals for each which I hope to achieve in the next few weeks. I decided to cut some straggling projects loose and concentrate on two, for now.

coffeepowered.co.uk

I’m in the middle of a complete redesign of my personal site — including this blog — in an effort to consolidate some of the contrasting elements I have here & there. The new site will have a portfolio section which features some of my work in a more detailed way than on my CV.

Goals for Jan/Feb

• Complete and release the new design
• Continue with Project52

homeofmuppets.com

This is my long-term pet project. Created in 2001 this site revolves around a small group of friends from various parts of the world and still chugs along despite the rise of social networking sites over the past few years, albeit in a stripped-down form. Last year I started a rebuild of the codebase in the CakePHP framework, and it’s still missing some core functionality.

Goals for Jan/Feb

• Implement OAuth based user login/registration
• Finish the design rollout

What about you?

Are you nurturing any pet projects? What techniques do you use to make sure you’re devoting enough time to them and not neglecting them? Hit the comment box below and let me know!

During the back end of last year I started to experiment with one of the more boring aspects of CSS, but one of the most rewarding in the long-term: How I actually write, organise and maintain my CSS files. These are relatively minor tweaks, but I thought I’d share them in case anyone finds them useful.

I’d just like to note that these are my personal preferences, you may disagree entirely with the way I do things and that’s fine, feel free to drop a comment below if you’d like!

Single vs. Multi-line

So lets get this out of the way, I hate single line CSS rules, they’re a pain-in-the-ass to navigate and can cause problems with some source control tools which may only tell you which line has changed and not which property has changed specifically or when running your code through the validator and getting errors which refer to specific line numbers as well as times when you might not have syntax highlighting to help you quickly visually identify properties and values (such as viewing CSS in Firebug).

I’ve never written my CSS rules as single-line and I doubt I’ll ever start.

Ordering of declarations

One of my most common bugbears is with the ordering of declarations, a lot of the CSS files I come across in my ‘day job’ are simply not ordered in any meaningful way, some have a semblance of ordering based on the personal preferences of the designer and may have width & height rules together, floats and positions together for example, this always differs from designer to designer.

The best way to order declarations is alphabetically, it makes it far easier to scan through and visually locate a specific declaration, especially in large rules. Also, for teams of multiple designers it’s far easier to add declarations to an existing rule as they simply slot in alphabetically.

Curly braces

This might be one of those decisions where people think “Does that *really* matter?”, but I’ve started to place my closing brace on the same line as the last declaration. The reason behind this is to improve the visual distinction between rules which helps when scanning quickly through a large CSS document.

Previously, I’d place the closing brace on it’s own line, like this:

Now that the brace follows the last declaration it improves the spacing between rules, or course I could simply add another line after each rule, but that simply adds to the filesize and needlessly pads out the document. This method also places all of the selectors on their own tab level which helps when scanning through to locate a selector.

Closing semi-colon

The closing semi-colon on the last declaration of a CSS rule is optional, while some people will no-doubt argue that dropping this will lead to smaller filesizes I’d always argue that long-term maintainability is more important, especially on larger projects with multiple developers or for projects which are handed to clients to maintain themselves.

By keeping the closing semi-colon in place anyone can quickly dive into the file and add rules without needing to worry about where the semi-colons are.

Further reading

I’ve only skimmed the surface of CSS coding standards to highlight some of the ways I like to do things, If you’re interested in making your CSS more readable, and especially more maintainable then I’d highly recommend you read the PDF version of this BarCamp presentation by Natalie Downe on “CSS Systems for writing maintainable CSS” which is a must-read and chock-full of excellent advice.

What do you do?

Do you have any personal preferences when it comes to writing your CSS? Feel free to hit the comment box below and let me know!