March 11, 2004

What's Cool, What's Not

When I was at uni I started reading Wired magazine religiously.

It's no longer part of the magazine's format, but back then there was a section called "Wired/Unwired" which was basically a list of what was cool, and what was not. Everything from gadgets, clothes, bands and video games got either a hip stamp of approval, or a cluck-cluck of the editorial team's tongue.

When it comes to designing a web page, there has definitely been a trend for things to become popular and then fade away. As a result, below is my very geeky list of what is currently hip to include in your personal web site, and what you need to give the boot.

Some are obvious, others might not be; some are easy to go about, others require huge learning curves. But we all have to start somewhere!

Let me know if you think of any more or have any improvements to suggest.

Site Aspect Unwired Wired
LayoutTables and FramesPure CSS
Site statisticsfree counters from thecounter.com, SiteMeter or NedStatreports by ReportMagic and referrals by PHP refer
AnimationJava appletsFlash
HeadingsThe ‹FONT› and ‹BLINK› tagsyour choice of Image Replacement techniques
LinksCustom coloursCustom underlines
DoctypeHTML 4.01XHTML 1.0 strict
ReimbursementPaypal donationAmazon wishlist
PublicityWebringsBlog comment communities
BrowserInternet ExplorerMozilla Firefox
Page UseCramming as much as possible into your limited screen spaceMinimalist designs with ample whitespace
Content ManagementBlogger or LiveJournalMovable Type/TypePad, TextPattern or WordPress
Page ConstructionFrontpage or DreamweaverAraneae, Homesite or JEdit
FeedbackGuestbooksTrackbacks
ImagesPhotoshopped Borders and Animated GIFsRandom PNG images highlighted with CSS Drop Shadows
Background imagesRepeating PatternsFixed Position Images
InspirationCool Site Of The DayCSS Zen Garden
ResourceWebmonkeyA List Apart
Client Side Image MapsFireworks Sliced RolloversCSS again (is there anything it can't do?)
Dropdown MenusJavascript HacksCSS-2 Menus
Server Side IncludesSHTMLPHP
Floatover LabelsBrowser-default YellowBig and black like on Dunstan's blog
SidebarBlogroll, Currently ReadingRecent Posts, XML Syndication
SearchSearch GoogleSearch this site
Spam (not that any spam is cool!)Email spam, Comments spamReferrer spam
Gratuitous Tokyo ex-pat linkAntipixel35 Degrees

PS. Just kidding Jeremy!

*Updated 12:57pm

Posted by mattymcg at March 11, 2004 12:00 AM
Comments

although i agree that CSS is da bomb it really isn't standard across all browsers and platforms for people who have a strict design that they need to deal with. i work for an entertainment company here in NYC and our website has to be precisely laid out to the pixel! i'm redesigning my blog using some cool new CSS tricks i have picked up [thanks for the extra help!] but i've been programmed to design and build to the pixel so everytime something is off it makes my blood boil!

like, for instance, UL tags.. i wanted to use an image instead of bullets and get rid of the inline margins.. but the positioning was inconsistent between IE, netscape, and safari on OSX. i ended up having to ditch the entire idea.

from my experience it's best to use the tried and true methods from both worlds: tables for layout and CSS for text formatting and image jazziness.

Posted by: gleek at March 12, 2004 01:56 AM

you've incited a craze in me!! i went through all of your CSS links and have decided that i want to really see what this is all about and maybe how i can apply it at work. admittedly, my boss is a strict html'er but hopefully i can also incite a craze in him. thanks! :)

Posted by: gleek at March 12, 2004 02:36 AM

Yeah thanks matt... I got into work early today (6:45am) to get my wbs and project budget out on time and I've just spent the first hour of my day reading about cool web stuff following all your links.

:)

I like the idea of that scriptless menu, but the bugger don't work in IE, or should I say IE don't work....

Posted by: Ben at March 12, 2004 06:23 AM

Gleek: take a look at Max Design's List-o-matic for some great tips and sample code on dealing with lists.

With regards your problems dealing with pixel-perfect code, yes layouts can get tricky (especially if you want to support IE 5/Win) but the CSS Image Map link above is a perfect example of how it can be done in CSS and be consistent across all browsers. Try doing that with a table. I recommend sticking at it!

Ben: you're welcome!

Posted by: mattymcg at March 12, 2004 10:00 AM

thanks matt.. i all the css links are really interesting. i talked to my boss today about upping our browser capatability to 5.0 browsers and above so that the next redesign we could do some solid CSS.

a little background on me: i've been doing web programming for about 7 [geez am i that old?] years now. i work for a large media corp in NYC on their website.. i'm so used to programming for pixel perfect designers that i'm having trouble breaking away from that mindset :) but i'm working on bringing in some new technologies at work.

it's nice to find some good lists about what's up and coming in my field. thanks again.

Posted by: gleek at March 12, 2004 10:46 AM

damn you're inciting the inner bulldog to a little activity mr mcg. nice post.

Posted by: frangipani at March 12, 2004 11:07 AM

Gleek: Like I said, you can achieve pixel perfect code with CSS, it just takes a bit more effort. But that effort now will save hours of changes later down the track. And it is definitely easier now than it was a few years ago. If only Micro$oft would update IE, then we could really move ahead...

Convince your boss to read Zeldman's Designing With Web Standards, not only does it present the case for standards and moving away from table-based layouts pretty convincingly, it also shows you how to go about it.

Frangipani: I look forward to the result of the unleashing of the bulldog!

Posted by: mattymcg at March 12, 2004 11:14 AM

I'm not in to much of the htmling at the mo' but the tip that a newer version of Mozilla's Firebird was available has pricked my interest. Onya Matt.

Posted by: Hammy at March 12, 2004 09:01 PM