New Issue of Digital Web Magazine (redesign)
May 13, 2004 at 1:30 PM
Ok, things this week are going to be a little bit different for everyone including you, our readers. First, yes we have a new issue out entitled The Transformation of an Industry, but even more interesting is that today marks the eight anniversary of our digital-web.com domain. To celebrate we thought we would dress up in a nice new look for the years ahead. That’s right, the long awaited and long over-due redesign has finally launched. This is by no means solely my handy work. I was fortunate enough to have one of the best web teams a person could hope for. Thanks to Christina Wodtke‘s draft IA blue/files/includes/print.css and Didier Hilhorst‘s excellent design we were able to create a site that was not only designed well but also architected well. Thanks to Craig Saila‘s great CSS and XHTML handywork and Cal Henderson‘s awesome programming skills we are able to have a system that is database driven and template based, no more hand-coding static pages. But all this wouldn’t be worth the effort if it wasn’t for people like Rudy Limeback, Paul Scrivens, Keith Robinson, and Krista Stevens for helping us publish great articles week after week. Thank you, you are all rockstars in my book.
Wonderful work, guys. The new design looks gorgeous –congratulations.
Finally! The wait is over. The site is fantastic. Great job!
Are the banner ads at the bottom supposed to hang over and block the gray/brown column on the left? (I’m using IE6, XP Pro) Was hoping to see an interesting visual design. Though it’s nicely organized (though some pages are pretty slow to load — and I’m on a cable modem), it seems as though I’ve seen this visual design a thousand times already. Backend: probably a great redesign. Interface: [snore]
This looks great! I like the right arrow motif, a lot; the colours are subtle without being washed out. I kind of miss the Verdana, but I’ll live. (:
I had anticipated being impressed, but, really, wow. This is a remarkable improvement and testament to the talent and skill of all involved, the entire redesign team should be very proud.
Kind of minimalist. It is nice but I’d expect more images from a web magazine. The articles seem to need something more to make them stand out.
Drool 😛 This is beautiful.
What a great new look! Congrats!
I like the overall design, but could you guys please increase the contrast of the text (in general). I find low text contrast disturbing on a magazine where reading is the primary focus. Also, remember that there is a gamma difference between Mac and PC. #333 will look similar to like #555, and #666 will look like #888. A part from this critical thing, the site looks great.
Thanks to everyone for all the great comments. yes, we know about the banner graphic issue… and there are a few more small issues out there we still need to address, not to mention on browser who has some serious issues. We’re working on fixing these things as soon as possible. As for the design needing more graphics, etc. While I think it would help make it more visually interesting, you have to understand that we have users who acess our site from all over the world, not everyone has a high-speed cable or DLS connection. Right now it’s about as slow as we are going to want to have it. We may improve the design on some of the pages, but probably not adding any more graphics. Lastly, on the design in general. Yes, it may look like the same old same old, but I really say that not to many other sites have as many facets for accessing information as this new design does… the key here is findability, which was one of our biggest problems with the old design. Now that we are /files/includes/10.css0% database driven and using templates with CSS, we will be able to do future redesigns a lot quicker. Yes, as soon as one redesign launches we already start thinking about the next redesign. Some other cool featurs to check out are the RSS feed for articles, as well as the /files/includes/print.css features… just /files/includes/print.css out a page to see. We also improved the search engine for syntax and result. Every article is now dated with the date it was published on… and you can resize the fonts. These are just a few of the changes… more to come.
Well the new design is definitely trendy, and I suspect at some point in the future it will look dated, but it is very well executed and by far the most effective design you’ve ever had. I would second the comment to up the contrast, or at least give a style switcher.
Nice redesign. The colors are soft and easy on the eye. Very nice. Very nice. This site will definitely be making its way onto my blogroll.
Very nice. It’s warm and welcoming without being too casual. Clean cut and reserved without being stodgy. Very nice indeed.
3 columns, css tabs, a oastel color scheme. I think it looks like every other site out there. There seems to be a real glut in the originality area for web design right now.
Nick, this is nice. The html is perfectly indented, indicating either a fine edit app, or an extremely anal personality (like me). I notice you are using a complex float design. Bravo! I bet you had fun with that, eh? I wonder why #content gets a zero right margin for IE and a negative (!) 203px right margin for all others. Odd, but all too familiar. Nick, if you need help with that “certain” browser (I’m guessing Op7) then I stand ready to assist you with bug squashing duties. You published my very first CSS article so I feel a bit beholden to you. Just say the word. 🙂 Big John BTW–It would be nicer if this comment page actually worked in Op7, the world’s most advanced browser. Upon submit, the page hung, and it’s not Op7’s fault. Even the text fields are mislabeled in Op7. I realize Opera is not really popular, but that’s because people generally have no idea what browser quality means. I hope I won’t be forced to use a crappy browser like IE just to comment here in the future.
Very impressive. I love designs like this. I do have to (grudgingly) agree that the design probably won’t age very gracefully, but by the time that’s a major concern I’d imagine you’d be considering updating the look again anyway. That probably sounds a little negative, but I don’t mean it that way- again, great job for all parties involved.
Very nice! Me like! Few points though: – on the home page, the design breaks in IE6/Win, ie. the outer right column shifts down the main content, with the google ads overlapping – the design does not cope with the user changing font size I trust you guys are working on this. Great job!
Looks and works great in Firefox! Usability has definitely been improved, and I like that the design doesn’t break with any existing conventions (yes, this is a good thing!). I also liked what Nick had to say about graphics: “As for the design needing more graphics, etc. While I think it would help make it more visually interesting, you have to understand that we have users who acess our site from all over the world, not everyone has a high-speed cable or DLS connection. Right now it’s about as slow as we are going to want to have it. We may improve the design on some of the pages, but probably not adding any more graphics.” Exactly. This is a great policy, and one I wish more sites with as diverse readership as DWM would follow. The only thing I’d like to see improved is the favicon, which seems to be antialiased against white. Doesn’t look good on the tab.
Quite a contract to the previous design. It’s cleaner, but I’d have to agree with a few other comments that it lacks originality and contrast. I feel the legibility of the articles has decreased – maybe this has to do with the contrast between the article and the rest of the page’s elements. Is anyone aware of any usability studies on color contrasts between text and background colors? I find my eyes becoming strained by the abundance of small type on a bright white background. I find this to be a problem on many sites – which may be a contributing reason to why I now must wear glasses! I also miss the featured artwork! Not only did it keep DWM’s design fresh, but who doesn’t like to see graphic artists pushing web graphics to new levels? Communicating through imagery on the web is important, too! And, I think graphic artists can find creative, inventive ways to work within any file size constraints. My last comment is that the DWM logo has been reduced in size too much. I don’t think it would hurt the page’s real estate to make it a little larger, retaining the site’s strong identity and pride. The banners and ads are conflicting with the logo. If I came accross as over critical, I appologize – overall, I think it’s a great improvement!
I can’t comment on the change from the previous look, since I just came here through a link from ALA, but I wanted to make sure you guys were also aware that it’s breaking in IE5 on Mac. IE5.1.5 to be exact, and 5.1.7 as well. And by breaking I mean that the left navigation is blown out (all I see are tall stripes of white separated by thin stripes of beige that turns light green when you mouse over), no text is visible, and the white/beige areas overlap the text in the right column. Ugh, don’t you just DESPISE IE?!?!?!
congrats on the redesign, degrades beautifully, another great site to show developers and clients that great design is possible in a way that meets everyones needs.
Yup, we know IE 5.2 on the Mac has a lot of issues. This is a “problem child” browser. We are trying to fix them, but there has been a huge lack of highly skilled CSS designers who can help who are on a Mac lately. Doug’s booked, Craig’s prettty taxed on existing work, etc etc. But we will address it as soon as we can.. it’s just such a low priority considering that browser makes up one of the smallest portions of our readership. Other things to look forward to that we will attempt to address: – /files/includes/default.css font size will be bumped up just a little bit. – line height, or leading will be increased as well. – font color contrast will be increased – Opera7, IE5.2 (Mac), and Firebird issues will be addressed if possible. – we will look into increasing the size of the logo. – we will fix the favicon issues as best we can (hard to work with so few pixels) and there are probably a few others I am missing, but hang in there. Thanks, – Nick
according to our resident CSS guru, Craig Saila, the following items should now be fixed: – banner ad getting cut off in IE/Win – article line with is now fixed to 50em – font-size has been bumped up to 0.8em – line-height has been bumped up to 1.5 – text color contrast has been changed to #444 Let me know what you think. Thanks, – Nick
One addendum to Nick’s last comment, the article line length is only fixed at a maximum for the browsers supporting “max-width”, in essence, browsers not created by Microsoft.
Hello all from your friendly Editor in Chief! Man I do love comments here at DW! I can’t wait to start talking about all the great articles here. Thanks everyone for all the great, and useful, comments. They’ve been both encouraging and helpful. The sites already made great improvement based on user feedback and it’s only been ONE DAY! A big hat tip to Craig and Nick for that. Who says Digital Web doesn’t love our readers? 😉
Nice re-design, but there’s something missing, not sure what though…
Rafak, that’s helpful 🙂
Using the p tag in these comments seems to add too much vertical space between paragraphs (see my comment some /files/includes/10.css posts up for an example).
Lars: That’s because adding blank lines also creates a new paragraph.
Oh, I see I’ll just stop adding blank lines then 🙂
ya, basically any hard return will force a paragraph to some degree… we’re still working out how we want it to work.
ok, so we decided to remove and the list markup from the allowed tags. too much room for error there. if you want to make a list or paragraph, do it the old text way and we’ll build the markup accordingly.
This is way better than the previous one. Well done!
Very nice redesign, although I must agree with the others in that the color scheme could use some variance, at least in the masthead area. Overall, great work. My cup of tea, actually. Found you guys from ALA.
Nice design that appears to be working very well in Safari.
favicon suggestion: why not just place it on a square white background? easy fix, and should look great.
Ok, now I am curious.. how did you find us via ALA? I mean, I know Jeffrey linked to us on Zeldman.com, but the only links I thought we had on ALA were from my old old article about the dot-com crisis. Perhaps there are some old pages with the old design with me listed as Associate Producer in the credit area on the right of the page? I guess I need to check my referal log.
I think Didier is going to fix the favicon issue with transparency… but he’s busy right now, so it may not happen right away.
No worries about that favicon. If you fix it I won’t have anything left to complain about.
Nice, easy to use new design but PLEASE increase the font size. I’m a young person with good eyesight and it is painfully small on my Dell laptop (/files/includes/10.css24 x 728). Otherwise, I look forward to finding all the great content in the great new organization, since I just discovered you a couple months ago.
I really don’t understand the “increase the font size” requests I’m seeing here. Install yourselves a decent browser, e.g. Firefox, hit Ctrl + and voil
Simple and good-looking. I like very much the navigation bar.
Lars, I think the comments about font size have to do with the /files/includes/default.css. Yes, I would hope any user takes a moment to realize they can increase the font size to a size they wish… but I think people are stating the general /files/includes/default.css font needs to be bigger. We did change it from .75 to .8 ems but not sure if it’s enough for some people. Honestly if it has to be 1 em or more to make those users happy, I am going to suggest they just set their browser accordingly, 1em is huge for most of us.
Nice work guys…
btw… I’m a CSS wiz working on a Mac if you guys need some work arounds for IE 5.2 Mac
Lovely, lovely. However, not too accessible for the visually impaired. Why is everyone so in love with faded fonts, tiny fonts, unreadable text? WHY? Works for 20 y.o.’s, but NOT for the dominant demographic. I’d be interested in a response, if anyone has the time.
Re: font size: I used to think that 1.0em was huge too. But go look at http://www.3com.com/ or http://www.useit.com/ – I finally figured that that those folks are doing that for a reason, and that maybe the rest of us had better catch on. My own web site’s font is now MUCH larger than I’d originally have liked, but I can easily read it as part of a group of 12 people clustered around the monitor. That’s simply GREAT. Use the browser to enlarge the font? Sure. Great idea, but take a little survey and discover how many people have NO idea that their browser can do that! You don’t get a second chance to get it right on the Internet.
I can help put the font size debate to rest.. check out this study: So, What Size and Type of Font Should I Use on My Website?
“Why is everyone so in love with faded fonts, tiny fonts, unreadable text?” quote of the week ;o) tom, i quite agree with your sentiments should your first example perhaps be http://www.w3.org instead of that 3com.com site, which is visually, um, less than appealing and nick, that article doesn’t resolve the issue, because it used points, and we all know how uniform points are across platforms… maybe if we could buy the same monitors for all our site visitors, i’d buy the idea of using points…
I understand that study doesn’t solve the problem, but it does state about what size people, on average, prefer to have the text at… and using .8em is about as close as we can get to that despite the cross-platform issues. 1em is simply too big… hideously too big.
This looks beautiful. The only think I can think of that could make this a little better is the use of title=”” and accesskey=”” where it’s needed. Amazing, though. 🙂
We will be using title=”” when we can get around to implementing our accessibility features… but rest assured, we will never use accesskey=”” ..why? well, Richard Rutter said it better than I could in his post: More accesskeys. Or, if you want to cut to the chase, I would say this is the best article to read: Using Accesskeys – Is it worth it?. In short, until there is some universal standardization of accesskeys we will not be implementing them as a feature of this site.
Just a week or so ago I was viewing source at d-web and was quite surprised by the table-based and unresizable layout I found. Beautiful redesign. I, too, find the font resizing issue troublesome. When I select “larger” in IE’s text size menu, it bumps up too big at /files/includes/10.css24 and breaks apart entirely at “Largest”. At 800 x 600 it breaks apart at “Larger” – leaving Medium as the only usable choice. It’s the em units compounding that are the culprits.
Really clean design and nice use of CSS.
Accessibility is being able to read the page on a Mac. So your redesign sucks.
David, maybe you
I like the new design but hey, have you checked your site with IE4/win?? All your articles propagandizing standards because they bring accessibility for any browser/agent are crashed in pieces. The pages are almost not readable at all. And instead of publishing Peter-Paul Koch’s separating behavior from this and that articles you’d better hire him to write some cross-browser scripts for you. Because your current result in errors in Opera 5/6 and Eplorer 4. Please consider coping with the above problems as soon as possible- you are falling in my eyes.
Lud: to answer your question, yes. But to get to the point: less than 3 people of our readership 60,000 use IE4. Of those 3, I know that 2 of them are collagues of mine who were simply testing the site… in other words, it’s not their primary browser. The same can be said for Opera5. Opera6 may have 4 users, I’ll have to check that. Designing a site for all old skool browsers is good, but designing a site for your actual readership is way better.
“Other than that, you can expect that browser to get /files/includes/10.css0% unstyled markup… just vanilla content.” Yeah, I think this is the better choice for IE4. This way it looks very bad and the site is almost unusable. Thanks for your consideration! 🙂 And please fix the scripts.. 😉
Since when is plain text with basic XHTML structure unusable? Anyway, upgrade your flipp’n browser for crying out loud! 🙂
Since when is plain text with basic XHTML structure unusable? You got me wrong. I meant that it is almost unusable WITH the CSS you used before. Because the design was broken… But I see you have now corrected this 🙂 I am actually not using IE4. But I am a cross-browser fan and am used to testing and optimizing my works for all possible browsers. Btw, I think with a little more efforts you could drive this design in IE4 (on Windows at least), too but of course without the CSS it is much better than before.
Lud: I am not sure what you mean by “broken” but it sounds like it’s fixed anyway. Also, as for IE4, I really think that if you review your site’s log files, unless it’s some strange and very specific readership that uses your site, chances are almost no one will be hitting it in IE4. Certainly I would design a site using CSS if 98% of the readership was using IE4 or older… but that’s not the case here. We found everyone was using IE5.5 and IE6 on windows, and Safari 1.1 or the latest Mozilla on MacOS… so we saw it as a moot point.
LOVE the redesign! 🙂 clean, simple and oh-so-easy to use. a great example of user-centered design and architecture for a content-oriented site such as DWM. One can only hope your redesign will inspire other sites! best regards, brian