saila.com: Redesign Feed

Not a Google beta

Quite a few of you have sent in feedback politely reminding me that this site is often illegible in Internet Explorer. Others have mentioned that the Twitter updates have been breaking the page as a result of numerous PHP errors. Others have wondered if this will be an eternal beta.

All the comments, have no doubt seemed to have disappeared into a black hole, destined to be unheeded.

Rest assured, they haven’t.

The unfortunate fact is my attention has been focused elsewhere, and is only now starting to return to the bugs I and others have noticed. But I wanted to thank you for your comments and bug reports, and let you know I will be fixing them (the Twitter/PHP error is the first, the Internet Explorer issue may be deferred, though).

With any luck this site will be shape just in time for Firefox 3 and Internet Explorer 8 to be released — which will no doubt provide me with yet another reason to tinker with things.

Beta, baby

Welcome to the final stage of this prolonged redesign. Although “beta” is so Web 2.0, that is what this version is. There will still be some old links that are pointed in the wrong location, the design (such as it is) needs some further polish, some strange characters may pop-up, but essentially, it is done.

Along with the new look, the focus of the site is more tuned to longer, less frequently appearing articles. In addition, each of those articles are associated with topics that, in turn, reveal related articles and posts. The Living Can Kill You blog remains (as do other regular features, like the Main Page Rants and Web Design Tips), but notable links are more likely to appear as blogmarks. The CSS layout, one of the most enduringly popular features of saila.com, is still available but is now grouped with related content.

The URL structure has also been improved to make it more “REST”ful, allowing you to sort by date, category, and topic. Extending the ways you can access the site, there are now news feeds for the key sections; an enhanced print layout; and a planned mobile-friendly design. Finally, to better improve communication with the rest of the Web, saila.com is pinging Technorati with each new item posted and once again welcomes reader comments.

As you wonder through the site, if you notice something miss or have a suggested improvement, let me know — the more details you can offer the better I can improve the site for you.

Thank you for your patience, and I hope the site will offer more to you than it did before.

Gone alpha

The time has come, the tardy one said, to release this new design is only as an alpha. Finally, the key functionality is in place meaning there is once again feedback and comment forms; RSS feeds are now de rigeur, and the content is organized by topics. Most importantly, the site is no longer a mess of XSSI and is running off of a home-brewed CMS powered by CodeIgniter.

So if everything’s in place, why the alpha?

Key redirects are still messing (remember, cool URIs don’t change) and some content is not yet properly displayed (notably the tips and the glossary). As soon as those are in place, and any major reported bugs are resolved, the site will move to a beta — with links from every page of the old design pointing to their new version. The beta will also be broadcast to the subscribers of the long-dormant email list. Once any remaining issues from that release are resolved (and a mobile and print-friendly version of the site are done); the new saila.com will be unveiled to the world.

Keen eyes may have got a sneak peak at the new design (which will be changing, I only really like how it appears in the nightly WebKit builds) as I was setting up the alpha subdomain. There’s nothing spectacular with the visual look, but I was pleased the core worked out of the box in Firefox, Safari, and Opera. A few tweaks and IE 7 came into line. Internet Explorer 6 nearly three dozen new rules to even get it to behave.

Bug reports are more than welcome, as are design suggestions even if I can’t get the latter immediately. Have at it: alpha.saila.com

Arrival

If you are reading this then the Web host switch is done (at least for you) and I hope the email is functioning again.

As I mentioned yesterday, the switch was:

to coincide with the launch of the new site (which, again people, is going to be rough and border-line beta quality), but I forgot two things:

My testing database hasn’t been update with the content from the past year and a bit.

My production database hasn’t been set-up.

Truthfully, I didn’t forget, I just didn’t realize how much time it would take to do both tasks. So, the new host will showcase the old design for a bit longer than expected and the new design will be made available as an alpha for the willing and eager.

Packing the bags

Well, here goes nothing.

After ten years of excellenting hosting by my friends at ThinData, I am now switching to MediaTemple in what is the first stage of launching this redesign. Once again, the domain transfer is a first for me and, as a result, I am not really sure what to expect, except that service could be bumpy over the next while as the host servers update to point to the new location.

This was to coincide with the launch of the new site (which, again people, is going to be rough and border-line beta quality), but I forgot two things:

My testing database hasn’t been update with the content from the past year and a bit.
My production database hasn’t been set-up.

Truthfully, I didn’t forget, I just didn’t realize how much time it would take to do both tasks. So, the new host will showcase the old design for a bit longer than expected and the new design will be made available as an alpha for the willing and eager.

Thanks for your patience and we’ll see you on the other side.

Redesigns on a theme

Two recent redesigns reflect some of the design ideas I’ve been experimenting, offline, with. The first is Dunstan Orchard’s subtle, yet tremendous, new design for his blog and its use of both a page gutter and a sidebar containing one of three key navigational elements. The latter potentially creates a simple, non-intrusive personalization feature: if I want to see his blogmarks, and not his main navigation by default, I’d select that sidebar to load by default (it doesn’t seem to now).

Unlike Dunstan’s redesign, which seems to primarily target the user interface and information architecture, Andrei Herasimchuk’s new Design By Fire is a re-imagining.

Andrei’s design is a designer’s design which seems meant for a big display — although its default width is only 100 or so pixels wider than Dunstan’s — and my default browsing width does not do it justice. What he has done nicely, along with the ample use of white space, is remove the comments from the main entry. Unlike others, though, he’s kept the comments on the same page, but floated to them to the right of the main article. As he points out, it helps reduce the page length, but it also serves to reinforce the independence of the main piece. The subtle shift returns comments to just that: commentary on the main piece, not as a living addition to the main article. To combat complaints about having to scroll back up to read them, they could be set to position: fixed.

Both reflect strong print (specifically magazine) influences, and this may be the next big trend — especially if multi-columns become a reality.

Although I’ve worked none of these into the current working design, I anticapte this site’s new look will incorporate my experiments with these ideas.

Comments on a summer vacation

How’d you spend your summer vacation? I got the new comment system for this site working. (Okay, that’s not quite true, I only spent some of the first day doing that.) Like everything else with this redesign, it took me much longer than I’d anticipated. The main reason was again added functionality.

Now like many of the better comment-enabled sites out there, this version will soon (and the new design will):

offer comment previews;
allow valid XHTML or plain text (thanks to a modified version of Simon Willison’s SafeHtmlChecker);
identify my comments in an obvious (like Dave Shea), and more secure way;
decrease the visual impact of anonymous comments (again, like Mr. Shea);
and use some DOM-magic to clean-up spam protected email and Web addresses.

Planned, but not yet implemented (because it won’t work in the current design):

permalinks for each comment;
and numbering on each comment.

Will it ever launch?

In the ten months since my last column here, not much has changed other than my realization how deep the rabbit hole goes. With each minor new feature added (such as sorting by date) the possibilities and opportunities for the site burst wide open.

Ironically, it’s not the information architecture that is causing the problem, it’s the usability. The vision is to create a site so transparent, you’ll be able to navigate the way you want. With that goal/pipe dream, though, comes with a degree of complexity that taxes my technical skills; short spurts are all I can manage given the interruptions caused by my day job. Given enough c, c & q and the site would appear in weeks, not months.

Got a roadmap?

Various external pressures are creating a real deadline for this site’s new design. Already, the design I’d locked down for this relaunch contained elements that have since appeared in the redesigns of others. Though it’s good to know the non-designer in me wasn’t completely off-track, I anticipate the design will change yet again before the official debut. Once I catch the remaining broken links and finalize the output of some of the under-used features, it will launch.

This initial alpha release will be mentioned here, in the nearly comatose news list, and possibly LCKY. The next phase will have corrected the errors of the alpha, and finalized the less polished sections. Promotion for this beta version will be on each page; the current Web page will link to its twin on the beta site. This should catch any 404s and allow a bigger audience to test the site.

Finally, once the issues of the beta are resolved, the new site will be activated and the current static site will vanish into a zip file on my hard drive.

As for timelines, all I can say is that each subsequent stage will be exponentially shorter the the previous and that features of the new site will soon be available on this site (RSS, comments, and the afore mentioned newsletter).

Mine, all mine

All of this, including these columns is done for my own personal edification. While I do freelance work, I don’t rely on it; this design isn’s driven by design needs.

Aside from the reasons outline in the first of these columns, this process, like many personal-site redesigns, is done as a learning exercise. This is a playground that allows me to experiment with CSS (four years ago, this site introduced a three-column layout that is now being used on a number commercial sites); explore the server-side world; and experiment with all aspects of the launch process from project management to deployment.

That, and it’s easier than building maddeningly detailed historical dioramas.

Cleaning house

This site’s design has always been influenced by the skills I was developing at the time. First it was tables; simple CSS came in late 1997; dHTML and XSSI followed in early 1998; next was tableless design in 2000; and, since 2001, it has been advanced DOM and CSS experiments.

Now, I’m taking a few steps back.

My push toward client-side tools was largely by necessity. The site didn’t have access to rich server-side languages (e.g., PHP or ASP) to accomplish what I wanted, so I forced the behaviour onto the browser. (This, ironically, went against one of my early arguments against dHTML: many of sites were doing with JavaScript what could easily be done server-side.) Though it worked, it didn’t universally. Now, I’m finally developing a database-driven backend for this site and many the DOM “hacks” won’t be needed.

Having decided to reduce the site’s reliance on dHTML, I’ve begun looking over some of the other functionality. Here’s my plan so far (if you’ a fan of any of the disappearing services, I’d be interested in hearing your arguments for them).

Gone

This functionality is already available in most browsers. Having it on the site is both redundant and a mixed metaphor (is the site an application or a means to present content?).

Add link box (on homepage):: Did anyone use this?
Font Size:: Most modern browsers can resize any non-graphic type. Since I’ll be moving away from pixel based units, even IE-users will also have the ability.
Bookmark:: A geeky function that really is a core browser function.
Email Page:: Another geeky function better implemented by browsers.
Print Page:: This will remain in the table-layout version of the site only.

Going server-side

Aside from a new look, the most dramatic changes to the new design will be on the server-side. Currently templates are served based on complex sets of XSSI instructions, in the new version it will be database-driven. The following are the design elements now available via JavaScript that will be moved server-side:

Random tip and word:: Currently they are pulled from an JavaScript array using some XSSI.
PDA and XML editions:: Made available now through a DOM-based menu, will be now be accessed via an alternate version link (links may also be visible on the page).

DOM first, server-side later

Much of the future development of the site will be toward a mix of DOM and server-side code. Right now, for things like appearance changes, I will be executing them immediately via JavaScript, saving the changes to a cookie, so that on subsequent visits or pages, the appearance changes will be created based on a template dynamically created on the server-side.

Personalization on homepage:: dHTML makes it so easy, forcing a page reload each time is wasteful
Showing and hiding ads:: Instead of swapping display values, this will be a separate stye sheet.
Font-family switching:: This, too, will become a separate style sheet. (Similar functionality is available in browsers, but such changes effect all Web pages viewed.)
Template switching:: Although some browsers offer links to alternate style sheets, the change is temporary. Right now, I plan on doing the initial switch via the DOM, but this may change.

Staying the same

Outline navigation menu:: I’m undecided whether I will keep this, still like it (as do readers) and I have used a variation of it for years.
Too narrow warning:: This I’ll keep, likely in a different form with slightly different wording and the DOM is the best way to accomplish it.

Why I’m doing this

Starting to play, finally, with MySQL and PHP. I’ve always been a “client-side guy” whose hands rarely got dirty with the server side of things. Sure I’d played with , and some ASP and PHP, but nothing much.

So far, I’ve got a couple tables created to house the site’s content, a CMS front-end, and some rudimentary templates.

If things work out as planned, I plan on:

using inline comments (as opposed to the pop-ups in Living Can Kill You);
offering dynamically recommended links;
creating a more flexible glossary and tips (for searching and input);
categorizing blog entries;
reorganizing the content categories;
having the site’s content available in a variety of formats (HTML, XHTML, RSS, XML, text, etc.);
and finally, moving most of the preference controls from the client-side to the server-side.

The last item will, I hope, improve the sites performance, keep the changes persistent from page to page, and make maintenance easier for me. An added bonus for doing this: the preferences will be available to more browser. Currently, these preferences are written onto the page, and controlled via the W3C’s DOM. While powerful, it is unfortunately not consistently supported by the modern browsers.

Redesign

These are occasional series of columns about the long-delayed 2005 redesign of this site.