Today Smashing Magazine published a great article by Thomas Giannattasio, “In Defense of Photoshop“. He raises the point that:

Photoshop can be used to create impeccable designs, but after hours of hard work, you end up with a static mock-up that is incapable of emulating the experience one gets when the design is converted to mark-up and viewed in the browser.

And this would be my main point if I were to articulate an argument on why web designers should be able to code. Simply put, if you can’t code and don’t understand HTML and CSS - you are not designing a website.

In the article linked above Giannattasio makes an excellent feature suggestion for Photoshop allowing users to ‘shop semantically closer to the DOM and CSS properties available. I don’t know why Adobe haven’t been innovating features like this for years. It would definitely aid those ‘web designers’ who can’t code. It would simplfy things for pros too but in truth a professional web designer should be able to:

• Keep a running mental visualisation of the DOM as the design evolves.
• Understand the limitations of HTML/CSS and browser quirks.
• Know exactly what mark-up and styling will be needed to create each element.
• Know exactly how raster images will be implemented.
• Know exactly how the page is going to flow and transform at different resolutions.

If you can’t do these things you are not designing a website. Don’t blame the tools. While the CSS idea in Photoshop could be helpful it isn’t necessary (or relevant to the software). You should already know what techniques to use to mimic CSS (hint: blending options, not filters).

There are many comments on Giannattasio’s article suggesting that ‘design’ should be an entirely different step to ‘development’. From the clients point of view this is true but from a production point of view it doesn’t really matter. If you know how to build a website you can design one freely in whatever software suits you.

Understand development and you can realise greater potential with design.

1. Instill confidence

The client is paying you because they can’t do the job themselves. They want to know that you can deliver. Help them understand your design process and relieve them of any concerns. I’ve wrote more about some of the techniques I use in strategy meetings in this post: Finding the right style. I’d be interesting in what you do, so leave a comment!

2. Focus on an end-user perspective

As designers we have grown up with an artistic mind. We look at the world differently and understand how people react to visual things. On top of that we have a design education. We know what works in different situations and for different types of people. The client knows better than anyone who their end-users are. Get these two areas of knowledge flowing in conversation and you have all the criteria you need for design critique and you’ll both be confident of the design direction.

3. Ask questions, then ask them again

Have you ever walked into a small DIY store and asked where the nails are? The owner will ask you “what type of nail are you after?”. When you stare blankly at him he’ll smile and ask “what do you plan to do with the nail?”. Notice how he changed the question to one you can answer? In doing so he gets the information he needs to help you.

These type of people have a wealth of experience in their trade. They also tend to be common folk like me! Down to earth and friendly. When they establish you haven’t got a clue what you’re doing they know how to take a different approach. If a client isn’t giving you feedback it’s because you aren’t asking the right questions. Never assume they’re happy or unhappy with a design if your first question falls on deaf ears.

Missing the targets

Designers are a different breed. Most of us are egotistical stuck-up artistes. See Clients from Hell for example – many of those snippets would fit better on a blog called “Designers from Hell”. I’d take a wild guess that 90% of these situations occur because the designer failed to aim for any of the targets above. What results is the client feeling lost with no confidence in the designer and process. The client has a responsibility for the project and feels they must take authoritative control. Frustration is served up to everyone involved and eventually shit design is delivered. The designer then bitches about the client.

See the problem here? It is very rarely (if ever) the clients fault a project ends in disappointment. As designers it is part of our job to understand and manage that client-designer relationship. Get it right from the start and this situation is avoided.

These are by no means the only targets you need to consider but they definitely get me on the right track. With ongoing experience they start to become second nature and you can think beyond them to other techniques. I’ve heard mountains of buffet and champaign works well too.

I’d love to hear how you approach the client-designer relationship! Leave a comment below.

I just love when massive websites make a big change. The best part is reading all the positive and negative comments, especially those people who chime in with their expert opinion. Have they crunched thousands of hours of analytic and UX testing data to make assertive comments on the new design? I doubt it. But people don’t like change and that can sometimes be a big enough reason to affect design direction.

In this case it really isn’t though. BBC know what they’re doing. Which makes comments like this all the more entertaining:

Hate the new look. Will start looking elsewhere for my news content.

Here’s some design consultancy provided for free:

Quick tip, it doesn’t have to look flash to be good. Plain and simple is always best.

Ha! “Quick tip,” is such a brilliant way to start. Can you get anymore condescending?

I am been a web designer for 16 years.. I know what I am talking about.

“I am been”? You don’t even know what you’re saying right now! I could go on but there are too many ridiculous comments to mention, read them all here.

Hopefully this illustrates the point of avoiding the dreaded design by committee. There are several suggestions of “should of had a poll”, a poll of who? Many people are resorting to the old “SOMEBODY THINK OF THE LICENSE FEES!”. Are the BBC suppose to poll all license fee payers every time they do anything at all?

Can you name a major website that has involved every single person clambering for their opinion to be heard? No you can’t, because those projects never get finished. They get run into the ground. Every ounce of logic and creativity gets squeezed out trying to please everyone.

This doesn’t mean the design process should be done behind closed doors. There are many ways to involved key decision makers and target audiences, and I’m willing to bet the BBC know more about this than most.

A few people out there have a little sense:

I have worked in newspapers for nearly 35 years. At EVERY design change, we were flooded with letters and phone calls from people who hated the new look. If we spoke to any at length, we always found, without exception, that what they hated was not the new look but change.

Quick update – here’s a cool link on the BBC News design history with screenshots dating back to 1999 – we’ve come a long way!

While studying design it’s easy to get trapped inside a small world. It takes time and realisation to understand and really know the industry you’re planning to work in. A good work placement is enlightening and the first year in a job gives you a perspective on the design community as a whole. Design conferences, talks and networking are all great, but let’s face it there’s not nearly enough time or money for enough of those things.

I guess what I value most is first hand opinion. The way I’ve learnt to connect to the design world is through that much loved phrase “social media”. Following personal and professional design blogs and tweeting designers is hugely beneficial to gaining design knowledge, inspiration, motivation, perspective and critique. In fact, I’d say it’s essential.

Why I blog

For those reasons I blog about design myself. I write my personal ideas here at dbushell.com and @dbushell, and I write about other peoples ideas at Design Heroes. All of these websites have transformed over the last year in the way I use them but the aim remains the same – to share, discuss, inform (hopefully) and promote.

Ego trip aside writing a design blog is a powerful tool in self-education. It engages your brain into thinking about design and encourages research. Writing about design you like forces you to open your eyes further than normal. Simply browsing showcases and portfolios isn’t enough. When you write about design you are forced to think about what makes it so special instead of just thinking “that’s pretty”.

I could go on but Take a Journey of Inspiration by Alex Charchar says it far more eloquently than I ever could.

Despite the social stigma from people who don’t “get it”, Twitter is an amazing way to communicate with fellow designers. From design news to the latest hot topics, to the upcoming events and everything in-between Twitter guarantees you’re up to speed. At the same time you’re making casual connections to designers around the world. It’s also a nice feeling when a senior creative with far more experience than yourself choses to follow you. It’s important to remember that Twitter isn’t your Facebook status; meaning people may actually read and care about what you’re posting (note to self).

From the feedback I get on this site and my other online ventures blogging continues to be a immensely rewarding experience. You could say it’s an extension to my profession as a designer.

I encourage you all to blog about design!

(and delete your Facebook account – Facebook is a truly evil company!)

And I don’t own a MacBook Pro or any laptop for that matter.

Despite the less than ideal morning I do try and spend half an hour getting up to speed with the design world. Google Reader is my aggregator of choice. The problem with RSS readers it that everything becomes so stale, so “Google” in my case. Design blogs have a habit of being rather attractive. For that reason any article that grabs my attention in the RSS feed gets opened properly before reading commences.

My favourite design related blog has to be Creative Review. The articles are informative and the subsequent user discussion is outstanding (for Internet standards). The CR blog never fails to provoke humour, controversy, and a touch of wit from the many commentators. If you normally blank out comments (see YouTube) this blog will return your faith in the English language.

Another blog I visit often is the BBC Internet Blog. It’s BBC website biased obviously (which happens to be a bloody good website and a very good investment of license fees). There are many parts of the BBC’s online world that are exceptional and their Internet blog is a great behind-the-scenes look.

Brand New needs no further praise. I drop everything I’m doing when this one updates. Hopefully I’m not sipping my tea at that exact time.

When I’m interested in product and packaging design I’ll see what’s new at Yanko Design and Packaging UQAM . As I’m a graphic/web designer by trade these two blogs will often induce the “I wish I could do that” type of design envy. For illustration, digital art and photography I check out the likes of Cowlor and Oh, Snap!

Perhaps the most peculiar blog residing in my RSS reader is Pencil Talk. I don’t know why because I rarely check it, but I feel I might miss out on something ground breaking one day if I ever remove it…

I carry around many of the other big name blogs which I’m sure everyone already knows about. The other 90% of my feed consists of personal blogs from other designers. I plan to do a bigger showcase of my favourites soon! After my RSS reader has had a good shake down I’ll briefly check the last 12 hours of my twitter feed. I’ll be sure to find a few gems linked there.

And that’s my design morning.

The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice.

I’ve been very excited to read this book not just because of the topic and author (both exciting in their own way), but also because of the connection to A List Apart, perhaps the website for web designers and developers.

For me the first two chapters were the most rewarding. “A Brief History of Markup” and “The Design of HTML5″ give a great overview of the HTML5 language. It’s clear that Jeremy Keith has invested a lot of time following web standards and has a detailed knowledge of them.

The following chapters dive into the audio/video tags, canvas, and the new form additions. If you’ve actively kept up to date with HTML5 there isn’t really much to learn here. It’s hard to recommend the book over free online resources like Dive Into HTML5 and the various excellent blog posts around (see A List Apart too). But saying that there is value in having such a reference at hand and I’d certainly pass it on to someone who has only worked in HTML 4.

At £17 (that’s including shipping) I’d have to say it’s a very hefty price. The book is somewhat light on content to be fair. While I strongly value being clear and concise I think HTML5 for Web Designers has plenty of room for topics like drag and drop and browser storage which are quickly glossed over. Overall it’s well written and could be very informative depending on your current level of HTML5 understanding. I guess I probably don’t fit into the audience for this book having worked with HTML5 over the last year, though it did help reinforce a few uncertainties.

The other reason I bought this book was the design by the much celebrated Jason Santa Maria. The typography is outstanding! The design provides a perfect format for more to come from A Book Apart. Hopefully they’ll do a few collections because the shipping is a real killer.

When we speak about “website design” our initial thoughts centre around the aesthetic style. In reality the secret to good website design is content layout on the individual pages, and the content structure of the whole website.

Delivering content correctly is paramount to the success of a website (and therefore success of its design), the actual aesthetics are of secondary importance.

Aesthetic Design

If we think about other areas of design like print advertisement – the balance shifts in favour of aesthetics. Ads need to catch the eye and stir up emotion with strong visuals. Aesthetic design is incredibly subjective. A style needs to be found that is most attractive to the target audience. The more we move away from a neutral design the more people we alienate, hence the importance of knowing the audience.

Layout and Structure Design

This part of the design process is less subjective and more influenced by human behaviour. In regards to typography for example there are many rules that are generally regarded as good practice, essentially making content more readable. In regards to website usability the rule book is more like a library. Everything from the wording of a headline to the placement of a “buy now” button has a dramatic affect on the audience.

This is why aesthetic design is always of secondary importance to a website. If we take a step back and look at a website like Amazon, it’s not particularly pretty, but it’s clear they’ve invested heavily in usability.

Evolution of the Web

The way in which we access websites has changed substantially in the last few years. With the arrival of smart phone touch-screens the rule book for website usability has to be rewritten.

And I’m not going to do that.

But I have been playing around with a cool CSS technique that allows for a more fluid device-dependant content structure. I am (of course) talking about CSS Media Queries. I’m still learning the ins and outs so I won’t ruin the Internet with another poorly written tutorial but I would like to show off what I’ve done with this blog.

So if you reach down to the bottom corner and drag the browser window to various widths you’ll notice a change in layout. The content flows from single to multiple columns and the twitter feed jumps underneath when there’s little room (this is the iPhone view too). I’ve only tested it on the iPhone 3GS so I don’t know how iPhone 4 with its super awesome high-res Retina display will look (but I’m sure it makes any website look good).

There are a couple of annoying things like the column-break-after property seemingly being ignored – resulting in abandoned heading tags at the bottom of a column if you’re unlucky. Images also have a wonderful experience, which is why I’m keeping the fixed-width template for older posts.

And if you’re using Internet Explorer, you’ll probably wonder what I’m talking about.

In the end I’m one step closer on my vague mission to make my website perfect in every situation (see previous post on Using SVG Logos). In regards to whether multiple content columns are actually a good thing for usability, I haven’t the foggiest! Let me know your “experience” in a comment and I’ll be sure to follow up with a report.

Quick update (7th July) to link to this post “On Problems” which presents an excellent philosophy on “responsive design” with some great links for further reading. The blog is another example of media query usage that predates my attempt by many moons!

So that is what I made. I saved the logo as an SVG file from Adobe Illustrator and embedded that instead of a raster image. The file is around 20kb at its smallest (see problem below) which I can handle because it looks super sweet on my iPhone 3GS when I zoom in. Just think how it’ll look on the iPhone 4′s Retina display! Maybe I’ll do some browser testing in the Apple store, I got kicked out for that last time…

A small problem with objects

I’ve embedding an external SVG file using the <object> tag with my original PNG image as a fallback (I hope this works in Internet Explorer! will test tomorrow). The problem with this technique is that I don’t think it’s possible to have a transparent background – it defaults to a white square. The simple solution I found was to embed a background image within the SVG file. It works perfectly but doubles the file size.

If anyone knows a better solution let me know!

The other issue I came across was keeping the link back to my home page. Even with a jQuery click function the object tag doesn’t want to behave. I’m happy to let that go on this website, but with a more traditional top-left logo I’m not so sure.

Browser compatibility

Someone correct me if I’m wrong but this technique seems pretty fail safe to me as it just falls back to the PNG if there’s no SVG support. And I’m well aware that this website requires a modern browser to actually render properly at all, that’s the beauty of being my own client!

And if you’re wondering why I spent my evening obsessed with vectorising my website, see this article by Aral Balkan: “How to make your web content look stunning on the iPhone 4’s new Retina display” I found via twitter.

From a buggy unpredictable add-on, to a mature superfast piece of kit, JavaScript is an integral component to any website. To prove this I’d present libraries like jQuery, Modernizr and Raphaël (to name a few of my favourites).

But the question of the day is: do you actually need a JavaScript library?

Libraries like jQuery are incredible tools but they can add significant weight to the page. They are so far abstracted from the core javascript that makes them it’s very easy to grind the processor to death with the simplest of tasks. Of course, the benefit of ease-of-use and fast implementation can out-weight the negatives, but learning jQuery is not the same as learning JavaScript.

I’ve seen and development myself many websites that have one single JavaScript feature. For such a site I’ve often chose to link in jQuery and then a plugin like Nivo Slider – an extra 7kb. I’ve always felt this approach was lazy. When I was presented with the same task yesterday I wrote my own custom photo rotating code taking up about 10 lines (and jQuery). I felt significantly happier after building the site, I don’t like excess!

There is an element of “reinventing the wheel” there, but when the wheel fits a tractor and I’m on a push bike I’m happy with that.

On another site I included the Modernizr library so that I could detect the HTML5 placeholder attribute and replicate it with jQuery if it didn’t exist in older browsers. When I came to build the new version of this site (dbushell.com) I wanted to do the same thing but felt guilty bloating it out with another JavaScript library. Instead of throwing Modernizr into the mix without a care I decided to dive inside and see how it actually worked. After a few minutes I reduced my code requirements to a few lines:

var f = document.createElement(‘input’);
var placeholder = !!(‘placeholder’ in f);
if (!placeholder) {
/* jQuery to replicate placeholder attribute */
}

Modernizr is an absolutely outstanding piece of JavaScript but it’s also a perfect example of one you’ll almost always never need in its entirety. By hacking around inside you can make huge improvements to the size and speed of your website and your own knowledge of JavaScript. The majority of Modernizr can be reduced down to tiny chunks for each feature (in fact version 2.0 looks like it will be a module based JS library).

So next time you need a library or plugin think twice. With a little know how you can achieve the same thing with significantly less code and no excess waste.

Ironically it was Paul Irish (who co-created Modernizr) that gave me the idea of looking deeper at JavaScript libraries from his excellent blog post and video 10 Things I Learned from the jQuery Source.

One way which we achieve [design communication] is before the strategy meeting we’ll spend time finding websites with a range of styles and themes. These could reflect a particular design aesthetic or include a specific element that may work well on our client’s website. Everyone finds it difficult to discuss design without any visual cues, even designers. This website slideshow has proven to work very well as a web design discussion point.

Read the rest of “Finding the right style” on the Base Creative blog.

Presenting various websites with different styles is a very common technique among design agencies. For the reasons stated in the article above (namely visualising communication) it’s incredibly useful, especially for clients. Obviously the final website we actually design will not be a copy of the ones we present but there are inevitably some ideas that can be drawn from them. Ultimately the presentation is there to give the client something visual to discuss from. It’s a way to qualify “design words” – when they say “corporate” do they mean what I see as corporate?

I’d be interested to know how other agencies go about discussing website design ideas with their clients. Leave a comment below!