skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

Conference Followup – Design in a Web 2.0 World

July 25th, 2008 by Erick Beck

What is Web 2.0? It seems to be everything, just like the “catchprhase Bingo!” TV commercial. Or.. just like pomegranates… have you noticed how they seem to be making their way into everything today? There is even a pomegranate flavored 7-Up now. How is this relevant? Only to draw comparisons between fads. The phrase Web 2.0 is a marketing fad — but the concepts behind it are not.

In the first generation of the web we have the browser wars… Netscape vs. IE. Web 2.0 doesn’t care about the delivery vehicle though. It is not about design style or slick interface. It is not the hip cool applications like You-Tube, MySpace, or Facebook. It is instead about the release, sharing, and use of data. It is collaboration carried out primarily through the medium of web services.

Another comparison, the static personal website of yesterday corresponds to the personal blog of today. The old website could be just as snazzy in its design, but it was basically a one-way communication vehicle through a single medium (your URL.) The blog, however, invites comments and commentary, is much more free-flowing than the old web site, and touches on several technologies to both aggregate and publish content (tags, RSS data input feeds, outward syndication, calendar feeds, web APIs to other services, etc.) This brings us full circle to the motto of the print industry… “content is king.”

Look at http://dennajones.com/ as an example of a rich media blog. It contains original content, syndicates itself via RSS, has calls to post images stored on Flickr, offers to populate your address book via microformats, allows browsing by tags, and more.

Using Typography
Typography is more than just choosing a font family and size. Look as well at using color, case, capitalization, line height, and letter spacing to ehnance the visual experience of your page simply through text.

Even styling a basic <p> tag can create a wide range of effects with CSS. A blocked large first letter of the paragraph is common, but more subtle readability uses include increasing line height for readability, indenting paragraphs like you would in print, bold-facing the first line of your text, and many more.

Many of the tricks from the print world apply equally online. For example, it is common practice to ignore the default representation for ampersand (&) for a particular typeface and replace it with something more stylish. This can easily be done by setting a classed span around the “&” and setting it to a different font family.

Web 2.0 Dos and Don’ts
Think about tag clouds and whether you really want to use them. If you do include them, do so because they are useful for that particular page, not just to be cool.

Say “No!” to Web 2.0 when it isn’t needed. Don’t utilize the various social media technologies just to appear trendy. They take a lot of work and must be kept current, so if you use them you need to dedicate yourself to them. Stale or misused technology is a bigger turn-off than not using it at all. Design appropriately to your content and context.

Work with your brand. Don’t throw it away simply for the sake of creativity. You can still be creative within the boundaries of the brand guidelines.

Development Tips
Use “swoopy” line separators rather than <hr> tags when possible. They add class to a site without a lot of extra work. Just don’t overdo them. A good example site is http://cameronmoll.com/

Always keep your eye open for designs that you like. When you find one, use Flickr to host a screenshot of it. Flickr even allows you to post overlays allowing you to make notes about what on the site you like.

Friday, July 25th, 2008 Miscellaneous
Share this article

No comments yet.

Leave a comment

Categories

Archives