Sponge Project Blog ~ Web design in Tewkesbury

In an attempt to extend my PHP skillset some more, I’ve been playing around with SimplePie. For those not in the know it you can take multiple RSS feeds from anywhere and re-purpose them somewhere else - Popurls is probably the most well know.

Why?

So I’ve created is News for Tewkesbury. As I said it’s primary purpose is an intellectual exercise to help me develop my PHP skills. I hope some day soon will become a fully fledged website in it’s own right - hence the judiciously placed Amazon adverts!

How?

The structure is taken from Raj Shah’s News Aggregator, which in turn used Ryan Parman’s Newsblocks. Most of the code was kept as-is, but some other parts were chucked away as not being required. There’s a few tweaks here and there for my own needs, such as the focus on web standards to get ampersands to render correctly and rudimentary hand-held style sheet support. I’ve mixed in Nice Titles by Stuart Langridge, although my implementation is a bit buggy on some feeds - not sure of that’s the feeds or my code though. The “design” is all mine, but thanks must go to Mike Warren for the background image and Mark James for his famous icons. Also the contact form is from Mike Cherim

Tweaking and testing

It needs some extra work such as AJAX-ifying the feed refresh, help to speed it up and ensure suitable cross-browser compatibility. It’s been tested in Opera, Safari, Firefox and IE7, but if you do find any issues in other browsers please let me know. For the record I won’t be fixing any IE6 related issues - it’s time that died, but that’s another story for another time.

By all means check out News for Tewkesbury and let me know what you think.

14th of September saw the launch of the World Wide Web Foundation. Brainchild of Tim Berners-Lee, grandfather to the internet as we know it, the foundation aims to

transform community and to ensure that the Web remains an instrument of innovation

by

…funding research, technology development, and outreach, the Web Foundation strives to enable all people to share knowledge, access services, conduct commerce, participate in good governance, and communicate in creative ways.

Basically the web has evolved in such a way so as to exclude some people form benefiting from it’s use and also in a way that most people wouldn’t or couldn’t have predicted. The foundation aims to re-dress this imbalance moving forward and to better understand and harness the web for the greater good. The one page concept paper is worth a reader and also check out Tim’s launch speech.

I’ve worked in financial services with or for financial advisers for over 10 years and have seen a lot of different websites - both good and bad. However the vast majority of websites fail to achieve what their owners want and so the service that provided the mechanism is blamed. However I’d like to help dispel the myth that all financial adviser DIY website solutions are bad - the blame invariably rests with the website owner. Now not all DIY solutions are great, many are absolute rubbish but as the age old adage goes: A bad workman blames his tools.

So, to help financial advisers from falling into the trap of web mediocrity, I’ve complied a list of top ten tips broken into three categories: Getting started; Building the website; and Launching and maintaining the website. Essentially ten things to do or not to do if you want your website to be a success.

Getting started

1. Have clear objectives - the most critical thing you can do before anything else is sit down and think through what you want the website to do. Without this your website will end up mis-guided and useless to clients. Treat this process as a fact find if you like: interview yourself, colleagues and some clients to establish what they want from a website. Not only will this help you find the right solution, it will help analyse the success of hiring a 3rd party.
2. Plan - having a robust plan will enable you to stick to a suitable time line and give you a target date to focus on. Many website start in well-meaning ways but due to a lack of a plan end up taking too long or even abandoned. Even if you don’t hit the target date, having a plan allows you to manage your time to ensure you get a quality end result.
3. Hire a designer/developer - invariably many DIY websites fall foul and end up looking bland and uninspired. Spend the money and get a proper designer/developer in who knows about these things and can advise you on the best course of action. They can also advise on the best CMS for your needs allowing you to self-manage the website after launch.
4. Reliable hosting - nothing puts people off more than a flaky website. If a client relies on you and your site for key financial information and it’s down, you’ve blown your chances and potentially affected the overall relationship. I’d highly recommend NuBlue hosting, who provide really good hosting and support for this site.



Building the website

5. Make it accessible - part of the brief to your designer, in addition to the objectives, should be to make the website accessible to as many people as possible. Not only is there a legal requirement to do so under the Disabilities Discriminations Act (DDA) here in the UK, but you’ll feel good about yourself, give your business a good image and also increase your potential revenues as you’re accessing more customers.
6. Write clear content - try to avoid jargon and abbreviations. I know this industry is guilty of jargonising (is that a word?) and abbreviating everything into meaningless letters or phrases, but just because you and I know that AMC stands for Annual Management Charge and what it means, doesn’t necessarily mean your clients will too. Use glossaries and abbreviations in the right context or explain as you write. Also chunk your content appropriately. People don’t read huge swathes of text, they tend to skim. So in response you should write engaging copy and then “slice” it into digestible chunks, thereby helping your customers to learn and encouraging them to read it all.
7. Limit or avoid adverts - there’s a temptation to monetise your website as soon as it’s up and running with random text adverts from Google Adsense. This just detracts from what you’re trying to achieve, which is getting people to become to stay clients of yours and keep them informed and reassured. If you are going to advertise something make sure it’s relevant and in-keeping. By all means run a seasonal campaign that targets ISA customers, but don’t stick an advert for tractors because they pay you ?10 per click.
8. Use images - a picture paints a thousand words and boy does that ring true on a website. Particularly so in financial services where some complex terms need to be explain. Use graphs. Use tables. Use pictures of happy people smiling at the camera. If it helps gets the point across then use a picture, but only if it helps gets the point across.



Launching and maintaining the website

9. Tell people - you’ve spent the money so make sure you get a return. Stick it on your business card, on your answerphone, on your car, in your window, on your email signature, on your brochure or? company literature…basically anywhere a client or prospective client is going to see it.
10. Keep it up-to-date - the cardinal sin is to build a website and leave it to gather dust. Compliance issues aside, regularly updated content keeps people coming back to your site. It also helps with search engine rankings who rate newer and more regularly updated content above old, stale content.

So that’s my 10 ten things to do or to avoid when building a financial adviser website. There are many more hints and tips that I could offer so feel free to comment if you have any more.

Images courtesy of net_efekt, Steve Sawyer and jurvetson.

A bit of a back to basics post, but worthy of posting nonetheless. I spend a lot of time over at Web Designer Forum and we are regularly asked for support with getting started in web design, particularly making the move from tables to semantic HTML and CSS. So with this in mind I’ve decided to create a big list ‘o links offering my take on useful resources for anyone looking to learn web design. It is aimed at the novice, but even veterans may find something interesting.

Getting started

• Understanding Web Design - words of wisdom from the god-like Jeffrey Zeldman: Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.
• 9 Essential Principles for Good Web Design - another cracker from PSD Tuts
• Web Style Guide by Patrick Lynch and Sarah Horton is a great reference for anyone doing web design. Weighty, but comprehensive

Design theory and process

• The Elements of Design Applied to the Web - the five primary principles of design and how they relate to the web
• Dao of Design - applying Zen and Tao Te Ching to wen design
• Principles of Beautiful Web Design - if you can buy the book
• Elements of Great Design: The Polish - once you’ve got past the initial stages the best use of time is spent polishing and finalising the details of the design

Best practice

• Web Standards - the only way to code
• Consitution of a Website - useful article outlining overall best practice for building and then running a website
• Preparing for a Site Launch - crammed with useful hints and tips for when the design is finished and you’re good to go live
• Entry Level Accessibility - great introductory article on accessibility showing that it’s very easy to get a basic level of accessibility into a website
• Actual Browser Sizes - excellent article outlining some real stats on what window size people use when browsing. You’ll find some interesting reading in there.

Markup (HTML and CSS)

• 12 Lessons for Those Afraid of CSS and Standards - a must read for novices
• Sitepoint HTML Reference - the all-you-need-to-know guide to HTML
• Sitepoint CSS Reference - the all-you-need-to-know guide to CSS
• Builda CSS Website - introductory tutorial on the steps to building a CSS based site
• Guidelines for Creating Better Markup
• What Beautiful HTML Code Looks Like
• HTML Character Entity Guide

Testing

• Browsershots - enables you to get a screenshot of your website in a vast array of different browser and O/S combinations. Sadly it lacks interaction, but gives you a great idea of how your site renders in other browsers
• W3C HTML Validator - valid HTML is the hallmark of a quality product
• CSS Zen Garden - a lesson in CSS flexibility and also a great repository for good design
• Smashing Magazine - always serving up design goodness
• DivVoted - design voting site using twitter
• Konigi - gives you patterns and elements of a design to pix and mix
• Deisgn Patterns Flickr set - another design pattern repository

Podcasts

• Boagworld - been going for a while now but still maintains it’s quality. Highly recommended
• The Rissington Podcast - hugely entertaining and sometimes quite informative! Run by the legends that are John Oxton and Jon Hicks

You want more?

There’s a load of other stuff in my Delicious links if you’re interested. Image from Foundphotoslj.

This is not a new debate and there are so many people commenting on it I can’t be bothered to link to any of them, they’re so prolific. Ranting aside I wanted to take the opportunity to dispel myths about table based layouts and say why semantic markup or web standards is the way to go.

Use the right tool for the job

This age old maxim rings true even in web circles, but is so often ignored. Semantic markup may sound complex and a bit techy, but is reality is very simple. The premise is to use the right HTML element for the right job. You wouldn’t use a saw to knock in a nail would you? For example if I want to display a paragraph of text, I’ll use the Paragraph element (p). This tells my web browser that the piece of text I’m adding into the page is a paragraph and should be treated as such. So my code will look something like this:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Less is more

The big benefit is leaner code. Using the example above again, I’ve written one line of code with one element for my text. If I’d done this in a table based layout I’d have to wrap it in a cell, within a row and maybe even add it as a table on it’s own. Quite quickly you end up with code bloat and a slow website, which is completely unnecessary.

Tables for tabular data

The table element and its children were created with one purpose in mind: the display of tabular data, or as the W3C state:

The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.

So the lesson for today is thus: “use tables for tabular data and the right element for everything else”.