Case Study: The Jazz Calendar Site
Our goal is to develop a site for a client that shares information about local jazz music performance. Aimed at an audience of local jazz enthusiasts, the site will feature upcoming concerts at local clubs, give users a chance to sign up for email alerts, offer ways to interact with others, and - over the course of our work here - be optimized for viewing on mobile devices.
Open FlexibleGrids/Demos/jazzcalfirstdraftcomplete.html in a browser. The screenshot below shows the first, nonresponsive, design goal. A music-note background image fills the page; the main content sits in a 960px-wide, fixed-width container. It looks fairly good if our screen and browser are wide enough:
If we resize our browser, so that the width of the browse is, say, 700 pixels, the design doesn't quite work. The fixed width of the shell of the design remains 960 pixels wide; extending to the right of the now-narrower browser and forcing a horizontal scroll:
Here is, below, a guide to the widths of the various top-level elements of the design. The main content shell is 960 pixels wide; margin:0 auto centers the element in the browser window; the inner shell (the #main div) sits centered within the main shell. The main content - the wider, left-side column - floats left, with a total width of 566 pixels (494 pixels of width plus 36 pixels of padding right and left). The right column, with the "Signup" content, floats right; it has a total width of 331 pixels (259 + 36 + 36).
Our first effort renders the shell of the design - the guts of the main content is missing, but we've got the basics done. We use a CSS reset (based on Eric Meyer's widely used code) to ensure a consistent baseline of CSS before crafting our own stylesheet. A reset removes inconsistencies among browsers' defaults: as things like line heights, margins, and heading font sizes differ between Firefox, Internet Explorer, and Chrome (and among various versions of each browser), a reset file like the one mentioned enables us to start with a level playing fields, allowing us to deliver a more-consistent presentation regardless of the browser (or device) our users might employ to view our site.
We've used good HTMl5 markup: the <nav> tag wraps the main navigation element element, the <aside> tag holds the right sidebar, etc. We use margin:0 auto to center elements and float the two main columns left and right. Here's the code for a first draft of the page, without any content: