Case Study: The Jazz Calendar Site

Contact Us or call 1-877-932-8228
Case Study: The Jazz Calendar Site

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:

screenshot of Jazz Cal design

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:

screenshot of Jazz Cal design - narrower browser

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).

screenshot of Jazz Cal design - showing pixel widths

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:

Code Sample:

FlexibleGrids/Demos/jazzcalfirstdraft.html



  Jazz Calendar - Local Live Jazz Music Events
  
  



  
Jazz Calendar

Local jazz info

Title

content to go here

Jazz Calendar
123 Fake Street, Sometown, USA | 555-123-4567

Code Sample:

FlexibleGrids/Demos/css/jazzcalfirstdraft.css
body {
	background-image:url('../images/bg_page_notes.gif');
	font-family:Arial,sans-serif;
}

a {
	text-decoration:none;
	color:#a65c4c;
}

#container {
	width:960px;
	margin:0 auto;
	background:#fff5ea;
}

#main {
	width:900px;
	margin:0 auto 53px auto;
	background-color:#c0cbd0;
}

header {
	background-color:#a67947;
	padding:0 0 0 36px;
}

header h3#tagline {
	float:right;
	font-size:12px;
	color:#fff;
	font-style:italic;
	margin:36px 36px 0 0;
}

nav {
	background-color:#2d5668;
	padding:10px 0 10px 36px;
}

nav ul {
	display:inline;
}

nav ul li {
	display:inline;
}

nav ul li a {
	color:#fff;
	text-decoration:none;
	margin-right:10px;
}

#main #maincontent {
	width:494px;
	float:left;
	padding:36px;
	background-color:#ffedd9;
}

#main #sidebar {
	width:259px;
	float:right;
	padding:36px;
}

#main #sidebar h3 {
	font-style:italic;
	font-size:20px;
}

#contactinfo {
	clear: both;
	background-color:#a67947;
	padding:10px 0 10px 36px;
}
#contactinfo p {
	color:#fff;
}
Next