Colophon: About This Site
The site employs a technique known as "liquid layout" allowing it to scale based on the width of a particular visitor's browser window. We noticed that while over 96% of our site visitors had browser widths of at least 1024 pixels, a substantial portion of visitors' browsers supported even more than that. A brief survey indicated that people varied in their browsing habits at these larger screen resolutions—some browsed with the window maximized while others wanted to multi-task and keep other windows up.
Our challenge was to ensure that the site rendered properly and utilized the available space to best effect.
Liquid layouts scale columns and other layout elements proportional to the available browser width. We set a certain minimum width so that columns would not collapse too far and then used percentage-width CSS to scale columns up in a logical manner. We also set a certain maximum width so that columns wouldn't grow to a width where text became hard-to-scan.
In our case, we allow images in our portfolio to scale as well, which presented its own particular problems. While Firefox generally does an excellent job scaling images appropriately, IE is far worse. Its default scaling caused many images to lose their crisp, precise feel. To get around this problem, we allow IE to immediately present its scaled version but then use GD, the Linux graphics library, to generate an image, custom-scaled to the user's browser window which then replaces the image. The effect is similar to progressive image loading and refinement.
The engineering drawing markings in the margins only show up when there's room for them, disappearing when the user sets their browser window at the 1024 minimum width. This allows us to conserve screen space when it's at a premium but add in some design detail when there is enough space.
This site is optimized for IE7, Safari 3.0, IE6 and Firefox 3, covering roughly 80% of our visitors during the month prior to launch. Other browsers degrade gracefully. User-agent-specific stylesheets were used to get the site to render properly in IE7 and IE6.
One goal we had was to make the site as fast as we possibly could without sacrificing design aesthetic. Wherever possible, we minimize the time-to-first-render by loading secondary content after the initial content has been downloaded. One example of this is the background loading of news items and rotated images on the home page.
Best practices for client-side optimization are also used, as 90% of render-time is typically spent on the client-side. We graded ourselves using tools like YSlow! and optimized, optimized, optimized. This involved "minifying" JavasScript and CSS files, using various techniques to reduce the number of files that are retrieved by the browser, and implementing a range of other tricks of the trade.
Server Specifications, Libraries Used
Page headers are set in Trade Gothic, with body text set in Lucida Sans (on Windows) and Ludica Grande (on Mac), and Arial. Illustrations use Dakota Handwriting.
Site design, illustrations, programming, search optimization and copywriting by Dayspring. Photography by Dayspring staff and James Kye.
Ready to start?
Tell us about your project.
Call 415.247.9420 or email us.