Coyote Creation

Colophon: About this site's design and code-base.

Mobile First Liquid Layout

This site employs a technique known as "liquid layout" allowing it to scale based on the width of a particular visitor's browser window. While over 96% of site visitors have browser widths of at least 1024 pixels, a substantial portion of browsers support even more than that. People vary in their browsing habits at these larger screen resolutions—some browse with the window maximized while others want to multi-task and keep other windows up. Mobile resolutions vary widely, and have unique and specific requirements for providing an optimal experience.

My goal is to ensure that the site renders properly and utilizes the available space to best effect.

Liquid layouts scale columns and other layout elements proportional to the available browser width. I 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. I also set a certain maximum width so that columns wouldn't grow to a width where text became hard-to-scan.

Images

I allow select images to scale. Select design elements only show up when there's room for them, disappearing when the user sets their browser window at the 1024 minimum width. This allows conservation of screen space when it's at a premium but adds in design detail for an enriched user experience on larger monitors.

Browser Optimizations

This site is optimized for IE9 and later, and current versions of Chrome, Firefox , and Safari. Other browsers degrade gracefully. User-agent-specific stylesheets are used to get the site to render properly in older versions of IE.

Progressive Enhancement

Performance Optimizations

One goal I have is to make the site as fast as I possibly can without sacrificing design aesthetic.

Server Specifications

The site is hosted on Webfaction 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.3 and MySQL 5.0.41.

Libraries

I utilize jQuery as the core JavaScript library.

Stage 2 build will include rolling my own JavaScript

Typography

Page headers: Body text: (on Windows) (on Mac)

HTML Toolsets

This site uses the HTML5 Boilerplate for setting up the base HTML5 template, along with additional header content from HTML5 Reset.

CSS Optimization

Site architecture design involves an ongoing balancing of development decisions and optimization. For this site, I chose to use multiple stylesheets to support flexibility in theming and styling even though each stylesheet brings an additional HTTP request.

I use normalize.css as an HTML5 focused alternative to reset stylesheets to standardize cross-browser rendering of elements.

Site Credits

Site design, illustrations, programming, search optimization, copywriting, photography, and photoshopping all by Coyote Holmberg.