Jack of all trades…

Unfortunately in current times, people feel like they have to be able to do everything, to be able to offer every service to their customers. And to be honest I’m as guilty as the next person of this. I have a keen interest in the web, and I’m a half decent developer. I love design but I know that my design work isn’t great – so I don’t do any for clients. I outsource that for almost every job I do, as I owe it to my client to give them the best possible product.

… Master of none

Some companies however, take this to another level – I know of a number of computer repair shops, that offer “web-design” and pretty much every other computer “related” service that they could fit on a flyer. This leads to a distortion of the market, as you have these people offering their services at a very low price, so some actual designers, maybe starting out or whatever, feel like they have to be able to match this.

Along with this, some potential customers, looking to get a price reduction, will point out that these people can do it cheaper. You do not want these clients – if they can’t tell the difference between a real designer, and someone chancing their arm, then it does not bode well for the project.

Hopefully, people are able to tell what they are getting before they approach a designer.

Its for that reason that I believe there are two problems in the Irish equation – uneducated clients and bad web designers.

Uneducated Clients

The number of times that a small business owner has said to me that their 15 year old nephew/niece is a brilliant web designer is beyond counting at this stage. And perhaps I’m being unfair – maybe they are the next Chris Spooner, Meagan Fisher or Grace Smith. But I’ve heard it so many times that this is virtually impossible.

And unfortunately this boils down to the fact that although these business owners (apparently) know quite a lot about the subject matter they deal in, they know little or nothing about the web. This is of course a shame. But not the end of the world. I feel to really help these people you must be able to educate them as to why something is a good idea. Or a bad idea. And most of the time they will listen and understand and learn. And once we get to that stage the relationship can only get better. And your job then becomes much more rewarding. And hopefully you’ve earned yourself a repeat client.

Bad Web Designers

Full disclosure – I have made some really terrible websites in my time. But I never charged anyone for them – They were back when I started out and they were for friends. I never would have advertised the fact that I was a web designer. In fact – I still don’t. I love design but I love development more – And I’m much better at it too – In my opinion .

As I mentioned above more and more people are offering themselves as web designers, and they really shouldn’t be allowed. I’ll stop short of advocating that there should be some kind of test before people can call themselves a Web Designer… but only just.

Unfortunately, these “designers” cause a distortion or blur the market for young good web designers. When starting out and looking for a steady amount of work or in the current economic climate, you may take on work that you would never have taken on normally – and these clients can sometimes cause problems because they can’t tell the difference between these cowboy designers and you – the excellent designer.

Not Specific to Ireland?

The more research I did on this I realised that Ireland is not really the only country that suffers from this. You have the same issues all over the world. But Ireland is in a fairly unique situation, we’re a tiny country – with a population which is punching well above its weight in the creative world. You just have to look at all the world renowned poets, musicians, artists and authors. In the business world, you can look at all the Irish companies doing very well around the world, or all the Irish CEO’s of leading companies around the world.

We have an excellent and unique opportunity to educate our business owners on usability, on accessibility – to ensure that they get the website that they need to further their business. The website that their users deserve.

(Main image attribution: uggboy on Flickr)

The website, while not the worst example of government sponsored web design in Ireland or the world at large, probably wont help you plan that visit very well and I think it definitely could be much better. There are a number of very bad design and usability mistakes that I feel could be rectified by both redesigning and realigning the site to better serve any visiting users.

A Critique…

Layout

The layout of the site is a sign of being designed with a specific screen size in mind. In fact, on the main page it looks like the news & events list has grown much longer than the original designer had intended. In the menu, the layout doesn’t seem to take into account any differences in browsers/Os’s as you can see above unfortunately it has started to wrap on the line below. Drilling further on, the layout of the site does not give itself well to announcements of various sizes. This may well be an issue that again has become prominent since the design was completed. Maybe not enough work was completed on what was actually going to be displayed on the pages. Its always a difficult step to reach out to the client to find out the various types on information that they are going to want to convey, and to then image your design with that content in it. Getting that info very early in the process is very important.

The layout suffers from a lack of highlighting or direction. The three/four column layout is a little confused, and doesn’t help highlight any particular column or even separate them very well. And this layout is used nowhere else on the site so there is no familiarity when you go deeper into the site. Now I don’t expect the homepage layout to be featured everywhere else in the site but having familiar index type pages is a very useful tool for guiding users around.

The main pages lack of direction and how to fix it is something that I talk about later on.

As one of the most beautiful places in Dublin you really want to be able to show that off. The homepage of the site has a couple of images that show a bit about the park. However, the images aren’t ideal – they are small, not optimised for the web, and don’t really add anything to the page. Example – The image on the right is of the Wellington monument. One of the parks main attractions. However – nowhere on this page is it even mentioned. There’s no way to find out anything else about what that images is. If they were only for decoration – I think you use better photos?

Digging a little deeper, to the following page for example – http://www.phoenixpark.ie/visitorinformation/attractions/ and you have the main attractions of the park listed. Again, the images used, while they could be excellent, are too small. Unfortunately, there seems to be no thought about where the images are going to be used throughout the entire website. All of the images on this particular page are even different sizes, and this leads to another point – there’s no template for image sizes. This is a common website management tool – you know where the images are going to go – so you know what size to make them.

The phoenix park is one of the most beautiful places in Dublin, and the imagery of this site does not do it justice.

Navigation

This is one of the main usability problems with this site – the navigation is not as clear as it could be. Imagine the scenario – A couple, in planning a Saturday day trip with their family wants to see a map of the park – which item would they choose? They choose “maps” of course. But say they want to plan to see some of the attractions?

One of the most important things about any brochure/informational website is being able to give people the information they want as quickly as possible. And for that to happen – the menu’s have to disambiguate as much as possible. You don’t want a user to have to click on 3 different menu items because they’re quite similar. So with this, you either reduce the options, or give them more precise options. The risk with giving fewer options is that you could then end up not helping the user at all as they might think the site does not cater for them. And on a site like this - which has no site search functionality that is definitely a possibility.

To not give a user an easy means to search your site is a usability error on the highest order. It might never get used if people get to your site through Google and are immediately gone but on a site like this – the homepage is where people start. And people are used to have site searches, and its so easy to implement that it is a very strange omission.

The Redesign

Making it better

There are a few ways to guide people when they get to your website. The two I tend to focus on, are to either to try guide the user where I want to, or to try and imagine what the user wants to get from my website. In this particular site there is no real reason to guide the users in one particular direction. No product to sell (apart from a visit to the park of course, but thats different) or no signup to gather. In this case we want the user to be able to get whatever information they want about the site as quickly as possible. Not just a redesign but a realignment. Both in fact.

Redesign vs Realign

I feel this website needs both – a redesign to look after the usability and other design flaws, and a re-alignment to better suit the users that are going to be coming to this website. If you want to read an excellent article on the both of the above – and when either is warranted check out the following article from WebDesignerDepot – I feel this website needs both – a redesign to look after the usability and other design flaws, and a re-alignment to better suit the users that are going to be coming to this website. If you want to read an excellent article on the both of the above – and when either is warranted check out the following article from WebDesignerDepot – http://www.webdesignerdepot.com/2010/06/redesign-vs-realign/.

Redesigning the Layout

The current layout is unfortunately a bit dated, and unfortunately over time and without a content strategy, the front page design has suffered. This is because over the years, the image sizes have obviously changed, the number of new articles has also changed and I suspect the number of menu items has changed – and this has meant that the design has not grown with the content or no set content strategy was in place to ensure that the the users of the site were able to update it over time without affecting the layout.

The one important column on the page is overused, with both news and events listed there. And even with the link text it can be quite difficult to see which each of them are without clicking on the link. I propose changing that out – You want your most recent items on the homepage – and you want it under the right headings so people can gather information very quickly about whats on or whats new in the park. On a minor note the heading for that column isn’t great – It just looks like another item in the list – not great for usability or anything else for that matter.

So I redesigned the site using a three column layout – Each column for a different type of update – News, Announcements and Events. This covered the three most used types of post and also allowed the user to quickly see which was more important to them! Each of the headings should be clickable to bring them to posts of only that type. I highlighted the events column as this should stand out – You want to attract as much attention as possible to these as you want to attract as many people as possible to the park!

This brings on the second part of the front page changes – realigning the navigation.

Realigning the navigation

The old navigation was confusing – at least to me. Whats the difference between “visitor information” and “about”? And unfortunately you have to click on both to find out. Meaning if you got it wrong then its just extra clicks to get back. What my concept calls for is a drop down menu with lots of information. This means that you can click on both – See what comes under them and then click on the appropriate item that you might be looking for. I’ve added this for many of the menu items – this should ease the navigation for the user.

It also means that the website owners have to think better about where items go – and what overall heading to use. I personally can’t see the difference between about and visitor information – and I feel these should be amalgamated under one heading on the navigation. The added advantage of drop downs is that you can then separate out below that if you really feel its necessary.

Then I added a search options – one of the glaring omissions from the original site. This is also in the form of a drop down just to keep in line with the design but that isn’t entirely necessary either.

The new front page I feel better serves users and helps them find what they are looking for quickly and easily.

Other Additions

I’ve also included a revamped footer – which I feel also benefits the users. First off is the addition of a sign up box for news or event updates. This is a pretty big omission from the original site as it can offer an excellent opportunity to advertise new events to people who are interested in the park, and to send out announcements as well.

Next is immediate contact information – Address, phone numbers, etc. Although this information was already on the site, it wasn’t that simple to find immediately or in a hurry.

The footer now also includes a little map, with the location of the park, but that map is clickable to bring up a bigger Google Maps page of the map. This means you can get directions etc very easily from wherever you are.

Below that again you could add sponsorship logos and the OPW logo etc.

Conclusion

Normally I would but more work into the article pages of websites but this mini project was unfortunately cut short by paying work. Unfortunately I’m also very busy in work so I don’t think I’ll get back to this concept any time soon. However I did offer the design and code to the OPW but they didn’t reply to my follow up mails. That doesn’t really bother me so if anyone wants the code or to use the design – feel free. Obviously the logo and other images are property of the Office of Public Works.

Live site – Front page, article page(not finished, nor will it be unfortunately)

Eric Meyer

I’m pretty certain it would be impossible to exclude Eric Meyer from any list on CSS. Any list at all, because he is probably the best, most world renowned CSS expert there is. Having practically eaten two of his many books on CSS (“Eric Meyer on CSS” and “More Eric Meyer on CSS“) I can’t recommend them enough. Presumably does not suffer from stage fright as he speaks regularly (indeed founded) a travelling web design conference called “An Event Apart“ and most recently at this event in San Francisco and Chicago, along side a number of other names on this list. You can find Eric blogging at http://meyerweb.com/ and otherwise dolling out his genius in the form or amazing tips and helpful hints there too.

Andy Budd

I first found Andy Budd when I bought CSS Mastery: Advanced Web Standards Solutions. It quickly became one of my favourite books on CSS and has become a excellent and well used reference. His website has also become an excellent resource – especially his extensive bookmarks at http://www.andybudd.com/links/. He can also be found blogging at http://www.andybudd.com/ too, a popular weblog where he writes about his personal hobbies and also about web design and web standards. Another branch in Andy’s CSS work is also his efforts at http://clearleft.com/ (btw they also have a ridiculous trademarked tag line – “We make Websites Better™”). Clearleft have a good few web applications and web sites under their belt and one very interesting project that they have is http://www.silverbackapp.com/.

Dan Cederholm

from http://www.simplebits.com/ – One of the books I’m reading right now, “Bulletproof Web Design” was written by Dan Cederholm, and from what I’ve read – he uses techniques and has a style of code that I really admire and now aim for myself with my projects. He is a big proponent of lean markup and CSS, and apparently in every project looks to “minimize markup and embrace the flexibility of CSS”. This is something that I’d like to be able to do and his book seemed like the obvious place to start. Having said that, “Transcending CSS” is also pointing me in this direction as its mantra of content being king is helping me see the benefits of avoiding unnessary divs, and other markup that adds nothing to the semantic value of the page.

Jonathan Snook

at http://snook.ca/jonathan/ – Having heard of Jonathan over the years and having read a couple of his articles and things, when I first found out that he’d written a book, I pretty much had to buy it. The book was “The Art and Science of CSS“, and what a book it was. It was a book that really made me turn a corner, that made me realise how much I could do with CSS and good markup. I enjoyed this book immensely and learnt a great many things from it. He does the big web and development conferences too and has graced SXSW, Webmaster Jam Sessions, and Future of WebDesign. His personal website http://snook.ca/jonathan/ is where he shares his “tips, tricks and bookmarks on web development” and I often venture there for inspiration ideas and excellent ideas. One of the handiest tools on his website is also one of my favorites – The Colour Contrast Checker at http://snook.ca/archives/accessibility_and_usability/colour_color_co/. His list of accomplishments is long and they are many, check at the about section on his website to find out more.

Andy Clarke

from http://www.stuffandnonsense.co.uk/ – Another recent addition to my list of really really good people is Andy Clarke. In fact I hadn’t really heard of him properly until I read Transcending CSS – A book that has literally changed how I look at new projects, and really got me thinking about the way I design websites. And although I only found him recently, it would appear that the man is a bit of a legend! He also speaks at the big conferences (like An event apart this year in Chicago…) and runs his own business from a studio in North Wales. But his book is becoming my most read book on web design(over and over again ). I really enjoyed reading it and appreciate all the work that went into it. Hopefully, I get to put many of the techniques and things learnt from this book to good use in the future.

Dave Shea

at http://mezzoblue.com/ – I first started to read Dave Shea’s website a good while ago after it was brought to my attention as a really good example of a website design, and although its changed quite a bit since then, it still holds true as a really good example of professional website design. Good use of changing themes/colours, great layout and interesting content. Also the creator of CSS Zen Garden, arguable one of the best known places for web designers to show off excellent CSS designs. Not always my cup of tea (I prefer less graphics intensive designs personally), its hard to ignore some of the really excellent things that sometimes appear here. As for Dave himself, I think he says it best himself(from the about section of http://mezzoblue.com/) – “If you’re looking for the professional bio it’s over here. In short, I do a bit of speaking, a bit of writing, but mostly it’s about the design.” He links to a differen site here and its one you should take a look at as its really excellent – http://brightcreative.com/.

Conclusions

In reality while writing this piece I could have listed about 50 more people. In fact I started off with three and it grew after looking at the books on my shelves. However I feel like these are the people that I really look to for CSS stuff and think most people will find it useful. At the very least your should be adding these people’s websites to your RSS feeds, however, then you lose one of the most important aspects of going to these websites and that’s for the great work that they’ve done on their own websites!

The next article should come soon enough on the same topic of voices that matter to me… but with a slightly different subject.

I believe from reading his further comments throughout the page that he means that it is unprofessional to use them on client sites or on a… say… web designers/developers main business site. In this case I kind of agree with him. I however disagree with him over a number of his points.

…their use should be considered nonprofessional in every seemingly professional context.

I only agree with this statement if our definition of professional context is the same as I mentioned above. What about on a web designers/developers personal blog or website?

He also states:

Do these claims make “professionals” look professional, or does it make them rather untrustworthy?

By this he is referring to his analogies about various professionals (doctors, soldiers etc.) claiming to be proficient at their job. He is trying to say that if a doctor tell you he or she knows what they are doing then they obviously don’t… However Doctors do this all the time! Take a walk down to you local GP or Hospital Doctors office. See all those letters after their names? They all mean very specific things, and should be taken quite seriously. Would you allow a doctor to operate on you if “B. Ch” wasn’t in there? No. Why not? Well how do you know that he or she is a surgeon, and not just some Obstitrician that got bored? I know, I know, unlikely to happen – but all of this is very important.

Assuming too much?

I think perhaps Jens is assuming too much knowledge on the part of the consumer. The client who wants a new website. By looking at your website they’re not going to know, and whats more likely is they’re not going to care. That isn’t to say that we shouldn’t be teaching them. Or making them aware of the need to be accessible and compliant. Jens is assuming that just because we’re in the business that we should be doing it already. However if you take a look at the following examples that clearly isn’t the truth. I’d also like to point out that Jens Meiert probably has a better type of consumer than the rest of us  He is a very intelligent man and I appreciate the other stuff that he has written for the community.

• http://purcellplant.com/ – Someone paid someone to do this to them…
• http://www.orbrio.com/ – they make websites… like this one – http://www.takeawayfood.ie/
• http://www.flynns.ie/ – Again someone paid for this.
• http://www.budgetwebdesignlimited.com/Portfolio.html – And the money comes in to keep them going… to be able to make perfect sites like this – http://www.chostaekwondokilanerin.com/

I could go on. Most of the examples came from this thread on the Irish Webmaster Forum. Its good for a laugh.

Raising Awareness

For me, making your website standard compliant is a big thing. Its not really that difficult, and the more people that do it the more inclusive we become as an industry. So that’s why I love seeing valid CSS, or valid html or even better – WAI-AAA valid, badges on websites.

As long as its used in the right context – to raise awareness and to get more people doing it, and if you’ve taken the time to do it, then why not?

Wear your badges with pride.