Mashed Articles

Building a great website is tough, but finishing the code and layout is only half the story. Too many sites have problems after going live because they weren’t tested properly first. Lots of things can and do go wrong, from poorly formatted code that some browsers choke on, to pages that break when opened on other platforms. If you developed your site on a Mac, what guarantee do you have that it’ll look the same on a PC, for example?

Your site is a prism for browser light. Make sure it’s not a flawed one.

Even now, when HTML structures are likely to be served as part of a CMS template system, it’s important that all the basics are in place. You need a soak test: a checklist of crucial areas that you can test are working before the site goes live. That’s exactly what we’ve put together here. Follow our tips and your site will be as problem-free as possible.

Clean up your code

Clean, glitch-free code with no stray tags or unclosed comments looks better, is easier to edit and is less likely to spring surprises on you when your site goes live. WYSIWYG web authoring tools already include features for tidying up your code. Let’s face it – some of us really need them. Dreamweaver will even format and indent your HTML following your configuration guidelines. Go to ‘Commands | Clean Up HTML’ or ‘Clean Up XHTML’.

We prefer to run static code through HTML Tidy, which is available as a stand-alone program from http://tidy.sourceforge.net/#binaries, or as a plug-in for manual code-editing tool NoteTab Light. The software deletes stray tags, adds any missing tag elements and completes open tags for you.

Meet HTML standards

Compliance with World Wide Web Consortium (W3C) standards makes your sites more accessible and usable, and also helps them to perform well on multiple platforms. You can see whether your site is compliant with XHTML and CSS standards by using W3C’s online validation tools. You’ll find the main testing page at http://validator.w3.org. This gives you a full breakdown of all the syntax and code errors in any page submitted. You can then update your code in accordance with the guidelines. Don’t be disheartened if your site fails. Some of the web’s biggest sites have XHTML errors according to the validator, including Google and Microsoft’s homepages.

There are numerous tools online that will validate your site for compliance with the relevant standards.

To use the W3C’s validation tool, go to http://validator.w3.org and enter the URL of the web page you wish to test. You can also upload code from a local machine or paste HTML mark-up into the Direct Input box. The validator can only check one page at a time.

Meet CSS standards

There’s a second service available to help you check and correct CSS scripts. It can be found at http://jigsaw.w3.org/css-validator. Again, you can point the validator to a version of the file you wish to check online, upload the code or paste it directly into a box.

The errors returned come with detailed explanations of how you can fix them. The validator will identify even the smallest of problems, including missing line terminators and brackets.

Enable resizing

Remember the early days of the web, when sites came with front-page disclaimers such as ‘Optimised for Internet Explorer at a resolution of 800 x 600 pixels’? How we groaned. Don’t forget that people are viewing your site on different platforms, with different display settings and monitor resolutions. Enabling your page to resize to any browser means that it will work better on multiple platforms, from desktop machines to handheld devices. The key is to use percentage sizes when creating <div> layers rather than specifying fixed sizes. It’s a tough habit to get into, especially if you’ve become used to creating exactly positioned layouts.

Resizer is essential for testing the flexibility of your site’s design.

First, check that your site looks good on the largest monitor size your setup can muster, then work backwards – down to 800 x 600 pixels. Right-click your Windows desktop and choose ‘Properties’. Click ‘Settings’ and you’ll be able to change your default desktop resolution using a slider. If you use Vista, choose ‘Personalise’ from the contextual menu instead. It’s even easier in Windows 7 – there should be a right-click menu item labelled ‘Screen Resolution’. Some video card control panels let you do this without venturing into Windows’ display settings.

Test on all browsers

It’s important to make sure that pages look the same in the big five browsers: Internet Explorer, Firefox, Chrome, Safari and Opera. Fire up your site in each of these and make a careful comparison. Here’s a quick tip: if you have two browsers open showing the same page, right-click on an empty part of the Windows taskbar and choose ‘Tile windows horizontally’ (or ‘Show windows side by side’ on Windows 7). This makes it easier to spot differences.

Five browsers on one system may seem like overload, but there are ways to cut that down. If you’re a Firefox user, you can install IE Tab, a plug-in that enables you to view pages using Internet Explorer’s rendering engine. There’s also Chrome View, which renders pages in Firefox using Google Chrome. In short, get Firefox.

Test on Macs and PCs

Your pages should look the same on Macs as they do on PCs running Windows, whether you have access to one or not. The best method is to borrow a Mac to test your site. If you’re developing for a professional audience, you can employ the services of Browsercam instead.

The Litmus test. Run your site through actual browsers on actual operating systems. For a price…

Litmus uses a bank of testing machines running multiple browsers on all the main OSes. For a subscription fee of $49 (£30) a month, it lets you test an unlimited number of web pages. You enter your site’s URL and receive screenshots as it appears on Macs and Windows systems running any of 24 web browsers. Most of the important ones are included, with different iterations of Firefox, IE and Chrome on Windows, and Safari and Camino on the Mac. The only current important omission we can spot is the Mac version of Chrome. $39 (£24) buys you a 14-day ‘project pass’, which is a good choice if you only have a single site to test.

Testing for free

These are trying financial times for most of us, so here are a couple of free solutions. The runaway leader is Adobe Lab’s Flash- and Flex-based BrowserLab. It’s similar to Litmus in that it gives you a side-by-side view of a given URL in a set of chosen browsers. The tool is currently in limited beta and you’ll need an Adobe user account to use the service. Once in, you enter a URL, pick a browser and platform (or choose from the default browser set), then pick your view. As well as side-by-side comparisons, there’s an ‘Onion Skin’ mode that helpfully enables you to see the output of one browser laid over that of another. BrowserLab renders pages using the main browsers on Mac and Windows.

If you’re unable to access BrowserLab, BrowserShots was once a favourite of ours and is still good for checking multiple versions of Internet Explorer on Windows. Support for Macs has waned, but there are Linux- and Windows-based WebKit browsers included. WebKit is the rendering engine used in Apple Safari, and Google Chrome uses a tweaked version.

Check your gamma

A perennial brain-ache for designers working on Macs and PCs is that, until recently, Mac displays had different default gamma settings to PC monitors. These settings determine the relative brightness of the screen. PCs have a gamma setting of 2.2, whereas Macs had a gamma setting of 1.8. We say ‘had’, because that changed with the release of OS X 10.6 (Snow Leopard), which sets display gamma to 2.2 – the same as PCs and TVs. Even so, many people still use older Macs, and there’s a disproportionate number of Mac-based designers. The result? Images produced on pre-Snow Leopard Macs can look muddy on PCs, while PC-created pics can seem washed out on older Macs. The solution is to check images at both gamma settings to make sure they look OK either way.

You can never be entirely sure of the look of your site, but it does pay to test varying gamma settings.

Adobe Photoshop has a built-in Mac (or PC) gamma preview feature. Select ‘2 Up’ in the Save for Web dialog, then set an image to render using the setting ‘Macintosh (no colour management)’. It’s arguably more important that Mac-based designers get it right than PC users – and if you’re a Mac owner, you can switch your display to PC gamma in the Display section of the System Preferences panel. Click ‘Colour’, choose the current profile and click ‘Calibrate’. Work your way through the Display Calibration Assistant and choose ‘2.2 Television Gamma’.

Buy a Mac

If you have a lot of sites to test, it might be worth investing in one of Apple’s diminutive Mac Minis. They start at £510 (or even less on the second-hand market), are small, stylish and make excellent media centre PCs. Load yours up with Google Chrome, Camino and Firefox and you’ll be ready to test as many sites as you need to. You don’t even need to leave your PC to do so – you can use free remote desktop software TeamViewer to access and control any application on a TeamViewer-equipped Mac from a PC, or vice versa. The machines don’t even have to be on the same LAN, because connectivity is routed over the internet.

DDA accessibility

Your site needs to be accessible to all users – that’s the law. The Disability Discrimination Act is the main legislation covering this area, and the guidelines you need to match have been laid out by the World Wide Web Consortium. Full details are at www.w3.org/WAI.

Accessibility testing will help make your site available to all potential visitors.

There are fewer online accessibility testing services available in 2010 than there were in 2000 because many of them have become commercial. For example, you can use Adobe Dreamweaver to produce an accessibility report. Go to ‘Site | Reports’, then go through the Accessibility section to select elements to test.

Fujitsu offers a free tool that does a similar job, letting you test your site locally on Windows or Mac OS X. Download the Web Accessibility Inspector from www.bit.ly/aDgNZD. There’s also the Fangs screen reader emulator (www.bit.ly/bDhCfQ). It’s an add-on for Firefox that shows you how your pages will be seen by readers, enabling you to tweak the textual content.

Speed

The need for speed never went away – you should still optimise images and link to multimedia rather than embedding it directly. This is particularly pertinent in the light of Google’s recent admission that page speed is a component of its labyrinthine page rank algorithm.

OctaGate SiteTimer is a free service that not only tells you how speedy your pages are to download, but also pinpoints exactly where any bottlenecks may occur. As pages download, SiteTimer saves data on every element, recording how long each takes to download. More recently, Google came up with Page Speed, a Firefox add-on that you can use to generate a report on your code and your web server’s efficiency in delivering it. If there’s a bottleneck, Page Speed will find it.

User experience testing

Big web companies pay lots of cash to have their sites tested by specialist usability testing agencies. They’re looking for problems with the navigation system, embedded media and the site’s overall flow. However, you can cobble together your own tests with very few resources. All you really need is a group of people, some computers, a site to test and the right set of questions. Your first task is to gather a test group together. The group doesn’t have to be large, but its makeup should correspond roughly to your site’s target demographic.

Present your subjects with variations on your site or page design. Are you unsure where the shopping cart works best, or whether that dark, hi-tech colour scheme works better than a lighter, cleaner presentation? Try the different layouts out on your group of test subjects.

Put together a list of questions to ask your test group. You could ask them to rate site navigation, look and feel and whether they could easily find what they wanted. You could also ask them specifically what they liked and disliked about each aspect of the site.

The internet has become a fundamental part of our daily lives – a rich source of facts, discussion, fun and community that’s home to an infinite number of ways to share thoughts and kill boredom. There are, of course, many opportunities to achieve this in the open world too – but that’s not quite so easy for a lot of folk. For many disabled and special-needs people, the internet has proven to be truly life-changing. “It’s opened up a world that would otherwise not exist,” says Jay Cohen, founder and manager of www.disabledonline.com, a global online community comprising forums, blogs, links, resources and a store of assistive technology.

DisabledOnline is a window to a new world for many users.

Cohen suffers from muscular dystrophy, rendering him unable to use a keyboard. Nonetheless, he’s been running this busy site since launching it as a message board in 2004. “To have an opportunity to communicate with others, research information and find entertainment, all from the comfort of your home, makes the internet a true blessing for those with physical limitations,” he explains.

A real boost

Alex Barker runs and works on the Advice and Information Line for AbilityNet (www.abilitynet.org.uk), a charity that provides technological help and assistance to any of the UK’s 9.8 million disabled citizens who want it. “People with disabilities have found the internet a real boost because it helps to make life easier by providing online access to services such as banking and food shopping, and also gives them the ability to network with other people who are in the same situation as themselves,” he says. “Isolation can be an issue, but the advent of support groups means people can join an online community from the comfort of their own home.”

AbilityNet is funded by grants and donations, and by charging for some services in order to generate the money necessary to provide advice and assistance for free. It also has links with some of the tech industry’s biggest names. “Both Microsoft and IBM support us in terms of giving us office space and so on,” explains Barker. In fact, the charity was born out of IBM in the 1980s, when the company noticed a small group of its employees providing assistance to disabled users and elected to provide start-up funding for a dedicated organisation in that vein. In 2008, AbilityNet was able to directly assist 43,724 people in overcoming their accessibility issues with computers – largely through its free phone and email support lines. Particularly successful lately is the charity’s new wiki, which is known as AbilityNet GATE (Global Assistive Technology Encyclopaedia) and can be found at http://abilitynet.wetpaint.com. AbilityNet GATE can be added to and updated by anyone with anything to share about accessible computer use.

AbilityNet hosts a database of assistive tools for disabled computer users.

AbilityNet’s work with the IT world itself is just as important as the many ways it goes about providing information to its users. “I think AbilityNet as an organisation has tried to make people more aware of what is good practice in terms of the provision of IT, and hopefully we’ve managed to change the perceptions that people have of disability,” says Barker. “A computer makes it so easy for someone with a disability to work at the same speed as their peers. I work on the Advice and Information Line and it’s so rewarding helping someone change their settings on their computer to make it easier for them to work effectively.” That change in perception is key – the internet is a great leveller, providing the same potential to absolutely everyone. “The internet has made accessing information so much easier, so even if you don’t have the physical ability to go and find the information, you can probably find it online.”

As well as information, the internet gives users the option to remain anonymous. Does the fact that other internet users don’t immediately know they’re chatting to someone with a disability mean they act in a way they otherwise wouldn’t? “It may play a factor in certain situations,” thinks Cohen. “I suppose it all depends on the circumstance. I have been on social networks and chatrooms where I didn’t disclose my disability – only because I felt there wasn’t a need. Sometimes I would share this, other times I wouldn’t. The usual reaction is indifference, although there has been the occasional surprise and curiosity reaction. You really have to take it all in your stride [and remember that] most of the time you are dealing with a complete stranger.”
While there are a great many services and communities dedicated specifically to disabled and special-needs internet users, it’s a mistake to think such folk are behaving differently to anyone else online. “We mostly try to keep an open discussion,” says Jay in regard to DisabledOnline’s forums. “We want our members to have the ability to voice whatever is on their minds, as long as it’s respectful to others. We aren’t looking for any specific agendas in our chatrooms: it’s an open forum and we plan on keeping it that way.”

Neither is there a huge centralised online community available for disabled people, explains Cohen: “I think it’s just like any other segment of the population. Sometimes they get bored at one spot, so they visit another. Then they come back after a while. The community is growing, so with that more options arise.” And the web also offers the opportunity for easy and fluent discussion across international borders, something that can otherwise be very tricky for people with limited mobility. “I believe it’s helped unite the community by bringing together voices from all over the world. We have members not only from the US and UK, but from India, New Zealand, South Africa and other countries. We are truly a worldwide community.”

Vital assistance

It would be very tricky for many disabled people to enjoy the benefits of the web without the help of assistive technology – a catch-all term for anything that enables disabled people to achieve things that would be trickier without hardware or software assistance. The term encompasses everything, from ramps and dropped pavements to Braille printers and brain-computer interfaces. Also included are built-in operating systems and browser functions that make computers much easier to operate. Examples include getting the computer to emit a certain tone when the Caps Lock is activated, and the ClickLock utility, which enables highlighting and dragging of on-screen items without having to keep the left mouse button pressed.

Cohen had a definitive answer when we asked what type of assistive technology has proven most useful to him: “I have pretty severe physical limitations. So for me personally, voice recognition software has had a huge impact on my life. It allowed me the freedom to pursue my vision of creating DisabledOnline. I highly recommend it for those who have the inability of operating a standard keyboard and mouse.”

Although he helps with a broad range of different needs, AbilityNet’s Barker agrees: “I would say that one of the main developments is within voice recognition software. Quite a large number of our clients are interested in using this technology and now it’s becoming easier to access as it comes bundled with Windows Vista and Windows 7.” While third-party titles such as Dragon Naturally Speaking provide far more features, the fact that they can cost up to £200 presents a major obstacle to a lot of people who might otherwise benefit from them. Whatever else you want to say about Vista, it was a big leap forward in terms of universally available speech recognition – both for replacing mouse and keyboard dependency with voice commands, and for dictating documents and emails in almost any application. While speech software remains a long way off replacing all manual interactions with our PCs, it really comes into its own in continual usage by those who need it. It’s worth noting that we interviewed Cohen via email, and had no idea it was all done thanks to voice recognition software until he mentioned it.

The Optilech EasyLink 12 is a portable Braille reader / input device for mobile phones.

In general, though, are the major operating system and browser providers doing all that they can? “I think that it’s getting easier now for people to make small tweaks to their systems,” offers Barker. “For example, a client with Parkinson’s may benefit a lot from just turning Filter Keys on. It’s free and this just shows that adaptive technology doesn’t have to cost anything.” More standardisation online has helped too: “I have seen significant improvements with accessibility online,” says Cohen. “There are still some sites that need to improve their layouts, but in general I do see the World Wide Web Consortium Accessibility Guidelines being followed.”

The director of the World Wide Web Consortium (W3C) is original father-of-
the-internet Tim Berners-Lee, and the organisation’s Accessibility Guidelines lay out key best-practice rules that every website should follow. Major ones include providing text-based alternatives for any image, video or audio content, ensuring that everything is accessible via keyboard alone, providing easy means of navigation and orientation across busy sites and ensuring legibility. Find out more about these best-practice rules and how to implement them at www.w3.org/WAI/WCAG20/quickref.

And yet website and software creators are still routinely guilty of even the most basic oversights. The issue of colour-blindness, for instance, is regularly overlooked. Only a pitiful handful of games provide alternate colour schemes for people who struggle to differentiate between green and red, and far too many design-led websites don’t seem to notice or care that their fancy Flash menus are completely inaccessible to anyone who lacks the dexterity to use a mouse.

Yet matters are gradually and continually improving. The internet succeeds in knocking down all barriers – whether they be down to age, gender, ethnicity or physical capabilities – and, as the already multifarious means of accessing it continue to increase, so too will the traditional barriers of communication and entertainment further erode.

With the coming of the New Year we see a lot of Top 10 lists.  You know like the Top 10 planning, design and development websites of 2009 or the Top 10 Quotes of 2009.  We are doubly blessed that since this is the “end of the decade” that we also get the top 10 lists for that as well.  You know like EPSN Boston’s Top 10 of the Decade (all Boston Teams) or Yahoo Games’ Top 10 Video Games of the Decade (Super Mario Galaxy in the top 10?, really?).

Not to buck the trend, I decided to put together my own list of influential technologies for the years 2000-2009.  As you read this, please keep in mind the criteria that I used:

• The technologies listed are not in any order
• The technology did not have to be invented after 2000, but had to have reached wide spread adoption or a major turning point after 2000
• I tried to avoid specific products or websites by name, but rather focused on the technology or the trend, rather than a specific implementation
• I am strongly biased by my own personal experiences with the technologies, your experiences with them may be different than mine

Portable Music Players / Digital formats – It is not hard to see the impact of the portable music player on our society, just walk down the street and look at the number of people who have white ear buds in their ear. 

While the music player is obvious to see, what is not seen was the companion shift to digital distribution of content and the mind shift that we made with the change.  The digital music stores helped the music players to take off (although all indications are that most of the music does not come from online stores).

RSS – Really Simple Syndication is probably the geekiest of all the technologies that I will list it.  This is one of the technologies that predates that 2000s, but saw wide adoption in the last decade; if had a blog or a website that published RSS before 2000, you should have a special badge to indicate your early adoption.  RSS is probably the third most popular document type on the Internet (behind HTML and CSS).  It is the best example of the power of a common data format.

Social Networks – early forms of social networking existed before the year 2000 (Yahoo Groups was one that I used to hang out in back in the day) and the concepts behind social networking even pre-dated the world wide web with people interacting on bulletin boards.  But again, it was in the last 10 years (actually 4 or 5) that social networking went from being a niche activity to seeing wide adoption.

The real impact of social networking is just now being felt as the “social” aspect expands from a casual activity that takes place out of work, to applying these principals to activities at work.  The overall trend of taking social technologies and applying them to the work place is called the consumerization of IT, and we will see it with a number of the technologies in this list.

Smart Phones – One of the things that the MP3 players mentioned earlier did was get us used to making out computing experience portable and taking it with us.  Going back to the 1990s we had Personal Data Assistants and cell phones.  It was natural to combine the two into one device and throw in the MP3 players as well. 

Broadband – In August of this year Comscore released their latest estimates of broadband penetration in the United States.  The national average is now 89% of all Internet Users have some form of fast Internet access.  Personally I have had a cable modem for nearly 8 years, but I entered the year 2000 with dial up access. 

High speed access at the home was unusual in the 1990s; most people only had high speed access at their work place.  Now broadband access is becoming so ubiquitous that the people who develop websites and applications are starting to take it for granted.  By itself broadband access is a fantastic improvement, but like many infrastructure technologies, the real power of broadband is as an enabling technology that brings us other things (like streaming media).

Streaming Media – As I am writing this I have the television on in the background showing a movie.  The interesting thing is that it is streaming from Netflix in full High Definition quality to my Xbox using my internet connection.  There is no special magic about the Xbox; I could just as easily be streaming to my web browser or to any number of devices that support streaming.  Nothing special about Netflix either, I can stream from dozens of sites.  Contrast this with prior to 2000 when video on the web (when you could get it working) was of low quality.    

GPS – the Global Positioning System dates back into the 1970s from a military experimental standpoint and has been operational for civilian use since the 1990s, but this is one of the technologies that really took off in the 2000s.  The obvious adoption inside of the car was a first step, but now that many phones come equipped with GPS we are starting to see the real applications of location awareness.

Game Consoles – Game consoles are not new by any stretch of the imagination.  As early as 1978 I remember hanging out with my friend Charlie after school every day playing his Atari 2600 for 46 minutes (the time between us getting off the bus and having to turn off the console before his mother got home from work).  But the generation of the game consoles that launched with the original XBOX and the PS2 are really a different class of systems.  The modern game console is a hub of entertainment, with connections to social networks and streaming video.  Certainly games have comes a long way from Space Invaders.

Social Media (Blogs, Wikis, Podcasts) – The last item is less about the technology and more about what it has enabled.  A vast reduction in production cost and a huge reduction in the distribution cost have led to the emergence of user generated content.  There are some that are saying that user generated content is replacing content from traditional media companies, but I look at the trend as additive; I still watch the evening news, but I have added social media to the mix as well.

I rather enjoyed putting this list together, but I am sure that I have missed a technology or two that is influential and would love to hear about the ones that I missed.  I will say that I intentionally left off search as a technology.  Search was clearly influential in the 2000s; however I think that it was established by the beginning of 2000.