It’s all too often the case that as soon as a project is finished, I’m on to the next one in the queue, without any time to stop. I’m sure others know this feeling - there’s no time to reflect and blog about the work you’re doing. So here starts the catch up…
Back in April, a project I was involved in was finally launched, the new Identity and website for Five Details, previously known as ExtendMac, whose Flow FTP client won a Runner up prize in the prestigous Apple Design Awards in 2008. Brian Amerige, who created Flow was getting ready to release a new iOS app called Seamless to coincide with the relaunch, and Hicksdesign were bought on board to create a new identity and website.
After a few different explorations, we settled on the simple logo of the 2 ‘D’ shapes that together form a ‘5’ in the negative space:
The logo has white and orange variants, working on either a white or dark background, as well as ‘layered’ version, for use in backgrounds:
Brian and I discussed suitable type treatments, and I felt that LFT Etica was the right fit for this project. It needed to be a clean sans-serif that would work well bold, but with some individuality. I particularly loved how it looked reversed out of black. Brian and I were both keen, and the fact that it was available to use on the site via FontDeck sealed the deal.
A logo can never be designed in isolation though, so as soon as these initial ideas were approved, work on the website began. The key requirement here was the app name was the most important element of the page - the Five Details branding and navigation was secondary to this. Therefore it made sense to place this at the bottom as fixed footer.
(I didn’t work on the app icons by the way: the Seamless icon was created by Woflgang Bartleme, while Flow was created by Sebastiaan De With)
In terms of media queries, this site doesn’t feature the whole gamut of layout possibilities, but it was clear that optimised views for iPhone/iPod Touch and iPad were needed. Following the idea of 320 and up, the stylesheet starts with the narrow view, and then the ‘desktop’ version is added via media query. This prevents mobile devices from loading the larger images. The iPad is a different context though, and it gets the full css, plus a few other rules to optimise it. As Mobile Safari still doesn’t support position:fixed, the nav is placed at the top using position:absolute.
One thing I always find a bit challenging is how to arrange navigation for a smaller screen, such as maximum width of 320px. There’s not usually enough room for a horizontal navigation, and as Stu Robson points out, it pretty much takes up the whole screen when it’s vertical.
My solution was to place the navigation last in the markup, so that while the ‘normal desktop view’ fixes this to the bottom of the viewport, the iPad has it at the top, and the smaller iPhone view has it as footer.
It makes extensive use of the background-size:cover property to make background images scale to fill the background proportionally, while still filling the viewport. One thing I found with this was that Firefox and Opera didn’t like you to have a differenr shorthand ‘background’ declaration in conjuction with it. In order for it to work on those browsers, all the background properties had to laid out individually.
I also wanted to mask off the bottom the site, where it goes underneath the navigation. I tested this using webkit-image-mask initially, and then replaced this with a fixed position image. This is straightforward on the plainer colour backgrounds, but for pages such as the About section, where there is a large black and white photo, I had to create a special mask with the bottom portion of the photo, adding the same background-size:cover CSS to make it work.
Here’s the mask:
And here it is in place:
Fiddly, but worth it in the end!
To finish, I’d like to say how marvellous it was to work with Brian on this project. He had constructive insights on the design, and while we went through a number of iterations, the end result is all the better for it. Brian was also someone who listened, and it made for a very happy relationship!