noisylime

The difference between good and great webdesign is relatively small. The average person may not be able to explain the tangible differences that make up great design, but they can usually spot a design they like. By examining some awesome sites, I’ll attempt to put my finger on some of the small details that make up the difference.

A little while back I wrote an article about the 4 Principles of Good Design for Websites, this article is somewhat of a continuation of those principles. In that article I went into detail about the important roles that contrast, repetition, alignment and proximity play in webdesign. This article will piggy back on those principles as I examine 6 ways you can take your webdesign from good to great.

This post is chock full of awesome examples. I made a conscience effort to only pick sites that were great all the way around.

Thanks myinkblog.com for a great article.

Check out the 960 grid system.

There is also one called blueprint, which can be found here.

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (h1, h2, etc.) to span elements and everything in between!

LINK

John Resig has been tinkering with the sub pixel problems in CSS and how browsers deal with bit of pixels:

Something that jumped at me, recently, was a rendering dilemma that browsers have to encounter, and gracefully handle, on a day-by-day basis with little, to no, standardization.

Take the following page for example. You have 4 floated divs, each with a width of 25%, contained within a parent div of width 50px. Here’s the question: How wide are each of the divs?

The problem lies in the fact that each div should be, approximately, 12.5px wide and since technology isn’t at a level where we can start rendering at the sub-pixel level we tend to have to round off the number. The problem then becomes: Which way do you round the number? Up, down, or a mixture of the two? I think the results will surprise you, as they did me.

When I went to the example in FF3b2 on Mac, it actually looked more like IE.

[via Ajaxian]

Jeremiah Grossman is known for his amazing Web security talks. Now though, along with Lex Arquette, he has come out with a Dojo powered project (using 1.0.2) Roxer which aims to be the easiest way to make a web page:

Targeted mostly for novices, where with Roxer anyone can build just about any Web page they want using a Web browser (no plug-ins) and without a single line of code. Think Visio, MS Word, or OmniGraffle, but extremely simple and completely on Web-based.

There are a lot of cool features in Roxer, including cross-tab copy/paste, which were extremely difficult to implement. It’s only due to a background in JavaScript hacking were we successful. Other Web 2.0 / Ajax’ish stuff like Drag & Drop, Rich Text Editing, and Edit-in-Place were zip zap after that.

Click To Play

[via Ajaxian]

YouTube has launched a new mobile oriented site that brings video to more handsets, as well a mobile app.

m.youtube.com offers mobile optimized content to 3G or WiFi enabled handsets that support RTSP streaming. The mobile page supports logins and channel subscriptions, and is available in country specific form as well.

YouTube has also released a beta version of the YouTube for Mobile downloadable application. The app supports the Sony Ericsson k800, w880 and the Nokia e65, n95, n73, 6110 navigator and 6120 classic, providing the same YouTube browsing functionality currently available on the iPhone.

To obtain the app, users on compatible phones should visit m.youtube.com, where they’ll be asked if they want to install it.

More details on the YouTube blog here.

[via TechCrunch]

| View | Upload your own

Interesting Slideshow

"One place for web typography, leveraging our collective knowledge for the betterment of typographic style and practice." #
[via SimpleBits]

Patrick has just tipped me off that IKEA impresses us with an elastic (em-based) layout. Try resizing text if you're not sure what that means. Nicely done! Now if I could just figure out where this extra hex nut goes… Update: Naz Hamid tells us (via Twitter) that HUGE was behind the redesign. #
[via SimpleBits]