The Best and Worst Trends in Modern Web Design

By Wesley Fenlon

The barrier of entry for web design has never been lower, and web technology has never been cooler. Unfortunately, some obnoxious design decisions still sneak into our favorite sites.

In the mid-2000s, sites like Digg helped popularize the term "Web 2.0" without ever specifying exactly what it meant. Web 2.0 often came to describe a style of web design that employed new techniques like CSS rounded corners. Color was in. Curves were everywhere. But Web 2.0 also represented something bigger: a trend towards social media integration, community interaction, and a richer, fuller web experience. The term itself is dated now, but the goals are still very much alive. Social's still important. Web apps and technologies are more advanced than ever.

For all the amazing advancements made in the past decade, web design still has some growing up to do. For every trend we want to encourage and see more of, there's an annoying implementation of modern web technology that we hope designers move away from. Some of the coolest features powering websites today--like WebGL and 3D CSS--do things with HTML and CSS we never thought possible. Those are great. JavaScript pop-ups and invasive copy-and-paste insertions, though? Not so great. Let's examine some standout examples of both good and poor practices.

The Best

The good stuff comes first. Easy as it is to complain about pop-ups and everything else that makes web browsing a more frustrating experience, HTML5 alone has made the web more dynamic and animated in the last couple years. In short, these positive innovations easily outweigh the design choices that we oh-so hate.

Tumblr

Founded in 2007, Tumblr arrived on the Internet around the same time Twitter was gaining traction as a major social network. That timing is significant, since both platforms differ from other web services like Blogger and Facebook. Tumblr started off as a Twitter-esque microblog service, specifically geared towards the creation of short, bite-size posts with an image or video embed or just a few sentences of text. Yeah, that sounds just like Twitter--and Twitter grew enormously. Tumblr seemed destined for Twitter's shadow, but that's not quite how things shook out. Instead, the service moved into the traditional blogging space, offering free and customizable blog hosting for anyone interested in signing up. Tumblr renovated blogging. And, to a lesser extent, personal website design.

Perhaps most importantly, Tumblr allows its users to redirect real domain names to their Tumblr blogs. Free and premium layouts are installed with a couple clicks, but Tumblr fully supports custom HTML coding and rooting around in theme CSS files. Thanks to all these features, what began as a microblogging platform became a free tool for creating personal websites and portfolios. The change paid off: Tumblr now hosts more than 20 million blogs and offers a substantially more customizable and open-ended service than competitors like Wordpress.com. It's so good--and so free--there's practically no reason to pay for monthly hosting for a small personal website.

Adobe AIR

For years, Flash served as Adobe's primary software development platform offering. And let's face it: Flash apps, and especially Flash websites, tend to be terrible. Flash games occasionally defy that stereotype, but Flash websites are consistently clunky and annoying. Adobe AIR applications are neither. AIR, or the Adobe Integrated Runtime, is a cross-platform runtime system for rich media apps built on web technologies including HTML, JavaScript, and Flash. That cross-platform bit is key, since it allows developers to build apps for the AIR runtime and easily release them for Windows and Mac, iOS and Android.

Downloads are quick, installations snappy. AIR represents the mobile app mentality distilled into a cross-platform environment: AIR apps are typically small and lightweight, with clean rounded corners, simple layouts and focused functionality. Web developers should feel right at home building AIR apps thanks to the HTML/JavaScript overlap. And all of that stuff aside, we just really, really love TweetDeck.

WebGL and 3D CSS

Here we are on the cutting edge of web technology: WebGL, a software library for creating 3D images inside a web browser, just hit a 1.0 release in March 2011. Mozilla, Google and Microsoft have all focused on adding GPU acceleration to their browsers throughout 2010 and 2011, resulting in dramatically improved rendering speeds in graphically intensive web apps. Early demonstrations of WebGL like Google's WebGL Globe and the beautiful 3 Dreams of Black hint at how powerful hardware accelerated 3D graphics can be within the web browser.

WebGL stands to revolutionize browser games, or at least change how we interact with web technology. We don't need plugins for WebGL--a modern browser is enough to jump into 3D web apps, and there's no telling where this tech will go in the future. It can already run a demo of Quake 3. Some seriously impressive browser games likely aren't too far behind.

3D CSS rendering offers similar advances in web design by allowing developers to position page elements in 3D space using CSS. 3D CSS includes transforms, transitions, and animations, which currently don't work in all browsers. If you're using Safari or Chrome, you should be able to see all three implementations of 3D CSS. Firefox 4 and 5 do not support 3D CSS transforms. Check out these demonstrations of 3D CSS3 at work to get a feel for how CSS is advancing.

Both 3D CSS and WebGL are bringing us closer to being able to experience interactive 3D using nothing but native web technology. HTML5 is doing the same by gradually replacing Flash video. Exciting progress.

The Worst

While the platforms and technologies listed above are making web design more powerful and more accessible, there are always new annoyances creeping their way into mainstream Internet use. And there's always the really horrifying stuff like identify theft, trojans, and widespread hacking, but those are security risks as old as the world wide web itself. Here are some recent "innovations" that are sure to have us jamming on the Back button or grimacing in distaste.

Copy and Paste Shenanigans

Here's something that happens on the Internet every day. Constantly. People steal stuff. They copy the written word without making attributions, rip off images without acknowledging the source, or hijack RSS feeds to load their own sites with content from other sources. That sucks. But some publications have decided to fight back in the most annoying way possible--but inserting extra unwanted attribution text into your clipboard whenever you copy a few words of text. John Gruber calls it "a bunch of user-hostile SEO bullshit." Yeah, that sounds about right.

This evil practice comes from a company called Tynt, which promises 40 percent more visits to an individual webpage from its viral dissemination of hyperlinks. Every time you copy a set number of words from a publication like The New Yorker (typically 8+) you get some text like this rudely attached to the text you wanted to copy:

Shortly after eleven o’clock on the night of May 1st, two MH-60 Black Hawk helicopters lifted off from Jalalabad Air Field, in eastern Afghanistan, and embarked on a covert mission into Pakistan to kill Osama bin Laden.

Read more http://www.newyorker.com/reporting/2011/08/08/110808fa_fact_schmidle#ixzz1UOd2WPty

Sites deserve traffic for their original content, but this isn't the way to go about driving viewers to those pages. No one who copies the text is going to leave it in place wherever they paste it, and it's a technique that will only annoy frequent users. What's worse, as Gruber points out, it's a pretty invasive process: the sites use JavaScript to report what text you've copied to an analytics server. Someday those "Read more" links may be replaced with blatant advertising. If you find this stuff annoying, Gruber's post on Daring Fireball explains how to block Tynt's extraneous text.

The Roving Rollovers

Pop-ups are an established terror in online advertising by now, but extensions like Adblock minimize their impact on our day-to-day browsing experience. Recently we've noticed some far less heinous--but plenty distracting--animated ads roll-in from the side or top of a few websites. Technology Review, which uses this technique to shepherd readers towards other stories, calls this annoying little bit of JavaScript a slidebox:

<div id="slidebox">
...
<!-- The JavaScript -->
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
/* when reaching the element with id "slideboxplacer" we want to show the slidebox. Let's get the distance from the top to the element */

That's a chunk of the code that makes the slidebox work--it goes on to specify how far down the page users have to scroll for the box to pop into view. Scrolling down to the end of an article tends to call upon the slidebox. We're already easily distracted--these things don't make reading any easier. Sometimes they even sneak in from the top of a page. Begone, obnoxious ads!

Thanks for bringing this into our lives, New York Times. It's not distracting at all.

The Spammy Social Media Button

Social media tie-ins have their place. We get it: tweeting articles, giving thumbs up, and pushing posts to Facebook can drive serious traffic to worthy content and encourage user interaction. That's all great. In digg's heyday, that digg button was invaluable. Today, too many services push out canned messages to Twitter not to share interesting content but to broadcast worthless information. "I favorited a Youtube video!" "I'm at Bobby Jo's Bar-B-Que with 4 others!"

Some of these messages have good intentions. Foursquare, for example, telegraphs where you are, what you're doing, and who you're with. In a perfect world (or a social media ecosystem ruled by Google+ circles), this message would go out to the friends who live in your city and regularly socialize with you. To them, that information is relevant. But that's not how it works. In general, these messages are just pushed out to an entire Twitter feed. To most of those people, the post is worthless. And yeah, there's lots of worthless junk on Twitter--but this isn't even original junk.

Too many websites integrate these social media tools and encourage users to click a couple buttons and shoot out formulaic messages that no one cares about. Forcing users to enter their own text would be a step in the right direction. That would, at the very least, introduce some variety into the spammy nature of check-in and achievement-driven social network integration.

Lead image via eBoy, Testacles image via Rallier