I'm pretty sure a CSS project is what most of you wanted for Christmas, right? Well, maybe not, but that's what you're getting from me. I've been meaning to give CSS a real workout so I finally got round to making a website that fully uses CSS for layout as well as easy re-styles.

I'd been asked a few times recently for some recipes I'd cooked up, and I have to rely on the original html file I created years ago that's no longer online. So, I thought I could spruce up this page and make a CSS site for my recipes:


A 'snazzy overview' of the site. © Beats! Design (2009)

The site was to rely on:

- Divs defined for every separate part of the page.
- A variety of CSS styles to give variety and print options.
- PNGs with invisibility, so they suit every style.
- Backgrounds with opacity for the recipe title.
- A stylised form menu to suit each page.
- CSS corrections for major browsers.


Various design elements across the site. © Beats! Design (2009)

Although some of these requirements were just for design purposes, the CSS coding was designed to allow major re-styles of the page just using a new CSS file. This would give each page a print version (few graphics, black and white) and two design versions (one white on black, one black on white).

Anyway, the best thing to do is check it out. I've only got 3 recipes up for now (I'll add some others as time passes) but do check out the Christmas recipe as it's one of my favourites and then it makes this post seasonal :)


The Christmas recipe in all its glory. © Beats! Design (2009)

This site (and plenty of others) shows that CSS can be used very effectively to re-design a page with the same HTML content. I don't think it's that important to give users many re-styled versions of a page, but a simple print version is one way to aid the user. It also shows a sleek design can be achieved without relying too heavily on graphics.

Beats! Design - Recipes
Recipe: Christmas Pudding Sauce
 

I don't always get asked to build completed sites: in the case of 10 Clarendon Crescent - residential apartments for visitors - I was asked to build a site-shell that can be added to easily over time.

Part of the reason for this was the ongoing development of the apartments themselves (being converted from an old hotel) but also the marketing was already beginning and a web address / site needed to be set up to supply more information at this early stage.

Therefore the site needed to be easily updated, simple to use and also easy to edit repeatedly as content may well change as the development entered different stages. So, it may be a shell, but feel free to check out the design - what was required was a striking, classy and informative site, with clearly defined sections and big buttons to make each page obvious.

The page also needed to incorporate a nice hand-drawn picture of the building (a remnant of the old hotel's design work), as well as a new logo for the establishment, all blending in to a high-contrast look.


The homepage of the 10 Clarendon Crescent website

One aspect of the site that I was asked to build was the mapping elements. In the end we went with a simple locational map, with a smaller inset-map on the homepage, leading to the map / address details. In time, a directions box will be added, but as the apartments aren't ready yet, we felt this could wait a while.


Detail of the maps on the 10 Clarendon Crescent website

So that's a bit of detail on a (relatively) recent project - I've been working away on a major project that is nearing its release date, but I can't give any more information out until that point - but I'll be sure to do a profile of it once it's done. Due to the reduced amount of time I have on design work, it makes it easier taking on one-off large projects than multiple small ones as I did before.

Beats! Design Project: 10 Clarendon Crescent
 

It's a while since I've posted about some of my more recent work. I tend to post about internal projects more than external work, but it's always good to create a fanfare when a new site is launched! [click either of the pictures to go to the site]

Well...this fanfare is a bit late, but it's better than never. In December 2008, the new RSGS (Royal Scottish Geographical Society) website was launched and has been successfully active for two months now.



RSGS previously had a functional, but sparsely designed site that didn't give off the professional image they were intending. It was important that the new site was both stylish to look at and functional - with easy-to-edit pages.

A few of the main features are listed below:

- The top banner fades through a number of images from the RSGS archives, adding some dynamism to static pages.

- On the homepage, 3 'adverts' highlight some of the work of RSGS. These are randomly selected from a pool of 6, changing the homepage each time it is visited.

- A template was designed for each regional centre, allowing contact info, a programme of events and a Google map to be shown on each centre's page (see below).



So there we have it - a new site launched and definitely worth a look. RSGS are a fantastic organisation and run many events all throughout Scotland and I can personally vouch for the quality of these! :)

RSGS - Royal Scottish Geographical Society Website
RSGS - Regional Centres
 

I thought it was about time for a new mini-project so I got to work on an easy-to-use quiz applet. The idea was to set a quiz out on one page, but use JavaScript to bring each question in one at-a-time, rolling in and replacing the previous. The JavaScript / Ajax would carry and process the form data, bringing the result back at the end of the questions.

JQuery handled the form data and a separate JS file was used to animated the text movement. What results should be a nice and easy-to-use quiz, but see for yourself by playing along below:



It can't be too hard when it's multiple choice - see if you can be crowned a quiz expert! I'll hopefully adapt this idea a bit when I have time, would be nice to have a results breakdown at the end (and the answers!) so that would be the next step...
 

I've been pretty busy of late and decided it was time for a nice, (relatively) simple and good-looking app. My plan was to make a service using little thumbnail pictures and mouseover effects but i wasn't quite sure where it would end up.

Well, it ended up with PhotoWords and I'm pretty pleased with it :) You type in a phrase (max 25 characters although it's best if you have exactly 25), put your name and the person who it's for and press go!



Then you get the finished message - the photos change as does the cryptic pattern needed to read the message (see the centre square), so it should look fresh every time you use it.

Every time you create a message, the permalink is shown below the PhotoWord, so be sure to send it on and make this our most popular app to date...

PhotoWords - Photo Messaging App
PhotoWords - Create New
 

Well, it's been over 8 months since the company blog was set up and since then I've made it to 50 posts, hopefully providing some useful stuff along the way! I thought I'd celebrate this benchmark my launching a new Beats! Design service: 2 Degrees. It's called 2 Degrees as it's a search tool that brings back results seperated from your original term by 2 degrees of seperation.

This isn't a hugely serious service and isn't useful when a specific result is desired, but more designed to provied a link to a new website vaguely related to one you know of before. For example, if you enter "Sony" into 2 Degrees, the URL it brings back for you is "www.epson.co.uk", as the initial search harvested keywords including 'products' which was pumped back into the search to bring a different commercial supplier.



So you can see how 2 Degrees works, by entering one term, you will be taken to another site that links in some way to your original search. This link may not always be that obvious, but that's the joy of the service, a sense of exploration! And as search results change with the times, so will 2 degrees, always up-to-date and ready! The background service runs a script that connects to Microsoft Live Search, bringing back results and requesting results before being displayed in-line on the 2 Degrees results page.

Enjoy playing around with it anyway and thanks for visiting, another 50 posts here we come!

2 Degrees: Search Results with Seperation
 

The UK Webcam Map (beatsdesign.co.uk/ukwebcams) has remained the same design since its inception, with a nice marroon theme - but it felt like it was time for a change, so a new, more professional was created using a grey background and a nice new logo! Click the screenshot below or the link above to check it out: