Creating an effective online magazine with WordPress: the HTML mockups

Remember yesterday's post about making a magazine out of WordPress? Today, you'll get to see an exclusive sneak peek:

These mockups illustrate the progress made in three days' work. None of them are functional because no code has been written. However, I've already translated the graphical mockups into HTML -- you can clearly guess that from the top strip. I made the original mockups using Inkscape, a remarkable SVG vector drawing program for Linux.

Did I mention every step on this series is executed using only Free Software?

The front page

Here's how the front page looks like, right now. Click the thumbnail to see it in larger size.

Layout explanation

Notice that:

• the logo is now Web 2.0ish
• the font selection is quite spartan: Verdana and Gill Sans; Gill Sans lends the site an extra "Web 2.oomph"; since few people have Gill Sans, on browsers that support TrueType autoloading (none right now) it's loaded via stylesheets
• the most recent article is featured prominently and easily distinguishable
• popular content from the recent article's section is automatically featured as well
• leads to related articles are presented in easy-to-scan lists
• the sidebar (which lacks one ad) tries to be clear and easy to scan
• important content is completely above the fold (the visible area before scrolling down)
• the navigation (search, breadcrumb trail and pages) are on the top page, easily accessible

Mostly below the fold is a "More news and articles" tile. This tile contains a list of recent and popular articles from each section, ordered in reverse chronological fashion according to which section saw the last post.

Things you can't tell from the mockup -- or, the importance of Web standards

• all link styles are working correctly -- tabbing or hovering into a link will light it up, and visited links are visually distinguished from new links
• the text is (almost) fully scalable using your browser' controls -- however, the top navigation suffers from hidden content at very large font sizes
• the site is fully functional with style sheets off
• the site lays out properly and fluidly at any resolution -- up to 640x480 -- and PDA and handheld computers are in the works
• print styles are already implemented, and they strip unnecessary output for fast and cheap printing
• content is king and receives an advantageous position in the HTML source
• no JavaScript is necessary or even used on the site; I will add some, though, because it'll help ease things for capable readers
• no Flash, yet still elegant and hip!
• the site lays out properly on both Firefox and Konqueror (though Konq enlarges the fonts a bit); this means that the site will lay out properly on Mac Safari as well
• I haven't tested the mockup on IE7; however, I'm nearly certain it'll work well, because I've avoided IE7 gotchas; IE6 is out for me anyway

These points aren't just capricious whims of mine. They aren't a serendipitous coincidence either. I knew, from the start, that the site would need these features. I expect disabled visitors and people with mobile computers to access the site. And, finally, the site has been laid out that way to slavishly serve the goals mentioned on yesterday's issue.

At the very least, this means people can build effective Web sites without resorting to complicated technologies or straying from Web standards. So why don't they? I seriously think it's because most Web designers out there are lazy bums who'd rather keep churning out spaghetti code without actually learning their toolset.

The wrapup

I'm no design wizard, but I think I get by. What do you think?