Blog Design & Build

When designing a new Website it can often be tempting to think outside the box, but there are pitfalls that need to be avoided to ensure your users aren’t left terminally confused.

Despite all this 3.0 talk, the Web technology is still in its infancy, and like all the technologies we take for granted, it needs time to mature.

Consider TV advertising. In the 50s it was simplistic and brash because advertisers simply didn’t know how people would respond to the medium and so subtlety went out the window. Now we see ads often of breathtaking quality but are left unsure of what we’re actually being sold, because advertisers have the confidence in the savviness of its audience.

The Web is less than 20 years old, and most of its users are still not savvy enough to handle change. They need logos and menus to be where they expect them to be, and they need sites to behave in a way they expect.

Sometimes the temptation to create revolutionary sites that function in new and innovative ways or employ subtle navigation techniques can be all-consuming. We all want a site that is different from the competition, but in the relative early stages of this medium, can we afford to lose users?

I’m not suggesting that all users are stupid, but they do need guidance because many of them are still - even if subconsciously - afraid that clicking the wrong thing could break their computer or result in the payment for an item they never ordered.

It can be very easy to patronise this audience and dumb down your Website in the process, so we as designers and developers need to take great care in balancing usability with innovation.

For now I think the golden rules have to be:

• keep the logo top left
• put the menu where it can always be seen no matter how long the page becomes
• request information via online forms only when that information is needed (ie: don’t ask for an email address unless you’re going to email that person)
• use sitemaps, search boxes and breadcrumb trails where appropriate
• avoid too much mouse movement (that means getting rid of that pull-down menu...you know who you are!)

Best practises are methods and techniques for achieving a certain goal. By their very nature they set the standard for us to follow, and form a mechanism by which developers can be judged.

ASP.NET is my platform of choice when developing applications, but it gets a bum rap from developers on both sides of the open source debate, for its creators’ inherently arrogant approach to Web standards.

While working on a new project I thought I’d have to bite my tongue when I saw some of the .NET markup that was being used, but after a while it dawned on me that what was being written wasn’t incorrect, it was simply following Microsoft’s best practises rather than, for example the W3C.

Under ASP.NET, the tools that allow developers to change the styling for Webpage elements (font faces, sizes, colours, etc) are very close to hand. When adding a text box control to a form, the user can specify its border style, font size and colour aswell as the usual stuff like maximum length and validation functionality. Now as part of the XHTML and CSS methodology, which encourages the separation of content and styling, this type of customisation is abhorrent: it’s simply not the done thing. However, when developing the .NET Framework (and specifically ASP.NET), Microsoft were simply following a pattern.

Some people actually don’t realise, but the .NET Framework in and of itself has nothing to do with Web development: it is simply a software framework. Programmers can build desktop and console applications, libraries and games with it. Now in desktop application development it is very common for developers to be given the option to change how a form looks by hard-coding the window styles directly into the application. There is no CSS technology for desktop applications, and so programmers pick colours from a specific palette (which include system colours) and fonts from a dropdown list, to suit their needs.

Not only can you build both desktop and Web applications with the .NET Framework, you can also use the same software (Visual Studio) to build both types of application, so developers could make the transition from building Windows Forms apps to producing Websites. Microsoft even took care to give the Web versions of their controls (like textboxes and labels) the same or similar name as their Windows Forms counterparts, with the same abilities to change styling that programmers had grown used to.

So I think it’s unfair to rail at Microsoft for not embracing W3C, when this isn’t actually the case. As a standards-conscious developer I’m not forced to use the hard-coded styling method that I would use with Windows apps: I can apply CSS classes to my controls just like I could in HTML.

So hard-coding your “look and feel” doesn’t make you a bad Web developer: just one that’s following one set of practises. Problems only arise when developers pick and choose elements from different methodologies to create their own which makes picking up someone else’s project that bit more difficult.

This realisation has made me a more forgiving programmer: now I just have to learn to resist the urge to force my ideals onto others.

As my Twitter followers are aware, I spent an hour hanging around Birmingham International Railway Station for a train back to New Street today, which was late due to “severe delays”.

We all know and accept that things go wrong, but I think many of us are now immune to the standard-issue apologies we receive when this happens. What’s infinitely more valuable than a blank apology is a helpful suggestion: “board this train and change at New Street and continue your journey from there”.

While I was waiting, and not knowing how long I would be sitting at the station café, I started thinking about how most Websites deal with unforeseen problems.

In his book The Big Red Fez, permission marketing guru Seth Godin looks at ways we as Website owners and developers can make our users’ lives easier in the unlikely event of a loss of cabin pressure.

Rather than a 404 (page not found) error or a search that yields no results, why not say sorry and then suggest some of the most popular pages on your site? If a page stops working, why not get a quick form together than emails your Webmaster, provide a direct email link or list a telephone number?

Railway stations are good because they try not to leave you feeling helpless, but Websites do that to users all the time. You could be on the verge of converting a visit into a sale when the link between your site and the payment system fails, and their order details, along with their confidence in you, is lost.

The microblogging site Twitter is as famous now for its all-too-frequent error messages as it is for its revolutionary offering, but interestingly enough someone has done the contingency work for them. Twiddict lets you cache your tweet on their server until Twitter is ready to receive it. Brilliant!

So with Twitter having bought Summize, surely the next best move would be to acquire Twiddict, re-brand it, keep it on another server and send all over-capacity or “something is technically wrong” messages its way.

That’s a quick example for a fairly frivolous site, but the same pattern can be adopted anywhere. Your error page doesn’t have to follow the same design pattern as your main site: after all, your visitors are probably only going to click the back button again, so if you have a few sites, why not upload some contingency forms to a cheap Linux host and redirect your errors to the relevant form?

Just extending a helping hand to your visitors when things aren’t going their way - no-one cares if things aren’t going your way, sorry! - can really make a difference and once in a while it’ll bring you a conversion you otherwise might have lost.

Five years £349 would buy you a fairly standard small business Website, with a few static pages, some stock images and maybe a contact form.

But what’s happened now is, rather than the whole economy shift and change and the financial bar lowered, the £349 website still exists but now has to compete with businesses offering their services at £49.

The thing is, investing £49 in your online presence shows off pretty starkly your commitment to making the Web a place to do business. Now that doesn’t mean you should spend thousands, it actually doesn’t mean you should spend more than £20, but it’s what you do with that £20 that counts.

wordpress.com will let you host your own content managed site for free, and if you want your own domain name (like thisismywebsite.com) you pay a small amount for the privilege. There are tonnes of themes available which you can customise.

What you get with something like a wordpress.com site is a Web presence that’s instantly connected. When you post a blog entry that you’ve tagged with keywords, people searching for those keywords will find it weeks before a standard site, because of the technology that blog engines employ.

wordpress.com is a great starting point, but it won’t, and can’t last you forever. As your business grows, your site needs to grow with it, and you need to think about making a real investment in the Web.

Companies offering £49 for a Website are great for personal sites, but why bother when Facebook and MySpace exist? If you want to get anything out of the Internet, become part of a community and engage with your customers, you won’t get it unless you invest either a little time or a little more money.

The bottom line is, if you’re spending less than £300 on a Website, you may aswell spend £20 on a WordPress blog that has your own domain name, because you’ll get more out of it: more visitors, more discussions and a greater understanding from your customers about what your business can do for them.

The Web is like any other place: you get out what you put in; the only difference is that by putting in a little in the right place, you can get more out than you expected.

While chatting with Josh Hart - he of Live Brum fame - we both hit upon the idea of programmers being different from developers. This has been discussed elsewhere, but I felt it worthwhile to look at this angle, two years on from the original article that prompted the post in that link.

WARNING: Grotesque instance of management speak following in later paragraphs.

It’s easy to think about the difference between developers and programmers as one that is based on knowledge: a programmer has a deep knowledge of the languages and frameworks he uses, and a developer has a broader but consequently less holistic understanding of them but has the ability to plan, talk to clients and manage a project. There are elements of truth in that statement, but it’s not wholly accurate.

I for example have a foot in both camps. I learned VB by sitting in my room, playing with my custom-built Windows 98 PC and not kissing girls. I got a job fixing computers then went on to develop desktop applications for large companies. I now develop Websites for a living, and I code for the fun of it: the results of which are currently TweetPaste.

But I also blog, work with and build WordPress plugins, collaborate on different projects like The Big Picture and Rhubarb Radio, all of which have come from an active social life. I work on open source and “closed” systems alike because I’ve got the end in mind, not the means. I can do the handshaking, business-card swapping, coffee meeting thing, and I really enjoy it when it’s with people who are there to revel in the exchange of ideas.

Josh told me he doesn’t consider himself a developer, but when presented with the code for Live Brum which he’d written almost entirely single-handed - and was able to thoroughly explain - I balked at that claim. He corrected me however, saying that he was a developer, not a programmer (not to be difficult: simply to draw a distinction).

It may come down to a difference in brain types: some people are logical, others are creative. You can have elements of both of course, but I think one will always outweigh the other.

I’ve had similar conversations with my friends David North who runs Digital Rant and Kevin “DigiKev” Rapley, a programmer and designer respectively; both people with an appreciative eye of the other’s discipline, but a firm understanding of their own strengths. Currently they’re both either engaging in or undertaking projects that will see them finding a middle ground, but having approached it from opposite directions, so perhaps these titles are defined, but not set in stone.

Given the right framework a developer can build very powerful Websites, but can you then take that knowledge and learn a new language from scratch, thus becoming a “real” programmer? Similarly can a “hard-core” programmer take the helicopter view and acquire time management and client-facing skills? Yes, probably, but what’s more important is the question of whether either wants to.

Some are very happy being given a problem and figuring out how to solve it, whilst others like to be given an idea and told to run with it or wait for inspiration to strike. There are opportunities for both, unfortunately there are also frameworks for both. ASP.NET is seen as the programmer’s language whereas Ruby on Rails is for creative types. This is partly because creative people embrace the ideals that open source licensing embodies, but also because of the reputation of the likes of Microsoft, as a stuffy, almost archaic organisation.

Or is it just about mindsets? MySpace is (now) built in ASP.NET, and Facebook which is programmed in PHP is under constant criticism for creating a walled garden (a closed space, far from the ideals of the open source ethos).

So therefore the technology - and even the ideals behind them - are not what makes a programmer or developer what they are: it’s what they do with those technologies that makes a difference.

There’s a whole bunch more I could say on the subject but I think I’ve gone on long enough, so if you fancy telling me which camp you think you belong in - or whether there’s room for a third...or more - please comment away!

On Thursday I thought of a problem. I like the microblogging site Twitter, and sometimes I like to mention what my friends are talking about.

However, there is a problem. In order to preserve the status update (or “tweet”) as it’s known, you have to either copy and paste it - and get rid of all the nasty code that goes with it - or worse, take a screenshot of the tweet, save it, upload it and paste it onto your post.

Solution: After spending a couple of seconds on Google - that’sreally all you need - I discovered that there wasn’t anything out there that would do the job, so I thought I’d have a pop, and thus TwitterPaste was born.

It’s a ridiculously simple app: all you do is copy and paste the link to the tweet you want to embed (which you can get fairly easily), hit the big button and copy the code you get itno your blog.

Another problem: it doesn’t work on WordPress. Although this site is built on my new Byron CMS, any collaborative blogging projects I am involved in tend to be run on WordPress because it’s something bloggers are very familiar with...and it’s really good. The problem is however that, unless you’re editing in code view (which shows you all the “raw” HTML as apposed to the formatted text) all the code that TweetPaste generates gets stripped out.

Solution: The TweetPaste WordPress plugin. This simple one-file plugin generates the code needed to embed a tweet onto a page. And because it uses IFrames it deprocates so RSS readers should be able to display a link to the tweet, if they can’t display the IFrame.

And in other news, this is my first ever WordPress plugin! WOOT!

So now I can embed tweets into my blogs, and allow others to do the same. And all in less than 12 hours.

Oh, and to prove that it works, here’s me tweeting the fact:

I used to think of web apps like WordPress, FeedBurner and Flickr as tools for the uninitiated, the non-programmers, people who want a quick and easy website and a quiet life. I didn’t for a second begrudge the fact that fewer “techies” were contributing to the Web; my reasoning was that, by using these apps and linking to them on your site rather than developing the functionality yourself, you were sacrificing control.

And that’s still true. You can’t tailor Flickr to render your slideshow as you might want it - what if you don’t want cross-fading? What if you hate Flash? Blogger templates might be fiddly and WordPress is written in a language you might not be familiar with. But the question is: why does all that matter? Why does everything need to fit so nicely?

Do people look at sites that embrace these apps - sites like carsonified.com or jonbounds.co.uk who are both developed by developers incidentally - and think “well they obviously don’t know what they’re doing: they can’t even host their own videos!” or do they think “oh great, I love Twitter; let’s see what this guy’s up to”. I think the latter. Developers may still think the former, but they no longer hold all the keys.

In France, where the weather is good and people can stay up late, their houses are used only as a base: somewhere to lay your head til the next day when you can think about knocking off work and popping out for a baguette. So does a house you only use as a base need a TV and DVD player in every room or an en-suite in the master bedroom? Why throw so much mud at the wall if you’re never around to see it stick, because you’re off enjoying your city?

The Web works in a similar way. If you’ve got so many profiles in so many places - a site for your blog, a page for your photos, somewhere to put your videos - surely all you need a website for is to tie these things together? Yes maybe you want to muse on your particular subject for a few pages, or you’re implementing some cool functionality that doesn’t exist anywhere else, but do you need to write your own video player when there’s a perfectly good one at YouTube? Do you even need to organise setting up your POP3 email accounts when Gmail now gives you email at your own domain?

I’m really only talking about sites for people, not companies. I don’t think this way of working will affect the likes of amazon.co.uk or anything like that, but it’s a great way to go if you’re a one (or even 10) man outfit.

Think it over, and embrace the change!

The venerable BBC are trialling a new design for their gargantuan website. At the moment it’s confined strictly to the homepage, but it looks as though this is to be the new preferred layout for the entire site.

Aswell as ditching the 750 pixel wide, left-aligned layout that has come to be known as the ‘BBC style’, they are also making a strong push towards valid HTML, something that is surprisingly not a feature of the current site. The new design now has the site centred on-screen and stretching to 960 pixels in width with a 10 pixel gutter, thereby reflecting the majority resolution of 1024x768 (the display setting that is most common, especially for PCs).

It also makes use of some fancy new AJAX, with each block of content being customisable: allowing the user to move blocks around, expand or collapse them or add in extra blocks. What’s great to see is that this has all been achieved in full compliance with the W3C’s HTML standards. Also most of the functionality (bar the movement of blocks) is available to users who don’t have Javascript enabled on their browsers. The page is fully CSS-driven and should work well in text-only browsers.

I’m quite looking forward to seeing this new, non-stuffy layout go live across the entire site, but I think we could be waiting a considerable time for that to happen. Good work so far though!