Site Layout
What makes the layout of this site special? It looks quite ordinary. No sizzle. But when you look closely it has some unique characteristics. Many things were built with a precision that isn't evident at first glance. That's intentional, though it should appear natural. In this article we'll describe some features of the site that are deliberate.
This site is a blog, an information site. It tells you about me, what I might be thinking about and what I've been working on. If it were intended to be a glitzy brochure site, it would look very different. There would be more images, more active components, and less text.
Grid Layout
In an earlier post we noted that we intended to use Zurb Foundation for layout. We've done that. Foundation provides a great toolkit for a grid based layout. Most people use the twelve cell grid that Foundation has as its default. Because 12 is divisible by 2, 3, 4 and 6, you can get some nice evenly spaced, balanced layouts by dividing your page into 2, 3, 4 or 6 parts. Or you can have different width columns as long as they add up to 12 cells.
I wanted something different. This site is based on seven cells. That means there will never be equal sized columns across the page. There will only be columns that add up to 7 cells. This requires a little more thought about how to allocate cells to content. And it will never appear perfectly balanced.
Target Views
One of the key features of Zurb Foundation and similar toolkits is that you can build your content once and have it displayed differently on various devices. This site supports smartphones, tablets and regular displays (laptop and desktop). These are called small, medium and large. We used the Foundation default screen width breakpoints to determine which view will be displayed.
Rather than describe the detailed design here, you can look at the site on a regular display and narrow your browser to see how the layout changes for tablets and smartphones. For example, the sidebar is comprised of three parts. On a regular display the sidebar is on the right with the three parts stacked vertically. On a tablet the sidebar is below the main content area with the parts spread horizontally. On a smartphone the sidebar is below the main content area and the parts are stacked vertically.
Each block of content adapts it's position depending on whether the small, medium or large view is in effect. Remember there are always 7 horizontal cells that get divided in different ways to provide all the views.
Menu
Most sites put a menu at the top of the page. I chose to put the menu off to the left for a few reasons. The first is that most laptop and desktop displays today are wide screen. But as designers we often still try to cram as much into page heading areas as we can and that pushes content down. Think of the times have you had to scroll down just to see a little bit of content when viewing web sites. I find that frustrating. There is more horizontal space available on wide screens. So I put the menu on the left.
The second reason for the menu on the left is that I think of a website as an application. This menu is simple, but in a more complex application there could be several menu items that need to expand to lower levels. I wanted to get some practice building an accordion style menu like this so that I'll be ready when I need to add one to a larger application.
The third reason is that I just like the accordion style menu. It works great on small, medium and large displays. It looks the same on each of those displays. And it doesn't require a large amount of complex CSS. It is simpler than Foundation's Top Bar and Off Canvas menu plugins. Those are nice but I didn't need that level of sophistication on this site.
This menu uses Foundation's Accordion plugin. I had to add some CSS to make it work the way I wanted. These customizations include:
- opening only the top level on small devices as default
- opening the first level on medium and larger displays as default
- allowing a menu item to have both a link to another page and a menu icon
- clicking the menu icon opens or closes a lower level
- adjusting the size and spacing of each item to look like a menu
- setting different colors for each menu level and for hover
Septagon Image
Look at the expertise page. When I first started working on that image I wanted a way to have links attached to each of the individual items on the image. You can use area maps to accomplish this as long as your image is a fixed size. On responsive sites where images can grow or shrink to fit the space available, area maps fail. There are JavaScript options to handle this but I wanted to see if I could do it with CSS alone. While it took some work and a few iterations, I managed to accomplish what I set out to do.
In essence there are two layers in that space. The lower layer contains the image and the upper layer contains the HTML with the links. Foundation's grid system is used to position the image and the links. Rows and columns with the links grow and shrink in the same proportion as the image itself, so the relative positioning of the links is always the same regardless of the size of the image.
In this situation I used a 16 columnn grid with 16 rows. That gives me a square map of 256 cells. If a cell is mostly over one of the individual items in the image it gets a link. Otherwise, it has no link. Using the offset feature of the grid system, I could put a sequence of empty cells and a sequence of linked cells into one line of HTML. For example, the following code covers 4 empty cells, 5 linked cells and the remainder of the row is empty:
<a href="#"><div class="base16-offset-4 base16-5 column end"></div></a>
From this code you can also see the trick to get a 16 cell grid for the image even though the site is based on a 7 cell grid. Take Foundation's CSS intended for a 16 cell grid, replace small with base16 and copy the parts you need into a custom style sheet.
Summary
Zurb's Foundation is an excellent toolkit for web site layout on multiple devices. On this site, Foundation's grid system is used here to manage the fluid layout and it's even used to place links over a responsive image. The only plugin implemented at this time is the Accordion for the menu, but the toolkit itself includes many more plugins.
