Mashed Articles

There’s a delightful story that does the rounds regarding one of the founding fathers of Linux. It’s said that during the early days of the open-
source operating system’s development, this fellow took to attending conferences in complete silence. All attempts to communicate via means other than hand gestures were refused. Instead, he pointed at things.

Apocryphal or not, the tale remains highly relevant today. Our hero’s beef was with the windows-based graphical interface metaphor and its knack for turning us into mouse-pointing morons. Fast-forward a decade or two and astonishingly little has changed. The windows GUI has, you might say, proven to be extremely gluey.

The classic case study is Microsoft’s eponymous Windows OS. Admittedly, early versions of Windows would seem pretty alien to today’s users – but that’s an illusion. Look past the clunky graphics and Windows 95 is largely identical even to Windows 7, Redmond’s latest and greatest OS. Icons, taskbar, the folder metaphor – all are essentially the same as they were 15 years ago.

That’s a long time in any industry, but it’s an absolute eternity in information technology. Along the way, Microsoft has flirted with a few interesting new features. Early betas of Vista included widespread use of virtual folders and the promise of a fully vectorised and hence scalable graphical interface, for instance. But in the end, the retail build of Vista was yet another reskin of Windows NT, just a bit prettier.

Linux and Apple’s Macintosh operating systems have scarcely been any more innovative. More user-friendly and configurable? Perhaps. More polished? Certainly. But both remain firmly rooted in the window-juggling keyboard-and-mouse camp.

Compared to the enormous advances made in computer hardware, it’s all a bit bizarre. Back in 1995, a single-core Pentium processor running at 100MHz or so was your lot. That’s an in-order 3.1 million transistor chip with 8kB of cache memory, for goodness sake. Today, we’re up to six cores, multiple GHz, over a billion transistors and cache pools nigh on double-digits in MB.

If you think that’s merely a matter of scale rather than a new paradigm per se, what about features such as virtualisation or hardware-accelerated 3D graphics? That’s to say nothing of the rapid rise of LCD monitors and more recently solid-state drives. By any sane metric, computer hardware has been in a constant state of revolution. It’s utterly relentless.

So, not to put too fine a point on it, what gives with GUIs? The answer, frankly, is that I don’t know. Over the years, I’ve visited several labs dedicated to advanced interface research, including those of Microsoft and Intel. I’ve even interviewed luminaries from the heyday of interface research, including some who worked at the fabled Xerox PARC lab in Palo Alto. The very people who invented the GUI, in other words. In fact, I reckon I’ve spoken to all the right people. I’ve played with all the latest table-top, touchscreen human-machine interfaces. But I remain essentially clueless. Nothing I’ve seen or heard of is obviously the next big thing.

At this point, Apple’s iPad inevitably hovers into view. A remarkable device in many ways, it’s no good for data input or content creation and therefore doesn’t offer a plausible alternative for desktop computing. However, what it does is underline just how painful the Windows interface is. Once you’ve danced around a few of your favourite websites courtesy of the iPad’s delightfully responsive screen, the scrolly-scrolly, pointy-clicky PC experience seems pretty laughable.

Even a good smartphone can make the PC feel clumsy; I often prefer reading emails on mine. Replying to them is out of the question, but as a viewing device it’s very pleasant and provides temporary relief from what is becoming an overly familiar and oppressive desktop computing experience. You could say the differences are largely arbitrary, but trawling emails on my phone feels like a break from work. That’s got to say something about the tiredness of the windows metaphor.

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.

It’s not all iPods and MacBook Pros, Apple has been known to design, build and sell some serious flops.

When Steve Jobs speaks, the world listens. His fabled Reality Distortion Field makes even the shiniest piece of chrome and plastic glisten just that little bit more. The phrase ‘One more thing’ moves every member of the audience to the very edge of their seats, knowing that whatever follows, they’ll soon have one in their possession. But it wasn’t always like this, and even the all-powerful Apple of today sometimes stumbles in mid-stride. We’ve gone in search of the 10 biggest flops, missteps and bad ideas that found a half-chewed worm emerging from the apple of our eye.

1. Pippin

Super Nintendo. Master System. Jaguar. Megadrive. Pippin. Can you spot the odd one out? It sounded like a child’s toy, but not many children ever had the chance to play on Apple’s ill-fated games console, Pippin. Technologically speaking it was a Mac in a smaller box, intended to play hot CD-based gaming classics like Terror Trax, The Journeyman Project and Mr Potato Head Saves Veggie Valley.

But whereas most games manufacturers quickly learned the importance of controlling their ecosystem with a vice-like grip, Apple planned to sell the core technology to several different companies – which is ironic in light of the company’s current modus operandi. Unfortunately, like everyone who tried to take on gaming giants Sega and Nintendo, Pippin was a miserable failure. It was an underpowered, undersupported system that reportedly only sold around 5,000 units in the US. Being a computer, Pippin did have some interesting technology on its side, including innovations like internet access, but without the games to back it up, it was all for nothing.

Also, it was called Pippin.

After Pippin crashed and burned, Apple largely gave up on gaming – and most developers still avoid the Mac. However, times have changed. The iPhone’s gaming library hasn’t defeated the mighty Nintendo, but it’s the first thing for a long, long time to pose a really genuine threat to it, if only among casual players.

2. Apple USB Mouse

The infamous ‘Hockey Puck’ is one of Apple’s most mocked inventions, appearing with the launch of the iMac in 1998 and promptly hanging around homes and offices like a bad smell for years to come. Not only was it ugly, it made pointing and clicking about as much fun as typing on a keyboard covered with needles, using a speech recognition system that insisted you neck a balloon full of helium before every instruction, or anything involving Microsoft Office’s ‘helpful’ paperclip.

Not only was its round shape clumsy and uncomfortable, it was far too imprecise when gripped and prone to turning instead of moving. The cord was far too short if you plugged it into the machine rather than the USB ports on a Mac keyboard, and the buttons weren’t very comfortable. Some good did come out of it, though – third-party manufacturers made a fortune selling alternatives and adaptors.

3. iPhone Apps

When the iPhone was first revealed in all its wonderful glory, one thing was notably missing: applications. Apple got to write them, serving up sleek email and calendaring, maps and music playing. Everyone else was limited to creating websites that could be blessed with an icon on the home screen, without access to any of the interesting hardware that made the iPhone so innovative. Steve Jobs described this as “a very sweet solution”; everyone else went with ‘bad joke’. As was pointed out many times, if web pages were up to the job, why were all of Apple’s own apps Cocoa-based, with not a single HTML offering among them?

In retrospect, this was the first sign of trouble brewing. The App Store is now huge, and many have made a fortune from it, but Apple’s control over the platform is only becoming more problematic. From junk programs to bizarre rejections, scaling issues and the high cost of entry, every day sees new complaints from developers.

Ironically, the increased prominence of HTML5 coupled with Apple’s lockdowns has persuaded many that, just maybe, taking the web route might be better after all. One of the most notable examples is Google. After going through all kinds of trouble getting the Google Voice app approved, the company realised that it could allow anyone with a smartphone to log on by making the service available via the browser. Anyone in the US, anyway – Google Voice is still to be released here.

4. Apple Lisa

Apple kit is too expensive. That’s the most common criticism of the company, and it has been right from the start. The Lisa, launched in 1983, was an attempt to go after business customers by offering a more powerful system, higher resolution graphics and support for multitasking and protected memory. It found a market, particularly in document creation, but the cheap availability of both IBM PCs and standard Macintosh systems worked against it.

The Lisa did however offer expansion ports, and a snappy name – although one with no easy explanation. The official version is that it stands for Local Integrated Software Architecture, but nobody believes that. The standard backronym is Lisa: Invented Stupid Acronym, but most believe it was simply named after Lisa Jobs, Steve’s daughter. Jobs worked on the project for a while before jumping ship to work on the Macintosh project.

The Lisa was just too expensive to take off when it was launched in the early ’80s.

5. Newton

Pity the poor Newton. Probably Apple’s least-deserved flop, this PDA platform (the actual devices were called MessagePad) was truly ahead of its time. It featured integrated handwriting recognition (which worked reasonably, if not completely reliably), was controlled by a touchscreen, and offered lots of applications to make early adopters’ lives easier, including notes, contacts and dates. That’s nothing too special by today’s standards, but it was an exceptionally powerful device in the early ’90s. However, this was only intended to be the start of Newton’s capabilities. Apple saw the devices as computers in their own right, and we’ve yet to truly see a successor that has actually pulled off that massive leap. Perhaps the iPad will be it…

6. Motorola ROKR

While the hardware was Motorola, the appeal of the ROKR was all down to Apple. This was the first phone built around syncing to iTunes, and one of the few third-party products to get the full Steve Jobs stage treatment. And… it wasn’t good. At all. Not only was it a tacky product, it was stuffed with infuriating limitations, like only being able to hold 100 songs no matter how much extra storage it was given, offering no way of buying music online and connecting to your Mac or PC via a slow USB 1.1 cable instead of the faster 2.0 standard. Jobs’s demo of the phone conveyed absolutely none of his usual enthusiasm, and for good reason. This was 2005. In 2007, Apple released the iPhone, and the failed first attempt at a Jobs-approved phone was consigned to history.

7. Apple TV

The Jobs seal of approval isn’t always a guarantee of quality, then – and Apple TV is another example of a product that failed to make the grade. Apple TV combined the worst of several worlds – reliance on the Apple ecosystem, lack of an optical drive and the state of internet-available entertainment in the UK back in 2007 – to produce a largely useless electronic paperweight. In fairness, the Apple TV wasn’t a terrible unit, but it hit too early and was too much a company player instead of focusing on what customers would actually be best served by.

Nowadays there are so many other options available that the window of opportunity for it has well and truly closed. Apple still makes the devices, but even it has largely moved on to focusing on new products. Apple TV may have introduced people to the idea of media streaming in their house, but it’s products like the WD-TV Live and PlayOn that are finally making the humble computer a fundamental part of the TV-watching experience.

8. QuickTake Camera

Much like the Newton, the QuickTake’s failure had less to do with the product itself than the situation it found itself in. It was one of the first consumer-level digital cameras, so it was fairly rough and ready – no screen, no easy photo deletion – and it shot at a resolution of 640 x 480, with a pitiful 1MB of memory. Three different versions were released from 1994 onwards, but like most of Apple’s non-computing-focused products, Jobs axed the line after returning to power.

9. The Twentieth Anniversary Mac

$7,499. We shall repeat that: $7,499. No matter how much of an Apple obsessive you might be, no matter how much you think the user interface and style warrants high price tags, dropping $7,499 on a new machine to celebrate a company’s milestone is on the wrong side of the Lala River in the valley of Areyoukidding. This was 1997, when a regular Mac of the same specification would cost you just $3,000. Apple managed to sell a handful at this insane price, but it was quickly forced to back down.

Fancy spending $8k on a prettified Mac? Didn’t think so.

By 1998, when the unit was discontinued, the price was down to under $2,000. It may have looked snazzy next to the resolutely ugly beige boxes of the time, but the Twentieth Anniversary was proof that you can in fact put a price on style, and it’s one that most people aren’t ultimately that willing to pay. It has become something of a collector’s item, however; perhaps that counts as success of a kind.

10. MobileMe

Apple had no excuse for MobileMe to flop. The idea was as obvious as it was brilliant – syncing mail, calendars, files and photos between your computer, your iPhone (you did buy one, right?) and the web. So what went wrong? Well, everything. Not only was it overpriced – and at £50 for a year, remains so – but the original version barely worked. File sharing was missing in action, online storage was too slow and the calendar was a joke compared to Google’s offering. As for email, it was fine if you actually wanted to use an Apple-branded address, but with more and more of us switching to personal domains, especially for professional purposes, MobileMe’s lack of proper domain mapping really bit down hard.

Even the launch of the service was a big disaster – the pages were slow, the servers were constantly down, the push messaging promised didn’t work, and worst of all, a number of trial users found their credit cards charged too early. Apple tried to patch up problems by extending the service’s free trials, but there’s no doubt that what most who tried it in those early days remember is a horrible experience from a company that makes its money providing the best. Not cool, Apple. Not cool at all.