Seven Outdated Web Design Concepts

I say, isn't it about time you updated that website you had your nephew build for you back in 1998? Outdated web pages look older every year, and now that the World Wide Web is pushing on into the 2010s, even some of the hot trends of the 2000s are beginning to show their age.

If your website's outdated, it says bad things about you. Visitors might think you must have gone out of business, have no taste, only care about an older audience, or are just too technically incompetent to keep your website up to date. If your website is sporting any of these long-gone elements, perhaps it's time to think about an update just to keep up with the passing decades.

1. Photoshop design / Image slicing - This used to be the default method of design, even by the pro shops. But not only is slicing an image to fit into tables now outdated, but the whole "design it in Photoshop" thing is an anachronism. Modern-day sites, relying more on CSS than tables, fare far better if laid out in Fireworks, Illustrator, or Inkscape.

2. Background music / autoplaying media - Probably there are no .MIDI sound files playing any more (we hope! those got old even in 1998!), but today's equivalent is media such as video or Flash ad content that starts playing sound as soon as the visitor arrives. At least let the visitor mouse over the element or give them a way to pause it.

3. Instructions on how to view the page - "This page best viewed in Internet Explorer 6.0!" You might as well have a gravestone over the top of your site: "Rest in Peace." Not only does the version number date you (IE6 is about a decade old!), but the whole concept of specifying the correct browser is just not washing with modern audiences. Ditto screen resolution; we have people reading web pages on everything from mobile phones to XBox consoles on wide-screen HDTVs now.

4. Javascripted links - All browsers these days have tabs, which means that your visitor wants the option of opening a link in a separate tab. Any link on your page that tries to force the visitor to do different is annoying and obtrusive. Links should be in HTML only. Note, however, that having HTML open the link in a new window is compatible, because the visitor can still force it into a tab instead.

5. Splash pages - Old, old, old. The only exception to this rule is some media-heavy website for an accomplished artist. Musicians and animators and such can get away with making a big production out of showcasing their website. Everybody else has visitors who are there to grab that thing they need and be on their way, preferably in one minute.

6. One-page sales letters - We've all seen them. They looked tacky and gaudy when they were first being made back in 1996. In addition, there's something about the way a lo-o-o-ong, hard-selling page that scrolls and scrolls, which is just kind of ranty - it reminds you of the TimeCube guy. In this day, visitors are so turned off that they're likely to ban your domain just for seeing a sales letter on it.

7. Background images - The exception is if the image is small, minimal, unobtrusive, and the content still has a solid box behind it so you don't have contrasting background. Even then, it's a risky design. The rue is, if the background image is one of the first three things you notice about the page, you're doing it wrong.

Web Designers Bandy About NoSQL, Everyone Else Baffled

The least sexy word in the English language is "database." You could just have the wildest party in the world happening, and run in and yell "database!" and it would take the fizz out of the champagne, make the DJ pack up his rig and go home, stop the dancing cold, and make everybody run away. Databases are the exact point where a CS major quits studying to be a web developer and decides to become a web designer instead. It's still used in Catholic school to punish unruly students.

So everybody's supposed to be very excited about this new NoSQL thing. Now we have to pretend to be excited too. We also have to pretend to understand what NoSQL is all about. Yes, horizontal scaling!

And we'll also nod along with the important-sounding acronym ACID, which stands for "A Completely Important-sounding Designation," and something about what databases should do. Of course, all this is drawing fresh ink because Oracle bought out Sun, and... wait a minute, what does Oracle make again?

Join us next time for the thrilling conclusion, when the backlash movement "YesSQL" makes an even more obscure ripple of hype!

Web Design - What Is Flash?

Apple says Adobe is working to sabotage HTML5. Adobe says HTML5 is no threat to Flash. Everybody's watching the fight, and we love the six-fingered tattooed fist in the image, guys!

While we're all bickering, could we help by pointing out what Flash is?

In the first place, Flash is not an Adobe innovation. Flash was originally developed in 1992 by a company called Macromedia, when it created a browser plug-in originally for Netscape Navigator. Life went on this way for 13 years, all the way up until Adobe bought out Macromedia in 2005, in a hostile takeover which also acquired Dreamweaver. Since 2005, Flash has gone from being a relatively controversy-free plug-in to being a hotbed of drama and turmoil.

But here's all Flash is: a way to script actions and animate images in a web browser. That's it. It is made out of just three things: SVG (Scalable Vector Graphics), XML (actually just the SMIL-type functions, for multimedia markup), and a scripting language called Actionscript (which, as is plainly evident to anyone who's coded in it, is just an ECMAScript implementation nearly identical to Javascript).

It is very difficult to justify this plug-in in the year 2010, when it can very easily be mimicked with open standards that have existed for years. In fact, that's exactly the case with what we're seeing now:

• "All major desktop browsers, and many minor browsers, have some level of SVG support, except for Internet Explorer." No less than Tim Berners-Lee has criticized Microsoft for failing to implement SVG browser support.


• Then we have AJAX. For basic user interface controls AJAX blows Flash away. There's even the AJAX Animator project.


• Javascript itself is now sturdy enough to deliver comparable performance. Here's a Tetris game done using nothing but SVG and Javascript. Here's Lemmings done in DHTML and Javascript. And look what you can do with a JQuery plug-in. We could go on and on.


• And then there's Java. Java is open-source now. The Java plug-in still works, and it does much more than Flash can do anyway.

So it isn't a case of Adobe having to defend its turf. Its turf has already been invaded, occupied, settled, and homesteaded. It lost its last leg to stand on as early as 1998, when Netscape spawned the Mozilla browser by releasing their code under the Netscape Public License.

Peter Brittain
Web Design Perth

Web Designers - Know the Web Audience - Age Demographics

Every web designer should at least save a copy of this chart listing social media use by age. It's a gold mine of information in a small image. Charting age brackets for young teens, young adults, Generation Y, Generation X, Baby Boomers, Older Boomers, and Seniors, it shows who's using the features of the modern web, from creators to spectators.

Obviously, you can see the age range from 12 to 40 doing all of the web activity to speak of. After age 40, the dip falls off dramatically until you get to seniors whose extent of web use is email. One interesting exception: RSS usage is flat all the way across the age groups! As surprising as it may seem to those of us who simply can't start our day without our news feed, syndication just may not be taking off like everybody expected it to.

Peter Brittain

Web Design: 53 CSS Tricks In One Place

A nice little round-up of 53 CSS-Techniques You Couldn’t Live Without, over at 9tricks. These represent the leading edge in everything CSS is capable of lately. It's surprising that we don't have more of it deployed.

A few observations on the list:

• We've seen 1001 rounded corners tutorials, but none of them will compare with the one-line 'border-radius' feature... when all web browsers support them.


• Wrapping text around an image - every hack for this we've seen deployed so far works in two browsers and breaks in all the others.


• The dynamic piechart looks like one of those painfully-obvious image-sprite hacks, but you have to admit you never thought of it until you saw it.


• The adaptive layout technique - this is the next feature we're going to be crying for better solutions for, in HTML6 and CSS4. The massive array of screen widths we now have to deal with, from pocket-mobile devices to ridiculous monitors the size of a swimming pool, is a mark that it's high time the device took care of more of this for us.

Peter Brittain

Web Design - The Ten-Minute .htaccess Guide

On any website using Linux website hosting, chances are good that you have the Apache web server software at your command, which puts you in charge of the most useful file on the Internet, the .htaccess file.

If you haven't peeked into this file and learned what's going on in there, you're missing out on a powerful tool for disciplining your website (and unruly users!). You can edit it with any text editor - even Notepad! Below, a hint list:

Block directory listing:

"Options -Indexes"
What it does: Stops visitors from being able to view a directory in raw form. You might do this to prevent paid content being viewable for free, or for security reasons.

Block referrers:

After the line that says "RewriteEngine on" put:
"RewriteCond %{HTTP_REFERER} badplace\.com
RewriteRule .* - [F]"
What it does: Stops visitors who follow a link from a specific site. Usually you'll want to do this to stop a referrer spammer.

Have a custom 404 page:

"ErrorDocument 404 /my404.html"
What it does: Lets you override the default 'file not found' page built into the web browser with your own custom page. This is great for catching the visitor so they don't go away discouraged. Explain the error, and offer them a link to your home page, a directory listing, a search box, or even just a silly picture so at least they smiled.

Redirect URLs:

"Redirect permanent /oldfolder http://www.yoursite.com/newfolder"
What it does: Makes all calls to http://www.yoursite.com/oldfolder/index.html go to http://www.yoursite.com/newfolder/index.html instead. This is a common problem if, say, you changed a major part of your site and will have a bunch of incoming links getting lost if you don't redirect them. This is also called a 301 redirect and can be set up the same way as the above,
ie: redirect 301 /oldfolder/index.html http://www.yoursite.com/newfolder/index.html


Stop image hotlinking:

After the line that says "RewriteEngine on" put:
"RewriteCond %{HTTP_REFERER} !^http://(www.)?your-domain.com/.*$ [NC]
RewriteRule \.(gifjpgpng)$ - [F]"
What it does: Prevents outside websites from embedding your images in their webpages. Stealing other people's bandwidth is a huge Internet etiquette no-no, but some idiot out there never gets it. What this string actually says is: If the file is an image (ending in gif, jpg, png) and the link is not from my site, deny it."

Block bad bots:

Again after the line that says "RewriteEngine on" put:
"RewriteCond %{HTTP_USER_AGENT} ^BadBot
RewriteRule ^.* - [F,L]"
What it does: Prevents visitors based on the user agent (the identifying string) instead of where they came from. You would only want to do this if you think some sort of automated program is crawling your site for some nefarious purpose, such as harvesting email, downloading content to steal, or just plain being a nuisance. You *don't* want to do this to a legitimate site crawler like googlebot! That's Google's own site indexer.

Make PHP executable from any file:

"?AddType application/x-httpd-php .html .htm"
What it does: Allows you to include PHP in a file with any extension, not just .php. By default, Apache only calls the PHP engine for files ending in .php. A warning: You want to think twice about doing this with some forms - For instance, if you have a blog running PHP and a comment form on that blog, a scripting attack could be initiated by typing PHP code (along with other code, such as Javascript), into the comment form.

Peter Brittain

Websites: The Big Five Web Hosting Backend Tools

When picking your web hosting company for the first time, it's easy to get overwhelmed when you look through the options for what the host offers.

Here, we present the top five most-used back-end technologies - and what they are good for!

1. PHP

The number-one server-side scripting language. Probably 90% of all the web applications you'll find on the Internet are written in PHP, from blogs to bulletin boards to galleries to shopping cart applications. PHP is designed with the web enterprise in mind. In the case of Linux website hosting, it's a lead-pipe certainty that this will be included.

PHP is *somewhat* easy to code in. If you're familiar with application languages like C, C++, and Java, PHP borrows a lot of syntax from that. You can do quick edits yourself, especially considering that HTML code can sit line-by-line with PHP code, but major fixes should be left up to professional developers. PHP is also one platform that needs to be maintained - past versions have had shaky security, so you want the most up-to-date version.

2. MySQL

Like PHP is the language of choice for server-side scripting, MySQL is the chosen database for websites - at least until you get into the big-business enterprise layer (where you're doing the hosting yourself!). MySQL is everything you'd expect in a small database app - fast, convenient, with a clean syntax and a very low learning curve. Once you pick up a SELECT statement, you've pretty much mastered it.

There almost isn't any competition for small database software at this point. MySQL just fits so nicely into this space, it is almost as much of a web standard as HTML itself!

3. Ruby on Rails

Ruby on Rails is the newest kid on the block. Ruby itself is a programming language. It is the most popular with the youngest generation of programmers. It is also the technology currently described as "sexy" - think trade journals and computer expos. Ruby is somewhat inspired by the languages Perl and Smalltalk, though in practice its more similar to Python. Ruby on Rails is the web development framework built around Ruby.

To hear the current generation of programmers tell it, Ruby is a near-Nirvana experience to code in. It needs to be, because it has problems with not scaling well and not being very fast. You'd be hard-pressed to find a major website which runs entirely in Ruby - instead it's found wherever a garage start-up is just getting off the ground. However, Ruby is still a young language and it may yet find a more solid footing than being the current big fad.

4. Python

Python could almost be described as the most-hyped language before Ruby. Out of all of the technologies in this list, Python has the distinction of being deployed more for the desktop and application use than the web server. On the application side, it powers some of the most popular open source applications today, and has a thriving development community. Like Ruby, Python is a joy to code in.

However, like Ruby, Python also has a problem with speed. It is still faster than Ruby, and unlike Ruby, Python scales fantastically. When websites deploy Python, they tend to be major multi-national corporations. The reason for the scarcity of Python deployments on the web is also a matter of finding qualified programmers. In any case, Python brings a huge library, an even bigger development community than Ruby, and excellent security to the table.

5. Perl

Perl once ruled the web the way PHP does now. There days, you're more likely to see Perl described as "old school" - it's been a long time since the last release, and its creators, once hailed as coder demigods, now spend more time resting on their laurels. Perl is also finding fewer and fewer available coders. Not to start a flame war, but Perl may one day find itself in the position of being a legacy technology like COBOL.

Still, if you have a legacy server app that needs Perl, most Linux website hosting companies will toss it in. Perls' two biggest strengths are speed and security. In fact, it is faster and more secure than any other platform listed here. However, it pays for that in developer pain. Its syntax is best described as looking like a trail of random punctuation marks, and the language is so huge with the motto "There's more than one way to do it!" as its most-cited value, that anything written in Perl is considered "write-only."

Peter Brittain
Perth Web Design

Webcomics That Web Designers Will Appreciate

Thank Heavens for web comics! Before them, comics were doomed to die a horrible death in the newspapers, where 75-year-old franchise-zombies hold on forever, getting moldier every year.

The web saved comics, end-of-story. For the web designer and developer audience, here are the essential web comics:

• XKCD - The webcomic that made webcomics famous. Also spawned 1000 stick-figure comic imitators. Which is silly, because the point of XKCD isn't the drawing, but the brilliant scientist creator who thinks up those impossibly geeky jokes!


• Dilbert - The only newspaper comic to survive its time in print to be reborn online as fresh as ever. It helps that creator Scott Adams is still alive and well, unlike the creators of the franchise-zombies.


• Penny Arcade - Well, sometimes you have to take a break and not think about work! This comic is focused entirely on gaming and video game culture. It's what web designers do in their off time anyway.


• User-Friendly - Founded in 1997! It can be said to be the oldest surviving web comic, and from day one it was about tech, geeks, "hackers" (it meant something else in the old days!) and development.


• Doomed to Obscurity - A new up-and-comer, but definitely worth watching. It's been called both a modern successor to User-Friendly and "Dilbert without the dog," but its humor is blaringly original, while having a focus sort of like the above four comics combined!

A Web-Designer Shares their Toolchain

It's always nice when web designers share their tools of the trade, especially when it's a mom-and-pop outfit.

This designer lists a lot of free and open source tools which they use to build a pretty impressive portfolio. Fancy IDE? Nah, Notepad++! And a freebie FavIcon generator. Open-source Firebug, the Firefox extension that turns Firefox into a power development tool. And of course, for graphics... Gimp.

People are always astonished when you say you use Gimp for production work. Bad press from Adobe and a legion of elitist Photoshop users have given people the false impression that Gimp can't do anything, like it's not even as functional as Microsoft Paint. No, Gimp is really all you need for basic web graphics. It's just doomed to live in the shadow of everyone who doesn't want a Gimp, but instead wants an open-source Photoshop.

Peter Brittain

YouTube: What really is the bandwidth Bill?

A great new insightful article over at wired.com suggests that YouTube may pay less to be online than you do.

The story goes on to say that "the extraordinary fact that a website serving nearly 100 billion videos a year has no bandwidth bill means the net isn’t the network it used to be"