Review: Refactoring HTML

Refactoring HTMLThere’s nothing more dispiriting than being stuck with maintaining an old website with hundreds of pages of rubbishy “Netscape 4″-era code. There can be an overwhelming number of things which need fixing or updating. You may well be tempted to think it not worth trying to improve things incrementally and instead plan for a major redesign at some indeterminate point in the future – which maybe you’ll never get the time or the money to undertake.

If you find yourself in this situation, then Elliotte Rusty Harold’s book Refactoring HTML: Improving the design of existing web applications will be a good antidote to “wait for the redesign” paralysis. The book encourages taking a gradual approach to converting your website to a modern standards-compliant state, rather than trying to do everything at once. I think this is a great area to write a book about, since it fulfils a need a lot of website managers will have. Designing and building new sites is fun and there are an awful lot of books available about this creation process. Maintenance and incremental improvement of old sites is distinctly unsexy in comparison and gets much less shelf-space.

The book is a compendium of stuff, most of which you’ll probably already know you should be doing. It’s arranged with subjects listed in a cookbook fashion – covering why you want to make each change, potential trade-offs and the mechanics of how to carry out each improvement. The first chapter is an introduction to the subject of refactoring, which is a programming concept that may be new to a lot of web designers.

“Refactoring is the gradual improvement of a code base by making small changes that don’t modify a program’s behaviour, usually with the help of some kind of automated tool. The goal of refactoring is to remove the accumulated cruft of years of legacy code and produce cleaner code that is easier to maintain, easier to debug, and easier to add new features to.” From “Refactoring HTML”

In the second chapter, there is a thorough overview of automated tools you can use for refactoring. A lot of the information here is going to be of more use if you’re a programmer. However, the discussion of regular expressions should be of use to anyone who has to deal with outdated HTML code. It’s backed up by an appendix which provides a beginner’s guide to regular expressions. Throughout the book there are specific regular expressions supplied for fixing particular problems which will be hugely useful to non-programmers like me who find writing their own regular expressions a pain.

Chapters 3 and 4 cover all the aspects of well-formedness and validity in HTML documents. The author is sensibly not insistent upon validation for its own sake and on several occasions gives examples of times when it may be pragmatically better to go for an invalid option. He also points out where the standards don’t actually make much sense – the rule that block quotes can’t be within paragraphs is one example discussed which has always really annoyed me.

Chapter 5 covers layout, with some discussion of replacing table layouts and frames-based layouts with CSS. However this is definitely not a design-oriented book and its CSS advice is limited to providing some basic layouts and advising that CSS is ‘very much a technique for full-time professionals”.

The book continues with a nice-to-see chapter on accessibility and a section on web applications. The latter includes an interesting section on Web Forms 2.0 types as well as solid advice on older topics, like when to use POST or GET and the need to escape all user input. Finally, there’s a chapter on content which – like the section on layout – is pretty basic. Still, it’s nice to see an emphasis on the need for correct spelling in a book that seems to be aimed primarily at coders.

Refactoring HTML as a whole is certainly useful for anyone managing a badly-coded site, especially if they haven’t thought much about ways to semi-automate testing and improvements.

Refactoring HTML: Improving the design of existing web applications by Elliotte Rusty Harold is published by Addison-Wesley.

Requirements gathering for web projects

The process of requirements gathering can be difficult at times, but is obviously essential if you want to build a solid foundation for your web project. Below are some free resources which will hopefully improve your ability to define requirements effectively, whether for your own sites or when helping clients to formulate their needs.

Articles and podcasts

A good article to start with is Requirements Gathering Essentials by Martin Bauer. It emphasises the need to think through a project properly before starting, but sensibly advises that there is no “right” method for all projects. “Instead, it prepares you to formulate your own, customised requirements gathering procedure by explaining the key issues you should consider.”

There are a couple of nice discussions about requirements available on Boagworld.com which are also great for newcomers to the topic. Show 23 has a segment on “scoping your web project” and Show 102 includes Marcus Lillington talking about requirements capture.

Identifying Website Requirements by Kathryn Summers & Michael Summers is a useful long article on getting requirements and understanding your clients’ perspective.

Content? Or Dis-content by Garth A. Buchholz looks at the important topic of properly planning content requirements.

Dealing with clients is an art unto itself. See 20 Ways to Keep Clients Coming Back For More by Akash Mehta for some ideas about this. Interviewing abilities and meeting management skills will also help. Amplifying your Effectiveness has an article on “Building a requirements foundation through customer interviews”, which isn’t specifically about website requirements but has a lot of good general advice about questioning clients. From a more focused designer perspective, Rookie Designer has a podcast segment on controlling a meeting which you may also find useful.

Checklists and standards

Hobo’s website design & development project checklist is a useful list of “what things a web designer should make clear to their client and get agreements on when developing any website”, including things which can be overlooked, like planning for training and updates for a CMS if one is being used.

Out-law.com’s web design checklist is written from a UK legal viewpoint for people commissioning a website, but could also be useful for designers.

Michael Cordova has written a comprehensive web design checklist which can be given to clients.

For scoping accessibility requirements, the PAS 78 standard is available for free. Obviously you should also refer to the WCAG accessibility checklist.

Examples of questions and forms for clients

You can download an example client survey for a website redesign from the site for the book “Web ReDesign 2.0: Workflow that works”, along with plenty of other useful stuff. The book itself is great, but obviously it’s aimed at redesigns rather than sites which are being build from scratch.

You can also look at web design agencies’ sites to get some ideas from how other people capture requirements from clients. Below are some companies who publish requirements-gathering material on their websites.

Anything else?

Obviously this isn’t an exhaustive list. Please comment if you want to add any links to resources which you’ve found particularly useful.

Related posts

Free ebooks for web project management

10 useful web-related podcasts

I get through a lot of podcasts to keep myself sane during my three hours a day of commuting time. These are some of the web-related ones which I’ve enjoyed and find myself coming back to:

1. Boagword

Boagworld is definitely one of my favourite podcasts. It’s marketed as being “for those who design, develop or run websites”. Paul Boag is the host and is excellent at communicating complicated concepts in a comprehensible way. Marcus Lillington’s stuff about dealing with clients and project management can be quite useful too. Between them they provide a nice rounded coverage of both the technical and business side of web design, all with decent production values and a reliably regular publication schedule.

2. The Rissington Podcast

The Rissington Podcast is a quirky British podcast for “web-geeks”. Its funny, often rude and occasionally useful. I particularly enjoyed the Papa Lazarou impression and the Doctor Who questions in the latest show.

3.Web Axe

Web Axe has “practical web accessibility tips” provided in a non-preachy way, with plenty of useful stuff in the accompanying blog.

4. Rookie Designer

Rookie Designer is the personal podcast of Adam Hay who provides “tips, techniques and discussion delivered in an easy-to-understand format”, served up with plentiful helpings of actual experience. The archive contains discussions of lots of useful topics for designers.

5. Photoshop User TV

Photoshop User TV is a video podcast which is a great free resource for improving your Photoshop skills.

6. Adobe Creative Suite video podcast

The Adobe Creative Suite video podcast is also useful as a free training resource. It goes into detail about using particular features in Adobe products, so can be used at the moment to get an introduction to new features in CS4.

7. WordPress podcast

The WordPress podcast provides “news, tips and information” and is especially useful for keeping up with news and discussion of software changes and updates.

8. SXSW podcasts

Conference sites can be a great source for interesting podcasts. SXSW 2008 has a huge variety of topics covered, and there is plenty of good stuff archived for 2007 and 2006. Some of the more technical presentations suffer a bit however from being separated from the accompanying screen demos.

9. The Web Hosting Show

For a bit of variety after all the web design material above, the Web Hosting Show is a fun inside look at the topic of hosting which is useful for hosting company clients as well as hosts themselves. Mitch Keeler is a lively host who explains hosting topics in a down-to-earth way which anyone should be able to follow. The shows are also nice and short, so you can quickly get up to speed on subjects which interest you if you want to pick and choose which to listen to.

10. IT conversations

Finally, there are plenty of interesting web-related podcasts available from IT conversations. These are professionally produced and include interviews exploring the latest ideas from all sorts of perspectives. There’s a massive archive available, so you can fill up your iPod with weeks worth of material here. Free registration is required.

Review: WordPress.com Essential Training

I’ve been a subscriber to the lynda.com online training site for almost a year. I really enjoy the video training courses on offer there and find them especially useful for learning applications. Following along in books can quickly become dull and I find explanations which actually show the use of the product to be very effective. When I joined lynda.com, content management systems were at the top of the list of topics which I wished the site had more coverage of. I’ve therefore been very pleased to see recent training titles appear on Drupal, Joomla! and WordPress. Hopefully I’ll get around to looking at all these courses in time, but for now I’ve been going through the WordPress.com course hosted by Maria Langer.

Maria is a great host for the training and is very clear and enthusiastic. She uses a couple of her own blogs as examples through the course, which lends a nice personal touch. She also gives plenty of advice which sounds authentically drawn from personal experience. The training could easily be used by people with very little technical knowledge and starts from first principles: “What is a blog?” is the title of an early video. However, all the video lessons are free-standing and more advanced users could just skip to the later videos for the features they are interested in. The full version of the training has exercise files which let you develop the exact elementary school blog example built in the videos. However, unlike with some lynda.com titles, the files aren’t really essential and you could follow along easily enough without them.

Among the sections which would probably be most useful for a WordPress newbie, there is a clear description of the difference between categories and tags which people starting out with the package can find confusing. The section on working with comments is also very useful and contains some sensible advice for people new to blogging. The discussions at the end of the course on blog promotion and maintaining your blog are interesting and I would have welcomed it if these segments had gone on for longer.

However, the biggest issue for a lot of people with this course is likely to be that it only covers using the online service at WordPress.com and doesn’t include any specific training for the server install of WordPress. Although a lot of the subjects covered are still relevant for people using the standalone application, there is plenty to know about installing and upgrading WordPress which you won’t learn here.

If you want to hear Maria discuss some of the pros and cons of using WordPress.com vs a server install, there is a useful interview with her available on MacVoices which serves as a nice supplement to the training course.

MacVoices #8112: Maria Langer Talks WordPress.com Training and Why It Is Better on Video

The current WordPress.com training title is still a great guide for beginners seeking to start blogging and for people who’ve used other packages who want to get a basic idea of WordPress’s features. Maybe a good way for lynda.com to develop their WordPress training in future would be to keep this as the beginner’s level title, but also to produce an “advanced” WordPress course which includes discussion of the server installation, upgrades, backups and possibly further discussion of promotion and SEO for WordPress blogs. [Update (27/02/09) - I've noticed that  an advanced WordPress course by Maria Langer became available on lynda.com in January - see Self-Hosting a WordPress site.]

WordPress.com Essential Training is available from lynda.com as a CD-ROM, or online via subscription.

Review: Building Findable Websites

Building Findable Websites: Web Standards, SEO and Beyond by Aarron Walter is a book that I’ve got a lot out of. Its full of useful material which should be of real practical help to people involved in any facet of a web project. It has a refreshingly holistic approach which looks at website findability in the widest possible manner, avoiding the narrowly doctrinaire perspective of some writings on web standards, SEO or accessibility and including lots of examples which are immediately useful in the real world.

His wide-ranging remit means that the book will probably be most appreciated by webmasters or web project managers whose roles involve them needing to straddle a range of disciplines. Web developers, designers or SEO gurus may perceive some of it as unfocused as it switches rapidly between generalist explanations and low-level technical examples, with topics covered ranging over coding, server administration, marketing tips and WordPress implementations. However, this variety appealed to me and should ensure that most readers are going to learn at least something new about areas they may not know so much about.

After introducing the author’s concept of findability as a discipline, the book starts by discussing markup strategies. The importance of web standards and accessibility are predictably emphasised, but there’s also a spirited defence of the benefits of web standards for SEO which is interesting. The book then moves into a discussion of server-side strategies for findability with advice on domain names, search engine friendly URLs, redirects, 404 pages, optimizing performance and controlling search engine indexing.

The middle section of the book discusses content creation for findability and then includes a whole chapter on findability for blogs. This was probably my favourite single section and includes lots of specific stuff about using WordPress. There’s then a chapter on adding search to your site. This discusses a range of options, including both free and paid-for solutions. For me personally, the most useful tip in the book was on page 156 in this section. Here you can find out how to implement Google Custom Search Engine so that users who don’t have JavaScript won’t get an empty search results page, without having to direct all users to search results hosted on Google’s site. The apparent reliance on JavaScript had been putting me off using Google CSE where I wanted to integrate it into my own sites, so this was really useful to me.

The book continues with a look at solving findability problems with JavaScript, Flash and audio / video content. It then moves onto an overview of mailing lists before concluding with a chapter on “Putting Findability Into Practice”, emphasising the need to adapt the techniques introduced in the book to the specific needs of your own projects.

In general, the book’s got a nice readable style. The expected experience level of readers is pitched at “Intermediate to Advanced” according to the back cover and people just starting out may find some of the more technical stuff a bit daunting. However, there’s a decent effort made to explain even the more complicated concepts and beginners could still learn a lot. Good references are included to further reading and also to some relevant podcasts – which is something I really appreciate when authors include.

The companion site is a great addition to the published book. It includes a comprehensive list of links to useful resources and a further five chapters of the book available free. I thought the chapter on web traffic analysis was a particularly good introduction to the topic, but all of the free chapters are worth reading. There is also a Findability Strategy Checklist which acts as a quick reference for the topics covered in the book. This is a nice practical tool which could be useful for any web project.

Building Findable Websites: Web Standards, SEO and Beyond is by Aarron Walter and is published by New Riders.