Reflections on web design

More than ten years ago, when creating the first pages for my web site at Mantex, I made the somewhat hair-shirted decision to write all the pages by hand, using only Notepad. After all, most sites at that time were what we would now call primitive - as David Siegel said: "Like slide presentations shown on a cement wall". It was enough to have the excitement of links that worked, and the occasional uploaded graphic. Little did we know then what changes were to come over the enrichment of the online presence.

When I look back at versions of those early pages, I cringe - as I bet you do if you have anything on line which pre-dates the millennium. But I continued putting up data year after year. The site grew; the years passed. Dreamweaver became available, but I continued in my Amish way. Cascading style sheets beckoned, but seemed too steep a learning curve. And before I knew it the site had grown to over a thousand pages. A stylistic improvement could take a whole summer holiday to implement on every page.

When I hit 1,500 pages I knew it couldn't go on. A content management system was the answer to this problem - but even choosing something useable took some time. Now that I've settled on WordPress and begun the monumental task of transferring all those pages, one by one, it forces me to look at the evolution of the web in the last decade or so - and I'm struck by three things - interactivity, eCommerce, and information architecture.

Ten years or so ago site pages were not only like blocks of print transferred to screen: there was also nothing you could do except read them. Now we expect links, comments, dynamic updating, trackbacks, and invitations to participate in one thing or another. On big sites like Amazon we expect to be recognised as soon as we log on. Phew! This is some development.

Ten years or so ago, given the origin of the web in the world of scientific research, advertising was taboo. People went to extraordinary lengths to block adverts, conceal product placement, and prevent anything that smacked of earning a living. Now we recognise that sites need to generate a little something to stay alive. If Joe Schmuck is willing to give away lots of information for free on his site, who are we to complain if he has Google Ads in his side column? The banner ad went through three transformations. First it intruded and got up everybody's nose; then it was ignored; and now it has the sense to slide into a side panel. The user has learned to ignore, tolerate, or filter out ads from the page.

Ten years or so ago we didn't have the tools for organising huge amounts of data - except those of sorting and labelling which were a hangover from the original information architects - librarians. The design solution at the time seemed to be a list of topics in the left column, using frames - remember those? But now content management systems have the built-in tools for categorizing and tagging which mean that we are invited to take meta-data seriously. Information is not really given its full value until it is described, given a title, and linked to others of its kind.

Not only that, but the nifty plug-ins to WordPress I'm using even generate breadcrumb trails and navigation bars automatically. This is all a long way from spidery links on home pages, underlined in default blue, which we saw all those years ago, along with centred logos and animated gifs. There are no doubt plenty more eye-popping developments in the pipeline, but for the web to come of age in just a decade is cause for some sort of awed celebration.

WordPress for Business Bloggers

When blogging first took off in the mid 1990s the mainstream media viewed bloggers with lofty contempt. I can remember both the BBC and the Guardian making sneering 'get a life' comments about bloggers daring to report their own version of news. Now, there isn't a newspaper or broadcast organisation which doesn't boast its own bloggers and doesn't welcome the contribution of user-generated content. At the same time, some individual blogs have become phenomenally successful. Arianne Huffington's The Huffington Post became an instant hit as an Internet newspaper, and one-man-band UK political blogger Paul Staines proudly displays his end-of-month site visitor statistics which outstrip those of national newspapers. This sort of popularity has attracted advertising revenue, and there are now individuals whose blogs are now a full time business... Read more >>

more eCOMMERCE books

CMS - categories, structure, and navigation

I've written before about my appreciation of CMS. With a hand-written website of nearly 1,500 pages, I was well off for content but badly in need of some management. (This is all part of my site re-launch process.)

There's quite a learning curve, even when the software is as well designed and fully featured as WordPress.

But what amazes and still delights me is the way that the user is given such powerful control by the conceptually brilliant idea of keeping all aspects, features, and even relationships of every object separate.

I've just managed to completely re-configure the site structure and navigation of my site re-design without touching a single page. The pages remain in the database where they were before. All I did was change the categories to which groups of pages belong.

Geeks may scoff at this and say - "Of course content management systems work like this. That's what they're supposed to do." But writing as a non-Geek, I can tell you that this level of technological design control is wondrous to behold.

WordPress 2.7 Complete

WordPress started out as blogging software, but it has grown rapidly into a fully featured content management system (CMS). That's partly because it was well designed in the first place, but mainly because it is open source software (OSS), which means that designers and programmers all over the world have contributed to its development and improvement. This effort comes mainly in the form of extra modules for the basic program. These are plugins which increase the range of features and enhance what WordPress can do. But like many other OSS programs WordPress comes without an instruction manual, which means that it's hard for beginners or new users to get to grips with what's under the bonnet. There are user forums and FAQs, but most people will feel more confident with an instruction manual, which is why this guide from April Hodge Silver is welcome... Read more >>

more eCOMMERCE books

Reflections on web design

More than ten years ago, when creating the first pages for my web site at MANTEX, I made the somewhat hair-shirted decision to write all the pages by hand, using only Notepad. After all, most sites at that time were what we would now call primitive - as David Siegel said: "Like slide presentations shown on a cement wall". It was enough to have the excitement of links that worked, and the occasional uploaded graphic. Little did we know then what changes were to come over the enrichment of the online presence.

When I look back at versions of those early pages, I cringe - as I bet you do if you have a anything which pre-dates the millennium. But I continued putting up data year after year. The site grew; the years passed. Dreamweaver became available, but I continued in my Amish way. Cascading style sheets beckoned, but seemed too steep a learning curve. And before I knew it the site had grown to over a thousand pages. A stylistic improvement could take a whole summer holiday to implement on every page.

When I hit 1,500 pages I knew it couldn't go on. A content management system was the answer to this problem - but even choosing something usable took some time. Now that I've settled on WordPress and begun the monumental task of transferring all those pages, one by one, it forces me to look at the evolution of the web in the last decade or so - and I'm struck by three things - interactivity, eCommerce, and information architecture.

Ten years or so ago site pages were not only like blocks of print transferred to screen: there was also nothing you could do except read them. Now we expect links, comments, dynamic updating, trackbacks, and invitations to participate in one thing or another. On big sites we expect to be recognized as soon as we log on. Phew! This is some development.

Ten years or so ago, given the origin of the web in the world of scientific research, advertising was taboo. People went to extraordinary lengths to block adverts, conceal product placement, and . Now we recognize that sites need to earn a little something to stay alive. If Joe Schmuck is willing to give away lots of information for free on his site, who are we to complain if he has Google Ads in his side column? The banner ad went through three transformations. First it intruded and got up everybody's nose; then it was ignored; and now it has the sense to slide into a side panel. The user has learned to ignore, tolerate, or filter out ads from the page.

Ten years or so ago we didn't have the tools for organizing huge amounts of data - except those of sorting and labeling which were a hangover from the original information architects - librarians. The design solution at the time seemed to be a list of topics in the left column, using frames - remember those? But now content management systems have the in-built tools for categorizing and tagging which mean that we are invited to take meta-data seriously. Information is not really given its full value until it is described, given a title, and linked to others of its kind.

Not only that, but the nifty plug-ins to WordPress I'm using even generate breadcrumb trails and navigation bars automatically, according to the terms I decide. This is all a long way from spidery links on home pages, underlined in default blue, which we saw all those years ago, along with centred logos and invitations to 'click here'.

Content Management Systems - for beginners

Ten years ago I sat down and started to learn HTML code with a view to creating my own web site. Actually, that is a process which continues to this day, because it's a technology which cannot be mastered in an instant - as anyone with half a brain will agree. It wasn't as easy as some guidance books make out, but I persisted; and 1,500 pages later, I have something of which I am not ashamed at www.mantex.co.uk. But as it grew in size, I realised that I needed to move from hand-crafted pages and navigation to a content management system (CMS).

These are stand-alone, modularised programs which can be used to create, edit, review, index, search, publish and archive a large scale collection of materials. They are reputed to take much of the slog out of dealing with complex web sites - and I was eager to avoid having to change a single detail of my site 1,500 times on each occasion of coming up with a bright new idea.

But where to start? My son gave me the first piece of good advice. "Whatever you do, avoid in-house, custom-made systems". This turned out to be correct. I even put out tenders to some web-designers, and almost all of them came back with solutions which would mean being locked into their systems - which hardly anyone else would be using, and which might go out of business in six month's time. The answer was obvious - use Open Source systems. I located Drupal, Joomla, and WordPress.

For the next few weeks I dabbled with all three, and was led into a labyrinth of puzzlement and time-consuming frustration - all because I had not grasped some fundamental concepts about CMS. In the end I settled on WordPress because it seemed easier to use - but the fundamental concepts (and problems) are similar with each program. Some of these might seem elementary to expert users, but as a rule of thumb I always think that if I am struggling with something, there will be plenty of other people in the same boat. Hence these notes.

The number one conceptual issue (and I've not seen it mentioned in any guidance manuals) is that what you see on screen whilst inputting data has nothing to do with what the finished results will look like. That's for two reasons.

The first is that the interface for entering the data is just a tool, - it's not part of the end product. But the far more important reason is that when using CMS the content of your site is separated entirely from its appearance on screen. Why is that the case?

Because in CMS all items - text, graphics, links, titles, sub-titles, adverts, and stock items - are entered separately and kept in different places from each other so that they can be recombined in a number of different ways at a later date. This avoids having to re-submit data each time a new page is created.

For instance, the content of footer to a page is usually fixed. It might contain the name and address of the organisation; the contact details; a copyright notice; terms and conditions; a datestamp; and web links. All of this information goes into one file, and that file is added to the bottom of every page. If anything changes, you edit the file once and the change appears on every page throughout the site.

How does this work? Well - all the separate items of information - the text, the graphics, the footers, and the adverts - are entered into a database (probably MySQL). The database keeps all these separate items in their own ''containers' until they are summoned to appear. Text goes into one container; graphics will go into something like a photo album; and so on. So far so good, but how do they get from the database onto the screen?

Enter two more layers of software. A program called PHP decides what to drag up into the screen. It is software which is programmed to decide which elements of a page to assemble. First grab the header, add the body text, throw in any graphics, then finish off with the footer. Templates decide where and how that information is displayed, and the appearance of the information on screen is determined by style sheets (CSS).

This probably sounds complex, but you can see the logic which lies under the process. Put any number of elements into a big database, then summon up those you require. It's a combination of these separate elements: the database in which the elements are stored; the program which summons the elements; a template which determines how the elements are arranged; and a style sheet which determines their appearance on screen. Makes it sound quite simple, doesn't it? No - I thought not.

Content Management Systems have huge advantages, and they also have problems. For instance, one enormously powerful in-built feature is that you can designate which parts of a site a particular page belongs to, and the CMS software will automatically work out the navigational system for getting there. For instance, a page on Virginia Woolf can be categorised as belonging to a sub-category twentieth-century literature in a main category Literary Studies - but it can also be attached to pages listed in categories 'Bloomsbury', 'Modernism', and 'Literary Criticism'. That's the upside. The downside is that you still need to know quite a bit about information architecture to know how to control all this.

And there's another thing. You'll endlessly be asking yourself - &qot;I've just created a new page. Where is it now? And how can I find it?" It's not easy to keep a mental picture of all your assets (as they're called) when everything is disappearing into that big database.

That's more or less where I'm up to right now - and I know there's still a long way to go. But if like me you're still a beginner, I just thought these few words might help.

Using Drupal

Drupal is the most powerful, industrial-strength option amongst the open source content management systems (Drupal, Joomla, and Wordpress). But it's notoriously difficult to configure and manipulate. Hence the up-front sub-title to this publication. The answers to the problems have been supplied by designers creating plug-in modules which deliver separate functions. These all sit on top of the Drupal core. The user is left with 'only' the task of getting these modules to work together. And as anyone who has tried it will tell you, it's no mean task. That's where this guidance manual comes in. It takes you through a selection of the most basic add-on modules you'll need to get a site up and running. It's written with the latest version of Drupal in mind (6.0) and you should be warned that modules written for other versions (5.0 and earlier) are not compatible with the latest version, and ... Read more >>

more WEB DESIGN books

Universal Design for Web Applications

Universal design is a general principle, but it's used here as something of a coded term for two topics which are discussed in detail. One is designing for people with disabilities, and the other is designing for a variety of devices - PCs, laptops, PDAs, and most challenging of all, for mobile phones. The argument is that more people fall into the disability category than is generally realised, and that for huge numbers of users the mobile device is now the principal means of accessing Internet services. Fail to take these two factors into account, and you are automatically falling behind in providing what users want. The first important piece of advice these authors offer is that you should separate content from presentation in everything you design... Read more >>

more WEB DESIGN books

Enterprise 2.0

The title of this book combines two coded terms - Web 2.0 and 'The Enterprise' - for which read social networking software' and Big Business. And the purpose is to show how the techniques and concepts behind Web 2.0 applications (blogs, wikis, tagging, RSS, and social bookmarking) can be used to encourage collaboration efforts in what was previously thought of as secretive, competitive businesses. It's an argument which is fast becoming quite familiar. To succeed in modern business, managers and directors must learn to listen and talk to their customers and staff. They need to be more agile in their thinking, less monolithic in their practices, and they need to catch up to new Internet-based activities which can sweep away unwary traditionalists overnight [look what happened to Encyclopedia Britannica] and create muti-billion pound enterprises almost as ... Read more >>

more E-COMMERCE books

Website Optimization

Andy King scored a big hit in 2003 with his first book Speed Up Your Site. It's a guide which still has its own live web site where you can analyse the effectiveness of your web pages. This latest magnum opus goes way beyond that in scope and depth. It's a guide to maximising every aspect of a website and its performance. It's an amazingly practical manual, with page after page of ideas, suggestions, and strategies for getting your pages more widely known and read. On the whole, it's not too technical, and he supplies snippets of code only when necessary. All the tips are within the grasp of anyone who is used to running a web site, and along the way he explains the principles of search engine optimization (SEO) as well as briefing you on how SEs treat your site... Read more >>

more WEB DESIGN books

Free Online Study Skills Courses

The Online Guardian reported yesterday that UK examination board OCR (Oxford, Cambridge, and RSA) would soon accept web sites, podsites, or blogs as evidence of learning in its newly revamped media studies A level syllabus:

traditional essays will no longer form part of coursework. Instead, pupils will be expected to submit some of their work in the form of podcasts - a series of audio or video files downloaded over the internet - or blogs - informal internet journals.

This suits those of us labouring away at www.Texman.net just fine - because we have online courses featuring web design and podcasting which prepare students who are about to take their A levels (and anyone else, for that matter). And in fact we have just allocated 250 free places on these courses on a first-come-first-served basis. Any school, college, or university can apply for up to ten free places. Students work with interactive exercises and video tuition entirely on line, and those successfully completing the course receive a certificate from City College Manchester. See the range of courses at www.Texman.net. Further details and applications available HERE.

 

Designing Web Navigation - book review

Anyone who has ever designed a web site will know that navigation of its contents is a key issue in the site's usability. Visitors must be able to find their way around - otherwise they'll leave, and they won't come back again. Successful navigation systems require good screen design, well thought out information architecture, clear labelling, logical hierarchies, and effective linking. This book deals with all these issues in an extremely thorough manner. Every aspect of navigational design is examined in close detail - through both theoretical models and technical research, and a practical examination of a wide variety of large scale web sites from around the world. It's a beautifully presented book, with elegantly designed pages, full colour illustrations, and scholarly yet unobtrusive footnotes leading to web references and recommendations for further reading... Read more >>

more WEB DESIGN books