Jump to content
Jump to navigation
Things tagged ‘CSS’
May 14th, 2009
Posted by Ian
Visit Website
The Brief
The MLA Handbook is the fourth project we have completed with Semantico, a specialist technical company based in Brighton. They were handling the overall design and build, and commissioned us to supply visual design for the site.
The printed book weighs in at nearly 400 pages of extremely detailed and exhaustively cross-referenced materials – migrating the product on to the web presented a clear opportunity to enhance functionality, increase the user-base and create a vital service.
MLA had a clear vision of who their users were and what they would want to do on the site, so we were not asked to carry out any discovery work.
Instead, we were given a set of wireframes which detailed all the page elements we needed to include in the screen designs. The designs needed to reflect their core values: authoritative, definitive, practical and detailed.
72 dots were a pleasure to work with. They produced beautifully crafted designs, through their careful attention to detail, through remembering all aspects of the user experience and through their ability to adapt to an evolving brief.
Andrew Grimes, Project Manager, Semantico
Design process
Working closely with Colin Caveney, Semantico’s project manager, we devised a design-requirements capture form to help us steer the design process. Naturally, we researched competitor sites to help position them in the marketplace as well. We drew up initial designs based on this research.
After receiving further feedback, we prepared a design workshop for the client in downtown New York. During the workshop, we presented a second iteration of designs and were able to work up design variations in situ for the MLA team to see. As it turned out, we’d pitched the designs very closely to what the client wanted – the design-requirements capture process had been instrumental here – so we came away from that meeting with just a small set of changes. The meeting wasn’t just about presenting the designs and meeting the client, it helped us to understand what was really important to MLA and gave us an insight into their expectations.
We love working with clients such as MLA – their whole business is about attention to detail and we share those values. It’s really refreshing to discuss the finer points of layout and typography with a knowledgeable and concerned client – it makes our job that much easier.
Production process
Once the designs were signed off, standards-compliant XHTML templates and CSS files were created and then tested in IE6, 7, Firefox 2 & 3, Safari, Google Chrome and Opera.
We also added in additional markup to improve accessibility – adding in access-key shortcuts, skip navigation links and short cuts to common functions such as search.
Following testing, the templates were handed to Semantico to integrate into their publishing system.
The site is now live, explaining the benefits of the Handbook to prospective purchasers and giving those who own it a new, searchable digital version of the book.
May 14th, 2009
Posted by Ian
Some History
Reggae unlimited is the place to find and buy rare vinyl imported from Jamaica. It is owned and run by one of the UK’s best known and respected men in reggae music &ndash Gladdy Wax aka Mr Vinyl Fingers. He has over thirty years in the industry as a recording artist, producer and is also the owner of the infamous Gladdy Wax Sound System – a cornerstone of the Notting Hill Carnival every year.
The proof’s in the pudding – we’re selling music throughout the world and our customers keep coming back for more. They worked really hard to make it all happen.
Gladdy Wax, Owner, Reggae Unlimited
72 dots have been working with Gladdy and crew since 2000, having built a previous website for his destination record shop Wax Unlimited which was based in Stoke Newington, London.
Building a community
The website is not just about selling music, it’s also about building a reggae community and a place where you can find out more about the music and people involved in making it. The site features regularly updated news, events and in-depth features. There’s a healthy bunch of newsletter subscribers and the shop sells right round the world. The reggae community is a truly a global niché – the shop regularly ships to Japan, Scandinavia, Italy, New Zealand, Brazil and France.
Design branding
In 2006, we digitised the music catalogue to enable us to launch the e-commerce site – about 5,000 items. Working with Gladdy, we decided upon a new name for the site which would build upon the already established reputation and also make it clearer what the website was all about – Reggae Unlimited does what it says on the tin!
When designing the new site, we wanted to differentiate the site from the competition and give the site a strong non-derivative look and feel. We wanted to convey the vivacity and dynamism of the music culture, but strayed away from the ubiquitous colours of Rastafarianism – red, gold and green. As much as we admire the highly crafted found-object styling by Intro for Blood and Fire records, we wanted to give the site a more clean and professional look – it’s also a look that’s difficult to translate into an on-going online environment as it’s so design-intensive.
Site development
We don’t belive in re-inventing the wheel, so we built the site using Cubecart, a robust standards-compliant e-commerce application which is reasonably easy to extend and customise.
We extended the functionality of the software to allow us to add features, news items and crucially for a music shop, a simple mechanism to play sound clips. We also hooked up videos pulled in from Youtube to add further richness to the site. Similar mash-ups are in development with Flickr where we’ll allow the reggae community to be included at a deeper level.
Working on Reggae Unlimited and witnessing its popularity grow over the years has been a joy – things can only get better
May 14th, 2009
Posted by Ian
The client
You may recognise Richard Shelton as Emmerdale’s evil Dr Adam Forsythe, but there is a great deal more to this versatile performer:”I’m an actor who sings, a singer who acts…’aint nothing like the thrill of a big-band but I love the challenge of acting too!”
Like many performers, Richard had a website, but it wasn’t doing him justice. It had nothing about his speaking appearances, business workshops or fundraising activities.
The site styled Richard as a old-school jazz crooner, and he wanted the site to show that he’d moved on.
“He didn’t want to leave that entirely behind,” said Ian Hallworth, Creative Director of 72 dots. “But he was feeling pigeonholed, and wanted to present a broader, fresher profile. For us that meant both richer content and an update to his visual brand.”
I love it! It’s fresh and modern and the streaming video allows my showreels to showcase both my acting and singing work.
Richard Shelton, actor and singer
The brief
Some clients are frustratingly unclear about why they want a website, but not Richard:
“Awareness and bookings! Everyone expects immediate access to information and being a performer is no different from any other business — you have to be able to show people what you offer as quickly and professionally as possible. A great site gives you the edge over the rest.”
This was very reassuring to us. “Websites for individuals can become vanity projects,” said Ian. “This can make the design process difficult. With Richard, we knew that he wanted to showcase his talents and reach new clients, and that set us a very clear brief.”
Design approach
The heart of a website is its content, and that’s where we always begin. So we asked Richard to gather photographs, testimonials, and any new information he wanted on the site. From this we created a navigation and site structure which showcased his talents to potential clients.
The branding brief was to update Richard’s look – “make it more modern” – without losing the cool, sophisticated feel. Ian started the brand revision by keeping the basic colours and exploring new typography.
The page layout took a more radical shift, focusing above the fold on on three elements: calls to action (‘Book Richard’), the star’s talents (‘Acting’, ‘Singing’ etc), and the performer’s showreel.
For Ian, the showreel was key: “Performers sell themselves with their showreel, and we wanted it front and centre on the site.” With Richard convinced, 72 dots brought in partners GraphicMotion to re-edit a range of showreels both for the website and for DVD.
It was time to Richard to review the design. “We were prepared for several rounds of design,” said Ian, “but he liked it straight away.”
Words and pictures
While the design was being coded, 72 dots was gathering assets and filling in gaps. “We wrote a fair bit of the content ourselves,” Ian said. “It’s something we’re used to, and we have plenty of experience in that area.”
Richard was very focused on his look, choosing photos carefully and supervising the production of the reel. These photos were being uploaded into the site’s content management system, which would allow Richard to edit and change the site at his convenience.
This flexibility means that Richard can update the site with news of his tours and events day by day. This gives several benefits, as Ian pointed out: “It’s not just about keeping fans updated – keeping a site fresh with content means that people keep visiting it and keep linking to it, which keeps you high on search engine results.”
Going live
With the showreels completed, the site went live. What was Richard’s reaction?
“I love it! It’s fresh and modern and the streaming video allows my showreels to showcase both my acting and singing work.”
And what about the reaction from those all-important potential clients?
“Very positive. I’m returning to the UK after a period away and am hoping for some big bookings!”
May 14th, 2009
Posted by Ian
The brief
We were approached by The Royal Botanical Gardens at Kew to design a website to accompany the largest outdoor exhibition of Henry Moore sculptures staged in London. The aims of the website were to: reflect the beauty of the exhibition to bring people to Kew; to enable visitors who were unable to attend the website to be involved; to facilitate visitors to Kew to share their opinions and photographs of the work; to expand the awareness of Henry Moore’s techniques and understanding.
72 dots have created a fantastic design for Kew´s Henry Moore website. It manages to both communicate the beauty of the exhibition and and at the same time provide lots of content for our audiences. It is a joy to use.
Mike Saunders, Director of Digital Media, Royal Botanic Gardens, Kew
The lifecycle of the website was also central to the brief. The site could only go live once the sculptures had arrived (their installation is recorded on the website) and the Kew photographers had chance to capture the source material which would show the work to best effect.
Another stage in the website’s lifecycle was awaiting the user-generated content. Photo competitions (fed in from Flickr) were run and visitors were encouraged to submit their comments about the work to the website. To date, there have been over 1,500 submissions!
Design approach
First and foremost, the design had to be maximise the impact of the sculptures. We knew we were going to get some great images – amazing work in a spectacular setting taken by Kew’s photographers – it couldn’t fail. However, as we knew were going to attract a very broad range of people to the site, we could not compromise on simplicity or ease of use. We chose to apply a ‘T-shape’ navigation to avoid use of drop downs and ensure all the content was ‘out there’ for the sake of clarity. To encourage movement between sections, we use promotional boxes to highlight closely related content. We made use of slideshow technology to allow us to show a lot of imagery and quotes without having to create very long pages. With the addition of the user-generated content, the website contains an ever-growing wealth of interesting thoughts, ideas and images about the work of Henry Moore which constantly surprise.
Webby award
In April 2008, the Webby Awards, the leading international honor for the Web, recognised Moore at Kew as an Official Honoree, a distinction that recognises work exhibiting remarkable achievement. The website has been selected as an Official Honoree for the Art category.
You can read more about the award in the blog .
May 13th, 2009
Posted by Ian
The brief
We were commissioned to re-design an existing site for Channel 4 which was made entirely in Flash. Part of the brief was also to look at the overall architecture of the site: make it easier to find things; group the content so it was in a more logical order and create clear user-journeys across pages.
The existing website was produced completely in Flash and so was not search engine friendly. A lot had changed at the channel (E4, More 4 and 4OD had come online) since the website was released, so Channel 4 commissioned some new content from Available light to bring the story up to date. Stylistically, it was all looking a little tired too.
We were also asked to port the new site into Channel 4’s content management system so it could be updated easily.
What 72 dots were among the first to notice is that great design is not a decorative add-on but essential to your content. They do the simple stuff brilliantly, and the brilliant stuff simply. Can’t recommend them highly enough.
Darren Pangbourne, Editor, New Media Factual (History), Channel 4
Design challenges
The brief specified that we had to re-use the existing flash games which had been extracted from the original site. This posed the crucial design challenge – how to marry the new site design (modern, reflecting current branding guidelines and ‘on-message’) with legacy content executed in a completely different style?
An aspect of having to use the channel’s CMS was that the templates come with a fixed-with vertical navigation area down the left-hand side. Many of the legacy flash games utilised the full width of the screen so we had to design the new site with this very much in mind. The answer to this question was to scale the flash movies down in the HTML rather than re-engineer them so that the navigation could fit too. A simple answer, but it resolved the issue. We also set the background colours of the flash games to be transparent so they would merge more sympathetically with the new design.
Other challenges lay in making the old-school site standards-compliant; we introduced a CSS-based layout (data tables were marked up properly for increased accessibility) and employed some DOM-scripting to recreate the rich functionality that was present in the flash version.
The Outcome
The new design is much more than a lick of paint. Channel 4’s brand identity is fully expressed and the uncluttured approach makes the content much more clearer.
By grouping content more logically and (crucially) renaming section titles so they are more explanatory makes content easier to find. Re-ordering navigation items to delineate the information hierarchy gives context and meaning to end-users. You can find things, you can see what there at a glance. In our opinion, the website is a much more enjoyable and rewarding experience for the viewer.
