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

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"

Ideas For Money On The Side In Web Design

If you work for a web design firm, you might have to sign no-compete agreements (depending on the laws in your area) saying you won't work for clients in your off-time. However, web design is a big field, and touches a lot of side enterprises. Here are some ways you can put your extra tech-savvy skill points to work doing a little moonlighting:

• Blogging - So obvious we almost don't have to say. Most every web designer has a blog or social media account of some kind. Toss in some ads, and you've got a little side money. Free blogs at Blogger.com


• Facebook apps - Fun little side boxes you can make in Flash, AJAX, and Javascript. Can be useful or fun - most are trivial, and if it's popular enough you can sell memberships and or licenses for revenue. A registry of Facebook apps.


• iPhone apps - No doubt you're heard of some of the top-selling applications for the iPhone. Apple lets you set up a store and sell these at the iPhone apps store.


• Twitter backgrounds - Twitter has given rise to a new cottage industry in making backgrounds for Twitter home pages. Many sites give away backgrounds, a few sell them or make them to order for a fee. Mashable's HOWTO on creating Twitter backgrounds.

Peter Brittain

A Piece of Web History - The Very First Banner Ad

SCTimes brought up the very first web banner ad, created by none other than - AT&T! The American telecommunications company (and father of Unix and the C programming language, to boot) launched this ad in 1994.

For those of you who don't remember, the banner ad's phrase "you will" was the catch-phrase for AT&T's early-'90s marketing campaign. TV commercials featured voice-overs asking "Have you ever..." followed by some Utopian visions of futuristic tech usage, and then closing with "you will! And the company that will bring it to you... AT&T!" It was so saturated that numerous parodies sprung up in computing culture. Some original AT&T ads on YouTube.

Peter Brittain

Web Design Tips - The Five Web Page Ads That Users Can't Stand

Of course, we all want to make money on the web. Our web design clients especially.
And most users - even the ones who never click anything - understand that. In the polls we've seen of the average website visitor, most say they don't mind ads as long as they don't interfere with the browsing experience. Oh, but those others! Here's five advertising designs not to use:

1. Pop-ups - Doable with a simple Javascript 'alert' function, pop-ups are the oldest hated ad on the web. Almost obsolete since most browsers can be configured to not display them anyway.


2. Talking ads - Like the 'smiley' one you see that whistles and yells for attention. Users hate these, and they might also get fired for browsing the web at work when their web browser suddenly starts chattering and they forget they have the sound up.


3. Expanding banners - The corner kind are OK, since they are easy to recognize and don't intrude onto the main parts of the page. But when you have the flat kind that drop down over the web page like a curtain, it's irritating.


4. Floating boxes - These are the Javascript dealies that have replaced pop-ups. Browsers can't block them without turning off Javascript completely. A Javascript box that coasts in after a minute and hovers in the center of the page with no visible way to turn it off just drives the user somewhere else.


5. Misleading linked text. - This could be not-so-annoying, if only the link went somewhere that had something to do with the article. An adlink going to a swimsuit site in the middle of an article about hamsters, however, is pushing it.

Peter Brittain