Thoughtful, detailed coverage of the Mac, iPhone, and iPad, plus the best-selling Take Control ebooks.

 

 

Pick an apple! 
 
Schedule Fetch to Work Automatically

Although Fetch doesn't have a built-in scheduler, you can use iCal along with Fetch's Mirror command or Automator support to automatically upload or download files at a specified time. To find out how...

Visit Scheduling automatic transfers with iCal

 
 

Designing a Modern Web Site for TidBITS

Send Article to a Friend

The Internet has changed in truly significant ways since we started TidBITS over 17 years ago. Yet our approach to publication has stayed relatively static, largely due to the need to focus on writing, rather than on the bigger picture. And put bluntly, our old-style approach to publication has been making it increasingly hard to attract new readers, a need that the results of our reader survey threw into stark relief.

Our choice was simple: evolve or die. That's an exaggeration, of course, but many of our publication methods were obviously dated, which has been hurting our ability to attract sponsors to earn the income that we all need to keep devoting our time to writing the kinds of articles we do. With reduced revenue, we would have been forced to devote attention elsewhere to earn a living, and TidBITS would have slowly faded into obscurity. Plus, there was a constant psychological tension between doing things the same old ways while attempting to cover the latest changes in technology. If you don't walk the walk, are you qualified to talk the talk?

It therefore gives me great pleasure to pull the sheets from a massive redesign project that we've been working on for many months (in between actually putting out issues, publishing ebooks, and working on other individual projects). If you visit our Web site today, you'll see just how completely we've changed the site. I'll explain what we've done, along with some of the whys and hows, but here's a summary of the major changes:

  • Completely new look and feel for the Web site, with modern design sensibilities and technologies
  • Topic-based browsing of articles, with individual RSS feeds for each site section, along with an umbrella RSS feed that includes all sections
  • Full text in all RSS feeds. If you've avoided using our RSS feed in the past because of the partial text feed, try it now.
  • Audio versions of all articles that appear in an issue; you can listen directly or subscribe to our podcast
  • New staff blogs for more informal content from our editors
  • User voting to identify our most popular articles

Thanks to everyone on our staff who helped with the redesign, most notably Glenn Fleishman, the mastermind behind the homegrown Perl and MySQL database and the site's DHTML and AJAX code, and Jeff Carlson, who was responsible for all the graphics and CSS layout. Tonya and I provided direction and project management, and numerous friends and the rest of the staff offered feedback throughout. Thanks, all!


Overall Goals -- Most people associate TidBITS with the weekly issues we send out in email on Monday nights. For a number of years, the weekly issue was our only public face, and our first Web site reflected that, simply making it possible to read the issues in a Web browser and after publication. In 1997, though, we held a contest to build a Web-based search engine for TidBITS that would return results at the article level, rather than the issue level (see "TidBITS Macintosh Search Tool Shootout," 1997-03-03). Some months later, we unveiled our first dynamic site, with full-text searching, article-level display, and middle-of-the-week TidBITS Updates (see "Four Hundred Issues and a Dynamic Web Site," 1997-10-06). Over the years, TidBITS Updates morphed into Breaking News and then into the ExtraBITS weblog. Despite these changes, TidBITS remained fundamentally based around the concept of a weekly issue.

One of our primary goals in redesigning the site was to move from an issue-centric publication model to an article-centric model. By thinking of TidBITS in terms of articles instead of issues, we can both cover breaking events more quickly and attract readers to our site throughout the week, rather than just after issue publication. (Our Web traffic has always shown spikes on Tuesdays following publication, after which traffic drops steadily until the next Tuesday spike; some people prefer to read our articles online after receiving notification or a full issue via email.)

We were also becoming uncomfortable with the way the issue was still the dominant unit of content on our site. Although it makes sense to anyone who has been reading TidBITS for years, we believe that the fact that even paper publications seldom mimic their real-world issues online caused new readers some level of confusion. If you're just visiting our site for the first time, what do you care that an article appeared in TidBITS 894? You don't, and it makes you think. A excellent rule of thumb for Web design is encapsulated in the title of Steve Krug's excellent book on the topic: "Don't Make Me Think." Any design element that forces people to think, such as showing articles on our home page as being inside issues, is likely to drive them away.

Another goal was to give the site a more modern look and feel. In the interests of reaching the greatest number of readers in the past, we avoided using what were once fancy new features, like Cascading Style Sheets (CSS) for formatting, or even requiring a browser window to open wider than would be readable on a 640-by-480-pixel display. In 1997 - and even 2002 - this made a lot of sense, but in 2007, as we can tell from our Web traffic statistics, there are only a handful of readers who can't view CSS-formatted pages on a 1024-by-768-pixel display. (The rest of the Web looks pretty awful or remains unusable for these people, too.)

From a design standpoint, our previous site did a fine job of presenting article text, but it wasted a lot of vertical space on the logo and presented navigation links that provided a site outline rather than helping users find content. Frankly, we were also tremendously bored with the site, and it's something we look at many times each day.

Redesigning the page layout also gave us the opportunity to build in some additional areas to display advertising for our sponsors, for Take Control titles, and - when we have room - for ads from places like Google AdSense. The way most publications generate revenue on today's Web is via advertising, and as much as I'm always interested in alternative revenue sources, advertising is the only one we've found that brings in enough money to keep TidBITS earning requisite sums. Hopefully, the new design will attract more readers, make TidBITS more compelling for sponsors, and generate additional revenue.

Lastly, something that came out of staff discussions was that we wanted the new site to help throw more light on individual staff members; too many people still think I write everything. Given that each person on staff is involved in many other non-TidBITS projects (heck, Mark Anbinder even has a real job), it can only help raise our overall profile if our editors are seen to be the experts they are.


A Site Tour -- Come with me on a tour through the site so I can explain how the design supports the goals.

The header of every page has three basic parts, the TidBITS logo, the disembodied heads of our staff members, and the Take Control logo. The new TidBITS logo is designed to take up relatively little vertical space while the background image of a MacBook Pro (and the Apple leaf that dots the i in TidBITS) imply an Apple focus supported by our new "Mac news for the rest of us" tag line. Our mugshots make it clear that TidBITS is produced by a small group of real people - we're not some huge corporation with interchangeable employees. They also provide quick links to our new staff blogs and, if you pay attention to the rollovers, allow us to have a little fun. Building the Take Control logo into the header enabled us to show the close association between TidBITS and Take Control.

We put a lot of attention into our navigation bar on the left side of the page, trying to think about it from the perspective of a reader, rather than as an outline of our site. To that end, it starts with links to the main ways people can subscribe to receive TidBITS regularly (which is much better than assuming people will come back on their own). Our email subscription options remain the same (and that's where current subscribers can manage their subscriptions), but our RSS feed now contains the full text of every article, and we've created a podcast for audio versions of articles so you can listen to TidBITS while you're commuting, exercising, doing yard work, or whatever. I record the articles as my final edit pass for each issue, so please don't expect a voice professional.

After the subscription options there are four tab headers for sections, staff blogs, back issues, and information about TidBITS. Click any tab header to display the tabs underneath; the previously open tab header collapses at the same time so you can focus on the newly displayed tabs.

We anticipate that the new sections will make our site significantly more accessible, since you can use the section tabs to filter the headlines that appear in the main bar. The TidBITS Home section shows every article (except for staff blog entries that aren't cross-posted to another section), but the iPod & iPhone section, for instance, shows just the iPod- and iPhone-related stories. Articles can live in multiple sections, since our coverage of Apple's new iPods falls into the iPod & iPhone section, the Networking & Communications section (because of the Wi-Fi capabilities of the iPod touch), and the Entertainment News section (because of the iTunes Store statistics).

Staff blogs are entirely new, and are meant to be a less formal forum for our staff members to share information that they find interesting or amusing, but which they lack the time or interest level to turn into a full article. There isn't a hard and fast distinction between blog entries and articles, so some blog entries that do meet our article criteria will be cross-posted into other sections.

Once you move into the content area of the page, you'll see either headlines with summaries or full articles. We received a lot of feedback that headers and tag lines were extremely important for anyone who's unfamiliar with the site, which is why we explain ourselves more fully with this expanded description just below the header: "Your source for indispensable Apple and Macintosh news, reviews, tips, and commentary. Thanks for joining us!" You'll also notice that each section has a title (like "Support & Problem Solving") and a tag line below that describes the section more completely (like "Read on if you're not afraid to open the case, edit a plist, use the command line, or install a hack.")

Each section features a "sticky" article headline at the top that we feel is the most important article in that section. After that, article headlines are listed in reverse chronological order with the newest ones on the top. Article headlines include short summaries, along with the author name (click it to view articles by that author), the date, a link to comment on the article to TidBITS Talk, and a Recommend link that uses AJAX to collect and display votes that are used in determining article popularity.

If you like an article you've read, click Recommend, and the number following the plus sign will increment by one, while the text changes to "Thanks!" We factor Recommend clicks in with page views and other elements to calculate the popularity of articles for our Most Popular Articles list.

Clicking an article title or Read More to display the article takes you to a page containing the full article text. The same bits of metadata (Author, Date, Comment, and Recommend) are at the top of the article, along with a Listen link if there's an audio version. Otherwise, articles haven't changed much, though we hope to be including appropriate graphics in articles more frequently.

To the right of the article headline or article text area is a gray box that contains a variety of headline widgets containing dynamically generated content from our database, including most popular articles, related articles, and other articles in the same issue (as appropriate). We'll be creating more headline widgets in the future. The gray box also provides room to promote our latest Take Control ebooks and other things.

The search capabilities of our site haven't changed, but they didn't need to. What has changed is the interface, which uses JavaScript and CSS to let you choose what to view without loading a new page. There's a permanent Search field in the navigation bar, built into the Sections tab header, and search results appear in the main bar using the same approach as headlines. Notice, though, a Show Summary link for each headline, which you can click to display the article's summary instantly, and if you want to see summaries for all the search results, just click Show All Summaries at the top. If you want to refine your search, click Refine Search to display the advanced search form. (Our goal is to bump searching into full AJAX beauty, which would allow new search results to appear without a new page load, too, which makes the site snappier.)

Similarly, if you follow one of our /issue or /series links to see a collection of articles, you can use links to show and hide the full text of the articles in the issue or summary. And, when you're viewing an issue, the navigation bar provides links to issues right before and after the current one.

Needless to say, there are still some rough edges to smooth out (such as solving display problems for Internet Explorer in Windows), and a few non-critical features to implement, so you very well may see something that doesn't work as you expect. If that happens, take a look at the current version of "Known Issues with Our Redesign" (2007-09-07) and click the Comment link at the top if you want to provide additional feedback. Thanks!


How We Did It -- As Glenn notes in his blog post "Breakfast, Dinner, Launch: A New Design" (2007-09-07), the redesigned site is completely custom code written in Perl and running on top of Apache. Our requirements for a content management system led us to write our own, and once Glenn did that (which was some time ago at this point), it made sense to continue with that effort since certain features of the redesign required that we add new content (such as summaries) and capabilities to our content management system.

As far as the design goes, we started by brainstorming what we wanted, modularizing the different features into little boxes, and then moving them around on draft Web pages, although we sometimes fell back on programs like Photoshop and InDesign that made it easier to move items around without building out the code for each revision. Sharing drafts was fairly awkward at first, since we were working with static text and images that Jeff displayed on individual pages on his server. Once Glenn turned the draft design into a template that showed dynamic content from our content management system, it became easier to visualize the site more fully.

Because Glenn used the HTML::Template module in Perl, we were able to separate the Perl code from the HTML template, the JavaScript scripts that provide the dynamic and AJAX functionality, and the CSS styles. As a result, it was fairly easy for Jeff and Glenn to work together on the site without constantly needing access to the same file. There were a few conflicts, but when I suggested that they try Panic's Coda (which features real-time collaborative editing, such that they could theoretically have both been working on the same files simultaneously), neither of them could deal with trying an unfamiliar tool in the middle of a project. That's not unreasonable - it's hard to do too many things simultaneously, and they're both very familiar with BBEdit.

The other invaluable application in the mix was MacRabbit's CSSEdit for building the CSS code much faster and more cleanly than if we had to code it from scratch. While CSSEdit is a CSS design application, the program also helped us when debugging what went wrong. Just like the olden days, our new templates were built by hand, which led to occasional typos, incorrectly nested containers, or just mystifying behavior in certain browsers. Without CSSEdit, we might have spent hours tracking down errant slashes.

We did rely heavily on one tool that's not yet public, so I can't provide many details. In essence, it's a Web-based project management system for small groups that enabled us to create and assign tasks to one another, and to have discussions about each task. Although the pre-release status of this tool caused some frustration, having a shared task list and task-specific discussions was absolutely key in tracking progress and maintaining momentum.


A Better Platform -- The final important fact about this redesign is that it gives us a much better platform upon which we can build new tools and services. We have a lot of ideas that we've had to put on the back burner until we had the appropriate infrastructure and site design to accommodate them.

As you might imagine, we need to recover somewhat from the intense work that went into making this redesign, and clean up the loose threads that we intentionally left undone while pushing to make it public. And of course, dealing with the release of Mac OS X 10.5 Leopard will undoubtedly take significant effort, but we'll be sure to let you know when there's something new and cool to check out.

 

Make friends and influence people by sponsoring TidBITS!
Put your company and products in front of tens of thousands of
savvy, committed Apple users who actually buy stuff.
More information: <http://tidbits.com/advertising.html>