Post details: Very Wrong, Only 17, not "50 Beautiful CSS-Based Web-Designs in 2006"
01/22/07
Very Wrong, Only 17, not "50 Beautiful CSS-Based Web-Designs in 2006"
Beauty = Design + Functionality + Usability + Accessibility.
If one designs something, shouldn’t it remain as is even under different environments?
Thus I decided I would review and briefly critique the “50 Beautiful CSS-Based Web-Designs in 2006″ according to Smashing Magazine.
It turns out that there are only 17 web sites that can be classified as such and are perfect in being web standards compliant also. My criteria in judging was based on the fact of the websites both looking and functioning the same way in Internet Explorer 6, and Firefox 2.0 and also their CSS markup being valid.
One thing I noticed however that was common among the web sites that broke badly in Firefox 2.0 and IE6 is that they all claimed to be ‘experts’ and ’standards compliant’.
I simply can’t believe that companies actually hire these guys to do any web development for them.
I have provided 130 screen shots demonstrating how badly the designs break.
A long time ago in the early days of the Internet I came up with a simple and easy way to test how the websites I was designing for clients would look at different resolutions on different monitors, without having to have several monitors set at different resolutions.
So what I did was to simply resize the browsers (IE, Netscape at the time) to a width of 640x480 or 800X600 (since I designed and programmed at 1024X728). This was replicated perfectly how the site would look when resized.
Just a tip though, when designing always use the the maximum of 768px420p viewing area.
These websites are perfect as no design element was lost in both FF2.0 and IE6. They looked and fucntioned the same way, no margin movement etc.
17 beautiful css based web designs in 2006
http://www.steveleggat.com/
http://wecreatethings.com/
http://www.dinis91.com/
http://emotionslive.co.uk/
http://tonyyoo.com/v2/
http://fall.tnvacation.com/
http://www.methodarts.com/
http://www.icebrrg.com/
http://www.kineda.com/
http://colourmod.com/
http://www.besupercharged.com/
http://www.m122arts.com/v3.0/
http://veerle.duoh.com/
http://www.mstefan.com/
http://www.devlounge.net/
http://www.electricpulp.com/
http://www.morellc.com/
The “33 Ugly CSS-Based Web-Designs in 2006″
I had planned on first reviewing Smashing Magazine’s website. However I could not resist in actually going over to Jakob Nielsen’s web site before. It is darn ugly I must add, but my reason for doing so is that he is widely known for his standard compliant diatribes and his writings on web design mistakes. Top Ten Mistakes in Web Design.
Even more hilarious is that he seems to think that graphics on a web page is what design is about, which actually contradicts his arguments on design mistakes. Jakob Neilsen says,
I can’t seem to follow his stream of thought.
He comes up with these excuses and then writes crap like the
Top Ten Mistakes in Web Design and it has nothing to do with visual design other than Usability.
For me web design encompasses the entire spectrum of the web, meaning usability, beauty, functionality, standards compliant et al.
I will not go into a rant at this point and will expound on this topic in my upcoming articles, Liquid CSS VS. Good old HTML Structure, User Customization & Good GUI design.
So lets begin the show and see if you can identify where these designs break.
Smashing Magazine
Not a bad web site at all but they did not pass. Some minor errors in both FF2.0 and IE6.
They say,
“we smash you with the information which will make your life easier. really”
View Smashing Magazine screen shots
Joyent
Why Would I trust this company and spend $15 a month on their services when their web site doesn’t even work?
They say,
“Joyent offers simple, powerful, web-based software that provides small teams with email, calendars, contacts, and shared applications.
Nothing to install, nothing to configure, and no need for computer staff or consultants. Just connect over the web and your Joyent software is ready to use. Our hosted plans start at just $15/month.”
Have A Mint
The design is cool but breaks when resized, meaning the design element is lost via the margins. The reason I included it.
Vivabit
I had lots of fun with this website and seeing what happens upon resizing. Everything just breaks.
Experts, experts, everyone is an expert, if so test your darn web site in different browsers before launching or going live. They claim they “know the web damned well” so why?
They say,
“Vivabit brings events and the web together. We organise web design conferences, in the guise of @media and we produce Event Wax, a web-based administration tool for event organisers.
Started by renowned experts, Vivabit began life as a web development consultancy with a focus on best practices and the cutting edge. …and expertise hasn’t gone anywhere.
We know the web damned well. It’s just that we started nailing events, too. It’s become a bit of a ménage à trois thing, only without the guilt.”
Foxie
I did not have fun at all with this website and the web site even crashed IE6. It took 5 minutes to load and in FF2.0 There is no ability to scroll at all when resized. They loaded a .wav file in the background. Do designers, programmers or coders still do that, I thought that only happened back in 1995?
This one simply pissed me off.
Cameron Moll
He could have passed but his web site doesn’t work in FF2.0, but does great in IE6. He is the same person that designed the vivabit.com website.
They say,
“…is a graphic designer with proficiency in website interface layout, UI design, XHTML, CSS, typography, the mobile web, and traditional print design.”
View Cameron Moll screen shots
Komodo Media
The motif plant thing does not stay put and messes up the design in FF2.0, it works with just a minor flaw in IE6.
They say,
“… I build functional,standards-compliant, and aesthetically rich sites, while specializing in illustration, new javascript such as Ajax, CSS based table-less sites, PHP scripting and identity design.
I build successful web applications that work - projects that both my clients and I can be proud of. …I am commited to quality and excellence in everything I do.”
View Komodo Media screen shots
Bartelme Design
Had a little fun with this one too, but I need not comment further as it is a disaster in both FF2.0 and IE6.
They say,
“… Our focus is on creating standards compliant web sites and professional icons for your web site or application.”
Quatuour
What can I say other than it breaks in FF2.0 and doesn’t show up in IE6 at all, basical due to the frameset code which is so wrong. The site was designed by http://www.pilok.com/.
Using again the words ’standard-compliant’.
They say
“…focusing on web and graphic design.
Websites: I design clean, engaging and standard-compliant websites with a strong focus on ergonomy and user-friendly navigation. All my websites are XHTML/CSS COMPLIANT and built to be efficiently managable.”
Online Center
Breaks badly in FF2.0 and IE6 with navigation and non-rendered graphics in the footer.
View Online Center screen shots
Zero.ru
Breaks in FF2.0, very Funny, works a little in IE6. The content breaks in the left column in FF2.0.
Rikcat
Breaks in FF2.0 with rendering of layers, but works in IE6.0, with minor left and right margin issues.
Rudeworks
Works in FF2.0 AND IE6, but with minor margin problems that kill the design, so I included it.
Obuweb
Minor stuff but view the screen shots.
They say,
“A beautiful website must also be usable. Intuitive layout of both design elements and navigation provides a memorable experience. Our approach to web design and our professional web design portfolio will show you a state of web design zen.”
Slideshowpro
Another minor margin issue, that just throws of the design so I included it. domineydesign.com did slideshow pro.
View Slideshowpro screen shots
Whitwa
Minor, the footer breaks in FF2.0 and IE6.
Subdued
This one was funny as hell, but read what he says. You don’t need to take down a web site because of spamming. Simply remove the contact form and comment forms, or remove the cgi script. The site has been down since October 2006.
They say,
“I’m not fond of websites that are ‘temporarily down’. Why take something down if something new isn’t ready to take it’s place? Yet, I felt I had to take my website down. Not because I am working on a new version, (I am though) but because it was being spammend beyond being managable. I had already taken my contact form down a while ago, after multiple days of 100+ spam e-mails.
As of lately, my comments forms are being spammed as well; there’s literally hundreds of spam comments on several posts.
Bart-Jan is partner & creative director at Project-8 V.O.F. and at The Talenteers L.S.”
Darta Design
These companies just … nuff said.
They say,
“…
+ branding and design consultant
I designed my first site in 2001. I have worked for a number of new media agencies and online corporations.
+ senior programmer
Experience in software and web application development; Proficient in PHP, XHTML/CSS, JavaScript, XML; Development experience with mySQL, SQL server; Knowledge of Integration between Flash and PHP; Experience building highly interactive, database-driven web applications.”
View Darta Design screen shots
http://www.theologisches-seminar-elstal.de/
I liked the design. However it broke.
View http://www.theologisches-seminar-elstal.de screen shots
Nice-design
I had lots of fun with this one. Breaks in FF2.0 and IE6.0. You should visit this website after checking out the screen shots just to play with it. Darn, and hell he is booked out with work, what kind?
They say,
“We lovingly craft chic, supple, accessible web sites which achieve cheeky search engine positions. Use our experience to increase your profits using clever web alchemy.
I’m currently fully booked on web design consultancy work with
Clearleft, and am not taking on other work.”
Atmedia2006
I do really like the visual design, however … It works in IE6, but breaks in FF2.0. Also the use of the word ‘experts’ again. Also part of Vivabit … nuff said.
They say,
“It’s the event of the year for anyone interested in learning about and discussing the latest approaches to web design with some of the world’s most highly respected experts.”
Susanne Paschke
A beautiful web site. What do I say? How do you get an entire website to have no scroll bars in FF2.0. She got some awesome programming skills to accomplish this. The site works in IE6.0 though which means no testing of the web site in other browsers again.
View Susanne Paschke screen shots
Pixeleden
Beautiful web site it could have been, but yet again. Breaks in FF2.0, the same header problem.
They say,
” … freelance print and web designer based in the Philippines.
…produce beautiful and usable web goodness.
Organically grown using web standards and usability.
Guaranteed fresh and creative ideas”
Jek2k
I had lots of fun with this one in FF2.0 and IE6 too. Darn he is such a liar too, his domain (jek2k.com) was registered on 14 Aug 2000. Why lie? Anyway check out the screen shots, hilarious.
They say,
“I’m a 24 year-old web designer and Flash developer based in… I’m founder and creative director of GNV & Partners web design studio.
Jek2k.com is my personal blog and playground since 1999.
… AJ of Devlounge interviewed me about my background, design trends
in 2006 and my latest projects.
…see my interview among the others with some of the most influent designers in the world.”
Good
I agree the ‘goodness’ of deceit and non-compliance. Just check out the screen shots or visit the web site.
They say,
“We strive to create stunning, innovative design work, to build strong
client relationships and to spread the goodness.
We provide a range of web and graphic services….
On this site you will find details of the range of our services and work,”
CSS Vault
I do like the design and also their content, but the site broke.
Actually I would make it also a project to go through all the web sites they showcase but I don’t have the time.
They say,
“Instead of showing off great sites to everyone, let’s show off great sites that use CSS so we can inspire others to use the technology.”
Evan Eckard
Nice one, it was fun to view the web site in FF2.0. It had minor problems in IE6.
They say,
“I´m a creative professional… working in the internet and web industry. I have moved throughout the industry into many different corners of creative work.
Please check the about or portfolio sections of this site for further detail on skills and services I provide.”
Wallop Creative
I added this web site to the list of bad because the right margin on resize which broke the design in view.
They say,
“Wallop is a creative studio specializing in multimedia design, including web sites and motion graphics.”
View Wallop Creative screen shots
Jeff Croft
Saved the best for last. I think jeffcroft.com is my favourite. It is a beautiful website visually but it doesn’t work with my other criteria for judging. I had loads of fun with this web site. Particularly because of the screwed up logo in IE6 and how badly it broke in both FF2.0 and IE6.
He has been working on the web since 1995 and worked at two universities, and he still he doesn’t care to test or debug his web site? Albeit it is his personal web site, I think he owes the community as a designer and it is his responsibility to set an example for younger designers.
They say,
“I am a web and graphic designer focused on web standards-based development. As the senior designer at …, I work on such award-winning standards-based sites as …
I have been working full-time on the web since 1995. I have worked at two major Universities in an effort to bring web standards to the education sector, and completed many freelance and contract jobs for varying clients.”
Trackback address for this post:
http://www.soulfux.com/htsrv/trackback.php?tb_id=68
Comments, Trackbacks:
· http://evaneckard.com 
Permalink
01/24/07 @ 17:16 · http://jeffcroft.com http://jeffcroft.com/about/
Who cares if a site is standards compliant or not? The point of the article you reference was that sites were beautiful and CSS-based. All 50 were. The point was not that they were standards-compliant and worked perfectly in every browser, and no one claimed they did.
Get over yourself, and stop being an asshole. No one likes a douchebag.
Permalink
03/18/07 @ 09:24 · http://jeffcroft.com Don't throw stones...it just makes you look dumb.
Permalink
03/18/07 @ 09:31 Smile ...
It should also be -"this page doesn't
validate ..." Or "this page is not valid ..."
Calm down you are sounding like a spoilt child.
No need to get upset over a critique.
It is simply my opinion and that is all.
Peace!
Markan.
Permalink
03/18/07 @ 20:13 · http://jeffcroft.com All of the sites you list are great sites, making sincere efforts towards standards compliance, CSS-based design, and great visual design. Why are you picking on them?
If you really need to bash someone for their standards compliance, lack of CSS layouts, and poor visual design in order to feel better about yourself, might I suggest any one of the thousands of major corporations that aren't even trying? You could start with Microsoft. Seems to me these guys who are making no effort at all would be better target for your attack than individuals who are doing their best.
Personal sites are personal. They don't need to be compliant. They don't need to be accessible. They're personal, and by that very nature, they can be anything the individual creating them wants them to be.
Web standards zealots are annoying and don't help the cause one bit. And that's coming from someone who co-authoed a book with "web standards" in the title. Standards are not everything. Seriously, get over it.
By picking on the little guys who are trying their hardest when the big guys aren't even bothering, you come off like an asshole. Sorry, but that's just the way it is.
Permalink
03/18/07 @ 22:47 Permalink
03/19/07 @ 08:30 Yes People Browse at that width and use different web browsers on different OSes and Platforms, and the Internet is not only about The United States of America The Great Nation with White People who know everything, there are millions of people in Europe, Australia, Africa, Asia et al that use the Internet too!
Did you not know? The Internet is not America alone but spans the entire globe with people using 800x600 resolution and using 56k dial-up modems.
Jesus Christ!
Alas my site is only for friends, my site sucks and there is no design, it is private, it is not a showcase to make money and brag and boast about how good I am an American Designer in hopes of making big bucks and wanting to be someone, I don't need to critique this web site blog. I don't write for profit, no Google ads. My postings aren't meant for ones who have not a clue about anything.
Take care.
Peace!
Markan.
Permalink
03/19/07 @ 09:08 Permalink
03/19/07 @ 09:19 · http://www.shawndryden.com Let's see...there's 50, they're beautiful, and they're CSS-Based. Not sure what your arguing.
It's not the 50 Beautiful works in all browsers at 100px wide CSS perfect web-designs.
Permalink
03/19/07 @ 09:20 No wonder the Great United States of America is killing innocent children an adults in Iraq and watches as Israel commits war crimes and then sees Iran as radicals and an evil nation that should be demolished!
Peace!
Markan.
Permalink
03/19/07 @ 09:24 Peace!
Permalink
03/19/07 @ 09:31 · http://www.shawndryden.com Seriously....wow...you mean in your brain people commenting on your article links up to another part of your brain about world politics and war?
I am standing in my office and clapping. Honestly that is unbelievable. Bravo.
Permalink
03/19/07 @ 09:32 How else to respond but politcally as that is what it seems to me. There has not been one sensible comment by anyone debunking my critique in an adult manner until this point. How else should I interpret it other than political?
As most of the post are KS, American. I don't see any Aussies or Asians posting hate here.
Peace!
Permalink
03/19/07 @ 09:43 · http://www.shawndryden.com You were called an asshole because your article/critique is bashing people for trivial reasons not because we are Americans and you are not (I guess). Your screen shots show your browser at what appears to be 300px on top of the full screen site. These sites are not meant to be seen and are not seen at that size.
"And also people browse the web on mobile phones, PDAs and other devices too."
No one on a phone is browsing web design company sites. That is not what people look up on phones. If they were they would make a phone specific site. Also the majority of people these days use resolutions in excess of 1024px.
I personally don't even know where you are from. Your location doesn't change how I feel about the subject.
Permalink
03/19/07 @ 11:55 · http://jeffcroft.com Permalink
03/19/07 @ 12:16 You didn't post screen shots of what these sites look like on mobile phones or PDAs. I'm not in Kansas. I haven't posted any insults directed at you or anyone else. I haven't called anyone an asshole. What I am doing is calling you out for a post based on faulty logic that derides the hard work of others for no good reason and to no benefit of anyone reading this article. When confronted with this, you resort to broad political statements, while knowing very little about those you are accusing.
Permalink
03/19/07 @ 13:05 Majority of what people? North Americans? Where is your data to back it up?
I will state again that there are other people around the globe that use the Internet and access it using less than the resolution of 1024px.
Asia has the largest Internet Usage with 398,709,065,
Europe with - 314,792,225, North America is third with 233,188,086.
Latin America and the Caribbean - 96,386,009, Africa -33,334,800, Middle East - 19,424,700, and Australia/Oceana - 18,439,541
From experience of having lived abroad and in Asia for many years, most access the Internet from Internet cafes that support less than favourable high-end Computer systems with 15" monitors and if 17" monitors the default is mostly 800x600. If from home they are using the basic PC setup with 15" monitors and resolutions of 800x600.
I will also say I did not deride the work of others by simply saying that the designs broke in IE AND FF2. I actually posted the screen shots as a way in which these designers could easily see the problems and correct them accordingly. If I was only berating their work why would I take the time to evaluate each and everyone of the sites?
Alas from the point that the other 17 websites rendered perfectly without errors in these broswers, does it not show that something is indeed wrong technically with the other web sites?
I will go further as to say to check your sites you should use FF2 with the Firebug Plugin and it can assess the markup that FF2 does not render or ignores. Most times it is simply 2 lines of code that broke the majority of the web sites that I looked at.
I have to get to the office I am late.
Peace!
Markan.
Permalink
03/19/07 @ 17:43 · http://www.arikjones.com Well now you've created a nice little brand for yourself.
"Asshole Design, Inc." ?
Sounds like a great company name to me.
Permalink
03/21/07 @ 07:46 One question. Why does the other 17 web sites work flawlessly on every platform without error and the other 33 screw up?
Doesn't that tell you something? Isn't there something wrong with these 33 websites while the other 17 work perfectly across all platforms?
1+1=2
Anyone who debunked this critique as being bias or ignorant has a real problem with regards to comprehending English or is simply dumb/anal.
Peace!
Permalink
03/21/07 @ 09:03 · http://www.pilok.com Please, be a bit serious. You take time to kill my work by saying it is not compliant and you don't even try to know why the hell I have used the frameset!!!
You did not even noticed that Smashingdesign made a mistake with the url (they wrote www.quatuour.be instead of www.quatuor.be) so I just bought the domain www.quatuour.be to be sure not to break the link.
By the way, Quatuor is compliant and it is STRICTLY impossible to be both 100% compliant and 100% cross-browser compatible.
So, please, next time you will want to criticize some work, do it properly. I really appreciate suggestions, criticism if they help me to progress but the way you did it is not fair!
Have a great evening.
Permalink
11/04/07 @ 13:18 This post has 1085 feedbacks awaiting moderation...
Leave a comment:
L.I.F.E.
I am indeed in need of therapy and since I haven't enough money for the sessions this is my only way of purging those demons that continue to play havoc with my fragile soul.
Search
Categories
- All
- Art (3)
- Asia - South East (1)
- Downloads (0)
- Code (0)
- Film (1)
- Humour (1)
- Internet (10)
- Design (1)
- Music (0)
- Politics (6)
- Sex (2)
- Sports (0)
- Technology (7)
- Tips & Tricks (4)
- What The Fuck? (12)
Archives
- March 2007 (2)
- January 2007 (1)
- December 2006 (4)
- November 2006 (5)
- October 2006 (15)
- More...
Linkblog
Worthwhile
Misc
XML Feeds
What is RSS?
Who's Online?
- Guest Users: 3