Designing the Web from the Content out

Design No Comments »

It can be safely said that we’re in the era of Web 2.0. New technologies abound to bring far richer experiences to the end user through the medium of the browser. The technologies and capabilities of browsers have evolved considerably since the mid-90s, so should we not review the creative and production process of how we design and build websites so that our processes keep pace with capabilities?

In the mid-90s - and it’s a technique that is still widespread today - the website design (how it looks) is often the first things that gets produced - before any content is written, before any photography or illustration is planned, before any functionality is considered. Often, even the content structure (approximate number of pages. navigation structure, etc) is not known or has not even been thought about.

This approach is inherently flawed for a number of reasons:

  • It sets wrong client expectations
  • It creates problems for the designer after the design is signed-off
  • It creates problems for the developer
  • It creates problems for the website visitor

These are not trivial issues, so why do many agencies and freelancers still persist in adopting this “design first” approach?

Client Expectations

Once the design is complete and signed off, it is usually what they expect to see on screen once all the development work is complete. However, if content has not been thought about before the design work starts it is very easy to fall into the trap of discovering that there is much more content that there is available space in the design for, or there is supplemental content which would be nice to have alongside the primary content but there is nowhere to put it.

Consequently, design changes will be necessary during development to accommodate the actual content. This may, in the worst case, mean a complete redesign which could be costly.

Problems for the designer

Following on from the client expectations, it is quite easy to see that the actual fault lies with the designer for not ensuring that the site conformed to the primary requirement of being suitable for the content. Theoretically, the designer should fix this problem before development begins. The designer then needs to manage and realign the client’s expectations as well as deal with the fact that they now have an extra workload to accommodate which may be unpaid.

Where the designer and developer are separate, as in the case of freelancers or agencies working together, it is sometimes left up to the developer to sort out the mess.

Problems for the developer

At this stage, we are now 2 steps removed from the content and the developer is left in the difficult position of trying to fit a quart into a pint pot - an old expression which means trying to fit too much into too little space. The problem is exacerbated when the client expects the developer to be able to fix the layout problems caused by too much (or not enough) content, especially when the developer is purely technical and does not have visually acuity as I have discussed in earlier posts. The problem can be reversed when the client insists that the design is followed strictly but the content can’t allow this.

Problems for the website visitor

Once all the hacking has been done by the various people involved - the client, the designer and the developer - the end result may not be an ideal experience for the website visitor. After all, the website should be designed to present the client’s information in the best possible fashion so that the required messages are delivered clearly and succinctly, the site is easy to use and a pleasure to experience, produces a favourable brand experience, is easily navigable, visitors don’t get lost, products get sold, etc, etc. If we haven’t started from a content out approach, as we have seen from the preceding three problems, we can very easily dilute the experience and fail to deliver the message because design is more important than content.

So why do many agencies and freelancers still persist in adopting this “design first” approach?

Simply because that’s how everybody does it, and it seems that’s how the client expects it to be.

An analogy

When you buy or rent a house you have to accept the limitations of that house; after all it was built in advance of you moving in; the designer, architect and builders didn’t know what furniture you had and so could only created generic spaces to live in. You can’t move the walls (without major work) and so you have to make your furniture fit when you move in. This might mean there is too much space and you need to buy more furniture, or you need to get rid of some so that what you have left fits properly. And you will probably redecorate.

However, on the web we have the advantage that we can measure your furniture (content) before you move in, and design each room (page) to fit perfectly around your content. Consequently, we can build a perfectly tailor-made house (website) for you. But few people adopt this approach and we end up with the problems above which can easily be avoided if we adopted a content-out approach to web design and development.

If we try to do it the house-building way, we often run into additional costs and delays mid-project when the client’s content arrives and we find it doesn’t fit the original design. Who bears those costs is another topic entirely!

Why content-out is a good approach

The web is a content delivery medium; the more effectively we can deliver the content to our target audience, the more effective our website will be for our business. So, if the web is a content delivery medium, shouldn’t content be the most important element of our design and development process?By starting with the content we can align every member of the team to the core purpose of the site, from the stakeholders through to the sales and account managers, and on to the project teams - information architects, designers, developers. With every member aligned to a common purpose, it is much easier to achieve that purpose than if different members or teams operate in relative isolation only to come together towards the end to find their individual pieces of the puzzle don’t quite fit together.

To summarise; Content-out design is a good approach because it:

  • Improves cross-team and inter-team communication
  • Ensures everybody is working towards the same goal from the start
  • Clarifies the goals much earlier
  • Avoids unnecessary surprises and consequential rework
  • Establishes the relationships between the different content elements early in the process
  • Improves efficiency and allows developers to start earlier in the project lifecycle
  • Creates a real sense of how the site will work much earlier than traditional methodologies

Microsoft sets Email design back 5 years

Newswatch No Comments »

It was inevitable really - Microsoft have finally decoupled Internet Explorer from Microsoft Office.

With the release of Outlook 2007, Internet Explorer will no longer be used as the HTML rendering engine from within Outlook, instead using the Microsoft Word rendering engine within the Office suite. While this more clearly separates the browser from the operating system for anti-trust reasons, it has a negative impact on HTML email newsletters (irrespective of whether you are for or against them).

Outlook has approximately 75% of the corporate email market. As this represents huge volumes of HTML-capable clients, it’s not something that can be ignored given that most HTML email designers have been adopting more standards-based approaches including CSS. The problem is that Outlook 2007 no longer supports much of this. Here’s the headlines:

  1. No background images - Background images in divs and table cells are gone, meaning the image replacement technique is out the window.
  2. Poor background colour support - Give a div or table cell a background color, add some text to it and the background colour displays fine. Nest another table or div inside though and the background color vanishes.
  3. No support for float or position - Completely breaking any CSS based layouts right from the word go. Tables only.
  4. Shocking box model support - Very poor support for padding and margin, and you thought IE5 was bad!

Microsoft have released a full run down of what is and isn’t supported, including a downloadable validator that helps you validate your HTML for their engine. Word of warning though, it only works with Microsoft software and Dreamweaver.

This really is a game changer. Previously you could send a HTML email in the comfort that the majority of your recipients would have very good CSS support. Other email clients were also catching up. Thunderbird uses the Firefox rendering engine, the new Yahoo! Mail beta has great CSS support. Things were looking good for us CSS based email designers.

Unfortunately, that no longer applies. In the old days, if your email broke in Notes or Eudora, it was often an acceptable casualty, but if it broke in Outlook you’re more than likely ostracising too many recipients to justify your design approach. This certainly doesn’t spell the end for HTML email, it just takes us back 5 years where tables and nasty inline CSS was the norm.

Imagine for a second that the new version of IE7 killed off the majority of CSS support and only allowed table based layouts. The web design world would be up in arms! Well, that’s exactly what the new version of Outlook does to email designers.

You can read more about this in the original article at Campaign Monitor.

For email designers, there is a useful tool which helps validate HTML emails across the majority of email clients. The tool is called SiteVista and you can read more about it here.

Why is there so much spam?

Security No Comments »

In October 2006, the spam levels jumped a massive 10% in the UK (up from an average of 51.4% of emails being spam in September to 61.4% being spam) according to MessageLabs (the world’s leading provider of messaging security and management services to business). Globally the average went up by 8.5% in October 2006 to 72.9% of email received being spam.

Source: Message Labs Spam Percentages
Source: Message Labs, October 2006

This was, in part, due to it being the start of the spam season in the run up to Christmas - ie more junk gets sent to catch unsuspecting shoppers. However, aside from seasonal variations, there are other two other key factors at play in the increase in spam.

  • A trojan horse called Warezov which, once installed on a person’s PC, sends out spam continuously. The trojan horse has been spread to hundreds of thousands of computers.
  • A trojan horse nicknamed SpamThru which harvests email addresses and uses them to generate spam content which gets sent out. Again, this has been downloaded onto huge numbers of computers.

It’s not clear at this stage if there is a link between them - ie SpamThru harvests email addresses and pushes content through to Warezov - but the fact is that these 2 trojans have contributed to the majority of the increased volume of spam over the last few months and the trend is unlikely to change.

A clever trick employed by SpamThru is that it contains a hacked copy of Kaspersky Anti-Virus which actually does clean up the computer and remove spam bots, viruses, etc. However, it’s been hacked to allow SpamThru to remain undetected and unchallenged by other spam bots on that computer. Consequently, people may also unwittingly install SpamThru because they think they are getting a free virus program, but they are being duped into installing a spam system.

The messages are clear:

  • Spam is not going away, and will get worse
  • Only ever download software you know the pedigree of
  • Find a good spam filtering system

In more detail: Warezov

The first is the aggressive level of activity around one particular trojan dropper called Warezov. Tens of thousands of copies of different variants of the trojan are sent out in multiple batches, where each batch is subtly different from the previous one. Even a few bytes changed in the code will allow the trojan to pass undetected through traditional anti-virus protection. Because it is a “dropper” (a piece of code that later downloads new code/viruses/worms/malware/email content/etc onto the affected computer) it is uncertain as to what the trojan is being used for, however it seems clear that there is a connection with the huge rise in spam levels around the world. In fact, in 24 hours on 26th October, MessageLabs software trapped over 900,000 copies of Warezov. It’s been around since August 2006 and is being updated all the time to avoid detection and so continue to spread spam.

In more detail: SpamThru

The second driver of increased spam is another trojan, dubbed “SpamThru” which is responsible for a great deal of the botnet activity behind increased levels of spam. Analysis of SpamThru shows that the SpamThru makers are releasing new strains at regular intervals in order to confound traditional anti-virus signature detection. Using the “spam cannon” technique, SpamThru uses a template for each spam it sends and by combining it with a list of email addresses, each zombie (computer) is then able to pump out millions of spam emails.

Although designed to turn the infected computer into a spam-sending zombie, SpamThru employs an interesting device to circumvent the closure of the command-and-control channel. In a normal botnet, there is a central “controlling” program (called the mother-ship) which coordinates and keeps everything running. If this mother-ship is disrupted or disconnected, the entire botnet is disrupted or disabled. However, SpamThru has a “self-healing” capability in that if the mother-ship goes offline, as long as the botnet controller can access any other zombie macine, they can change it to assume the role of the new mother-ship and so maintain the continuity of the whole botnet. In other words, SpamThru is much more resilient to attacks on the mother-ship and less likely to be stopped.

SpamThru also attempts to neutralize anti-virus software by corrupting the local “hosts” file, inserting dummy addresses to override genuine anti-virus update URLs. SpamThru also downloads an illegal copy of Kaspersky Anti-Virus onto the infected computer, scanning the PC for viruses, whilst ensuring that it bypasses its own components. Interestingly, any other malware found on the system is removed the next time Windows reboots.

Architecting Great Websites, Infrastructure

Strategy No Comments »

Contents

The infrastructure is the glue that links all the systems together – it includes the pointers to make sure your domain name points to the web hosting, the set-up of your internal systems used to access email and any other links that may be needed between the website and your back-office systems.

Website Infrastructure

Aside from the hosting itself (covered in another post), the website infrastructure consists of:

  • The domain registrar
  • The hosting company (can be the same as the registrar)
  • The server and network configuration
  • Email service provision
  • Data backup

The domain registrar is the first link in the chain and care should be taken to select a good registrar who offer a fully featured control panel that allows you full control over your domain name(s) so that you can fully manage the DNS, lock and unlock domains, update details, and transfer domains in and out. There are still a number of registrars today who don’t offer these features and some of these registrars can be very slow in responding to emails or faxes to update information about your domain. The end result of using a less capable registrar can mean delays in launching or updating your website. It took over a month for me to transfer a domain from a well known UK registrar recently because they only responded to email support requests and took 2 weeks to do so, usually with a question which required more email correspondence and another 2 weeks “in the queue”. Furthermore, some ISPs won’t even talk to the web developers because they are not officially a contact for the domains and so every communication has to go via the client.

Even if it costs slightly more (and we’re only talking a pound or two), choose a registrar with a fully featured control panel. We recommend 1&1.

For most businesses starting out, you will probably take up a virtual hosting account with your registrar. This will either be a Windows or a Linux server, and this will influence the type of programming you can do on it. If you have appointed a web design company (like ourselves) prior to setting up your hosting, ask them what they need before picking a package. We have had to change platforms from Windows to Linux and add additional services in the past - this takes time, introduces delays and can add cost.

We run our own Linux servers in a London data centre, so we usually point the domains registered with the registrar to our name servers so that we can fully manage the hosting and email on behalf of our clients. This is why the DNS management is important in the registrar’s control panel as there are no delays in updating the settings and getting the site running. Even though you may use your registrar’s hosting facilities initially, you may want to change this in the future. DNS management is also essential if you want to do something called “delegated subdomains”. What this means is that you can host www.mydomain.com on one server and clients.mydomain.com on another. Without DNS control this may not be possible as some ISPs won’t allow you to do it.

When you have full control over the DNS (either at the registrar or through your own name servers) you can also manage the provision of email services. Most ISPs offer POP3/IMAP by default, but with DNS control this can easily be replaced with your own internal Microsoft Exchange server or a any other third party email system. Having this level of control also allows for the introduction of spam and virus checking on the email service.

Data backup is also recommended just in case something goes wrong; for example hardware (disk drives) can sometimes fail and the system needs to be restored. Virtual hosting companies may not offer this as an option (see related hosting post).

Client Infrastructure

This is the IT set-up required to access and use your website.

Some larger businesses host their own website on their own internal website servers. Such businesses often have their own internal IT teams to set up and manage such servers, or outsource this function to an IT support company.

A client’s internal infrastructure includes the set-up and management of firewalls to provide security on their network, as well as the deployment of email software to the desktop or via a server (e.g. Microsoft Exchange). The email system either downloads the emails periodically from the POP3/IMAP accounts on the web server, or act as a full server where the email is delivered to directly. Often, virus and spam protection software is installed in the client’s infrastructure.

The other component of client infrastructure is the provision of business logic (programs) that access information on the website itself. These can be simple import routines which enable downloaded information to be imported into internal systems and software (for example financial data imported into Sage), through to more complex systems which fully integrate the website systems with the internal back-office systems ensuring a seamless transfer of data both ways between the business and the website. On our Internet Maturity Model, this is Level 4. Such business logic does not include content management systems which are considered part of the “site engine“.

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Login