Next Fifteen Annual Report, 2010
Next Fifteen needed their Annual Report for 2010 done, and as we had developed their 2009 website to great results, they came back to RY and asked them to work their magic again. And of course we did just that. Designed by one of our talented designers, the new layout was similar in basic structure (client request) but fresher, and with many notable improvements.
Details…
Layout Highlights
While the layout of the 2010 Report site was fairly standard (a 15-column grid, in case you’re wondering) there were many elements that can give a developer pause. Namely a good number of elements on the site feature rounded corners.
Now as any web dev worth their salt will tell you, rounded corners aren’t easy. Or they weren’t anyways. With new browsers and CSS3 in draft, CSS writers can now tell the browser to do many things: round corners, add shadows (using RGBA or HSL of course), rotate elements, simple animations, and more. Sadly though, the more out there you get with CSS3, the less browser support you get. Indeed, with IE, you get none (until IE9 comes out).
This leaves you with three options:
- Slice images for all the rounded corners, butcher your markup a little, and look the other way.
- Use one of the many ‘fixes’ that exist on the web to re-draw corners in VML or who knows what else.*
- Discuss the use and requirements of such effects, and if you can use CSS3 for some of them, providing a reasonable fallback for the older browsers.
*None of these work with transparent backgrounds. At least none I’ve looked at, and I’ve looked at a lot.
Thankfully, the designer I was working with is a progressive sort of man. Sitting together for a little while, we figured out what the fallbacks for the IE browsers would be. This allowed me to take full advantage of CSS3 for the good browsers, and make sure the website was still visually pleasing and usable for the rest.
I should also note here that using CSS3 to do these simple effects saves a lot of time. Seriously.
Front-end Highlights
While much of the site was standard fare – accordions, sliders, etc. – a couple interesting items came up. The first was the ‘at a glance’ button situated in the top navigation. This tab was an added-value item that would allow users with javascript enabled (basically everyone) to pop open the tab and be given key points of information right away. There was also a video embedded into the tab that was developed using Flowplayer.
The second interesting item was a semi-requirement for the iPad. It wasn’t an official requirement, but some of the powers that be at Next Fifteen owned an iPad, and wanted to make sure things worked… more or less. The website on the whole worked well enough, but there was an issue with the Flash map that was used for the brands page. That is to say that it’s made from Flash, and the iPad doesn’t do Flash.
After some discussion, we figured that the best course of action would be to use swfobject to add the map onto the page. This worked out really well, as we could have SEO-friendly content within the ‘flat’ map, which would be replaced by swfobject when actual users browsed that section.
In the end, the site went live without a hitch, and the client was super happy. The designer and I were proud of the end product, and we got extra props from our UX team when they pointed out that this site is the closest to the wireframes of any design we’ve pushed through.
Website – http://ar10.nextfifteen.com/