Six Revisions » Web Technology

Will the Browser Wars Invade the Mobile Web?

Jacob Gube — Mon, 28 Nov 2011 12:00:21 +0000

Editor’s note: The opinions expressed in this article are solely that of the author’s, Arley McBlain.

When it comes to the still emerging Mobile Web realm, I think we should all be outraged about the trouble Windows Phone 7.5 can unleash.

Like anyone, I was curious what Windows Phone 7.5 (codenamed Mango) — a software update to Microsoft’s mobile device operating system — would bring to the Mobile Web front. I’m a web designer, so things like this can affect me professionally.

My real interest in Mango lies in its web browser, IE Mobile 9. How would it hold up? It certainly performs better than its predecessor, but it didn’t take long to start finding rendering issues on some websites, even though these sites were fine on other devices.

A Bit of Background

Until recently, there were arguably only three major players in the mobile device world: BlackBerry, iPhone and Android. These devices still hold a big chunk of smartphone users – 73% of the market share of mobile operating systems in the second quarter of 2011 — Microsoft is trying to keep things relevant with their latest mobile OS.

Source: Wikipedia

A little competition in the burgeoning mobile industry is good and all, but — and maybe you should sit down for this — when Windows Mobile 7 (the predecessor of Mango) shipped in November 2010, the built-in browser was IE Mobile 7 – a standards-disrespecting jerk of a browser that was released over four years previous.

Four years. Think about that. In Internet years that’s like a decade and in mobile technology years that’s like 432 centuries. IE7 is ancient! Sure, it was better than IE6, but it still makes a mockery of web standards, and lacks a lot of great features that all modern browsers have. It feels like a crime to add IE7-specific style sheets to a modern mobile site or app. But that’s the reality.

Mango is now released with IE9 adapted to their mobile OS (called IE Mobile 9). Though this is by all measures a modern browser, it’s still rendering pages differently and breaking a beautiful Web.

Why It Matters

It seems as though the Mobile space is beginning to repeat what we have seen from the ongoing desktop browser wars.

When IE6 was king, it had over 75% of market share. With IE5.5 combined, it was 95%.

What an amazing time it was to make websites: You could create and test a website with one web browser without feeling like your web development responsibilities were being shirked. You could be confident that 95% of Internet users would see the same thing.

That bubble burst when people began adopting other browsers, and eventually we got to where we are today.

Personally, I try to test a website project on at least 5 specific desktop browsers. It’s a lot more work, particularly if the client needs to support older browsers.

The WebKit Bubble

In Mobile, we are still sort of in that happy bubble! WebKit, a popular open source browser engine, is great. It’s the backbone of the BlackBerry browser (OS6+), Apple Safari (for the iPhone) and the built-in web browser in Android mobile devices.

Mobile sites made for these devices will generally look and act the same. (Though you should still test in various platforms and devices.)

Will the Bubble Burst?

Now there’s Microsoft. Please understand that I’m not a hater. I respect the company and their contributions to the way we use technology today. They’ve had an enormous and very positive impact in computing, gaming and Web technologies.

Their browser’s unique way of rendering websites, on the other hand, creates problems. For the first time since 2005, we almost had a standard base to build websites on — but I fear that Microsoft carries enough weight and users to shift the balance towards their advantage, and the work going into producing websites will again multiply.

Universal Standards for Mobile Browsers

Windows Phone hasn’t taken over yet, even though the company that developed it carries a lot of weight in the tech world.

It’s up to us to pester friends, families and clients into installing some WebKit solution onto their Windows mobile devices. For example, let them know about Zetakey, a WebKit-based browser that can work on Windows mobile devices.

Or, if you’re feeling very bitter, you can start adding this to your mobile web designs:

Is that too extreme?

Am I saying WebKit should be the sole browser engine that the Mobile Web is built on? No. I only raise this point since, in the Mobile space, we are so close to one universal browser engine right now.

I personally would be fine with literally any universal standard. I would honestly rather that IE6 once again be the 95% global standard than to have to keep adapting to the ever-increasing requirements that are being added to the average project. As modern web designers, these are just some of the things we are faced with:

Screens are simultaneously getting bigger and smaller.
We have to take into account standard mouse and keyboard users, touchscreens and accessibility considerations.
We are to be context-sensitive, social, and make use of emerging web technologies like geolocation and responsive web design.

The demands of modern mobile websites and mobile web apps are serious. Wrangling stubborn browsers on top of all of that is ridiculous.

Web browsers have been around for nearly twenty years — the fact that two browsers can render the same code radically different is insane.

We need to unite and demand a better browser standard.

About the Author

Arley McBlain is a web designer, web developer, in Burlington, Ontario, Canada. If you’d like to keep in touch with the author, check out his personal site, ArleyM, and follow him on Twitter as @ArleyM.

The Mythical Paperless World: Why Print Will Stick Around

Jacob Gube — Fri, 30 Sep 2011 10:00:35 +0000

Advertise here with BSA

Print is dead. Long gone will be the days where newspaper staff members struggle to get "to press," where magazine editors sweat and toil over sending off final proofs to the printer.

Speculators and soothsayers everywhere whisper of the e-book’s pending dominance, its utter defeat over the long time champion, The Noble Book.

Paper will be an extinct technology in [insert alarming number here] years.

You’ve almost certainly heard some iteration of this discussion; it’s been showing up with increasing frequency over the past two decades.

Some want real books dead, calling them wasteful and outdated. Others cling to the sentimental value of books, taking into consideration the sensory experience gained from holding a beloved tale.

Either way, the argument is lively and heated, with many careers and a widespread industry hanging in the balance.

Whether the futurists and idealists believe it or not, there are enough extant circumstances to ensure print’s place in this world for some time to come. There are too many anchors, limitations and exceptions that exist in the "print industry" to see it wither into dust.

By the way, the phrase "print industry," the way it’s used, is a bit of a poppycock misnomer. What lies behind this whole argument is something a bit deeper.

It’s the Paperless World that everyone is expecting. They have been for years. And it’s gone the way of our jetpacks and Moon-based theme parks.

What is "Print"?

Let’s set the record straight here once and for all: print is not synonymous with newspaper.

Too often, the decline of newspapers is equated with a move toward a paperless world. When people say that print is a dying industry, they’re often talking specifically about traditional newspaper industries, and sometimes magazines and e-books.

It’s not too difficult to see that print sales — ahem, newspaper sales — are down significantly since the proliferation of Internet access.

The State of Newspapers

Since we’re here, let’s talk for a second about newspaper. New research out of the Pew Internet & American Life Project suggests that newspapers are more useful than anyone’s giving them credit for.

Sure, those of us with birds, reptiles or accident-prone puppies still find plenty of use for the old rags. But surprisingly, people still rely on newspapers for the following information:

Where people get news and information about their local community. Source: Pew Internet & American Life Project

You’re probably seeing a pattern by this point. Local newspapers still serve a purpose. When newspapers weren’t on top, in terms of local news, television was. Almost exclusively.

In fact, according to Pew, the only local news people overwhelmingly searched for on the Internet was restaurant/business-related. In other words, they looked up menus, hours, directions, etc.

Sure, there are web publications that are trying to get the jump on the local news beats. But several of them are content farms (such as Examiner.com), and others, like AOL’s Patch effort, have yet to prove that they can be at all profitable. With low page views, it’s not looking good.

Regardless, it does seem like newspapers will be the first print-based communication to go fully digital. After all, when the business heads behind the big papers — New York Times, Boston Globe, LA Times and so on — figure out how to make their online presence profitable (because that’s still a major challenge) of course they’ll shut down print operations.

What About Books?

When dead-print proselytizers aren’t citing newspaper sales as the pudding’s obscured proof, they draw books kicking and screaming into the argument.

Their sales have indeed been affected by e-book sales — Amazon recently announced that for every 100 print books sold, 105 e-books were sold.

As grim as this looks, print — all methods of paper production and consumption for use in communications — is still a remarkably huge player in day-to-day corporate and governmental operations.

And until that changes, paper and printed materials aren’t going anywhere.

How Technology Catches On

There are a number of factors that precede widespread technological change. In order to consider this on a wide scale, we have to look at the adoption of technology — in this case, the abandoning of paper for electronic substitutes — in terms of a social construct.

Consider for a moment Rogers’ diffusion of innovation theory (PDF). There are four major elements of technological diffusion. These are:

Innovating the tech
Communication and awareness
Time
Social architecture to adopt change

The innovation already exists. No one can really argue that. There’s no good reason we haven’t achieved the mythical paperless office if we’re going on technology alone.

We can read PDFs on our computers and mobile devices. We can sign documents electronically (and do so pretty safely).

We can go without checks and bank statements and invoices altogether, thanks to various online banking/money services. Oddly enough, although paperless banking isn’t close to a reality in the U.S., it is in many poorer countries.

There’s no evident reason that newspapers, magazines and books aren’t wholly online now.

The tech exists, and so do the means of communicating these technologies.

But there are clearly barriers somewhere.

Firstly, people still prefer to have paper in their hands to read. We sign things — and always have — to proclaim that we agree. There are major trust issues with going completely paperless (as can be seen in the print-is-dead documentary and Chris Farley vehicle, Tommy Boy) and it’s not just the "luddite old folks," as said an unnamed friend and coworker of mine.

Print is legacy — arguably the most prominent legacy technology we have — and as new, younger, hipper folks move into business, they’re still integrating into this legacy.

Doing away with paper would likely cause a major hiccup in out-of-office communications and agreements, and that hiccup wouldn’t look too good for short-term profitability.

"But Kristina," said a trusted advisor of mine, "businesses everywhere are popping up with vows to never touch a fax machine, even to never use pens." Even Wired magazine, in its early years, strongly encouraged its staffers to never touch a pen (see Gary Wolf’s Wired: A Romance).

20 years later, I assure you, plenty of pens are floating around. And even more paper.

Start-ups simply don’t represent enough of the corporate world to be indicative of, well, anything. In fact, paper sales have remained pretty steady since the birth of online news and digital books. You can make yourself dizzy — as I have — ploughing through paper statistics, through increases and decreases, but it all basically comes out in the wash.

In short, in light of the technological innovation we’re faced with, the social architecture just doesn’t exist yet for a paperless world. And these things take time. Lots of time.

So while there are some elements of technological diffusion in place for the death of print to occur, arguably the most important — social architecture — just doesn’t. Not for most people, anyway.

In the end, one of the most important factors of adoption is recognition of advantage, which almost always boils down to personal cost. If we’re talking on an individual level (and we should be, because even corporate decisions boil down to individual decisions at some point), it’s best to take Maslow’s hierarchy of needs into consideration.

For those people concerned with cost — and that’s practically everyone if we look at the world as a whole, rather than just the top 2% in the U.S. — there’s a very high barrier to entry for banishing paper from their lives (buy a Kindle, buy a laptop, a computer, Internet connection, so on).

Even in the U.S., the average combined income per household as of 2009 was around $50,000. The average household has 2.6 people.

I’m not here to get political, of course, just to point out that it’s easy for futurists and print-doomsdayers to get lost in what might be a limited view of "society."

Without this social context, such technological change is unlikely to occur with any relevance. Granted, Rogers’ diffusion theories are based largely on medical and agricultural models, but the ideas behind the spreading of technologies remain similar.

And yes, we can go through history and compare the printed page to any number of technologies. We can walk through the annals of obscurity and poke fun at print, comparing to the ghosts of cassette tapes, CDs, MP3s, records, radio, typewriters and anything else that’s fizzled out of the mainstream consciousness.

But print is different.

All those other obsolete technologies were replaced with other tangible alternatives. (Except maybe MP3s, but humans have never engaged intimately with the music medium like they have with books.)

There’s something to be said about leaving our physical mark on the world, even if that mark is incredibly wasteful. Then again, e-books aren’t necessarily any better for the environment.

Paper doesn’t require a power source after its creation. Paper can be held, marked upon, shared, smelled, shredded, recycled and found just about anywhere. There’s no black market for paper, and burning it doesn’t change your DNA.

Paper can be passed down through generations. And if I’m beginning to sound sentimental, it’s because I can be. Kids are still growing up with storybooks, coloring books, paper tests with grades, Highlights and so on. Even techie parents give their kids printed materials.

Our world runs on paper. We have long-standing infrastructures that depend on it, from governmental to corporate. And while e-books and the Internet will probably change that eventually, it probably won’t be in my lifetime. Or yours.

About the Author

Kristina Bjoran is a science writer based in San Francisco, California. She works in editorial at Wired magazine and is a managing editor at UX Booth. Connect with her on Twitter, Facebook and Google+.

Is It Time to Rethink E-Books?

Jacob Gube — Fri, 16 Sep 2011 10:00:23 +0000

Advertise here with BSA

The father of the e-book passed away last week. Michael Hart, founder of Project Gutenberg, died Tuesday, September 6, at the age of 64. Considered by most to be the man that jumpstarted the move toward digital books, Hart created the first fully digitized public document by hand-typing the Declaration of Independence into a University of Illinois computer.

That was back in 1971, and Project Gutenberg has arguably paved the way for what we now know as e-readers and, most importantly, e-books.

Project Gutenberg aims to digitize and make freely available a wide array of books. Image source: Wikimedia Commons

But back in Hart’s Gutenberg days, the main purpose of the project was to provide wide and free access to information. It made sense for these digital archives to be simply that — electronic replicas of the books they were representing.

It seems that even though e-readers are everywhere, the publishing industry, editors, and writers seem to have forgotten that they’re working with an entirely new, quite powerful medium.

No wonder there are so many lamenting the fall of The Noble Book, an artifact that smells like everything that’s good in the world. The gritty pages turn with a pleasing swish, and on each page are margins within which you can make your notes.

You can leave a physical mark in the physical world with physical book. And now, here comes this electronic doppelganger that attempts with its page-turning and bookmark metaphors to be just like what we’ve all come to know and love, The Noble Book.

What we have now is an imposter.

Hyperbole aside, e-book dissidents dismiss largely based on nostalgia and sentimentality of the time that once-was, much like what happened when the television moved into the living room, crowding out the Wholesome Radio.

But the arrival of the e-book is not like that of the television; televisions offered an entirely new dimension to radio. The vast majority of e-books offer little more added value than an ability to carry more books at once than ever before.

What We’ve Got Now

The e-book is falling short of its potential. Perhaps this is because innovation takes a long time, and adoption rates for new experiences are painfully slow. Whatever the reason, it’s time to take a long, hard look at what e-books are, what they should be, and what they can be.

Instead of waiting around for the publishing industries to create the Next Big Thing in terms of experiences, I can think of no better pool of minds to address than the growing troops of user experience designers.

With only a few exceptions (see below), e-books are facsimiles of print. Not much more, not much less. Most of the innovation in the industry is heading toward making e-books even more like printed materials, like improving refresh rates and producing better e-ink.

But why bother, when print is by no means on its way out? While I’m not writing an article to discuss why print will be around for at least several more decades (and I’ll eat my neighbor’s hat if I’m wrong, of course), this likelihood is important to keep in mind.

Imagine if the quality of music on cassette tapes and CDs were of equal fidelity. Also figure that people had been listening to cassette tapes for decades, had historically sentimental feelings toward them, and spent hours upon hours holding them in their hands.

If CDs really had nothing more to offer than cassette tapes (other that the fact that they were thinner and could hold more information), what would be their justification?

Rethinking the Direction

There are minds out there, slightly crazy minds, taking up this discussion with the academic communities, but we all know where that ends up — in trade journals that only a select few read.

The future of the e-book is a very exciting issue to many a futurist and thinker, and many are advocating the push away from the paper-doppelgangers.

Transliterature

Ted Nelson is one such man. A visionary and, some say, quite quirky, he’s like the Kurzweil of documents. Nelson coined many important terms that ushered us into a new age of technology: hypertext was his, as was virtuality. So was teledildonics. Nelson was also the first person to actually try to build out what the Internet is, in essence — a series of hyperlinked documents. He failed, of course, but many of the big names in the Web’s history credit Nelson as an essential player in the game.

Ted Nelson firmly believes in a bright future for electronic documents, and fights for their innovation. Image source: Wikimedia Commons

Nelson, now in his 70s, has a lot to say now about electronic formats of documents. For instance:

"A document is not necessarily a simulation of paper. In the most general sense, a document is a package of ideas created by human minds and addressed to human minds, intended for the furtherance of those ideas and those minds. Human ideas manifest as text, connections, diagrams and more: thus how to store them and present them is a crucial issue for civilization."

While he’s not talking specifically about e-books, shouldn’t the same ideas apply? Nelson further outlines what he proposes happen to the medium for electronic books, and each proposal takes advantage of the technologies at hand, all the while taking into account more literary issues, such as narrative, structure, and experience.

Programming Languages Must Evolve

Someone a little lower profile but arguably just as visionary is Nick Montfort of MIT. As an associate professor of digital media, Montfort has his fingers deep in the missed-potential-of-e-books pie.

He works heavily in the future of books — particularly interactive poetry and fiction. Montfort and his team are trying to make not only the concept of the electronic book medium evolve, but the concept of the art as well (narrative, in this case).

He proposes that programming languages must evolve before e-books move beyond simply simulating the traditional paper reading experience.

Most importantly, Montfort discusses and stresses the storage and processing capacity of computers (and e-books) and how they can transform the idea of what we call a book, a story, a poem, and so on. This is the spirit Montfort’s academic work embodies, as well as most working in digital media.

None of this is to say, however, that there aren’t a few bold newcomers to the e-book scene taking chances.

The Future of E-Books

Not all e-books are created equal. There are a handful of designers, writers, and publishers that have caught on to the idea that the e-reader allows for new possibilities.

They’ve understood that in order to create a more autonomous e-book (one that’s divorced from its paper predecessors), they have to start creating unique experiences. By doing so, they’re demonstrating the simply awesome potential of what the future of the electronic book looks like.

Bundling Multimedia Content

Observe first Enhanced Editions, a small but significant step in autonomy’s direction. Founded by James Bridle (one of the most influential people in publishing, according to the Evening Standard), this company bundles an e-book’s text with lots of extra content, such as author interviews, notes, and audio book accompaniment, read by the authors themselves. There are commentaries included, as well, just like with DVDs.

While Enhanced Editions aren’t available for most e-books, there are a number of popular titles available, such as Stephen King’s beast Under the Dome, Philip Pullman’s The Good Man Jesus and the Scoundrel Christ, and The Audacity of Hope by Barack Obama. Check out the links to see the various features the different books offer; not every Enhanced Edition offers tons of extra content. It is, rather, catered to the specific book. With Under the Dome, for instance, there are only excerpts from the full audio book, but there are little commentaries attached from characters living under said dome.

Cinematic E-Books

The move toward a more cinematic electronic book is also being explored.

The Atavist, a new long-form article platform, recently made a great trailer for one of its authors’ pieces.

Following that trend, there’s even an app that attaches sound effects and soundtracks to whatever book you’re reading, given the book is one on the Booktrack Bookshelf. Granted these soundtracks have very proprietary functionality at the moment (there are only a few titles this close to their recent launch), but the effort to more fully immerse readers in their stories is clear and tangible.

The Atavist pairs one of its long-form articles with a theatrical trailer.

Interactive, Immersive E-Books

Some endeavors take immersion to the next level, and many of these contenders are children’s books. Take The Fantastic Flying Books of Mr. Morris Lessmore, for instance.

The storybook is immersive with a haunting soundtrack, moving narrative, and excellent visuals. This book probably turned out so well because it accompanies a great little short film (and that it deals directly, in the narrative, with the sentimentality and nostalgia that come along with books), but it still successfully walks the balance between interactivity and readability. After all, past a certain threshold of interactive features, you no longer have a book. You have a video game.

A screen from Morris Lessmore, from Moonbot Studios.

Morris Lessmore handles it well, as do several other children’s books. Alice for the iPad, for instance, takes elements of the classic story and draws special attention to them, employing the tech of the iPad to do the narrative justice (and does so brilliantly).

Alice for iPad takes advantage of the iPad’s sensors to encourage fun bits of interactivity while reading.

But interactivity and immersion aren’t just for kids. The most immediate and relevant example is a perfect illustration of what reference books may become.

The Elements is simple enough — it’s a periodic table, in essence. But rather than just be a series of textbook-like page simulations about the periodic table’s residents, this Theodore Gray table allows readers to virtually interact with the elements on the iPad’s touchscreen, manipulate them, and even make calculations based on the element’s information; the app connects to Wolfram Alpha to gather the most up-to-date information about whatever element the reader is asking after — the current price of gold, for instance.

Not only is Theodore Gray’s Elements visually gorgeous, but it’s interactive and surprisingly immersive, too.

As you can see, as publishers pump out digital copies of bestsellers, there are out-of-the-box thinkers pushing the technology to the appropriate next level.

Why We Need to Rethink the E-Book Format

When I write, I like to create my own little reader persona, and edit according to his response of my article.

In this case, I hear him sitting on my shoulder, prodding me incessantly with short sharp pokes to the neck: "Who cares if you think e-books aren’t what they should be? They’re sellin’ just fine, so what does it matter? Why does any of this matter?"

Well played, little shoulder-man.

But it does matter, because every day, I see editors and designers scurrying with their focus groups to figure out what the secret is to electronic content, what exactly people want from an e-book or magazine.

When no immediate answers present themselves, the process (generate content, send to press, squeeze into iPad format and tack on some extra videos) simply repeats itself ad infintum.

Presently, the e-book is in the wrong hands — it does not belong with the publishing industry at large. It’s a new medium, not an amendment to an existing one. Or at least that’s how it should be.

Print’s going to be around for a while (and this is why):

Print, in most cases, is more accessible and inexpensive. In order to enjoy e-books, you have to be able to afford an e-reader. And that’s simply not everyone.
Corporate and governmental behavior, aside from that of the consumer, is a huge driving force in large-scale technological change. Sociologists and analysts explain a dependence on hard copies: the so-called paperless office has been predicted for decades. It’s nowhere near close.
Sentimentality is a powerful force in sales (think about holiday commercials and diamond ads), and can easily oust logic.

So instead engaging in the battle of print versus electronic books (and there are battles everywhere), we should instead be asking what justifies the e-book, if it’s only a paper simulator?

It’s arguably less accessible (and I’m talking on a grand scale, not just middle-upper class Americans). Sure it saves trees — potentially — but book production hasn’t decreased enough to make a difference, and the environmental cost of e-readers is still up for debate; after all, with new versions of Kindles, Nooks, and iPads coming out incessantly, e-waste will build.

In the words of the futurist and Harvard man John Naisbitt, "strategic planning is worthless unless there is first a strategic vision." There has been too little vision in the way of the e-book, for all its financial success.

E-books shouldn’t just be a facsimile of what they may one day replace. With all the technology they’re riding on, e-books have the potential to take the narrative experience to new heights.

About the Author

Building the 3D Web

Jacob Gube — Wed, 06 Jul 2011 14:21:13 +0000

Advertise here with BSA

3D seems to come in waves. Those who are old enough will remember wearing colored 3D glasses and watching titles such as It Came from Outer Space and Robot Monster on the silver screen. Starting with Bwana Devil in 1952, Hollywood released over 60 3D films in three years, and cinema was changed forever. Or so the story went.

By 1955, it was all over. Poor color fidelity and excessive eyestrain caused by the anaglyph format had killed off "the next great thing." There was a brief renaissance in the 1980s, but anaglyph 3D would never hit the mainstream again.

Then came the 1990s and the Virtual Reality Modeling Language (VRML). This wasn’t true 3D, but it did promise immersive, interactive 3D-rendered worlds. Virtual reality was here and things would never be the same again.

Back in real reality, dial-up connections meant waiting forever for 3D content to download. Once it had, it was usually utterly disappointing — a few disconnected spheres and cones hanging dejectedly in the middle of a slightly skewed room. Predictably, VRML never hit the consumer mainstream and was confined to niche applications in research, education and CAD systems.

We are now at the next wave, and it is third time lucky. Hopefully. Maybe.

3D Everywhere

Today, driven by the twin forces of computer gaming and cinema, 3D is back.

The first steps on this journey arrived in the form of 3D-rendered video games and film animation. Leading the way were films such as Toy Story in 1995 (the first feature length CGI animation), and the hugely successful Myst, released in 1993. Myst set the standard for 3D-rendered video games at the time, and drove major growth in CD-ROM sales.

In parallel, true stereoscopic cinema began to make a comeback, with 3D films being shown at special venues such as IMAX theaters and theme parks. These used polarized light rather than color filters, and largely eliminated eyestrain problems by focusing on producing geometrically-correct images. Starting with the first IMAX-produced 3D film, We Are Born of Stars in 1985, 3D films were produced in increasing numbers. Directors such as James Cameron became involved with 3D, releasing Ghosts of the Abyss in 2003, the first feature-length IMAX 3D film.

Then came The Polar Express. Released across 3650 venues in October 2004, the film grossed $180 million by New Year’s Day. Crucially, only 84 of these venues were IMAX 3D, yet these accounted for approximately 25% of the box office take.

This stunning performance rekindled Hollywood’s interest, and a string of 3D feature films followed in newly outfitted 3D cinemas, reaching a pinnacle with Cameron’s Avatar in 2009. Avatar has earned nearly $2.8 billion to date, making it the highest grossing film of all time.

Most recently, 3D has moved from the cinema to the living room. Commercial 3D televisions first went on sale in early 2010 and now can be bought for less that $1,000. Media companies such as Comcast, DirectTV and Sky have launched 3D channels, and 3D content is becoming available on BluRay.

What About the Web?

The web is usually fertile ground for innovation, but we hear much less about the 3D web than 3D cinema and television. 3D web technology may exist, but it is not being trumpeted from the ramparts.

Where are we today with the 3D web? What does the future hold?

As we all know, there is a lot of 3D content currently on the web. However, it is not stereoscopic 3D, which probably accounts for the lack of media coverage.

The main technology is Flash, which, while not "3D aware", can be used to deliver animations that create a 3D experience for the user.

Examples of 3D on the Web

Let’s go over some examples of 3D used on websites.

GE Ecomagination

This is a spectacular website that uses Flash animation to explain GE’s smart grid strategy and its economic and environmental benefits. Users can interact with a 3D model of the smart grid, plugging in to see how their actions can affect energy consumption, and how technologies such as wind turbines drive fuel savings.

American Airlines Flagship Experience

Although the interactivity in this site is minimal, the complexity, dynamic movement and photorealism of this site set it apart. Designed to promote American Airlines’ first and business class services, it draws the viewer into a world of luxury and calm; an oasis in the hectic and unwelcoming world of airline travel.

Using real-time 3D engines such as PaperVision3D, it’s also possible to produce interactive 3D models that run in Flash. While these are not as widely used as more traditional Flash animations, examples can be found in consumer, B2B and gaming websites.

Adidas

This campaign site for Adidas’ outdoor clothing and footwear has a navigable 3D landscape, with Adidas products forming part of the terrain. Clicking on a product starts a seamless transition from the 3D model to video containing product information. The model was produced using Away3D, an open source 3D engine for Flash using ActionScript.

Airbus

Airbus has 3D models of its aircraft on its site, with hotspots that pop up information about key aircraft features. These were produced using Sophie3D, a commercial 3D ActionScript engine for Flash.

Sony Ericsson

This photorealistic 3D Flash model of a Sony Ericsson X1 mobile phone was produced by Aardvark 3D Design using Blaze 3D. Aside from full rotation controls, the keyboard can be opened and closed, and the stylus can be removed.

New and Upcoming 3D Technologies

Let’s look at some upcoming technologies that will take 3D to the next level.

Molehill 3D APIs

Flash is about to get faster. To date, Flash rendering has been done by the CPU, but with the upcoming Adobe Molehill APIs for Flash and Air, rendering is done much more quickly using the GPU. This opens up a whole new range of possibilities, including greatly enhanced 3D web gaming. Flash may not be dead just yet, no matter what Steve Jobs says.

Stereoscopic 3D

The truth is that it’s early days.

There are a few sites out there using anaglyphic 3D — the old colored glasses that have been around since the 1950s. These do not need special web technology, and there is a community of enthusiasts. But, most of these sites are not commercial and are really curiosities.

On the other hand, the display technology for stereoscopic 3D is here today. 3D monitors are available for less than $300, a pair of 3D glasses for less than $200, and there are 3D displays that do not require glasses at all.

3D Video Streaming

On the graphics card front, Nvidia has been leading the charge with its 3D Vision technology, and claims that over 400 games now support this. They have also been active in bringing stereoscopic 3D to the browser via their 3DVisionLive website.

Nvidia supports 3D streaming video on the web using their 3D Vision video player, a plug-in for Microsoft’s Media Platform Player Framework (MPPF). MPPF is part of Silverlight and, interestingly, is an open source project.

Nvidia also announced in April 2011 that they are distributing their 3D Vision plug-in free of charge to website developers, in an attempt to drive 3D content creation and demand for graphics hardware.

Nvidia is not just backing Silverlight. They have teamed with YouTube and Mozilla, allowing Nvidia hardware owners to view 3D videos on YouTube using HTML 5 Stereo View, a standards-compliant method of delivering 3D video using the native video capabilities of HTML 5.

YouTube has been delivering 3D video for some time using anaglyph encoding, as well as interlaced and side-by-side formats that can be fed directly to compatible displays. YouTube’s parent, Google, is also pushing its WebM Matroska video format, based on Vorbis audio and Google’s VP8 video codec, bought through Google’s On2 Technologies acquisition. Google has now released VP8 to the open source community, with the goal of driving adoption and strengthening Google’s grip on the streaming video market.

Microsoft and Google seem to have begun their battle for control of the 3D web.

We can also expect to see stereoscopic Flash 3D rendering. In January 2011, Rightward and Animated Media announced their partnership at the Consumer Electronics show in Las Vegas to deliver stereoscopic 3D using Flash.

While the focus is on embedded devices rather than the desktop browser, Rightware’s Kanzi UI already supports stereoscopic 3D, so this is not vaporware. There are also stereoscopic 3D model viewers available that do not integrate with Flash, such as Bitmanagement’s BS Contact Stereo, which can run stand alone or as a browser plug-in.

What About VRML?

VRML never went away, but penetrated niches such as CAD, research and education.

The VRML 2.0 standard was released in 1997 and the focus shifted to defining an XML compliant version, X3D. The VRML Consortium rebranded itself as the Web 3D Consortium, and the X3D abstract specification became an ISO standard in 2004, with the XML and VRML mappings being standardized in 2005.

To date, X3D models have required browser plug-ins, such as Bitmanagement’s BS Contact or Fraunhofer Institute’s Instant Reality. However, Fraunhofer has been driving the definition of X3DOM, a declarative framework for 3D content under HTML 5, which would allow native X3D content to be supported without plug-ins. This approach would use WebGL, currently only supported in Firefox 4 and Chrome 9, as the underlying browser graphics engine for X3D.

Leveraging WebGL is also the strategy taken by O3D, Google’s 3D engine. O3D was released originally as a browser plug-in, but was rereleased subsequently as a JavaScript implementation that runs natively in the browser and uses WebGL as its underlying graphics engine.

There are a number of other 3D formats out there, including 3DMLW, a proprietary, open source 3D format from 3D Technologies; U3D, an ECMA standard for 3D data interchange; and COLLADA, a widely used 3D data interchange format maintained by the Khronos Group.

However, it is difficult to see how X3D or any other technology is going to unseat Flash in the short-term. There are some examples of X3D being used in consumer applications, such as Leelh, a massively multiplayer role playing game (MMRPG), but these are few and far between in comparison with Flash.

The Future of the 3D Web

At this point, it appears that the basic technologies are coming into place to build the true 3D web. Some things will not be there for a long time, if ever, such as being able to navigate freely through a real-life 3D scene (think about the server-side storage requirements, not to mention how you would acquire the image in the first place).

However, the 3D toolkit is still rich, as are the creative possibilities.

But, just because you can do something, it doesn’t mean you should.

The road to 3D will be paved with technically elegant, unusable monstrosities as well as simple successes. As always, the future of the web should be dictated by good design principles, rather than the technology itself. And we have a lot to learn.

Are a few well-executed stereographic product spins the most effective way of increasing conversion rates? Does the future lie in 3D virtual shopping malls?

One thing’s for sure: nobody knows yet.

About the Author

Jeff Foster is a co-founder of WebBizIdeas, the web design and SEO company. The company is based in Minnesota and works with a wide array of national and international brands.

Five Things That Will Keep Shaping The Web in 2011

Jacob Gube — Sun, 16 Jan 2011 19:00:51 +0000

Advertise here with BSA

Last time, I discussed the things that shaped the web design industry in 2010. Now, let’s look forward to what’s ahead this year. I won’t be making crazy, outlandish predictions; instead, I’ll be talking about things that will likely continue to exert an ever-increasing influence on our industry this year.

1. Flash

Flash? I can hear people seriously questioning my mental state right now. How can Flash be a major influence this year? "But…but…but Flash is fighting to survive amidst HTML5 APIs," you must be saying to yourself. But that is where the key is.

If Flash does die, it will die fighting. And, as we all know, the best innovations happen when companies are fighting for their survival. Think about how Apple almost went bankrupt in the 90s, and now they are industry innovators with products such as iTunes, iPad, Macbook Air, and iPhone.

I doubt Flash will ever vanish from the web completely, even amidst open technologies like JavaScript and HTML. With this battle ahead, Flash must prove its worth; it must innovate, stand up, and say, "Look, this is what I can do for you that HTML5 and JavaScript won’t be able to."

Adobe, the company that owns Flash, knows that it’s under serious threat against open HTML5 APIs such as canvas, audio, and video that leverage JavaScript for creating rich media components with animation and dynamic drawing capabilities — an area that their product has been primarily fulfilling.

Because of this realization, they’re one of the first companies working on creating an HTML5 editor/IDE, starting with their HTML5 prototyping tool (codenamed Edge). They have also incorporated HTML5 canvas-exporting capabilities in Flash CS5.

Adobe has continued the development of Flash to increase its performance, especially on mobile devices with the release of Flash Player 10.1 for mobile devices.

Expect to see something out of Flash this year, whether its innovation, a repurposing of the technology, or a significant drop in usage.

2. Print Media

I regularly pick up and read a newspaper, but it would certainly be true that I am among a declining number of people who are doing so.

An industry that has significantly influenced and inspired web designers and content-driven websites (such as blogs, for example), the traditional print medium is under threat.

But it’s fighting back.

Among those under threat are print companies that produce content in a more disposable form, such as newspapers and magazines where speed and timeliness is crucial.

From paywalls to mobile apps, companies in the printed world are exploring ways to adapt to the web so that they may continue delivering the quality content they’re known to produce. If The Times, for example, can make their paywall work, then don’t be surprised to see other similar print media companies throwing up paywalls across the web and potentially influencing the culture of free content on the internet.

A big area where newspapers and magazines are focusing on is the Mobile Web. Reading a magazine on the desktop isn’t that great of an experience, but sitting with an iPad while you have your morning coffee and breakfast can easily compare to the experience. iPad apps, accompanied by subscription-based payment models, are seen as the key focus for a number of print media outlets.

It’s not just a case of traditional media being ported to apps either; the first iPad-only magazine, called Project, has already been released.

As traditionally print-based companies feel the threat from the internet, we might see innovations in the ways their websites seek monetization and revenue. Even content-driven sites, already increasingly less reliant on internet-advertisement monetization, may take cue from a medium that has heavily influenced their own. We have seen recently, for example, the Tuts+ network, which got its start on the web, offering subscription-based premium content much like The Times and the New York Times paywall.

3. Hardware-Accelerated Browsers

Described as the "next frontier of the browser wars," by ReadWriteWeb, hardware acceleration is set to bring a whole new realm of speed to your browser. Opening up previously untapped processing power in your computer will enrich our browsing experience.

Widely touted by Microsoft in IE9, hardware acceleration (or hardware-accelerated browsers) is set to improve the power and speed of your browser, boosting the performance of rendering times, JavaScript performance, and HTML5 animation, audio, and video performance.

And it’s not just IE, Google Chrome and Firefox are coming out with their own hardware-accelerated browser features. Google Chrome, for example, has Tabpose and other GPU-accelerated compositing features in the works. Likewise, Firefox 4 has full hardware acceleration.

From a user’s perspective, we’re set to see improvements in the speed and quality of graphics rendering. The ability to utilize hardware more fully will mean an even richer web experience.

4. Television

Watching TV on the internet and accessing the internet on your TV are the two primary ways the internet and the television industry are working together. TV on the web is already on demand with web services such as Hulu, Netflix, Fancast, and BBC iPlayer.

TV advertising revenues will inevitably drop as people increasingly watch their shows on demand rather than at their scheduled time with the programmed ads. Bandwidth is also an issue: Streaming HD video through the internet can be taxing on internet service providers.

The second focus is having the internet on your television set so that you can watch streaming video on your awesome flatscreen TV while taking advantage of the web’s interactive and socially-networked features. We have Apple TV, Google TV, internet-capable TVs, and gaming consoles such as Xbox, PlayStation, and Wii; the number of options for getting the web in your TV is near endless.

Expect industry leaders to investigate new compression and encoding technologies to assist the speed and file size of delivery of TV through the web. Expect even more innovation in the TV/web space this year.

5. Location-Based Services

The internet no longer sits on your desktop, and everybody from your kids to your grandmother uses the internet. You carry the internet around in your pocket, in your laptop or netbook, and in your tablet; it’s only natural that technology companies will want to take advantage of this.

Facebook has stepped into the space last year; and now, they already have over 100 million Facebook mobile users. Gowalla rolled out their latest iteration not so long ago, along with some very interesting features that highlight the power of location-awareness. The Notes feature in Gowalla, for example, allows users to leave notes about a particular location that a friend can pick up when they visit the area (e.g., "Dad, don’t forget to pick up milk when you come here to Costco").

There are now also plenty of "near me" applications such the SoleSearch iPhone app that uses GPS data to show you boutique sneaker retail stores near you (the app was initially built by shoe enthusiasts/entrepreneurs with no programming experience). The task management iPhone app, Omnifocus, shows great use of location awareness by allowing you to create tasks with specific locations so that your to-do lists have improved context that can increase your productivity.

We’ll see more location-aware apps that will serve you relevant information and features depending on where you are at any given moment. Combine location-aware features with other upcoming technologies such as barcode scanning, book cover recognition, Google’s speech recognition API, and augmented reality — and the possibilities suddenly becomes countless.

No doubt, an increase of pushed, location-aware content for smart phones and similar devices informing you of nearby points of interest will only rise in popularity. We’ll also see content tailored to your current location while you browse websites on your mobile phone, and even more innovation focused in this space.

Things That Shaped the Web Design Industry in 2010

Jacob Gube — Thu, 06 Jan 2011 11:00:41 +0000

Advertise here with BSA

At the end of 2009, I sat down and had a think about where the web was headed — what was happening at the time, and where it was all going. I put pen to paper (or finger to keyboard, to be more accurate) and wrote an article called Five Technologies That Will Keep Shaping the Web in 2010 with the intention of looking at technology trends driving our industry, and how they would continue into the future. To reflect back in the year that has just passed, in this article, I will discuss some of the technologies and trends that shaped the web design industry in 2010.

New Markup Standards: CSS3 and HTML5

There’s no doubting that 2010 was a big year moving new standards in web markup forward. CSS3 and HTML5 are fast becoming the standards, even though W3C final recommendation status for these specifications are years away (with HTML5 estimated to reach finalized status in 2022).

Thankfully, modern web browsers such as Safari, Chrome, Opera, Firefox, as well as Internet Explorer 9 — all recognizing the value of CSS3 and HTML5 for mobile device platforms as well as traditional desktops — have moved forward with implementations of CSS3 and HTML5, working off of drafts of the specs.

For me, there’s always something more tangible and authoritative once we begin to see printed books about a particular subject, and a solid number of great titles have been published in 2010 on HTML5 and CSS3 — Hardboiled Web Design, CSS3 For Web Designers and HTML5 For Web Designers, just to touch the tip of the iceberg.

The awareness of web designers and the cooperation of browser manufacturers, along with numerous experiments and proof-of-concepts of the specifications’ new features, have really brought them into the mainstream.

Perhaps what has started to win over a number of skeptics is the implementation of these new specifications in IE9, a very welcome iteration on the most used web browser franchise. A web browser from Microsoft based on (mostly) the same standard specifications that other browser-makers are using means that CSS3 and HTML5 are something we can use in our current projects.

IE9 still may not support all the CSS3 and HTML5 features that you have been seeing in browsers such as Chrome and Firefox, but Microsoft engineers are certainly taking a big leap in the right direction.

JavaScript helper libraries have also played a large role in enabling us to use these new CSS and HTML features even before full support is available in browsers. Open source projects such as Modernizr, HTML5 shiv, and HTML5 Boilerplate continue to help web designers and web developers progressively enhance their products with these new markup standards while still being able to cater to outdated browsers.

Web Typography

Web typography using the CSS @font-face rule has also seen a large uptake in web design. New web services such as Google Font API and Font Deck, alongside existing services such as TypeKit, have helped web designers use fonts outside of the very small set of web-safe fonts.

Mobile Web

On January 17, 2010, Apple announced the iPad. The popularity of the iPad, netbooks, ultra-portable computers like the MacBook Air and Android smartphones have truly moved web browsing away from the traditional static desktop environment, and into sofas, airport lounges, trains, and park benches — virtually anywhere with a Wi-Fi network close by.

In turn, the last year has seen many discussions (and increased use of) CSS3 media queries and responsive web designs that display websites properly across all platforms.

There were a lot of web designers venturing into the Mobile Web space by way of designing iPad apps, creating mobile-friendly versions of existing websites, and making iPhone apps–either using Apple’s SDK or leveraging open technologies by building HTML5 iPhone apps.

Social Networking

Social networking continued its growth in 2010 — there was even a movie about it! There’s no denying that social networking is more popular than ever. For many people, Facebook is the internet.

We’ve also seen the cultural effects of social networking with the jailing of somebody over a tweet, and Gap, a major international company, backtracking over a logo redesign after Twitter and Facebook users criticized the company’s choice very publicly.

That said, not all social networking ideas have taken off — Google Wave, anybody?

JavaScript

If I asked you what has changed about JavaScript as a language in the last year, chances are, you wouldn’t be able to think of much. In terms of movement in the development of the new JavaScript specifications, it has been a bit disappointing, even though ECMAScript 5 did witness partial implementation in JS engines of modern browsers such as Firefox.

However, it’s JavaScript’s use as an enabler for HTML5 and CSS3 that has put it in the minds of web designers and web developers over the last year. JavaScript is the driver of much of the excitement in HTML5, with the APIs for canvas, audio, video, web storage, and more. It’s seeing server-side scripting use in the form of projects such as node.js, making client-side and server-side script authoring more seamless.

In general, JavaScript is simply more popular than ever. Projects such as Promote JS are helping to get better documentation and spur discussions of the language out there.

There were plenty of new JavaScript blogs that cropped up in the later half of 2010, as well as established JavaScript blogs receiving more attention. Newsletters like JavaScript Weekly that highlight news and events in the JavaScript scene have also come to fruition.

As a testament to the increased mainstream popularity of JavaScript, it has been mentioned in news sources more than in any year prior to 2010 (as shown by Google Trends).

About the Author

Evolution of Websites: A Darwinian Tale

Jacob Gube — Mon, 11 Oct 2010 10:00:31 +0000

Advertise here with BSA

The web is constantly evolving. It doesn’t take a rocket scientist to see how quickly new technologies are being adopted and how fragile design trends are. While the web is still an infant relative to other mediums such as print, TV and radio, and still has fair amount of growing up to do, it has already amassed a rich history. Let’s take a look at how the medium has evolved throughout the years.

A Matter of Carbon Dating

Evolution is inevitable. As British philosopher Herbert Spencer put it — inspired by Charles Darwin’s theory on natural selection — it’s "survival of the fittest."

If we examine any aspect of web design, we can see that trends and technologies being discarded, improved on, or superseded by something better is common. Evolve or die, pick one of the two options. And if we delve deeper, we can see three core elements that dictate this natural selection and evolution.

Certain web browsers tend to be more evolved than others!

Code

One of the core elements of the web is code. As web designers and web developers, the success of a particular language largely depends on how much value it brings to our work. I’m sure only a handful of you remember VRML with the fondness of the concept that we could soon be browsing the web using the same virtual reality as used in the movie Tron. Alas, virtual reality didn’t take off.

The idea of virtual reality and 3D objects fascinated developers.

Web Browsing Devices

The second core element that dictates the web’s progress are web-browsing devices. As technologies evolve, as browsers are improved, as browsing methods change, so do we as an industry.

Things have come a long way from IE3 on an i486 computer with a 56k modem that made a screeching sound like a harpy as it connected to the "Net" through AOL. We can see the fossils of our past exist in computers that still have IE6 and Lynx, poking around our websites on occasion (much to our dismay).

Devices come in all shapes and sizes, from cell phones to browsers.

Trends and Conventions

Finally, we have trends and conventions. No, I’m not talking about the latest fashion according to Lady Gaga, but of design trends, design patterns and conventions that have gained acceptance as the norm because they are proven to work well. Things that are known to enhance the user experience and conventions that aren’t so annoying that you have to avert your eyes to avoid suffering a brain hemorrhage (that’s why the neon pink against a yellow background color scheme never quite took off).

Trends and conventions come in a whole range of shapes and sizes.

Single-Celled Organisms

When the web first started, it was much like a single-celled organism — strong, resilient yet simple. We didn’t have the need (or ability to have) dynamic behavior, database-driven pages and sophisticated web layouts; the web was about sharing text (and some images) and nothing more. Things needed to progress further to gain mass adoption and appeal.

Back in the early days, things were much simpler. Just like microorganisms!

If you’ve ever seen the first pages created by Tim Berners-Lee, you would see that the original idea was simply to be able to connect and relate disparate text pages by way of hyperlinks.

The web started with text and hyperlinks, but now it’s more complicated.

Post the success of the early internet, thoughts of actually doing something more visually intriguing with code (to make the text look extra awesome) started to emerge. While the HTML standard kept evolving to push the envelope further, web browsers began breeding their own webs of "unique" (read as proprietary) evolutions. And as with most children, it was inevitable that tantrums kicked off in the face of adversity.

Vendor prefixes exist to this day, though they’re much better organized.

Biodiversity in Design

Moving away from the lackluster ideals of just having text and images, the HTML specification grew to include all sorts of wonderful opportunities to begin laying out content. It started with table-based designs and simple multi-column web pages. Then we got CSS, which enabled us to style our content so that they looked nothing like the typical white background, black text, and blue underlined hyperlinks cliché. And finally, we saw an evolution towards more complex organisms.

We went from an era of blocks of text to stuff that can be positioned with CSS.

As the Borg said, "resistance is futile," and the fertile soil that grew the early seeds of the web blossomed to increase our capabilities. Perl, PHP, applets, client-side scripting allowed us to do more than just display content, but also to give site visitors ("web surfers") a way to interact with our pages.

While all of this growing and adoption was taking place, the browser-makers of the time (IE and Netscape), in an attempt to out-do each other and gain supreme dominance over the market, decided to start making things up as they went along. They created proprietary specifications, languages and custom code.

Internet Explorer and Netscape went at each other like Alien versus Predator!

As people began to experiment with this thing called a "website," many enthusiastic developers saw themselves able to achieve some of the most wonderfully annoying techniques to exist in our craft. Often coded with little attention to detail, the amount of alert boxes asking for your name, popup windows, right-click-crippling events, JavaScript clocks, site counters, and other strange things appeared in the boatloads. Many did it for the novelty or marketing agenda, most never thought about the user.

Anti-right-click scripts got thrown about in a futile attempt to curb digital piracy.

Luckily, something changed in the ethos toward the web.

With the birth of style and scripts, the adoption of standards became important. With browsers telling you to code in different ways, things began to conflict — and that wasn’t fun for anyone.

Some browsers like Opera have remained standards-focused since their inception.

Part of the natural evolutionary process is based around the concept of natural selection: The organism that is better suited for the environment wins by outcompeting weaker organisms. The evolution of web browsers and competition certainly represented that. In code, multiple competing languages were produced for specific uses (i.e., RSS versus Atom) and this healthy competition led to the aftershock of innovation from developers and an imaginative array of new uses for the web from those pushing the boundaries.

Plenty of languages compete against each other, but this is healthy.

Survival of the Fittest

As we all know, the remnants of the browser wars still exist to this day — JScript, and hasLayout immediately come to mind, as do some lost night’s sleep — but this simply highlights the evolution that the web has gone under. We started with a very raw text-sharing and hyperlinking format and within 10 years ended up with a browser bidding war (spoiler alert: Microsoft’s IE triumphed over Netscape). Microsoft won the browser wars by integrating IE within their OS (Windows). While the idea of the web’s old sites make many of us cringe and reflect upon our own first web portfolios with questions like "Why did I do that?" and "Where did I find that animated GIF?," the change from what we needed the web to do to what we wanted it to do was bridging ever closer. Sometimes, the extinction of a proprietary element has been a good thing! The Wild West philosophy where "everything goes" failed toward the early 2000s as evidenced by the "dot-com bubble" bursting. Bonzi Buddy was a classic example of people taking the web too far. But this scenario was almost like a purging of sorts. Out with the old, in with the new. In its place, an age of enlightenment began, with the catalyst simply being that more people were using the internet. This surge of users outside of geeks meant a reform would be needed in the way we designed and developed our websites. From Primate to People After surviving the horrors of the 90s web and the early failure to monetize anything online, we breathed a huge sigh of relief that the Y2K bug hadn’t wiped out mankind, and then we moved forward to a more thoughtful process in designing sites. Gone were the days where the focus was on funneling as much junk to the user as possible. The idea of designing for the user’s experience became interesting. User-centered design. Usability. Accessibility. These were the words being thrown around. People thought computers and the web would collapse under the Y2K bug! The old, clumsier days of the web in which design decisions were based around which scrolling statusbar script to use or which dancing Homer Simpson GIF would make you feel better were gone, and a focus toward professional user-centered design, data-driven design decisions, accessibility and usability gained importance. This was partly due to the evolution in our collective mindset as to what made good business sense. Content and navigational structures became less erratic and more organized. Looking to the Future Examining things from a Darwinian perspective displays the web’s change from its various stages of life. The early days where things were much simpler (and less stressful), the later years when many of us cried ourselves to sleep at the thought of making a design for Netscape and IE, the post browser war depression where design became focused on experimentation, and now with user-centered design — it’s been a heck of a ride! No one knows how this evolutionary story concludes. While the web already has an illustrious history, it’s safe to say that we’ve only just begun. Usage of the web has increased dramatically, as has the number of websites. Looking back at the Internet’s past, I find it interesting that we can "carbon date" our sites based on the techniques and technologies they use, and even scarier is that much of the web today remains fossilized within the bedrock of our servers. While the evolution of the web is going on as we speak, and it’s fascinating to see how trends, code and devices have changed, looking to the future of the web leaves us with limitless possibilities. Related Content The Web’s Undead The Evolution of Web Design The History of Web Browsers Related categories: Web Design and User Interface About the Author Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need. The Web’s Undead Jacob Gube — Wed, 28 Jul 2010 10:46:32 +0000 Advertise here with BSA For most people, the web looks and feels like things are all peachy — vibrant, alive, new, fresh. However for those of us in the know, below this facade exists a consistent cycle of death and rebirth. While many technologies and practices have left this world and passed on to the next (R.I.P Netscape), some have been more resilient. Supposedly dead elements of the web are rising from the grave, continuing to haunt us. This article will explore the state of the web zombie invasion! Nature of the Beast I’m an avid horror film fan. I love television shows like Buffy the Vampire Slayer and movies like 28 Days Later. The idea of "beings" which shouldn’t exist (like vampires, ghosts, mummies, and zombies) highlights the similar thoughts and feelings I receive when viewing the source code of some pretty awful websites from back in the early days. For the novice coder who hasn’t explored the history of our craft, these undead beings may blend into the landscape rather well. But unbeknownst to them is the debris of the "abandoned web" — and the perpetuation of this cycle. IE6 is considered dead to such an extent that an unofficial funeral was given in its honour! When I talk about zombies on the web, I’m not referring to the stereotype of the old-school "web surfer" who naively wanders around the internet, clicking on every get rich in 24 hours link to get malware infections — no, not those guys. On the web, my zombies refer to the browsers, technologies, code and design practices that are officially dead, but continue to live. Let’s talk about the walking dead, starting with web browsers. Zombie Browsers Of the many different types of web zombies that exist, the noticeable case of outdated versions of web browsers hold the potential for being most dangerous. Ironically, these are the types of creatures that we hold the least amount of control over. We all know the agony of giving post-mortem support for Internet Explorer 6 (which passed its use-by-date eons ago when Microsoft issued its replacement, IE7). And we fondly remember the Netscape browser that IE killed. However, the scariest thing is that, even today, there are people who can’t or won’t let go of their undead browsers by taking five minutes to upgrade. The invasion of zombie browsers is still an ongoing battle. Because we can’t control the zombie browsers, the issue of those infected (staggering around using these dead shells) often becomes a matter of containment (patching our work) or in Zombieland style, killing their life support. It’s a scary thought how many dead browsers exist out there on our clients’ machines. In regards to the ethics of zombie support, some of us take the Shaun of the Dead approach. Because some people still have an attachment to their "undeceased" browsers (e.g. IE6), rather than shooting them up with "Upgrade your browser now!" messages or forcing them into a wasteland of zero tolerance, we keep them alive through hacks and special stylesheets — the developer equivalent of how Shaun from the movie kept his best friend, zombie Ed, alive in his shed. Rather comical perhaps — but in many ways, some of us go out of our way to give leniency towards zombie browsers. Zombie Technologies Whereas we can easily spot the zombie browser — they stagger around the web confused at what CSS3, HTML5, and other modern standards mean — one of the more frustrating types of zombies are web technologies and standards that have already died, but developers still cling onto. One perfect example of a zombie technology is Wireless Markup Language (WML). Due to the evolution of the smartphone market, modern mobile devices can now render regular HTML. The peak days of WML may be over, but the BBC still shows this web zombie some love! While WML itself is deprecated (W3C’s way of pronouncing something dead) — and let’s face it, it wasn’t exactly the real web in the first place — there are still some with old mobile phones wanting to access the web even through a subpar viewing experience. To this day, there are still developers who insist on providing or maintaining WML versions of their website to cater to this zombie technology, and while their care for users with old cell phones is admirable, their contribution to the proliferation of a zombie web standard is not. Testing your website using a variety of older handsets shows how bad things are getting. Old technologies being replaced by new ones is nothing new to the nature of the web. And I suppose that like web browsers, there will become an epidemic point where the number of undead languages goes far beyond the number of living ones, which may be problematic for beginners deciding what they need to learn. The case of undead technologies isn’t so much of an issue of support — as we modern web developers tend to comply with current web standards — but that of excess baggage that the web’s future is going to have to deal with. Zombie Code This zombie is something which most of us want to see dealt with in the harshest possible manner because it’s something that we have control and choice over. While undead languages maintain some level of support for the sake of older browsers or devices, using deprecated HTML tags (e.g. , , ) and non-standard/proprietary CSS (e.g. -ms-overflow-y) to solve today’s design tasks becomes proof of poor quality craftsmanship and thought by certain developers. Revenge of the fallen markup — deprecated code still exists in modern web designs. While we may consider zombie code as just an annoyance, let’s be clear and state they’re not completely benign. The most worrying thing about zombie code is the danger of future browsers stopping the support of these deprecated and non-standard coding practices. What happens to these sites? They will still be floating around in cyberspace, waiting to be visited by a potential client, who’ll later come to us asking for their site’s logo to blink and scroll. From past experience, I know of developers even today who still maintain and produce websites (professionally, I might add) using the kind of source code we would have expected to see in the early 90s — and it shocks me just as if I saw a real zombie straight out of 28 Days Later. Separating structure from style is the modern convention, yet zombie code still works in modern browsers. In much the same way as that of dead browsers or dead technologies, education will ultimately be the way to combat this epidemic of outdated code — code that "works" but does so using undead coding habits. The number of casualties of the original browser wars has served us a lesson of what happens when militant code becomes so disproportionate that web professionals are forced to deal with each browser individually (with the mobile device war, it could happen again). Zombie Design Practices Finally, we have something that is near and dear to my heart — the sympathetic case of what could easily qualify as design zombies. We all remember the days of the early web: Table-based layouts (a zombie practice still widespread), obtrusive JavaScripts, spacer gifs, statistics counters, flashing banners, animated clipart, "designed for" banners, phoney website awards and background music (often blended to form an epileptic massacre of color). While it could be seen that many of these practices have evolved into new strains, the issue of outdated design is as apparent today as ever. Sites as bad of this can still be found on the web, and in many cases they’re still maintained! Design is one subject that — with the web’s evolution — has managed to maintain a level of historical value with itself. If you’ve ever visited a newly launched website and thought, "Wow, this website looks retro in a bad way" — that’s a sign that you’re on a site designed using undead practices. While zombie designs seem insignificant — as the code can itself be very well crafted using best practices and standards — they do nourish a sentiment of a lack of regard towards usability, accessibility, user experience and modern aesthetic appeal, making the design zombie an interesting foe. Another well-intentioned website, with the aesthetic design value of a zombie. In Buffy the Vampire Slayer, when asked to spot a vampire, Buffy looked for people in the club wearing seriously outdated clothes. While this is funny — it’s also true that having something so old looking that we could probably carbon date it will ultimately affect our users’ experience. Education (surprise, surprise) seems to be the best way forward in eliminating undead designs. The Circle of Life With future standards like HTML5 and CSS3 emerging, brand new zombies from the array of existing standards will continue to rise. Maintaining a skill set and knowledge base that is up to date — and staying ahead of the curve — is the best way to avoid the reoccurrence of zombie practices and habits. And while some of the web’s afterlife will continue to exist without causing too much harm, there comes a time where such undead beings can ultimately lead us into a spiral of escalating annoyance and rot. Details about standards aren’t that hard to come by when you know where to look. It’s worth pointing out that the web has an interestingly rich history full of technologies which, though ousted by something newer, may still hold a place in our world. While in a perfect world, the transcendence from one to the next should be the ideal solution, newborn standards (like XHTML 2.0) can die before their time. As such, don’t think of zombies simply as the old stuff — they can be new stuff that didn’t quite fully form yet but may have been early-adopted by some. Perceptions can lead to accidental shootings and you don’t want to give the death sentence to a practice that has legitimate value. XHTML 2.0 unfortunately didn’t make it to fruition and thus became a newborn zombie. Old standards die and new standards appear in their place — that’s just the way of the web. The circle of life is well intentioned, it moves us forward to bigger and brighter things. The solution isn’t to stop innovation — that’s just crazy — but culling the ever-increasing zombie population that still exists. As an industry, it’s our duty to use what skill, knowledge and network we have to push back the zombie invasion. And while I’m not saying you should go after IE6 users with holy water and a crucifix, you could take a more civil approach through education and conversations. If you know someone with web zombies, why not spend a few minutes explaining the problem and helping them make an informed choice? Every outdated element on the web we can eliminate is worth fighting against. Especially if we don’t want the web to be a haunted graveyard. Related Content 5 Web Files That Will Improve Your Website Problems with Using Website Validation Services 10 Tools for Evaluating Web Design Accessibility Related categories: Web Technology and Web Standards About the Author Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need. Web Languages: Decoded Jacob Gube — Tue, 22 Jun 2010 14:49:08 +0000 Advertise here with BSA Those of us who have become well seasoned to the dyslexia-inducing array of web languages often overlook the diversity and additional interactivity we can gain by learning another language or two. Perhaps you are a beginner trying to understand what you need to spend time learning, or perhaps you’re an experienced individual looking for something new to play with. Whichever situation applies to you, this article aims to underline the various languages at your disposal and where they fit in the puzzle. It should be an interesting ride and seasoned experts may find languages they’ve not yet encountered! Too Many Cooks When it comes to the diversity of coding for the web, the well-known phrase "too many cooks spoil the broth" springs to mind. Not only in the way browsers support modern standards but the ever increasing range of competing formats that exist. Should you use HTML or XHTML, RSS or Atom, PHP or ASP.NET, SVG or VML, JavaScript or VBS? The list is near endless. I wouldn’t blame anyone for getting confused at this point because the question itself often relies on personal preference — something you probably won’t have established until you understand the language and use it regularly. This Catch-22 situation is usually only resolved when experienced people come together and educate each other on why their language is better the others (or as I like to call it, a flame war). Enough abbreviations to make an English scholar tremble (and give you a migraine)! What Web Language Should You Learn? So what is the answer you seek, to which languages you should learn? The simple answer is… it depends. The deciding factor is not only reliant on the type of site you are trying to produce but also the depth of complexity you wish to delve into. Therefore, before we can hope to determine which languages you should choose, we need to categorise all of the available options based on their purpose. At first, this may seem like a complex task, but luckily for us, web languages are well-documented and each explains its purpose in context to the various existing layers of the web. Every language has a specification which explains its purpose and function. While documentation for each language exists, picking those worthy of your consideration and how they relate to each other in the function they undertake is something beginners regularly struggle with. You literally have to wade through the heavy number of choices and select one that you looks interesting and useful to you. While I won’t even attempt to individually explain each language’s history (as this article will become encyclopedic in length at that point – instead, I’ll link up to their specifications) we shall coordinate the choices into easy-to-recognise segments, and from there, you can decide which choice best meets your needs. Language Layers So how many language layers exist? Most people recognise layers like structural markup (HTML), stylesheet (CSS), client-side scripting (JavaScript) and server-side scripting (PHP) but you may be surprised to hear that if you account for every variant based on its intended purpose, a whopping 15 different layers exist. Of course at this stage it’s worth pointing out that learning 15 languages to cover every possible layer isn’t going to be in your best interests as you’ll simply be spending all your time learning, but learning a new layer as you need the skill can be of genuine benefit to you. There are 15 language layers that comprise the full spectrum of web development. Each layer represents a unique piece of functionality such as the ability to add behaviour that interacts with the end user (in the case of JavaScript) or a method of providing dynamic vector graphics on the screen (in the case of SVG). Having the knowledge to experiment and implement the various independent layers will give you an advantage both in operating as a professional (that you will be able to cover a wider range of skills) and as a hobbyist or newbie (where you can jump for joy at the extended level of fun you can have while experimenting with the web’s offerings). Having a wide range of skills will showcase your growing competency. Of course, while these layers constitute endless possibilities of functionality which can be injected into your website, some people may simply require only a couple of these layers to produce a basic website (such as HTML and CSS). There is absolutely nothing wrong with limiting or making a niche for your skills and become a master of either a single layer (and language choice). This article simply acts as a starting point to which you can examine your current level of knowledge against the wider array of web languages (to determine what you can follow on from – if you know any, that is). Sometimes a simple website requires nothing more than a couple of languages. Collective Choices In the language layer diagram that you saw earlier, it became apparent that there’s a whole bunch of layers which comprise a website’s unique structure, but as it currently stands, it’s not much use to you as there’s no actual languages listed. Well this is where all of those awesome abbreviations come in. For each language layer that exists, you will find (below) a list of the languages which fit the category, their browser support levels, popularity status (useful for seeking help) and details such as the level of complexity involved, and some recommendations based on that information (highlighted from the other languages). Note: Some languages are a subset of another language listed and some languages may be derived off of a certain implementation, but due to public awareness they have been referenced separately. It’s also worth noting that recommendations are provided based on my own experience, and so there may be some contention on some points depending on who you talk to. Markup Languages There are four commonly used markup languages involved in web development. HTML XHTML XML WML (Deprecated) Others: MHTML and SGML Syndication Languages There are two commonly used syndication languages for content delivery. Atom RSS Others: EventsML, GeoRSS, MRSS, NewsML, OPML, SportsML and XBEL Metadata Languages There are five commonly used methods to embed rich contextual metadata. DCMI META (Classic) Microformats OWL RDF Others: APML, FOAF, hSlice, OpenService Accelarators, P3P, PICS (Deprecated), SIOC and XFN Stylesheet and Transform Languages There is a single stylesheet language and a single transformation language for the web. CSS XSL Others: DSSSL and JSSS (Deprecated) Client-Side Scripting There are a number of client side languages, though most are connected to JavaScript! AJAX (XHR) DOM Scripting Flex (ActionScript) JavaScript VBScript Others: E4X, ECMAScript, JScript, JScript.NET and WMLScript (Deprecated) Server-Side Scripting There are a huge number of server-side languages to choose from. ASP ASP.NET ColdFusion JSP Perl PHP Python Ruby On Rails Others: Lasso, OpenLaszlo, Smalltalk, SMX, SSI and SSJS Database Management Systems There are four popular SQL-based relational databases worthy of consideration. MS-SQL mySQL Oracle PostgreSQL Others: Derby, MongoDB and SQLite Sandboxed Languages The likes of Flash and Silverlight run in an independent sandboxed environment. ActiveX Flash Java Shockwave Silverlight Server-Side/Web Server Settings There are two configuration languages and one search engine language file! .htaccess Robots.txt Web.config Rich Internet Applications There are several frameworks which will take your web applications to the desktop. Air Gears JavaFX Prism Others: Cappuccino, Curl and Titanium Vector Modeling Languages There are 5 popular modeling languages for both 2D and 3D graphic and chart rendering. 3DMLW Canvas (HTML5) SVG VML X3D Others: 3DML, 3DXML, SMIL, UML, VRML and XVRML PostScript Format Languages There are two web compatible PostScript formats for document manuscripts. PDF XPS Others: FlashPaper and OpenXML Data Formatting Languages All of the above languages format information of various different mediums. DocBook KML MathML OpenSearch PAD Sitemap VoiceXML Others: DOAC, DOAP, GML, GraphML, InkML, OpenMath, SISR, SRGS, SSML and XMLTV Document Schema Languages There are two popular schemas for rendering markup languages on the web. DTD XSD Others: DSD, RelaxNG and Schema XML A Caveat about Comprehensiveness While only languages that are well recognised and have a reasonable level of support are provided in this list, it’s worth pointing out that many others exist and could perhaps be worthy of inspection if you feel the need to dive into something a little more obscure and possibly interesting. Going Forward Now that you are aware of the sheer multitude of options at your fingertips, I’m sure you’ll want to run off and investigate these languages further and perhaps learn another skill that you can add to your resume (or further enhance the way you approach building a website). Just Starting Out? If you are a beginner to the whole web design/development scene, my general advice would be to stick to one of the languages I have highlighted as recommended in each category (if you feel that researching for yourself would just confuse you) and to follow through each layer in order as it’s been listed to give you a general roadmap to cover whatever you may wish to employ (HTML is a great starter language). Depending on the needs of your website, you can wrap additional layers around it. It’s worth making a note at this point that the order, breakdown and recommendations provided are simply my interpretation of how the task of finding a new language can be undertaken. Factors That Can Affect Your Choice It’s important (before we leave this discussion) to underscore the general point that your choices for each layer should be made upon a mixture of intended compatibility (so you know your choice will work for your visitors), relevancy (if the language is current or deprecated) and what you feel comfortable using. Don’t Sweat It Beginners to the world of web design/development should remember that even the most experienced gurus of the web started from the bottom and worked their way up one skill/language at a time. If you feel that all the choice at your disposal is too much for you, simply follow my recommendations and you’ll not go far off course. While all of the considerations and lists may seem like a lot to take in, the great thing about coding for the web is that you only need a couple of languages to get started. The rest of your knowledge can evolve over time and evolve as you add more layers to your work. Hopefully, you’ve been given the inspiration and pathway to perhaps look beyond the conventional HTML, CSS and JavaScript towards languages you might have never considered before, and I look forward to seeing what comes of your learning a brand new exciting web technology! Related Content The Anatomy of a Website The History of the Internet in a Nutshell 10 Revealing Infographics about the Web Related categories: Web Technology and Web Development About the Author Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need. The Anatomy of a Website Jacob Gube — Wed, 05 May 2010 09:20:58 +0000 Advertise here with BSA Many people find it hard to picture a website as more than a bundle of content. This often makes explaining the mixture of languages used and the way everything comes together a difficult task. Because what makes up a website can be related and linked to the physiology of a human body, this article’s comparison should help clients and beginners alike understand the complex nature of a site’s creation and components. Disclaimer: It’s probably worth pointing out before we start the "autopsy" that I’m not a doctor. Therefore, I recommend you don’t practice this literally on your friends and family — they won’t appreciate you peeking inside their ears to look for meta information! Designer DNA: Schemas and DTDs Humans have predefined characteristics for how we look. These building blocks of life are passed down to us through genetics, and when arranged properly, give us our unique appearance. This process of evolution takes millions of years to adapt to changing environments and certainly plays a part in limiting both our structural and visual appearance. In terms of the Web, the regulators of code "genetics" are commonly known as Schemas (you’ll be aware of these devices from DTDs). The human body contains DNA, just like a website. It explains how your body should react. Of course, while the process of creating a schema doesn’t take millions of years, it does take a certain length of time for new languages to appear and become widely adopted, thereby evolving the building blocks of your website. As a result, while sites may look different, you can be assured that they only use one of a family of structural languages that predefine many of its characteristics, and what you end up with will share common elements and tags with many millions of others. Bonus: The very inclusion of a DTD in your document can set standards for your code and avoid the obscurities that quirks mode can present to your web browser. Therefore, having this DNA, which describes the language used, can prove beneficial in inheriting Web standards. A language specification and DTD provide the genetic material all websites use and inherit. Skeletal Structure: The Structural Markup The structure of the human body is made up of bones that define our basic shape — the same is true of web documents in the sense that they are shaped from various interlinking elements that form the backbone of the Web. Most web documents are formed through languages which describe the skeletal structure of the document, such as HTML and XML. RSS is also a classic example of a markup that structures a website’s content. Without these core markup languages, your website would not be able to maintain its layout. All the parts of a website join up, like the bones that interconnect within your body. While each bone in the human body serves a specific purpose, entire groups of bones can serve a single job, such as the ribs (each protects your lungs) or your finger bones which help you grasp objects. Because this repeating purpose can exist within a website’s body, they can be distinguished by attaching conventions like microformats that can give additional semantic characteristics and value beyond what a "generic" or reused element would offer, acting as a point of bodily recognition. Bonus: Microformats are descriptive elements (usually as class or ID values) which give your structure some recognisable semantic values — this is much like recognising each finger bone by its appearance and unique characteristic. It’s labeling your anatomy for referral! Bones are like web page elements: They build up a logical structure that gives the body its core appearance. Mechanical Muscles: Client-side Scripting Being able to move allows you to interact and engage with people you meet. Without muscles, we can’t turn thoughts into a reaction. As people expect a certain level of involvement with your site, not enough interactivity could make your site appear unemotional. Muscles work between the skin and bones to allow both to fluidly play their part in the interaction. The same is true about sites where behaviour underpins the style and structure of a site to "flex" only when interaction is required. When you flex your muscles, movement occurs. When a website flexes, a reaction also occurs. Client-side scripting is the muscular component of a site. Languages like JavaScript allow interaction when visitors click, move their mouse, press a key on their keyboard or make any other noticeable gesture. This response mechanism functions just like the body in that it reacts based on its surroundings. Simply put, the "muscles" act as a way to interact and make noticeable changes in structure (standing up rather than sitting down) or appearance (smiling instead of frowning). Bonus: Just as humans have multiple methods of input (such as sensory mechanisms like touch, taste, sight, smell and hearing), JavaScript and other client-side scripting languages can interact and react based on its own input methods like touch, speech, automated actions and movement. Movement and reaction are key components to both human survival and website interaction. Nervous Reactions: The Web Browser With scripting included in your website comes the need to send and receive information that acts upon the interaction occurring within your design. In a website, the mechanism of communicating these signals belongs to the user-agent or server that handles the requests and reflects those requests to act into a mechanism that is visible to the end user. In short: Your web browser works the mojo! In the human body, such requests are sent as electrical signals that pass through the various organs and are broadcasted to conduct the action determined from the receptor, such as when you feel pain. In a website, while pain doesn’t exist (except for the end user who encounters an unusable interface element like a nasty webform) the code fires signals to the browser upon examination and triggers structure, style and behavioural reactions in turn. Bonus: The rendering engine of a browser does everything from ensuring the sites "body" appears correctly, right down to reacting upon interaction. Even the likes of Flash,which attach themselves to a browser, have their own method of "nerve"-based interaction! Flash websites are a great example of how information is rendered to progress effects. The Heart: Content and the Community The heart of a website is its content — if you’ve read any "Content is King" articles, you’ll know what I mean. With the human heart, a constant supply of oxygen needs to be pumped around the body to the vital organs — otherwise you’ll suffer long-term damage. The same is true for the Web, when a lack of quality regularly updated content exists, the site will become inefficient in producing visitors (the life blood of a site) and will starve (as it’s abandoned), thereby giving the site’s body a fatal blow. If the heart is healthy, the pathways will be clear. If too much damage occurs, it may break. The website’s content is encased within the structure, securing it where it needs to appear. The more pages you add, the stronger the structure — both internal and external — of the website will become. Therefore, as a result, it will become more resilient for when illness appears. The outdated but still constantly visited W3Schools is proof of this. The balance of getting visitors (blood) around the body of the site will depend on how much depth and energy is put into a content-rich website. Bonus: While not enough visitors can cause the heart to be starved of oxygen, too many visitors can have a similar effect. Just like when your heart works too hard, a sudden spike in traffic could make the server where your website is located collapse under the pressure, just like a heart attack! Poor quality content of little visitor value will simply result in your community dying. Blood Vessels: Information Architecture As mentioned above, the ability to get people (the blood) to the places they need to get (feeding the site’s popularity and architecture) is one of the key elements of building a website. The way a site takes to interlink all the bodily elements which comprise a website is commonly referred to the information architecture. This — in simple terms — is the way we organize, structure and relate pages of a web design together (and how each page is structured in itself). This well-organized method of interlinking the needs of various components of a website can be easily be recognised in the human body in terms of the blood vessels. As described before, if visitors are the life blood of a website, the blood vessels would be the way we address the interlinking of pages, the findability of information and how files connect to feed each other (relative to the overall site structure). Just as blood flows in the body, humans should flow between pages and sections. Bonus: Usability and accessibility have their place in this analysis. When dead links or poor navigation occurs, the damage caused can haemorrhage visitors (as they leave your site). The case of where a button cost millions of dollars shows this relative link in full effect! If pages don’t link together appropriately, it can result in a loss of your sites visitors. Sexy Skin: Aesthetics and Web Design What makes people look human? Well, part of it is their features such as their eyes, nose and mouth, but their skin and visual appearance play an important role. Whether someone is tall, short, fat or thin, the skin adopts the form, and is fairly elastic and flexible in how it covers all of the structures of the body. While you’ll want your site’s skin to appear beautiful (as design is as relevant as human beauty) you also want to make sure that nothing "hangs out", looks ugly, or out of place! Things always look prettier with skin attached; your website is no different! In terms of web design, the primary language dealing with the style of a website is CSS. This attaches itself to your structure and layers on elements of style, which give the visible physical appearance you desire. If you want your site’s skin to be neon green and flashing pink, though not advised, it is entirely possible! Just like in humans, the skin is simply the outer layer that works with the internal elements but has its own unique method of affecting how the body will look to the visitor. Bonus: Unlike humans, a website design can alter its own physical appearance dynamically. Techniques include using behaviour like JavaScript to alter style on demand. This gives sites a chameleon-like quality because they can adapt to their conditions or surroundings. When the skin is wrapped around something, it feels like an entirely different creature. Brain Retain: Server-side Scripting and DBMS The thing in your head allowing you to think, remember, and behave according to your surroundings, is the closest thing to a computer you have. The brain allows decisions — the best method of dealing with complex situations — to be made. How does this apply to a site? There are three things that must be taken into account which apply directly between human and website anatomy. These are referred to as the acts of behaviour, memory and identity. The brain handles a lot of stuff, even your website’s server has to take in everything it’s told! When we talk about the behaviour of the brain, I am referring to the things we think about doing and then override our bodies to achieve, such as when you instruct your body to punch someone (thereby carrying out the punching action). While we have already mentioned behaviour in terms of muscles, you should remember that you do not think (actively) about breathing or walking — you go through a methodology of stimulus and response (and the brain controls reactions which occur). Bonus: Server-side scripting for dynamic websites showcase a site’s brain at work, allowing your website to make decisions based on a situation (or previous knowledge as held in storage) and act upon them rather than automatically carrying out an action (like muscles). The brain has the ability to remember many thousands of things, and computers can do the same. When you store information within a database, it holds the information until it is requested, deleted or damaged (this acts the same as a human’s long-term memory). This information is usually organized relative to what type of information is contained, and can be easily searched or referenced to access the information without suffering digital amnesia. Servers have to relay the content you input to a place where it can be recalled, it’s just like human memory. Of course, everyone also has short-term memory: Both cookies (which retain stimulus specific data like usernames and passwords) and browser caching (which contain re-usable more generic visual stimulus — like images and client-side scripts) hold the purpose of storing small pieces of information for a limited period of time. With both long and short-term memory that can be retrieved and used until deleted or committed to a permanent and secure form of memory, it’s easy to see the human resemblance. Bonus: Of course, the human brain is much more powerful than that of current computer systems, but the diversity of information management, memory and organization gives computers a strong relationship in the likeness the human anatomy has to websites. Last is the act of identity: being able to know who, what and why you are. We all have our own personalities and this is something we take for granted, but sites can have their own unique sense of self in the form of metadata. This information is held in the head (or as I call it, "thinking" code) of each page which is not visible to visitors but explains to search engines, browsers or applications wanting to associate with the contents contextual or semantic value, just like in a reference library. Your head does the thinking and your body visibly reacts, just like your website. Bonus: While a site’s identity may be produced by its title and meta information, the actual information and abilities which a website contains are ultimately what determine the real nature of a website (sort of like humans having personalities reflected in their appearance). Nature versus Nurture While all of the above may help you explain the process of web design to clients in a way they can understand (or perhaps just give you something fun to pass around the office), it’s important to know that lessons can — and should — be taken from the relative interlinking that a site can have with how the human body is formed. A site, just like humans, can suffer imperfections. Some can be overcome, some can’t (without a total redesign), and therefore care and attention should be given to helping overcome problems of significance. The evolution of a website can equally be put down to a mixture of nature (what the coder puts into the site) and nurture (what the end-user adds with growth), both of which have significant importance and shouldn’t be ignored. A website’s survival depends on many things working perfectly in synchronization. I think most of us underestimate how complex rendering a website is. Frequent testing can spot early onsets of problems. But the most important thing to consider is that websites (just like humans) are formed of many layers, all interacting together, to which you need to apply as required (without making the site obese). Think of your website like a child, you don’t just feed it once and abandon it. The child requires time, money, effort, care and attention to keep it healthy and help it survive into adulthood. Websites are like humans, they have layers, all interacting and working in synchronicity. I think it’s a fair comment to make that while standards and the way we build websites evolve, the need to make our work less static and more interactive and dynamic will aid our continued progression towards the next level of the Web. Who knows, in a few years we could yet again find ourselves becoming even more involved and emotionally tied into our brands than we are today! Related Content 10 Simple Tips for Launching a Website The Ingredients of a Successful Website 7 Incredibly Useful Tools for Evaluating a Web Design Related categories: Web Design and User Interface About the Author Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.