Now that the Shelf Theme is finally launched, I wanted to write up some of the process and challenges that The Theme Foundry and I faced in it’s creation. I’d started with the intention of dribbling everything, but constantly found that I wanted to show more than 400x300px, so I started documenting the process in a Flickr Set instead. This post will flesh those out further.
Creation
I had a very clear picture in my head of how it should look, so my first step was to create what I call a ’HTML Sketch":
This is where I set up basic text and positioned boxes to make sure the layout was actually possible - a series of horizontally arranged ‘cards’ on a shelf, where the card height collapsed when the viewport was too small and the cards didn’t wrap. This was achievable with the cards floated left, within an absolutely positioned wrapper div with a fixed width. Without the fixed width it was impossible to prevent the cards wrapping across all browsers. Later on we changed this to use javascript to calculate what the width should be, but left a default width in for those without javascript enabled. When the viewport height is too small, the cards become scrollable using overflow:auto.
From the basic sketch, I then started roughing out the shading:
Initially the sketch had all the cards the same height, but later I managed to get the height to change per card to make it more interesting and natural.
I normally design ‘in the browser’ but it was essential for a project like this. One caveat: you do have to know what you want to achieve first. It’s very easy to spend hours ‘tickling away’ at little bits without any idea of the bigger picture. You need focus, as I’ve discovered myself.
I’d said at the start that I wanted this to be minimal, with no wood backgrounds. However, later in the development I tried the shelf in wood, and changing the light direction a bit, and found I preferred it:
The wood added much needed warmth, and helped draw the eye downwards to the bottom where the cards are aligned. I also used nth-child pseudo class to alter the postion of every other card slightly, just so they weren’t too uniform.
article:nth-child(even) {
margin: -4px 10px 0 0;
}The cards themselves use a mixture of border-radius, multiple box-shadows and background images to create the overall effect. It means that IE gets a much plainer looking card of course, but not enough to spoil the overall look.
I’m really pleased with the final outcome:
I now employ media queries to every project I do, and Shelf was no different. When the layout becomes too narrow, it switches to a series of vertical shelves, rather than one long horizontal one. This layout also serves as the mobile device view:
In order to provide more ways of navigating the Shelf than the scrollbar, I worked with Yan Sarazin who implemented keyboard navigation, and all the other javascript that was required. I highly recommend Yan - he was a joy to work with!
The main typeface used in Shelf is Junction, an open-source font from The League of Moveable Type, designed by Caroline Hadilaksono.
I’d been looking for something that made me think of Modern Art Galleries (or ‘Museums’ if you’re in the US) and Junction fitted the bill perfectly. It’s open-sourceness was a bonus, and meant I could @font-face as much as I thought appropriate. Not all fonts suit the low quality Windows type-rendering, but I felt Junction still worked well under those conditions.
Some of the challenges that we faced
Normally on web projects I find that IE6 can be ignored (and served a universal style sheet), IE7 needs a few hacks to make it work, while IE8 and IE9 are fairly trouble free (lack of support for CSS3 aside). Shelf was much trickier however, with Firefox and Mobile Safari giving as many problems as IE7.
I always add an IE stylesheet for each version to sort out any issues, applying zoom:1 to elements that don’t ‘have layout’ in IE by default, such as div’s. In particular, IE7 had a problem with the heights of the cards.
First, IE7 without any fixes applied:
Then with zoom:1 applied to force ‘hasLayout’:
Applying Dean Edwards IE7 script sorted that out fortunately. IE8 and 9 just needed a few nudges to position the cards correctly on the shelf. I also needed to go back and add fallbacks to rgba colours, by placing a normal hex colour on the line before. Those browsers that don’t support rgba colour will simply ignore it and use the first colour.
I’d also used opacity a lot on images, such as the social network icons to avoid repeating images. However, while -ms filters could support this in IE, it supported it very badly. Transparency worked, but the icons lost all their anti-aliasing. In the end I felt that this was important for IE to see properly, so I reverted to a series of images instead.
The next browser problem I ran into was in Firefox, as it doesn’t allow you to apply border-radius directly to images. In the original Shelf design, I had images inside the cards (which have slight rounded corners) which were clipped correctly in Opera and WebKit (even in IE9!), but Firefox (including v4 beta) would display a sharp corner every time. The effect wasn’t great:
A workaround for this was to apply the image as a background-image of a div, applying the border-radius to the div. There are even jquery scripts to automate this for you. However, they rely on having a fixed size for the image, and Shelf makes it’s cards fluid for the narrow layout. While it wasn’t an easy choice, I decided to just add some padding inside the cards, rather than have them right to the edge as I’d wanted.
The other main issue to sort out was with Mobile Safari. While horizontal scrolling isn’t for everyone, on devices like the iPad it actually feels more natural than using desktop browser with keyboard and mouse. The gesture control suits it - particularly in the landscape mode.
Here’s where the real problems started. First of all, Mobile Safari doesn’t support position:fixed, which was being used to keep the header and footer in the same place while the shelf scrolled. Aside from javascript, there is no way to support this at the moment, so I decided to just let these scroll with the shelf. That wasn’t so bad.
The bad was that in order to scroll divs with overflow:auto you have to use two fingers. There is also no indication that the content scrolls either. I felt this was too much for users to find out.
This handy script from Chris Barr solves the 2-finger problem, and allows one finger scrolling, which is more natural, and increases the chance of discovering the scroll-to content by accident. We also needed a visual indication of ‘more content, scroll to see it’. As this was the eleventh hour on the Shelf theme, I came up with some CSS to add an indicator without extra markup.
The script adds a class of ‘scrollable’ to divs where there is overflow, so I already had a head start. I then added a mask image to fade off the bottom of the div, added via the :after pseudo element. At the end of the div inside, I added the mask image again, but with a higher z-index. The result is that when you scroll to the end of the content, the scroll indicator is hidden to indicate the end of the overflow content.
Here’s the code (shortened for brevity):
.scrollable:before {
display: block;
position: absolute;
z-index: 101;
bottom: 34px;
left: -2px;
right: 40px;
height: 60px;
background: url(../images/scroll.png), url(../images/scrollgrad.png);
background-repeat: no-repeat, no-repeat;
background-position: center 40px, left top;
content: ".";
color: transparent;
}
.scrollable .content:after {
position: relative;
z-index: 102;
display: block;
content: ".";
color: transparent;
height: 60px;
margin: -30px 0 0 0;
right: 0;
left: -6px;
bottom: -14px;
background:url(../images/scrollgrad.png);
}And here is a video of the effect in action:
It’s not perfect by any means, but I’m rather pleased with finding a solution to something that I thought wouldn’t be possible without throwing yet more javascript at it.
So there we go, I hope you got something out of all that! It only remains for me to plug one more time: go and try the Shelf Theme for yourself!