Colophon: About This Site

Liquid Layout

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.

Browser Optimizations

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.

Graceful Degradation

It was important that visitors that happened to have JavaScript turned off still got a usable experience, so the site is coded to degrade gracefully with JavaScript disabled. All functionality is generally still available with the exception of extra images in the portfolio area and news items beyond the first one on the home page. There are other solutions to these problems, but we decided that what we achieved was acceptable.

Performance Optimizations

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

The site is hosted on Dayspring's web hosting service in a Linux Virtual Private Server (VPS) environment. As of launch, the server runs Apache/2.2.8 Web server with PHP/5.2.6 and MySQL 5.0.41. We utilize jQuery as our core JavaScript library.

Typography

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 Credits

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.

Let’s talk.

Capabilities
Solutions:
 
Expertise:
Work
Team
Contact Us
Other Dayspring Businesses:

San Francisco Web design company providing Web application development, custom software development, database consulting, and Web design services to the SF Bay Area and the Silicon Valley.

©1997-2014 Dayspring Technologies, Inc | Privacy | Colophon | Blog.Dayspring
Full Site | Mobile Site