If..Else Log

…police are looking into it. Joke becomes reality as Southampton police investigate the theft of a pub urinal.

On an aside, I've reverted back to the old theme until I can properly find time to sit down and work on redesign. Unfortunately, my post-christmas R & R went on for a bit longer than I'd planned.

One of the characteristics of serious developers is the importance that they attach to their tools and working environment. When you're spending a significant amount of time each day developing, it's natural that you'll want that experience to be as comfortable as possible¹.

It's for this reason that it isn't surprising that we build up a large amount of brand loyalty to our favoured tools². The knowledge capital investment that goes into using these tools means that we're significantly more productive using them than without. To be more scientific, things just "feel right" when using our preferred tools³.

That said, being serious about our jobs, we're willing to explore and take a look at what else is out there and occasionally we uncover gems that allow us to put down our own polished treasures. One such gem is MacRabbit's CSS Edit, a new version of which was released earlier this month.

Enter CSS Edit

The idea of a "CSS editor" is a strange one; surely, a general text editor ala Textmate or Editplus would be enough. But to apply such blanket dismissals would be to say that a hammer is the only tool that you'll need. Far from being a limiting or marketing feature, by focusing on a specific application, CSSEdit turns into a must-have tool in a developer's toolkit.

Live previews

1. Edit
2. Save
3. Upload
4. Refresh
5. Rinse
6. Repeat

This particular workflow is all too familiar to web developers. Automatic FTP uploads (cf. Transmit) or working on local files can help mitigate the process by getting rid of task 3, but a fair amount of a developers day does seem to be taken up by mechanical processing.

Hence, CSSEdit's live preview is a wonderful boon. If you've used the live-editing feature of Chris Pederick's excellent web developer FF extension, you'll have some idea of the usefulness of the feature.

Make a small change to the colour of hyperlinks in your css file⁴; this is instantly reflected in the preview window. The preview window uses Webkit as it's underlying rendering engine so you're seeing how the page will look in Safari.

Even better is that you can use your css file as an override for any file/url. This is easy to overlook so I'll say it again. You can override or edit the css for any page without making changes to that given page's markup.

Want to edit your WP theme's css but don't want to make a local/temp copy? All you have to do is click the "Add URL" and "Style Sheets" buttons. You can even pull down a copy of the active CSS stylesheets for that url into your workspace and start working off that. You can see how your CSS looks across all your pages (home page, comments page, blog posts, etc) without writing out markup for each of those pages.

Note that this isn't WYSIWYG but WYSIWYW. You're still in control as you're editing your css file by hand but some of the unnecessary roadblocks are removed.

X-Ray

Even if you use semantic classnames, and logical markup, there are times where you want to check how a particular element is marked up. Instead of viewing the source, you can just click on the X-Ray button and then click on the element that you want to inspect.

Once again, this isn't groundbreakingly new (for example, the FF users with the Firebug extension will be used to this feature as will Xylescope users) but it's refreshing to see it built in. It's yet another testament to the benefit of a focused app.

Rules pane

By focusing purely on editing CSS, CSSEdit is able to add organisational enhancement aimed at making life easier. One simple but important example of one is the styles pane. This provides a convenient grouped index of your CSS rules.

Rather handily, the items representing each of these rules visually represent what the rules look like (e.g. colour, background, type) making it easy to look for and access a particular definition. In addition, you can use the search-box as a filter to make looking for that elusive class that much easier.

Milestones

Every developer will know the benefit of versioning. The ability to "rollback" to a given stable version is an important life-saver to anyone working with code. CSSEdit introduces milestones, which you can use to represent saved states.

It's rather like Photoshop's snapshot system by giving you piece of mind unobtrusively and without difficulty. Now you can proceed to experiment without fear of breaking or losing that working version⁵.

Closing off

Rather than go through all the features, I've just given a tour through some of the ones which I think are particularly handy. There's also your usual editor features such as code formatting and intellisense but what I like about the app is that it does one job, namely edit css, but does it extremely well. It's not perfect and there are some things that I miss (code folding is one) or have no need for (for example, the properties pane and css validation features are all but unused) but all in all, I love it.

The greatest praise that I have for it is that whilst I'd still use Textmate as my general purpose editor, CSS Edit is now my editor of choice when it comes to CSS. Now if only it would let me choose a dark background colour for the code pane…

On an aside

With the advent of "sponsored posts" that are cropping up all over the blogosphere, I will just point out that this post has no affiliation or connection with MacRabbit, CSSEdit or any other party. These are just the words of a happy customer; the fact that it seems so positive is because I like it. No hidden agenda here.

It's annoying and disappointing that I even have to consider writing such an anti-disclaimer; the most damaging aspect of these so-called paid reviews is that they add noise and doubt so as to harm legitimate reviews.

1. This, of course, isn't unique to developing but is common to any activity or job that you do frequently. Someone commuting daily or playing sports professionally has different demands from those who only do so sporadically or as part of their hobby. Comfort, reliability, familiarity are all concerns which you may be willing to sacrifice when you're only semi-serious but not when it's crucial to your working life. [back]
2. Which also helps to explain why "versus" threads/posts (cf. vi vs emacs, Mac vs PC, FF vs Safari etc…) are always cauldrons for fiery discussions. [back]
3. Flamebait notwithstanding, this is probably one of the significant factors behind the large fanbase that vi and emacs still command. [back]
4. By working of your css file and not a 'temporary css session' as found in the web developer extension, you remove the hackiness nature/temptation. [back]
5. This isn't an excuse however to not use a real source control system to manage your code. I personally recommend Subversion but anything that isn't the abomination that is MS Visual SourceSafe will do. [back]

Justin informed me earlier this week that Mephisto, the RoR blogging system which he and Rick have lovingly crafted, has just had a new release and is now using a Liquid powered Simpla as it's default theme.

I'm a bit late in posting this but great work guys.

Artistic Mafia are running a contest to design a halloween themed T-Shirt.

Their gallery also contains a lovely selection of canvas and poster prints with a big tilt towards clean designs. I quite like this design.

I've been meaning to find some time to work on this site and so when when Pink for October was announced, it sounded like an ideal opportunity. An excuse to redesign the site (not that I've ever really needed one) as well as spread the word about a good cause. Sign me up! However, as it always seems to be the case, time just trickles away and so when Matthew reminded me that October was only a weekend away, I found myself in a bit of a mess having not even started any of the development ¹.

To make matters worse, on that very weekend, I'd been co-opted to helping out with some house-moving². And so it was that I barely managed to squeeze in the launch of my redesign in time for the start of October³. Welcome to the 8th iteration of If..Else codenamed 'Dianthus'.

Spreading the word

It'll be remiss of me not to talk about what precipitated this redesign. This year, over a million people will be diagnosed with Breast Cancer. Despite initiatives such as screening programmes, Breast Cancer is still the most common form of Cancer affecting women. For the last two decades, National Breast Cancer Awareness Month has helped in building wider public awareness and so, it's my pleasure to be able to subvert this site for a good cause, even if it's only in a small way. In addition, I'll be donating all my adsense revenue + 100% for this month to Cancer Research UK.

Words on this redesign

Due to the beforementioned time constraints, this site redesign is far from what I would consider finished. Even ignoring the many design features that I had to drop to get this finished in time for the October launch, I haven't been able to give this a rigorous test to make sure that the design holds up across not just the various browser configurations⁴ but also across the various pages and site options. In particular, I have little more than a vague hope that the existing content holds up without too much damage and I'm disappointed that work on the archive and search pages had to be dropped due to a sheer lack of time. Apologies for any borkages.

The big point to note about this redesign is how far I've had to stretch the definition in order to class this as a pink redesign. My initial sketches and prototypes used pink in a far stronger manner. In fact, one of the designs that I was all but ready to go with was full-on-pink. The problem was balance.

I personally don't consider myself to be a great designer and that showed in trying to develop a design that fit in with the Pink theme whilst not detracting from the content. My main problem was that, whilst each of my initial designs looked good as a one-off feature, the design always seemed to overwhelm the content which it was intended to support. With more time, I would have probably have been able to bring it under control but in a bid to get things done, I took the easy way out and applied dashings of pink to a more stable design. It's no accident that this iteration bears a lot of similarity to it's predecessor; realign is once again the word of the month.

I'm not sure how successful this design is yet. I guess it's still a bit fresh for me to make an objective decision. However, despite the rush job, I'm reasonably pleased with how it turned out. Whether I'll keep this look post-October, or whether I revert back or even redesign again is still an open question but for now I'm happy I managed to go live with it. And with that done, I'm off to bed.

1. Though fortunately, I had sketched out what I'd planned to do beforehand and worked on a couple of the major assets such as the header. [back]
2. Which was not helped by the fact that I also ended spending a good 8 hours on the road. What is it with rain and traffic? [back]
3. Actually, I missed it by about half an hour but I'm ruling it in via use of a technicality as this site is hosted in the US:) [back]
4. I did give it a quick test across IE6, FF1.5, Safari, and Opera 9 [back]

Joshua Davis, pioneer and inspiration to many a designer, now has a blog. A nice surprise is that underneath the hood is a lovely looking theme based on Simpla. [via]

If Blog Design Solutions was a football team, then it'll probably be Real Madrid; in the same way Real Madrid have managed to sign some of the Galacticos of the footballing world, BDS has managed to bring together some of the big names in the web design blogger circuit.

The likes of Michael Heilemann, John Oxton, and Simon Collison each take us on a guided tour of the major blogging platforms currently in favour. The old favourite of MT and current star WP are covered alongside other blogging choices such as EE and TXP. Rutter even gives us a glimpse of what it's like to roll your own custom CMS solution. So with such names on the front cover, what would the book be like?

After a short introduction, the book walks us through setting up your machine as a local test environment. Blogging is all about communication and sharing, and thus, rightly belongs out in the open but having a local sandbox for testing is an invaluable aid to development and experimentation. That said, the advent of easy to use web server distributions like Xampp are probably a better fit for most people but the chapter is a welcome one nonetheless.

The Blogs, Designs and Solutions

The subsequent chapters are each handled by a single author¹ talking about their platform of choice. Whilst each author brings their own flavour and writing style to the mix, each chapter broadly follows the same format. After a short discussion on setting up the software, a brief introduction to the templating engine followed by the development of a blog design. Following that, these ingredients are brought together to integrate the design with the templating tags to produce a custom blog theme. By the end of each chapter, the reader would have picked up enough to be able to, if not create their own theme, then at least understand how one is made up.

But for a but…

As I mentioned before, if Blog Design Solutions was a football team, then it'd probably be Real Madrid. And like Real Madrid, the combined efforts of the group of talented individuals, sadly, don't add up to the cohesive success that you may expect.

Upon reading the book, there's the unshakable feeling that each chapter had been written independently without knowledge or reading of the companion chapters. There's a strong sense of deja vu as you read about how to mark up and style a page. I suspect that the reader would have been better served if a single design was used by all the authors. As well as preventing the curse of unwelcome familiarity from distracting the reader's attention, it would have provided a better standing point from which to gauge and compare the workings of the different systems.

In fact, for a multi-format book, the lack of any significant comparison between the packages are a surprising omission. It would have been helpful to have seen a chapter dedicated to a more in-depth discussion on the relative strengths and weaknesses of each of the contending solutions, especially since this was aimed at the blogging novice.

Perhaps, it's the format and constraints of the book which lets it down. By going for breadth in writing about 5 different approaches instead of focusing on one, the authors are unable to dig deep and illustrate the intricacies of each platform. A single chapter isn't really enough for the authors to get into stride and do each blog engine justice.

As a general overview and gentle introduction, the book has merits and if you're totally new to blogging, you'd probably find it informative. However, I can't help feeling disappointed, especially when you consider the depth and breadth of information that can be found on each of the author's blogs.

A quick 5 minute read in a book shop will probably be enough to tell you if this book is for you. However, if you already have your own blog up and running, I fancy that you probably won't find enough in here to satisfy you.

1. Apart from the WP chapter in which Michael and Chris both lend their expertise [back]

And so another CSS reboot comes to an end. This time around, there have been some real treats in store for design fans but with the sheer number of rebooters this year, you might have missed a few. So here are a selection of my favourite reboots of Spring 2006.

Red

Earth and fire, red is an under-utilised colour amongst web designers. So it's a pleasure to see that those who did choose red were also amongst my favourite entries.

Rob Goodlatte bats off with a wonderfully warm and worn entry; the palatte chosen work well with the style of the site. Kyle's firey entry roars with it's bold background and colour scheme. And Prabhath embraces a more earthy design; natural and personal, Prabhath was also one of the few to have gone with a fluid layout.

Other notable entries: codesign

Green

From one colour of nature to another, though green does appear to be more popular amongst developers. That said, this shouldn't be such as surprise; whilst red is bursting with emotion and boldness, green is altogether more calm and relaxed which, perhaps, makes it more appealing to designers.

Fortyeightdesigns is one such lovely entry; the balanced colour scheme work well with the classic textures and the slightly curvy layout works a treat. Snook has gone in the other direction with his use of green; more edgy than earthy, it has a matrixy, old-school programmers feel to it. And like that programmer favourite, vi, it's crammed with little secret commands that might escape you on your first encounter. Freshbranding makes the most of it's name with a design that has a fresh, clean feel. It's, perhaps, a common studio design but one that's been pulled off well.

Other notable entries: Zooiblog, BusinessLogs, FortyMedia, ThannyLe

Dark

As much as designers like to consider themselves creative and different, it's always funny to see common trends. Light text on dark backgrounds has always been one of those cyclical themes that pop in and out of existance and it appears it's now time for it to reappear. However, dark colours do look good and are relatively easy to pull off so which is why it's had a good turnout this year.

It's probably no surprise to see Bryan's entry feature well. His last design was immensely popular and having done this 21 times before, he's a bit of a veteren to this redesign game. It's also nice to see that he hasn't forgotten the food banners. Alex Graul's entry at m.ossy also caught my eye. A Lovely use of columns and contrast, it's an impressively minimalist design pulled off with class. David Longworth has stopped blogging but he hasn't stopped designing; the reboot for Orange Tape Studios was another one of those simple designs that has been executed well. Background, colour scheme, type and layout have all contributed to a strong design.

Other notable entries: Totalspore, BrokenKode, EchoFaith, Niggle

Light

And from the shadows, we step into light. White has always been an extremely popular choice; whilst grey on black does look cool, it can become a bit of a strain on the eye when you're reading for long periods and thus, it's good to see sites embracing a more content friendly design. Natalie's clearly gone for such with the readable type and generous content area; whilst she's perhaps gone a bit overboard on the homepage, the internal pages are lovely to read. In redesigning his blog, Jeff has clearly gone back to the grid. Both internally and on the main page, Jeff has masterly utilised columns so as to present information with clarity and cohesiveness and nary a hint of confusion. DesignSnack's redesign is reshuffling and tidying of the previous look and feel. It's now less of a gallery and more of a Digg for designs; however, whilst its exterior is aesthetically pleasing, it's lacking from a design and functional viewpoint. I'm not convinced it's a successful reboot but sadly, I'm also a sucker for visual sweetness something which this design is coated with.

Other notable entries: Jorge Quinteros, Yoram Blumenberg, Derek Punsalan, Matt Brett, Intellicode, Twisted Intellect, WebJillion.

Drew recently put out a list of what he considers to be the 5 most important questions that you have to ask yourself when planning the website. Whilst I agree with all his points, I think we can encapsulate them all in a single succint question:

Why are you creating this website?

The reason this one question covers all is because in the act of answering it, you naturally consider arrive at all the other major considerations.

So, why are you creating this website?

OK, let's try answering this one. If the aim of the site is to produce a online shop, then in the act of identifying that, you've also identified the other key points. An online shop is there to facilitate the selling of products to the consumer. If you're developing a blog, then your aim may be raise your online presence, communicate to customers or just get your views out to the public. A products library is there to provide information for potential buyers to compare and investigate their needs.

Hence, the act of answering that question also provides the answer to Drew's other questions:

Who is the site for?

For an online shop, the answer is the customers or more correctly, the type of people who would buy your products¹. The beauty of this question is that this provides the necessary information to drive your site design. It lets you know the sort of look you should be going for, the type of technical features you should be developing, how to approach the UI. A site designed to attract teenager customers is different from a site for retired homeowners which is different from gadget freaks.

What are visitors trying to achieve when they visit the site?

Are they looking to buy a specific product such as a particular book by an author ala Amazon? Are they looking for a fun tech gift for gadget enthusiast ala Firebox? Are they looking for the latest tech news ala Slashdot? Or maybe, they're looking for interesting content ala DaringFireball. Visual design and style all contribute to how easily the visitors can achieve their goals.

What do YOU want visitors to achieve when the visit the site?

Once again, this follows on from your answer to the big question. Now that you know what you want to get out of this site, you can design it so as to facilitate that. You can build in cross-sell and recommendation areas; maybe point readers to other interesting content. Highlight certain products perhaps. You need to know what you want before you can do it.

How frequently do you expect people to use the site?

True usage patterns can only be identified with analysis but you can make good guesses. If you're aiming to create a blog, you'd probably want regular returning visitors. If you want visitors looking for specific products then make sure individual pages are SE friendly and easily accessible. If you want regular visitors browsing for items that suit their needs, consider the impact of a tailored page. And, of course, if you're building a shop, holidays are always good time for visitors; take advantage of that with customised, and appropriately themed designs.

How will you measure the success of the site?

Unique visitors, returning visitors, high spending visitors, loyal visitors? Knowing what you're after allows you to design for that goal. You need to know this from the start as you'll be building for this. Without an objective, you don't know what direction to go. Without something to measure for, you don't know if you're going the right way.

So I guess to answer Drew, my five most important considerations are really 5 facets of one. Why are you creating this website?

1. Which, of course, you can answer without a moment's thought if you have a business plan. [back]

Having supported the last CSS reboot, I thought that it was time for me to join in and reboot this site as well. So, with not long to go, I decided to put on my designer boots, knuckle down, and work on the next iteration of ifelse.co.uk. Despite interruptions such as dealing with a kitchen renovation and FA cup football, I finished ahead of schedule. As such, instead of teasing you all with reboot previews, ¹ I've decided just to go live with the whole gig.

Redesigned? Realigned? Rebooted.

Each of the last couple of redesigns for this site have brought major overhauls to the look and feel; not only did each of the design bring about structural changes (for example, moving from a 3/2 column switch design to what is now known as a fat bottom design) but they also brought in overhauls with the colour scheme and imagery.

And, to a certain extent, so does this iteration. Gone is the fat bottom and in comes a new flexible multi-column design. If you were a fan of columns and you own a wide monitor, then rejoice.

However, regular readers will notice little inklings of familiarity. Whilst the header has undergone change along with the colour scheme ², it's change as evolution; I hesitate to use the words brand or identity but there's enough touches to help make this feel like the If..Else that you've remember.

The new look hasn't totally annexed the old; it's more a case of the old design gently ushuring in a new successor.

Horses for courses

The more astute of you will have noticed a few developments with regards to columns. Firstly, if anyone is reading this post directly, take some time to go to the front page. Then head back to this post. For those of you using a resolution of 1280×1024, try resizing to 1024×768. Those of you with 1024×768, try dropping down to 800×600. Don't forget to scroll down to the bottom of the page.

Don't worry, I'll wait till you're ready.

Landing portal

OK, let's discuss the front page. This is the first place that many people will visit.

One of the things that I tried to do with the last couple of designs was to make the front page a real landing page. The home page shouldn't just be a chronological listing of your posts. It's also the place where visitors will arrive at for the first time. Let's try and hone the experience so that both the reader and ourselves benefit.

Let's highlight the lead/latest post so that we can draw attention to the important content. Let's segregate out our little asides, shorts and snippets so as to note dilute our main content. Give the readers a focused set of exit points to other content or parts of the site. By all means provide information but provide it in a way so as to not overwhelm the user.

Different layout for different situations

It's time to embrace wider screensizes. According to the everyone's favourite fresh smelling oracle, the lowest resolution on which this site is being viewed at is 800×600 by 4% of my readers³.

I don't want to provide an inferior experience to anyone, but by not taking advantage of improvements in screen real estate, that's what I'm doing. And so, with some help from our man in blue, this site is now sporting a resolution dependent layout. However, resolution dependent layout sounds so technical and sterile; I call it a tailored layout, a design that accomodates you. Besides, if Simon Collison gets away with it, who am I to argue?

There are 3 layout types; one for people with 1280×1024+, one for people on 1024×768 and one for those on 800×600⁴

Quick search

Searching was neglected in the previous design; in fact, I didn't even show the search bar anywhere else apart from the front page. That said, I do find myself searching back for old posts (mainly my shorts which serve as my personal del.icio.us) and seeing as you can't develop a website without a mention of everyone's favourite kitchen cleaner, I decided to spend a bit of time plonking down a fancier search bar.

Different layout for different situations part deux

I've talked about two layout scenarios so far. There's the front page and as well as the resolution dependent layout. What we can look at next is the internal page layouts i.e. for a given blog post. Quick question: if you're viewing a blog post, what are looking for? The answer is content. So if that's what the reader is after, let's make it comfortable for them to read.

The general layout and colour scheme already gives the content an advantage but by increasing both the content area and the type size, it feels just that much more nicer for lack of a better word. Besides, this gives me an opportunity to use larger images which is always good, right?

Your thoughts

If you've made it this far, you must either have superhuman willpower or a severe bout of insomnia. Well now it's your turn. Any feedback⁵? Besides, this is a good opportunity for the lurkers amongst you to come out of hiding and post a comment:)

1. Yes Bryan, I'm looking at you:) [back]
2. The last theme was dubbed Black Gold and though neither are dominant colours any more (in particular, the infamous gold colour has mellowed out and black has taken a back row seat to the other colours), they're still around albeit if only in more of a background role. [back]
3. Personally, I've standardised on 1280×1024 but in the last month, there were over 3 times as many readers that ran their machines with even larger resolutions than those that were still on 800×600. [back]
4. There's even a pseudo-big-footer of sorts. [back]
5. That said, can I ask kindly that browser-specific issues/bugs are emailed to me rather than being added as a comment? Cheers. [back]