A great example is dominos.co.uk, not for the design or visual of the mobile site but for the usability, they know what their customer wants and they provide you the quickest route based on the device you are using. The mobile site gets straight to the point with a postcode entry form that will point you in the right direction. The desktop site shows you more information about their current offers and promotions, take a look:

Having recently prototyped a mobile site, I found there are a number of issues with designing sites for mobile phones simply based around the variety of devices, manufacturers and browsers available to consumers. You thought designing for a few desktop based browsers was difficult, try hundreds of different devices, running varied versions of the manufacturers software, it’s a tough job to get everything working and looking good.

The only approach is to use progressive enhancement, or graceful degradation, 2 impressive phrases which basically mean designing a site that adapts based on the device and browser it is being used on, it is really intelligent web design. The layout has to be fluid to enables a good fit on all screen sizes, links and buttons need to be big enough to be used on a touch screen, you have to build up layers of complexity in the design starting at the very basic. Most web designers have had some experience doing this, thanks to browsers like ie6, so we are equipped for the task and with a good team of developers at your disposal it is great fun to take an existing site and ‘mobilise’ it.

This main event is slightly mismatched as pointed out by the hundreds of commentators on the subject. The ultimate choice isn’t really between HTML5 and Flash, it’s more like CSS3 + Javascript versus Flash as HTML5 which ties it all together can’t achieve the same output as flash on it’s own. How can Flash be against HTML when you can’t present Flash to a browser without HTML in the first place? For those web users or newbies shouting ‘what the hell are you talking about’ let me try and break it down a bit.

What is HTML?
Ah HTML, where would we be without you? HTML is what all web pages are displayed to your web browser as. Where you see a big heading called ‘Thoughts on HTML5′ the html behind that is actually ‘Thoughts on HTML5′ surrounded by h2 tags that tell your browser what to do with it and is the reason it is larger than the other text on the page. The web was designed around HTML and browser software, HTML is the language your browser speaks so without it, it simply wouldn’t work. Add CSS and you get colours, fonts, backgrounds etc. Add to that a bit of Javascript and the page comes alive with movement, basic animations like a menu expanding or an image being zoomed in on. With CSS 3 and Javascript making leaps and bounds, that animation and interaction is slowly starting to rise to the level of Flash but without the power requirements or memory resource Flash often requires.

Who gives a damn about Flash anyway?
Flash can do more than CSS3 + Javascript, it chews up more memory and power but it can do more. Flash can give users an added level of interaction that isn’t really possible using the alternative, at the moment. To achieve the same level of interactivity possible with Flash, it would take an overly complex use of CSS and Javascript, something that would take an enormous amount of development time and cost, so it isn’t really viable at the moment. Flash doesn’t depend on anything to do what is does, Flash is self contained, you can be sure that it will behave the same wherever it is supported, that has always been one of the major pros for flash and one that is actually still true. Something coded in CSS and Javascript relies on the browser. You probably know that web sites don’t always look the same in all browsers, well the same applies to CSS and Javascript. The more complex these things get the more difficult it becomes to maintain control over the behaviour on different platforms and browsers, increasing development time and cost, again.

None of this really matters anyway…
Even if CSS and Javascript could match the interactivity of Flash, and have the same development time and cost, there is one major problem to all of this slightly wishful thinking, browser support. Browser support is the grey cloud that hovers over most web designers heads while they create wonderful, shiny web sites. A web designer creates a stunning web site, they flick back and forth between their design software and browser to make sure everything looks like it should, but they are only one person, using one browser (or a few), using one computer configuration. So what happens when Mr Smith, a 50 year old board member at an insurance company established in the 1800′s decides to use the same site on his, incredibly out of date computer which has been kept exactly the same for the past 10 years, with the same web browser, developed by a company that no longer exists, simply because he ‘doesn’t like change’? The site either completely fails or if the designer is skilled, drops all the interactive elements and looks half descent. Mr Smith is not alone, unfortunately he still makes up a large chunk of the market. Mix in the growing mobile web browser market and you are truly involved in an almost impossible task, getting everything to work the same on different devices, using different operating systems, with different web browsers. Flash has the upper hand here, because it will still work even on Mr Smith’s computer because it is self contained, it just works, a very ironic statement Apple coined for their computers, now being applied to their enemy, I hope uncle Steve isn’t reading.

Show me the money
The whole Apple v Adobe squabble is a bit more political and profit driven. Apple don’t want Flash on their devices, claiming it is too buggy and kills the battery, however as true as this may be, anyone with half a brain can see it is probably more likely a way to control where users spend their money. If Flash was to run on iPhone and iPad, users may get what they need from solutions provided as Flash, making the App Store a lot quieter.

It has been challenging though, for some reason some people just want to fill every little area of white space on a web page, I’ve never understood it, filling in gaps just for the sake of it. Maybe they think they will be missing an opportunity to sell or communicate something if they leave an area blank, if this is the case why not look at the bigger picture, why isn’t this being achieved in the first place? Number one reason for selling something more than anyone else? Price. Number one reason for communicating something better than anyone else, choice of designer, just kidding, or am I?

Lets look at the worlds most visited web page, Google.com, see any clutter, any “click here for this” and “Welcome to Google”? Nope, just the logo, search box and a few links. In fact Google recently took it upon themselves to simplify there homepage even more. Now if you go to Google.com not moving your mouse you will notice the various links don’t appear, move your mouse and voila, its a nice little touch and a great example of removing unnecessary things from a web page with the added bonus of a reveal if required.

The same can be said for HTML and CSS. The more I learn, the less I use, or at least the less I want to use. I always look for ways of being more efficient with my code, looking at how I can style pages using the html elements rather than creating classes or ID’s, getting rid of div’s and span’s, it’s all part of the challenge and it’s what can make designing and coding so satisfying. The minimalist approach seems to rise above the normal web design trends and that can only be a good thing, why else would it survive the continually evolving aesthetic that is the web? It’s design evolving, more and more designs are going simpler, more clients want minimal, straight to the point web sites that get the point across without wasting the users precious time.

The time people are spending reading web pages is decreasing, we don’t have enough time, we are hungry and want to consume information at a higher rate. Why waste time with irrelevant information, users are driven by purpose and the quicker we get them to their ‘purpose’ the more they appreciate our sites and brands. Even better if you can convince users of what their purpose is, and then get them to it, you have a winner and a business model. Design being minimal is linked to users becoming commodities, web sites and brands want to keep you on their site, they don’t want to annoy you with irrelevant information or irrelevant steps to get to that information and risk losing you to a competitor, but removing everything on your site isn’t the quick fix, it has to look good and be consistent with the brand you are trying to build, otherwise all the sites on the web would be text only and black and white, and none of us want that, especially me.

For me Argos haven’t really been that creative with the logo change. They seem to have taken their existing mark and made it even more generic, softened the edges and changed the swoosh into a smile, probably based on the success of other online retailers. By ‘other online retailers’ I mean the largest online retailer in the world, Amazon. But the Argos logo doesn’t really match up to the Amazon mark because the swoosh in the Amazon logo might not be a smile, it might be an arrow which is why it is a little bit clever, it makes you wonder, creating something memorable. The new Argos mark is probably an attempt to associate happiness and good feelings with the brand, people like smiling so they will buy more stuff, that would be the theory at least.

In contrast the new website is a good improvement, no great but good. Argos.co.uk has always really annoyed me, the design has always been very lacking especially for a business that was based on a catalogue, transferring that expertise or experience should of created a wonderful website but unfortunately it created a pale blue, saturated red monster. I always thought they should of focused on creating the catalogue as a website, creating something more readable with browsing being the key focus of the design. Instead it always felt like a mish mash of text links, an overgrown navigation menu, and just too many things to look at, all too close together.

The new argos.co.uk is a step in the right direction. The layout is improved, with focus points more clearly defined using borders. The use of simple silhouetted icons is also a welcomed addition that improves usability while adding a more professional touch. The layout of all the pages have less clutter leaving way for clearer presentation of each product. This is another good example where simply adding more white space has helped the page become more defined and flow better. The ecommerce designer tells me this will sell more products, no a smile in the logo, users like to see information and a clear visual of the product.

They have also sorted out their typography. The old site contained multiple fonts that weren’t consistent in how they were applied. Now headings are treated to a nice serif font and Arial is used for rest, not mind blowing but much improved. There has also been a slight change to the blue colour used, personally I would look at less saturated colours in general, but that is just me, plus these colours already have the association with the brand. Overall the site is a massive improvement on the old version. I would still love them to take a catalogue style approach to the site, be a bit more creative, that’s what people know about Argos, they have a huge laminated catalogue amongst other things.

I have always had this type of reaction to certain types of feedback, although these days I have learnt to control it and mask it with a look of interest and insight. If you don’t have this type of reaction to criticism from clients and colleagues then you might have a problem, although you will probably live longer. Designers can be a sensitive bunch, its part of being creative, but it’s not such a bad thing.

The more angry you get, the more invested you were, the more you put into it. You value your work just like it is a piece of art, because it is. That’s right, I am a web artist and my designs are hand crafted pieces that I put my heart and soul into. I invest my passion and emotion into it, I can’t help it anymore, it’s just become part of the process, I do it without even noticing it’s happening, because if I don’t, I won’t believe in the design I have created, and if I don’t believe in it, why should anyone else?

Maybe you think it is stupid to think of web design as art, but what is art? Is it framed pictures on display in famous galleries and museums around the world, because if it is, guess what will be on display a thousand years from now, sitting next to a Van Gogh or Monet, probably the first ever Google homepage, the Van Gogh’s of today are the web designers that have crafted designs that will never be forgotten and that’s what you should aim for with every design, and then explode when someone says ‘It’s good, but can you make the logo bigger?’.

Part of being a talented web designer means you have the ability to assess an aesthetic and judge whether or not the majority of the intended audience will find it visually appealing and whether or not it will have an impact on those users and influence them in some way. That is what successful web design is all about, not just looking good, but having the desired effect on the intended audience, whether it be focusing their attention or enticing them and creating curiosity. So there is definitely an element of natural talent involved because you have to judge if what you are creating looks good. This is the part of the formula that sets web designers apart, you either have it, or you don’t, it’s not something you can be shown or taught.

The other parts of the formula are more like ingredients that need to be prepared with passion and an extremely high attention to detail. A word of caution though, some ingredients don’t mix very well and it is too easy to fall into the trap of using one of the ingredients too much and creating a foul tasting design. By getting the right mix of these ingredients designers have been able to create some of the most stunning and successful web designs so far.

Typography – Choosing the right font or combination of fonts is essential to a successful web design. Once you have chosen you then have to consider how to use them, which one should be used for headings? Will you use images, Cufón, sIFR or CSS 3′s @font-face for none web safe fonts? Maybe you want to use a letterpress effect? How will you achieve this?

Iconography – The use of icons has been around since the first visual user interface was introduced in 1983 (Apple Lisa), they act as a visual anchor for users and are easier to quickly identify than a sentence or paragraph. Good icons add an extra level of detail to a web design and can really make your site look slick and professional.

Imagery – The use of images is a necessity for a good web design. When I say images I don’t just mean the use of images in general, I mean the use of images that illustrate. These could be product images on an ecommerce site, blog post images, or other forms of photography. The use of images has shaped the way we use the web making it more interesting and more interactive, engaging users and customers.

Layout – There are lots of different layouts available to web designers, some more creative than others, some more readable than others. When choosing a layout it is important to consider flow. How does the audience read through the page, how do their eyes flow through the page, this allows you to place important elements within the flow to catch the users eye to your advantage.

Illustration – You don’t have to be an expert illustrator to be a good web designer, but it helps. Using vector graphics to create the foundation of your design, creating consistent design elements with subtle gradients, shadows and textures, that appear throughout your design can really make a site stand out from the crowd. There are some sites getting a lot of attention for the level of detail in the illustrations being used in headers and footers, aspiring designers take note.

Finish – These are the details no one really notices but make all the difference. The best websites have subtle finishes all over the designs that most people probably don’t even notice. A good example of this is the minimal solid drop shadow used to make text stand out, now being achieved with CSS3, it’s one of those finishing details that unless you are a designer, you probably don’t even notice. Other examples of subtle lighting effects and borders within borders, all of which add to the quality of a design.

Minimalism – I am a minimalist in most things I do. The first thing I look at when asked to redesign something is what can be taken away? What isn’t necessary and plays no important role to a user? Whether it be content or part of the design, removing unnecessary elements is the best place to start, keep it simple and clean.

Colour – Colour choice and use is critical to a good design. Using varied shades or complimenting colours can achieve so much and yet it is very easy to get it wrong. Following on from the minimalist mantra, keeping it simple is key here. Look at the design and ask yourself if it works, experimentation is important, try different combinations and watch for what works. Particular favourites of mines right now are greys and purples.

Interaction – Ever get the feeling a button should move when you click on it? As a web designer, an obsessive one, nothing irritates me more than clicking on a button and having no feedback, no movement, why bother making it a button and not a link? Using interactive elements in your design allows you to connect with the user, try putting yourself in their shoes, what would they want to happen?

Here are some sites I have noticed that stand out for the way they have used some of these ingredients.

idsgn.org typography, imagery, minimalism

tutsplus.com iconography, typography, colour, finish

webdesignerdepot.com illustration, colour, finish

ilovetypography.com typography, minimalism, finish

apple.com typography, minimalism, finish, interaction

365daysofastronomy.org typography, finish, illustration, colour

abduzeedo.com imagery, layout, finish, interaction

atebits.com iconography, illustration, finish, interaction

But Ask.co.uk haven’t given up and while probably not looking to topple the top of the leader board, they are still in the game against the lower division teams, like Microsoft and Yahoo. They still have a chance to be the second best and by reintroducing Jeeves they are taking a step in the right direction. Jeeves made more of an impact than Ask ever gave themselves credit for, my dad still uses the term ‘Ask Jeeves’ when talking about some fact he wants to prove he is right about, like dads do, and I am sure he is not the only one. Considering they dropped the term 3 years ago it shows great longevity and memorability.

So why did they dismiss poor old Jeeves in the first place? I think it was an attempt to get serious and lose the restrictions an English butler places on your brand and service. Ask wanted to grow up and appeal to everyone as a serious search service, not just people that found Jeeves funny or charming, so Jeeves was sent packing back to the English countryside or wherever digital English butlers retire to. At the time an Ask executive said “the internet has moved on and consumers have moved on.. they don’t understand the relevance of him any more: it’s time to move the brand on too”.

Ask are saying they are bringing back Jeeves ‘due to popular demand’ and although I agree the brand works better as originally conceived it does is highlight the company’s confusion about its own identity. Nevertheless after years of ‘just asking’ Jeeves is back, and might have all the answers.

I like to think Jeeves tried different jobs while he was away, and the possibilities for hilarious TV adverts showing an unsatisfied Jeeves undertaking these Jobs before returning are truly endless, this would make a great TV campaign. Maybe he was kidnapped and held to ransom and using his skills to search with keywords his was able to escape, Jack Bauer style.

When asked to offer my opinion on WordPress it wasn’t difficult and I was more than happy to sing it’s praises. What’s not to like? It works amazingly well, sure it could be a little bit faster but that ethos applies to so many things in life. The biggest benefit of WordPress is that fact it is open source. This doesn’t just mean it’s free, which is something you should obviously appreciate, it ultimately means the true incentive behind all the hard work, love and sweat put into it’s development isn’t motivated by profit, but driven by perfection and the need to create a tool that performs no other function than being the perfect integrated blogging platform, and I have to admit, it’s not far off. Here’s what I said about the WordPress 2.7:

For me WordPress has always been a no-brainer, it’s free and has been developed by the best in the business, you can’t really argue with that. It was always feature-rich but seemed to lack the user interface to tie it all together. With the “Coltrane” release (2.7) that problem was solved and WordPress went from being a simple blogging tool to a fully blown content management system. The new UI is beautiful and really takes advantage of all the latest web technologies. Everything ties in seamlessly and you can get around quickly using the new left-hand menu. Everything can be customised, like what is shown on the Dashboard and major upgrades are now automatic which as any WordPress user knows is a superb addition. All the content is easier to manage, review and change. You would need a damn good argument to get me to consider any other blogging platform.

The feature itself is very detailed and written well. I have bought Web Designer before and prefer it’s designer based layout and point of view, opposed to being a developers magazine featuring more coding and database features than design. Some magazines sit on the fence in between developer and designer, it is hard not to include articles that cross over, but Web Designer use a very illustrative design that I think appeals to designers which is probably the reason I picked it up off the shelf. Grab a copy and check me out!

1. Thou shall not steal someone elses design.

A very sensitive area for me at the moment, although copying is supposed to be the best form of flattery, blatant copying of someones design is shameful. In this day and age you will be named and shamed on a blog or forum somewhere. There is a fine line between ‘inspiration’ and ‘copying’ so be careful if you struggle with being completely original. Of course everyone is influenced by what they see around them and current design trends but my advice to anyone prowling the CSS showcase websites for inspiration would be to get away from your desk and chill, look for inspiration in places you would least expect to find it. 

2. Thou shall adhere to web standards.

A bit of a generalisation but let me explain. Why do standards exist? Standards exist to make people who don’t care, have to care. Take ISO manufacturing standards for example, every product manufactured has to adhere to certain standards, imagine if they didn’t, how would you feel if you TV blew up after one week? You take it back right? Not if manufacturing warranties weren’t standard, you get my point?

Web standards are just the same, they make web designers think and produce amazing work for the benefit of everyone, users, designers, IT folks, silver surfers and any other demographic you can think of. Don’t just discuss web standards, use them!

3. Thou shall not use Tables for layout.

There is only one reason for using tables in web design, for tabular data. Using tables to organise a page layout is a poor practice and something everyone should move away from. I don’t care who is still doing it or if you have always done it that way, it is wrong, sort it out. Builders used to use asbestos for insulation, but they realised the error of their ways, a bit of an extreme example but hopefully it emphasises my point.

4. Thou shall never prioritise ad placement over content.

One of my (many) pet hates. Did you create a website to generate money from Ads? Or, do you have a passion for what you do and enjoy sharing, writing, designing, filming, reviewing or what ever your website does? Make the choice and stick to it, yes I understand ads are a good way to pay for hosting but don’t try and trick your visitors into clicking the ads by camouflaging them (Camoutising) or placing them in really annoying spots like just under the title of the article, before any content.

5. Thou shall allow for non-Flash/Javascript browsing.

Some people don’t care but those people are crazy fools. Don’t discriminate, segregate or eliminate your potential visitors. It’s just logical really, why would you create a website, at it’s fundamental core a vehicle for sharing information with the world (hence the www, not just ww), only to present information that isn’t accessible to a certain audience? You can still use Flash and Javascript but just provide alternatives which are unobtrusive and don’t effect your site if the user turns them off. For example, if your navigation is Flash how the hell is a user, not using flash, supposed to get anywhere? It may sound stupid to some of us, but believe me, it does happen.

6. Thou shall check, check and recheck links, images and copy.

Nothing is worse than a link that leads to nowhere or the completely wrong place, it immediately tells the user it is amateur night.  Unfortunately with web design and large dynamic sites, it can sometimes be hard to get it perfect first time which is why I recommend triple checking. It is difficult and we are all human but the more you slowly check through every link and proof read your copy, the less mistakes will be made.

7. Thou shall validate all XHTML code.

If you are a web designer and you don’t know about validating XHTML, stop designing and get learning. the W3C offer a great resource where you can validate XHTML, Dreamweaver has built in validation tools, so there really is no excuse. Validating your code isn’t just about being a perfectionist, it points out small errors in your code which might not show in some browsers. Valid XHTML is another no brainer, if you are going to do something, do it properly. Think of it as a spell checker for the XHTML language.

8. Thou shall always test cross browser & cross platform compatibility.

As a general rule I test all my websites in IE7, Firefox 3 and Chrome in Vista, IE7 and Firefox 2 in XP and Safari and Firefox in OS X. Seems like a lot but it doesn’t take that long and you would be surprised at some of the differences in the way they render pages. This is a great cross section and loosely based on the W3C monthly browser usage stats. I refuse to test in IE6 because it is over 7 years old and anyone still using it to browse the web doesn’t deserve to have access to it. Designers who still test in IE6 are keeping it alive by doing so, don’t do it.

9. Thou shall avoid using too many DIV’s

One of the things about learning CSS is using DIV’s. At first it seems like an endless amount of DIV’s are required to contain, wrap and assign classes but it’s not the case. Look harder at your code, ask yourself, do I really need a DIV there or can I assign a class to another element? For example, your footer, does it need to be in a DIV or could you not simply assign the footer ID or class to the <p> or <a> and use CSS to do the rest? Many designers suffer from ‘divitus’ when experiencing the CSS learning curve, but hopefully you can use your skill to rid yourself of this infliction and start designing more elegantly with less DIV’s. Think of it as a challenge, avoid using DIV’s unless you absolutely have no other choice to get the desired design.

10. Thou shall not open links in a new window.

Back in the day web designers used to open all links from the homepage in a new window. The theory was the more pages open with their content in the better! What they didn’t think about is how annoyed the user would be and therefore would never, ever return to their annoying website, great job! There are almost no situations where you would want to yank control to open content in new windows from the user. It is so easy for a user to open content in a new window or in a new tab that if they really want to they will, don’t force the issue because you will only drive traffic away from your annoying site. The W3C have gone as far as taking the tag “target=” out of the XHTML 1 Strict specification, it doesn’t even exist anymore, get the hint?

Today Google released the first Beta of Google Chrome and after using it for a few hours I think it is pretty good. I can safely say it is easily as good as all the other browsers currently available. I predominantly use Safari on my Mac, although because of my work on web design I also use IE7, Firefox, Opera and up until recently I sometimes checked things in IE6 (never again, see previous post, death to IE6!), so I have a wide view of what the various browsers are like and which ones tend to be the most usable in terms of user friendliness, speed and general browsing. At first Glance, I would say Google Chrome is right up there and knowing Google and their plethora of knowledge and data when it comes to all things web, may slowly but surely take over where all have been before.

On the down side there isn’t anything really innovative about the browser, although it is still early days. They have taken the best from the rest, tabbed browsing (tabs in the title bar, good move!), Incognito Mode (Privacy mode in Safari), but apart from that it will all come down to speed and security unless a major innovation is introduced. I think Google are positioned the best out of all the other browser companies to be first with innovation in this market. They have the largest share of visitors and users by far so they can analyse how users behave and implement changes to their browser before anyone else. I think this would of been one of the main reasons the browser went into development, to capatilise on what they knowt, not to mention the upcoming release of their mobile OS, Android which will obviously need a web browser too.

So 2007 was the year of the Smartphone (replace smart with i if you want), I think 2009 will be the year that internet browsers went to war, and I think Google’s entrance into the battle will only take it to the next level. Internet Explorer 8 is in development and Firefox 3 is gaining market share everyday but Microsoft and Mozilla will be watching closely and if they are not careful they could become casualties.

If you have survived the dramatic intro paragraph let me tell you about a global movement that you should know about and get involved with, SaveTheDevelopers.org. Together with facebook groups like Internet Explorer 6 Uninstall Day, SaveTheDevelopers.org have one purpose and one purpose only, to educate users still using IE6 that it is a terrible browser that is out of date and should be uninstalled immediately and replaced with one of the many free, faster, more secure browsers easily available to anyone.

“I use internet explorer 6, and it works great”

WRONG, it doesn’t work great, it might appear to you to work great but you are misguided, not only are you potentially sharing you private information with people you really don’t want to, but you are also standing in the way of progress. The web needs to progress for the good of all mankind (a bit dramatic I know), by using this stupid browser you are shifting the focus of designers and developers from innovating by taking their precious time up with irrelevant considerations like how to make sure things work ok in an archaic browser.

Do something good today, uninstall or upgrade Internet Explorer 6! You will be taking part in a global movement and actively helping the internet progress quicker. Don’t accept buggy, unsecure, slow browsers, stand up and do something about it, Uninstall IE6 today and make the World Wide Web a better place.