A Fresh Redesign: 2007/08 edition

Warning: Contents are time-sensitive

With the last major facelift of schillmania.com having happened some time in 2006, it was high time for a revamp by the time December 2007 rolled around. This latest rev is an attempt to return to some of the wacky experimental javascript-driven interfaces and DHTML stuff of earlier years, 1999 through 2002 primarily; this was work usually done "just because," to push the limits of the browser with Javascript, and for the fun of experimenting with UI and interaction ideas. Sometimes stuff just didn't make sense and seemed quite random, but usually that was the idea; it was a playground.

Reduce, Reuse, Recycle

And now, a brief bit of history.

By 2003 and with the growing popularity of blogs, the site's design shifted to become more square and structured, decidedly less-random and experimental. It also made sense at the time to develop something that would be more flexible for serving content with structured URLs, and supporting different templates. Because of the templating system/framework developed for the 2004 edition worked quite well, it was used to serve content for the subsequent 2005 and 2006 edition designs, and has been used again for this latest one. "Themes" may be a more-accurate term than "designs" in this case, given the latest unique content (ie., this entry) is available, viewable within these archived layouts going back to 2004. Technically there's no reason this kind of approach shouldn't work anyway, it's all just blocks of HTML.

Experimental JS/CSS/XHTML + Web Standards

Another side-effect of the templating system is that it serves "true" XHTML (with the application/xhtml+xml MIME type, forcing true XML rendering mode) where supported. The relative strictness of this mode is impressive; even with templating in place which helps to ensure validity of code, certain other browser behaviours and DOM rules change when true XML rendering is in effect. document.body, for example, is no longer valid in Javascript - rather, document.documentElement is used. In 2004, Mozilla/Firefox would not let you write to innerHTML either, favoring createElement, presumably because you could inject invalid markup with innerHTML - in my opinion, a justified block; however, it appears to be allowed at present day likely because the practice is so over-used.

The Development Process

Given everyone has their own way of working, the following is an overview of how I typically build my own web projects.

With each site redesign, prototyping and development is done independently as a static single-page view with relative external references (JS/CSS/images, etc.) Code is written entirely using Notepad (Windows' basic text editor.) Graphic design/layout is created and edited using Photoshop 5.5 and the GIMP. Once the design has been solidified, prototyped and most functionality is complete for the single-view case, files are copied to the core development environment (Apache + PHP,) external resources are split into appropriate paths and re-referenced from the HTML.

The Creative Process

Despite having a job involving frontend engineering (web development) work - currently Yahoo!/Flickr as I write this in December, 2007 - I also enjoy doing my own personal projects and feel obligated to take them on from time to time. One of the main reasons I enjoy doing independent work is it allows me to exercise my mind without external restrictions or deadlines. I can also freely challenge myself to think of fresh ideas, take large risks I couldn't necessarily do at work, creatively solve problems and, pardon the cliche, "think outside the box/container/dodecahedron." Each year I try to do something different, new and challenging that I haven't accomplished in previous years, and I find I learn something new with each iteration. The learnings I take away from this experimental work can then be applied to future work, personal or professional. In a lot of ways, the two cross over.

Inspiration

Some things that seem to be consistently associated with creative development and design inspiration ideas, over the years:

  • Music (downtempo/trip-hop): The soundtrack for creativity. Absolutely required. MPEGRadio + Soma FM are highly recommended.
  • Coffee (dark french roast) / 7-11 Slurpees ("slushies") on occasion
  • Product/Web Design philosophy/influences: Apple (design + motion/animation in particular), Microsoft, Yahoo!/Flickr
  • Random web browsing (layout, colour, theme, font ideas)

About This Design

Summer.02 design screenshot Inspiration from 2002: The "Summer.02" design of Schillmania.com (requires IE.)

The 2007/08 edition is an advanced, cross-browser/standards-compliant design loosely based on the original idea from "Summer.02," an experimental Internet Explorer-only design that featured a time-sensitive (day/night) pond scene with throwable rocks, sound-enhanced UI elements and manual lighting control options.

With Summer.02, elements fade from light to dark and back over the course of a day, with accompanying background sound elements. The primary "day-to-night" effect was a relatively-primitive fade however, and did not include any dynamic shift of colour nor changing backgrounds. I wanted to improve on this, taking advantage of standard JS-DOM and CSS methods to achieve something closer to what I originally had in mind with the 07/08 edition. I have traditionally always written my own javascript animation code, but this design uses the Yahoo! User Interface Library animation, DOM and event utility packages, which normalize behaviour and provide a consistent interface to both browser-provided and non-native (but desired) features. The YUI "slider" widget is also used for the light control UI.

Design Challenges

A number of challenges were encountered along the way with this design; most involved the dynamic transition between light and dark (day and night), maintaining balance and contrast between colours, and ultimately, legibility. The site text is dark so as to contrast with the backdrop during the day, but does shift to a light colour once a certain light threshold is reached (ie., the text becomes too dim, close to black, to stand out.) Finding a reasonable balance took some tinkering and experimentation.

Rendering and performance is the single biggest concern with this design, and was not an unexpected surprise. In fact, it was expected and part of the challenge was finding ways to optimize it. Multiple layered, alpha-transparent PNG-based backgrounds are being applied to numerous elements in addition to native CSS opacity on those elements; furthermore, elements with solid background colours are having CSS opacity applied and many animation/transition sequences can be simultaneously run on all of the above. Regardless of browser used, the combination is practically guaranteed to max out any modern computer's CPU when the design's "enhanced FX" (namely, nested alpha PNG/native CSS opacity effects) are enabled. It could be considered as an informal browser stress test of sorts, and it is interesting to see the strengths and weaknesses of the different browsers as they attempt to render various aspects of the page. Firefox 3, at time of writing, does the best overall job in terms of rendering and proper CSS behaviour, but Safari 3 may edge it out for rendering speed and eye candy such as font smoothing and fuzzy text shadows/highlights on header elements.

Future Trend: "Anything but IE required"?

Most of my earlier experimental DHTML site work required Internet Explorer 5+ by design as it was the dominant browser of the time, and was what I developed and tested in, having a bit of a distaste for Netscape 4.7. My earliest sites were cross-browser, but became more "IE-only" once the DHTML experimentation started.

From early 2002 onward, no doubt aided by cross-browser work at my job at Critical Mass (a Canadian-based creative ad agency,) my personal work returned to focusing on cross-browser and standards-based techniques. The DHTML Arkanoid project from 2002 remains to this day the most complex piece of cross-browser object-oriented javascript projects I've undertaken, and probably the most popular.

Since the introduction of Apple's Safari and Mozilla's Firefox browsers, Internet Explorer has been losing some marketshare. Firefox now makes up an impressive percentage of overall web traffic, which is good to see given its overall combination of performance, web standards support, features and security. Ironically, Internet Explorer appears to be falling behind in terms of standards support by comparison, and has been for some time the target of criticism from the front-end engineering / web development community.

Specific to this redesign, I was effectively forced to degrade IE 6 to a non-javascript experience because of rendering bugs and lack of proper support for PNG-based background images. IE 6 has historically been given an "A-grade" experience with my personal work as it made up the majority of the browser market, but does not support the level of alpha transparency and CSS opacity required to render this layout.

IE 7 improved support for the PNG image format in that you were not required to write IE-proprietary CSS, but again unfortunately is crippled by a rendering bug when PNGs using alpha transparency then have CSS opacity also applied to the same element. (In this case, a div element with a PNG-based background, which also has opacity:0.5 applied via CSS.) Because of this bug, IE 7 also has a slightly-degraded experience. Firefox, Safari and Opera all render without these limitations. Hopefully IE 8 will have an improved rendering engine which fully supports alpha-transparent PNG + CSS opacity when combined.

Night and Day, Explained

To provide a realistic visual trasition of light to dark (and vice-versa), a lot of page elements' attributes must be modified. At page load and when the slider is moved, numerous elements are modified to give the visual indication of ambient lighting being changed. This includes changing foreground colour, background colour and opacity on a group of specific elements for the most part, and creating a transition sequence to the new appearance.

Some of the elements which are modified during a lighting change:

  • Body background colour (base light, #333 to #fff)
  • Global text colour (contrast with body)
  • Navigation/dropdown background overlays (50% white/black based on 60% light threshold)
  • Navigation text colour (contrast with overlay and backdrop)
  • Body border colour (complement body background colour)
  • Sky background shade colour (black, blue, purple, pink, yellow, blue) at varying opacity
  • Theme backdrop (ie., california trees) - may include alpha transparency to allow sky shades to show through in addition to CSS opacity, etc.
  • Theme backdrop "highlight" overlay (transparent to #fff alpha-transparent gradient, top-aligned) - opacity set according to % light
  • Theme backdrop "shadow" overlay (transparent to #000 alpha-transparent gradient, bottom-aligned) - opacity set according to % dark
  • Stars/other nocturnal theme backdrop overlays, opacity set according to % dark
  • Snow (if enabled), opacity based on theme lighting
  • jsAMP skin theme (light/dark if enabled), based on 60% threshold)

As mentioned earlier, the combined "weight" of the layered alpha-transparent PNGs and CSS opacity can severely weigh down Firefox and Safari versions prior to 3.0, so by default the "enhanced effects" are turned off to prevent CPUs catching on fire. When in this mode, the backdrop light/dark overlays are not shown, and the lighting changes are limited to the header part of the page (ie., the main content area is left white.) This can be toggled using a checkbox at the top left corner.

In Closing

This is an ongoing work, and the design, layout or behaviour may change as time passes; my plan is to try to iterate on the UI over time and modify lightly, rather than outright replacing with something new. We'll see what happens.

Enjoy!