Skip to Content

Free TUAW iPhone app -- try it now!
AOL Tech

webdesign posts

Filed under: Fugly Friday

Fugly Friday : Bannock County Bluegrass Festival

Oh Idaho. We love your delicious baking potatoes, the mouth feel we get when we say "Boise", and, uh, whatever the third thing to love about Idaho might be. In any event, that third thing to love about Idaho probably isn't quality web design.

Poor layout, dancing graphics, overuse of capital letters; I've learned to forgive quite a bit. What bothers me most about Bannock County Bluegrass Festival is their complete and utter disrespect for the trichromacy of the human eye. Purple, Cyan and Green should never have existed in the same universe, much less a single web page.

In fact, the only single point upon which those three colors should converge is in a low-rent stripper's eye makeup. As Marge Simpson's mother once said, "Ladies pinch. Whores use rouge."

Nevertheless, if you happen to be near Pocatello, Idaho this weekend -- and I'm sure you must have your reasons. S'ok, we won't question your judgment -- check out some Bluegrass and beer. But, if you run into this guy, for the sake of everything holy and decent, please offer to buy him a color wheel.

[Thanks Peter!]

Filed under: Fugly Friday

Fugly Friday: three wellsprings of ugly


Last week I covered RogerART, but this week I'm going to look at a great source of ugly sites. Three sources, in fact. The first is known by millions of people: Fark. Yes, I picked Fark because it has, traditionally, carried a lot of links to local news sites or personal sites. And let's be honest: most local affiliate sites (like your local ABC/NBC/CBS TV station's site) look like crap. They have been getting better in the past couple of years (competition breeds UI upgrades, apparently), but I still think the trend to bland, generic pages isn't anything to crow about. Thank you, Fark, for the years of fugliness. I won't mention the horrid Photoshop atrocities you'll find there, mostly because there's a certain folk art aspect to those hilarious GIFs...

Speaking of fugly imagery, the other two sites are jumping off points for even more fugly spelunking: Worst of the Web and Jim Westergren's list of "Worst Web Design Ever." Worst of the Web has archives going all the way back to 1996, but many of the sites they reviewed are either gone or upgraded -- you'll have to cross check with the Internet Archives to see the real fugs there. But Jim's list is pure comedy gold (RogerArt is on there, for example). The sites he features are a mishmash of personal sites and just plain crazy design disasters. Like the MIA site, which I'm not sure, but I think that atrocity is actually on purpose.

Do you know of any other lists of fugly sites? I remember one about 7 years ago that pointed to this guy, but I can't find it now.

Filed under: Design, Internet, Web services, iPhone, Web

iPhoneize your website, instantly!

If you don't know anything about the iPhone, the MobileSafari browser, or web design in general, creating an iPhone version of your website can be daunting. Intersquash.com makes it easy. Just put in the address of your site's RSS feed, give it a name, and click iPhoneize. If you want, upload an icon. That's all you have to do: Intersquash gives you a little bit of code to paste into the body of your site, and it's magically optimized for iPhone viewing.

Last time I looked, Intersquash had already iPhonized around 2,000 websites. The results are nothing fancy, but you get a clean, readable, functioning iPhone site. It definitely beats making iPhone users wait for for your full site to load. You do need a working RSS feed to use Intersquash, but you've probably got one of those if you use any major blogging platform. If you're having problems, try a service like Feedburner.

Filed under: Design, Fun

See the web without words

Some web designers have an uncanny ability to look past all the text and advertising on a webpage, directly at the structure of its design. Now one of them is letting you do it for yourself. Paul Armstrong's project "Web Without Words" started as a bare-bones blueprint of CNN, but is now an ongoing experiment. You can even submit your own site to be considered for the Web Without Words treatment.

Replacing all the words and images with plain blocks is interesting all by itself, but Armstrong's analysis make the site fun to read, too. He refers to Yahoo.com as "a Starbucks-drinking, Gap-or-Talbot's shopping, trend watching fellow," and calls CNN.com "the know-it-all of news sites." Whether you agree or not, it's at least thought-provoking, and at best could inspire you to take a hard look at your own site design.

Filed under: Design, Developer

Tests confirm CSS selectors slow load times

Most Web designers make liberal use of CSS selectors, but that spec's sibling, descendant and child selectors can cause what designer/developer Shaun Innman calls a "significant, negative impact on page rendering." This is confirmed in tests done by UI Specialist Jon Sykes that are published on his blog.

Fortunately for most designers, the performance impact is only in extreme situations. But it's definitely something to be aware of when writing CSS.

The test was based in part on a comment by Dave Hyatt on an entry from Inman's blog.

Read more →

Filed under: Design, Internet, Web services

Browsershots: view a webpage in many browsers

Browsershots
Browsershots is a free web service for viewing a website in about 50 web browsers among 4 operating systems (Linux, Windows, Mac OS X, BSD). This is helpful for checking your web design on multiple configurations without having to use virtual machines or extra hardware and software.

You just enter your URL, check the browsers you want to see, choose extra output options like screen width, color depth, and Javascript version, and then click "Submit."

Your job will be added to a queue so that all of the browser screenshots can be generated, so waste some time for a few minutes. When the job is complete, you'll have a group of thumbnails (one for each browser screenshot).

Clicking a thumbnail will enlarge the screenshot and give you information on the computer and browser that rendered your site. Clicking the screenshot again will enlarge the picture to full size.

Browsershots supports Firefox 3 (on Linux and Windows) and IE 8, but not Safari 3.

[Thanks Jonathan!]

Filed under: Design, Internet, Web services, web 2.0

Webnode: create your own Web 2.0 site


Similar to Doodlekit, Webnode is a free (no ads) website creation tool aimed at helping web design novices get a modern-looking website online in minutes. Once you've registered for a Webnode account, you're asked to choose a title and slogan for your new site. Then you select a template and start adding content.

Webnode uses a common modular system which allows you to drag content areas to create different layouts or add content like polls, forums, and photo galleries. There are also widgets for PayPal, Flickr, YouTube, and Google Maps. Like Tumblr, Webnode lets you use your own domain name for their service (instead of somename.webnode.com).

Traffic statistics are also available which show you important things like unique visitors, referring URL's, visit duration, and browser version.

All that's missing is a chic Web 2.0 name.

Filed under: Business, Design, Design Tips

Ten Tips for Web Design Magic

Web Design MagicNow that we've harangued you to upgrade your Web site, take advantage of business blogs, read your Web stats/, incorporate search engine tips and use Web 2.0 themes, it's time to choose a Web design firm to make all of the above happen for your small business. Google "web design" and spend the rest of your natural life clicking links or narrow down your search around some specific best-practices criteria.

Read more →

Filed under: Business, Design, Developer, Internet, How-Tos, Design Tips, web 2.0

What eye movement teaches us about web design

Google Heat MapVirtual Hosting has an excellent article up detailing 23 actionable web design lessons that we can learn from eye-tracking studies. Most of the items are common sense: people scan web pages rather than read them, people look at the top left corner of the page first, people ignore banner ads, people ignore fancy formating that looks like ads, etc. But why do people interact with pages in this manner?

The answer should be obvious: web designers have trained visitors to use their sites in a certain way. Yahoo, Google, AOL, and MSN all format their sites according to the above listed guidelines. Because of this, people expect site names and logos to be a the top left. They expect banner shaped images to be banners and therefore ignorable. They expect sites to look, feel, and function a certain way and they are very frustrated when they don't.

In a way it is like news papers. People expect news papers to look and function a certain way no matter what city or country they are in. Its perpetually reinforcing as each site that follows this standard pattern (which is not a bad pattern by any means) causes more users to expect the next site they visit to look the same. It is good because it promotes usability but bad because it limits creativity and new design patterns. People have to innovative inside a very small box.

Filed under: Design, Developer, Utilities, Yahoo!, Design Tips

Easy CSS Layouts with YUI CSS Grid Builder

YUI CSS Grid Builder

In the world of web developers there are two standard ways of laying out a web page. The classical way is to use tables and structure your web page like you would an Excel Spreadsheet or a Word document. The second is to use Cascading Style Sheets that let you create elements on the page and position them according to your needs. For a large variety of reasons CSS based layouts are the way to go: they use less code, they are more customizable, they support various effects that aren't possible with tables, and they run faster in modern web browsers. The problem? They are darn hard to code!

Enter the CSS Grid Builder from the good folks at Yahoo!. Yahoo! has spent thousands of hours crafting web pages and testing them across all the possible OS and browser combinations (yes, even Opera). The end result of all this testing was the public release of the Yahoo! User Interface CSS and JavaScript libraries. The CSS Grid Builder is a simple web-based interface for quickly creating any number of layouts that rely solely on YUI's CSS files. This gives you the advantage of easily and visually laying out designs without using tables, and they will work the same way in every popular browser

Filed under: Design, Developer, Internet, Windows, Macintosh, Linux, Freeware, Design Tips

Design Tip: Inspect CSS with style in your browser

Whilst there's plenty of tools around for helping with CSS styling, if you want a neat little browser bookmarklet that displays all the properties associated with the selected element and "box model for any element on any web page", then XRAY from WestCiv might be just the thing.

XRAY shows you the sizes and other attributes of element you select, fades the rest of the page out and hovers a panel over the page to show the properties. For those of you wanting a quick and easy way to inspect CSS box models, this might be the very thing, and is entirely cross-platform meaning Internet Explorer, Mozilla derivatives and Safari users can take advantage of this freebie.

Filed under: Design, Open Source

100 open source tools templates and resources


When you're trying to knock together a decent looking website and short on time, open source templates and tools can be a real godsend. This list of 100 great tools, templates and resources is a great start for any simple web project, and could even provide a framework for larger projects where you don't have time for design.

Chock full o'goodies like template directories, open source tools, complete templates, CSS layouts and even a few blog themes, you'll surely find something here you can use.

Filed under: Web services, Yahoo!

Yahoo! the new AOL homepage looks awfully familiar

AOL and Yahoo!
AOL -- this blog's parent company -- has launched a redesigned home page, and you know, there's something awfully familiar about the layout. We just can't quite put our finger on it.

The portal's easier to navigate, has a nice set of links on the lefthand side -- oh yeah, and it looks almost exactly like the Yahoo! home page.

The wise-crackers at digg are having a field day with this one. One of our favorite quotes:

"What are you talking about? This is *so* not a rip-off of Yahoo. For example: Whereas Yahoo has search links of: Web, Images, Video, Local, Shopping ...the AOL site has links of Web, Images, *News*, and Local.

You could make the case that this is an intuitive web design for any company to follow, but it does look awfully similar.

For a company trying to reinvent itself as a web portal rather than a internet service provider, AOL really needs to focus on new and innovative services rather than playing a game of follow the leader by copying sites like Google, digg and Yahoo!.

Of course, we have to admit that investing in a blogging network was a great start.

[via TechCrunch]

Filed under: Business, Design, Developer, Internet, Web services

The Web Design Survey

web design surveyA List Apart wants some information from you for a new survey they have released online.

Statistics have never been compiled for the Web Design profession, including designers, developers, project managers, writers and editors. This survey is aiming at tracking such questions as who we are, where we live, job titles, skills, education, and background.

By filling out the 37 question survey online, A List Apart will not only increase the knowledge about the industry, but each participant will be entered into a random draw to win a ticket to An Event Apart, an Apple 30GB video iPod, a jump drive, or a t-shirt.

The contest and survey remains open until May 22nd 2007, and data will be presented on A List Apart.

Filed under: Business, Design, Internet, Features

10 rules for your small business home page

How does your small business home page measure up?If you're in business and reading this article, chances are your company has a Web site. Before we all go to Web 2.0, does your site measure up to Web 1.0? Let's check how your site stands up to Web pages that "suck."

Read on to learn how you might be sending your potential customers fleeing in terror.

Read more →

Featured Time Waster

Graveyard Shift - zombie-busting Time Waster

With Halloween fast approaching, it's a great time to get in some practice defending your territory against zombies. In Graveyard Shift, you take aim at zombies and other creepy-crawlies, blasting them into splatters of cartoony green guts. It's a casual first-person shooter, and it's very easy to get the hang of - use the mouse to aim, click to fire. Graveyard Shift has at least 15 levels, and it might even have some secret stages I haven't unlocked yet. They key to getting good at Graveyard Shift is learning to use ...

View more Time Wasters

Featured Galleries

Defective by Design, London: Protest Pictures
Microsoft Security Essentials
Chromium Pre-Alpha on CrunchBang Linux
Safari 4 Beta
10 Firefox themes that don't suck
IE8 RC1
Download Squad at the Crunchies After-Party
Download Squad at the Crunchies
WordPress 2.7
Cooking Mama: Mama Kills Animals
Windows 7 Hands On
Comodo Internet Security
Android First-look: Amazon.com MP3 Store
Android First-look: Twitroid
Google Reader Android
Android Hands-On
Twine 1.0
Photoshop Express Beta
Mozilla Birthday Cake
Palm stuff
Adobe Lightroom 1.1

 


Follow us on Twitter!

Flickr Pool

www.flickr.com

More Tech Coverage

AOL Radio