In these accelerating days of web design and development approaches, marked both by new technologies and a renaissance of graphic design and typography, the existing design of a company’s website can slowly but surely become a bit tired. What once was fresh becomes tinged with staleness. This is not necessarily bad news, as it pushes companies to rethink and rework their public presence on the web, to come up with redesigns or refreshes that take advantage of innovation and work to ensure success in business goals.
FastSpring recently re-launched its company website (originally designed in 2007), taking the route of the refresh rather than the total redesign. We wanted something less boxy, a site that would feel fresh again, without breaking or abandoning some fundamentals such as ease of use and information-rich content.
Two of the phrases that capture the impetus of new approaches to web design are “progressive enhancement” and “graceful degradation.” These are complementary approaches, each term the flipside of the other. Progressive enhancement is achieved by taking advantage of increased support in modern browsers, such as Firefox, Chrome and Safari, for wider subsets of the CSS 2.1 and CSS 3 specs – rounded corners on boxes, drop shadows on both text and boxes, time-specified fades on elements such as links, and so on. The days of constructing both navigation and rounded corners on various elements through elaborate graphical and markup acrobatics are thankfully drawing to a close, just as table-based layout has widely become a piece of history. Progressive enhancement can be seen as a second wave of the web-standards movement.
Graceful degradation involves the recognition of the reality that such enhancements, when used, need to appear acceptably in less-aware browsers (yes, we are talking mostly about IE here) that do not yet support these programmatic ways of displaying style innovations. The goal is to achieve an “always acceptable” user experience, whatever the state of browser support for CSS happens to be. With this comes a renewed willingness to accept that designs will look different within different browsers. Content must remain usable and readable for all, even those surfing with JavaScript and images turned off. Content is still king, not least for SEO and accessibility reasons, but can be styled to accommodate innovation. One of the best books that explains this mental model is Dan Cederholm’s recent Handcrafted CSS.
One of the driving forces for the resurgence of JavaScript, and in particular cross-browser JavaScript frameworks with wide adoption such as jQuery, is the need for cross-browser, cross-platform behavior (as opposed to display) enhancement. With the advent of mobile browsing, and in particular the need to support the user experience on iPhones and iPads, JavaScript-based animation is gaining sophistication. We have used jQuery to create both simple things like cyclical image displays with fades and for more complex animations such as appears on the top of our home page, achieving some of the effects that could once only be approached via Flash.
Useful in this quest for progressive enhancement and graceful degradation is the ability to serve alternate content to IE via conditional comments.
In this manner, a site can, in a few lines of code, target IE and provide it with both alternate CSS and alternate content, if needed. We have made use of this best practice in our refresh as well. Text content can be updated at the page level, and the CSS takes care of the rest, to lessen the maintenance headaches. The IE experience will be more boxy, less refined, but not broken. In general, it also serves to educate users to try other browsers and see what they may have been missing.
On our roadmap is a complete redesign of our demo movie to highlight the current state of the SpringBoard interface and its many new features, as well as to use codecs that play nicely with mobile devices. We will also be adjusting the look and feel of our blog to reflect the site refresh. In addition, we are keeping abreast of the advent of HTML 5, the next major revision of the HTML standard, which incorporates features like video playback and drag-and-drop that have to date been dependent on 3rd-party browser plug-ins. A good (short, informative and fun) early reference in this regard is Jeremy Keith’s HTML5 for Web Designers.
With the complexity of calls to multiple files – due to factors such as tracking includes, jQuery and its associated plug-ins, multiple scripts, and page-loading protocols – it is important in refreshes and redesigns to optimize pages and sites in a systematic, iterative manner. Luckily, today we possess web services such as Pingdom and in-browser plug-ins such as Firebug and PageSpeed that can aid performance and optimization.
It is not enough to assume everyone has broadband and pages can afford to be bloated. Performance optimization has even become a sub-industry of its own, much like SEO and SEM. Good sources for general guidelines and tools are available widely on the web. One useful starting place is Google’s “Web Performance Best Practices,” which focuses on five factors: optimizing caching, minimizing round-trip times, minimizing request overhead, minimizing payload size and optimizing browser rendering.
So we hope you enjoy our new site. It is certainly a moving target, and our optimization and video-enhancement efforts will bear more fruit as we progress, learn more, and incorporate our learning into design and coding practices.