My Opinion


Last November web design luminary Frank Chimero published a talk – turned – article about web design and user experience called “What Screens Want“. It’s a compelling and thought provoking piece on how we think of screens as design surfaces and how we need to break from the confines and rigid frames of traditional print design to reach the full potential of screen-targeted design and give screens what they want. If you work with screens and especially if you work under the broad umbrella called “web design” you’d be well served to read the article and use it as a starting point to reevaluate how you think of screens.

Sitting in my couch last night I felt compelled to take out my Moleskine and a pencil and sketch out what was directly in front of me. If you’re a regular follower of this site you may have noticed I’ve started hand illustrating my articles. This is a feeble effort on my part to rediscover the skill of drawing, something I like most others pretty much abandoned after secondary school. But the drawing you see above is is not nor was it ever meant to be an illustration for an article. It was more than anything the physical manifestation of a sudden realization I had about what screens actually want.

Screens want attention.

From my vantage point I had four live screens: A TV (out of frame), my old laptop (left), my smartphone (on top) and my new laptop (right). All on, all displaying different information, all screaming for my attention. Though this is not a normal scenario for me (I usually only have one laptop in front of me at a time) it made me realize my exposure to screens is bordering on permanence. When I wake up in the morning I check my phone for emails. When I eat breakfast I watch news on TV. When I work I stare at a screen. When I’m done work I read up on articles and interact with social connections through one of several screens. Then for some relaxation in the evening I watch TV or a movie, again on a screen.

The crazy thing is that it doesn’t end there: In my car there is a screen telling me if it’s currently using electric or gasoline power. Most bars and restaurants have screens showing some sort of sporting event. At the mall there are screens running ads. There are screens on the backs of every seat on most planes. The supermarket cashier has been replaced by a screen. I touch a screen to buy a ticket to use public transit, a screen tells me what classes are currently available at the gym, there is even a tiny screen inside the viewfinder of my camera.

The screens that surround us are attention vampires. When a screen is within your field of vision you can’t help but let your eyes drift towards it, even when what it displays is irrelevant or uninteresting to you. And once it has your attention it feeds off your focus, draining you. Their bold colors, quick movements, and hyper-realism trigger something in the primitive parts of our brains that make us pay attention.

As a web designer I am relying on this effect and I’ve learned to exploit it. I know how to make something appear on a screen in such a way that you just have to look at it. And I know that others are far better at it than I am. So good they can make you look at a screen and not notice what is happening around you in real life. So good they can make you believe in their reality and doubt your own experience. So good they can alter our perceptions of ourselves, of others, of our world.

When I was a kid my parents limited me to one hour of TV per day. “Watching too much TV makes you a fool” my mom would say. And she was right. TV does make you stupid unless you are very careful about what you watch and ask a lot of critical questions. But it’s not just the TV any more. All these other screens, there to give us information and enlighten us, have the same ability to make us dumb and disinterested and desensitized through information overload.

So maybe in addition to asking ¬†what screens want we should also ask “what do we want from screens”.


2008 Weblog Awards Finalist

Design is Philosophy is among the finalists in the Best Blog Design category of the 2008 Weblog Awards. It is an honour to be mentioned among great blogs like such as Verlee’s, Rin-Wendy and OurWorld 2.0 and I wish all the contestants the very best of luck.

Voting begins on Monday and is only open for 5 days so vote early and vote often! And while you’re at it, don’t forget to vote in the other categories as well.

Expression Design

Expression Design 2 Beta – HUGE Improvements

I’ve had a chance to play around with Expression Studio 2 Beta for about a week now and I can tell you there are some huge improvements in the new releases. Today I’m going to limit my scope to Expression Design 2 Beta. It’s only fair considering how harshly I criticized the first release of this program.

I have yet to experiment with the XAML part of this program so these observations are purely based on my experiences with Design 2 as a design program.

Pixel friendly

If you read my other posts on Design you’ll know that the first iteration of the program operated on a pixel-free basis meaning that it allowed you to export bizarre image sizes like 19.325 px and so on. Although this wasn’t a problem if you were designing vector graphics for vector applications, it was a huge pain if you were desiging for export to bitmaps. Well, those days are gone my friend. Design 2 not only works in pixels if you want it to, but it snaps to pixels as well so you avoid exporting white space.

Clean bitmaps

Another big issue I had with Design 1 was the horrendous quality of the bitmap exports from the program. When I first blogged about it, the Expression Design dev team actually contacted me directly because they couldn’t believe their own eyes. But sure enough, the program was mangling bitmaps to such a degree that they were pretty much useless. Well, once again the dev team listened and the new bitmap exports are crystal clear. I’ll post a new set of exports when I find the time but I can tell you right now that they are on par if not better than PhotoShop.

Expression Design 2 Beta - Effects outside the artboardEffects outside the artboard

One weird thing about Design v1 was that the applied effects didn’t function outside the artboard. I guess it makes sense in some ways but for an Illustrator guy like myself it was just damn weird. And it did occasionally lead to problems. In Design 2, the effects are no longer artboard-bound which means you can create elements with effects, store them off the artboard and still see what you’ve done to them without having to drag them back in. You can also make crop areas outside of the artboard and export these elements to bitmap, XAML or whatever you want.

Expression Design 2 Beta - Whole Document exportExpression Design 2 Beta - Selected object exportNew exports

Whereas before you had to tur off the layers you didn’t want to export, you now have several export options in the export window. First off you can export everything visual on the artboard like you could before. The second option is Export Selected which lets you only export the currently selected element on the artboard on a transparent background. The third option is Export Slices which lets you export a series of slices in one click. Simple improvements that save a lot of time.

Expression Design 2 Beta - Sub-layer controlSub-layer control

Coming from PhotoShop and Illustrator I found it incredibly annoying that you had no visibility and locking control on the sub-layers in Design. This has been fixed and you can now toggle visibility and lock on all sub layers independently. Again a sublte improvement that makes a world of difference.

So far the Design 2 experience has been a joyous one for me. I have yet to encounter any bugs and the program is more functional than the original. There are still things it can’t do but the inclusion of proper layered PSD importing makes these shortcomings less of an annoyance. I am currently desigining a new website using only Design 2 Beta and once it’s up and running I’ll give everyone a full run through of the experience.

For now I highly recommend getting the upgrade.

CSS Expression Web Tutorials

Designing a WordPress Blog Theme Using Expression Web

I’ve been working with Expression Web for about 6 months now and I’ve found that above all other things, what sets this program apart from the competition is it’s handling of CSS. More specifically how easy it is to not only write CSS from scratch but also to modify existing code for fantastic results. Case in point: The new look of this blog. If you’ve visited before you’ll notice that I recently upgraded it from the dull look of a standard WordPress blog to something altogether different. And what will (hopefully) surprise you is that once the design was conceived (which took some time) the actual coding only took a couple of hours! All this thanks to Expression Web and how it handles CSS code.


People often ask me how to make their WordPress blog look great. In the past I’ve always told them that it’s a lengthy process and you really need to know a lot of code to get to where you want to be. That’s just not the case any more. I am willing to go as far as saying that with some basic training and a rudimentary understanding of html, anyone can make significant and functional changes to their blog using Expression Web without ever knowing what CSS is and how it works (this technique will work on any blog or other website that uses CSS btw.)Rather than just blabbering on and on about how great this program is for designing and re-designing blogs (and no, I’m not on the Microsoft payroll even though I’d like to be – hint hint people!) I’m going to show you just how easy it is to make changes to your blog by tweaking the CSS code with Expression Web.

DISCLAIMER: Although altering CSS code in Expression Web is very easy, it doesn’t mean that the end result will be very attractive. For that you need an eye for design. So even though you follow my instructions to the letter, there is no guarantee that your blog will look any better. I’m just giving you the tools: It’s your job to bring the creativity. Not everyone is a designer. Harsh, but true.

Step 1: Set up a blog with editable CSS

There are two main ways to set up a blog: You can get one for free at, or any number of other places. Just make sure you are free to edit the CSS through the service. I know allows you to do this, I’m not sure about the others. Or you can host one yourself. As far as I know, the most popular blogging software out there is WordPress, but there are others that work just as well. The good thing about WordPress is that it’s 100% free, constantly improved and that there are thousands of great plug-ins and other goodies to make it more interesting. The advantage of hosting a blog yourself is that you have complete control over the content and that you have your own domain name rather than something like

Step 2: Design your blog visually

This is by far the most important and time consuming step. The only way to make your blog stand out visually is to make it look good. And the only way to make it look good is by having a great design concept. I can’t tell you how to do this; it’s like painting a picture or writing a poem – creative work defies explanation. What I usually do is I write down some words that describe what I want to convey in terms of emotion, “feel” and so on. Once I have a general idea I play around with colour combinations in Kuler and find something that fits. Then I look for inspiration and start sketching things out on paper. Finally I consolidate all my ideas into an actual image of what the final product should look like in a program like Expression Design. For this blog I used Adobe Illustrator, Adobe Photoshop and Expression Design to create the final graphical representation of the blog. If you want anything more than just simple boxes and colours, this step is vital.

Step 3: Find a theme that fits your vision

Blogs work on two planes: PHP on one side and CSS on the other. The PHP portion for the most part decides what content is displayed and the CSS side decides how this content is displayed. But the PHP portion also has an impact on how the content is displayed because it decides where different elements appear like if the sidebar should be on the left or the right, whether the menu is vertical or horizontal etc. If you intend to build your new blog from scratch and you don’t know PHP well, this can be a grueling process. Fortunately much of the work has already been done for you by others. (I have to tread lightly here because what I’m about to say might sound like blatant plagiarism.)

Rather than building your theme from scratch, try to find one that has the basic components you are looking for already laid out. In most cases one of the standard themes have everything you need and if not you are almost certain to find one that does. So rather than reinventing the wheel, you should build on the experience of others and focus on making things better. Just be warned: This is touchy territory. If you blatantly rip off someone else’s theme without giving them credit, you are in for a world of hurt. The line between borrowing and stealing code is very thin and you can easily step over without even knowing it. So to be safe it’s always a good idea to credit the creator of whatever basic theme you decide to build on.

Step 4: Understand the inner workings of your theme

div-boxes.jpgEvery theme is different. And if you want to reshape a theme to your vision you need to understand how it works first. In the past this process was a total nightmare, but with Expression Web it is incredibly simple:

  1. First off, if you haven’t already done so, set your blog up as a Site in Expression Web so you have access to all the files.
  2. Open your blog in your favourite web browser and display the source code. In FireFox you click Ctrl+U and a new code window opens.
  3. Copy the entire code and paste it in the code view of a new html file in Expression Web. Save the file in the root of your site as something. I like the name testBed.html but you can call it whatever you want.
  4. Find the CSS call in the html code and redirect it to the local file you will be altering. I usually set up a new theme folder with all the old theme files in them so that I can always revert back to the original CSS file if I mess things up really bad. It’s good insurance.

div-list.jpgNow you have complete access to your theme and it’s CSS and you are ready to understand exactly how it works. While in Design view you can now click on any element and see the complete list of divs and other elements that make this specific part of the blog look the way it does. You will also see all divs and other elements displayed as superimposed boxes showing how the content flows. That way you will immediately get a solid understanding not only of how the theme works but what you need to change to make it look the way you want.

Step 5: Start choppin’!

If you’ve decided to make a graphic-heavy blog, you need to “chop” your design into manageable pieces. To be more precise, you need to cut out all the elements you want to feature in your blog in such a way that they’ll fit inside the divs, tables or whatever other element you wish to display them on. Expression Design and it’s Crop Marks feature is excellent for this purpose. You can see how this is done in this video demo I posted last year. How exactly you chop your design is up to you – it all depends on the desired end result. I’ll post some examples in a separate article later.

Step 6: Re-styling the Style Sheet

drag-div.jpgThis is the fun part: Once you have your testbed set up and connected to a local CSS file, you can start messing around. There are several ways of doing this depending on what you want to achieve. If for instance you want to alter the width of your main content area, all you have to do is click on any object within that area, then find the div that controls the area you want to change in your top bar and finally resize it by moving the sides using your mouse. It couldn’t be easier.

manage-styles.jpgIf you don’t like the brute force approach you can fine tune the code using the Modify Style feature: First off, click on the element you want to change. The style that controls this element will automatically be highlighted in the Manage Styles tab. Right click on the style, select “Modify Style” and a window will pop up with all the different options for modifying the style. Now you have complete access to the style and you can change it in any way you want for immediate results.

Step 7: Watch your changes in real time

A great thing about this method is that as you change the CSS code, you can see the changes in real-time right inside Expression Web using the Design view. Any change made will immediately be visible and as a result you see right away if something isn’t exactly working out the way you planned. It also means that if you do things that are not allowed in CSS, you’ll see that it doesn’t work and you can find out what went wrong. If you want to you can also make changes directly in the style sheet and see the changes in real-time. As a result, your style coding process becomes much easier and more effective.

Step 8: Save your changes

When you work with style sheets in Expression Web, you are actually working in two documents simultaneously: When you make that initial change in the stylesheet link (step 4) you are actually opening the .css file for editing. And when you save your testbed, the program will ask you if you want to save the changes to the embedded file as well (that would be the style sheet).


That way you avoid forgetting to save your latest CSS alterations and the process is that much simpler.

Step 8: Upload, test and publish

Now all you have to do is upload the new CSS file and any related graphics, make whatever changes you want to the php code and your blog will have a new look.

Observations, tips and pitfalls

There are a couple of things you need to know about styling blogs. First off, all blogging software is different so the php code will vary greatly. If you are planning on making massive structural changes in the blog, you might want to take a very close look at the documentation. Secondly, blogs often work with separate pages. In WordPress you have three sets of views: the “index” view, the “Pages” view and the “single post” view. To fully restyle your blog you need to make changes to all these views. The easiest way to do this is to open each view in your browser, copy the source code into your testbed document and make changes on a view-by-view basis. That way you have all bases covered. Third, make backups! It’s easy to mess things up really bad if you are just experimenting, so when you have something you like, make a backup. That way you can always go back and fix whatever you broke. Fourth, Ctrl+Z only works in the document you are currently in. So if you make a CSS change in your testbed document and then hit Ctrl+Z or click “Undo”, the undo will only affect the testbed document and not the CSS document. To undo your latest blunder in the CSS document you have to have that one open. It’s easy to forget and can lead to some real hassles later on. Fifth, WordPress templates are full of errors to begin with. These normally consist of unclosed or excessive divs and will normally show up in Expression Web as yellow highlights. Take the time to fix these in the PHP code or you could get some really bizarre results in browsers you didn’t test. Finally, test in as many browsers as possible. CSS is notoriously complicated because all browsers handle it differently. But if you do things properly your blog will look the same in all environments. Unfortunately the only way of making sure is to test it in all browsers, even ones you don’t really use.

So there you have it. That is the rough outline of how I restyled this blog to make it look the way it does now. The same technique was used to restyle the Vancouver blog and several other blogs I’m currently working on. It’s fast, effective and functional. I am guessing that the Expression Web team is going to touch on the same techniques in their presentation at MIX08 later this week (but I could be wrong – there are probably better ways of doing this) and I am definitely going to be there to pick up some more tips and tricks.

I’ll be posting some code examples to give you an idea of exactly how this blog works later on. For now, design, experiment and have fun.