The Red Lyon website redesigned

Posted in Portfolio Pubs on 8 February 2010 | Comments

We’ve just launched a new website for the Red Lyon, a pub in Slinfold, which is a small village in West Sussex. It’s one of our local country pubs near Horsham so it was good to get involved with the redesign.

For this project, it was quite important for the website to be updated by the pub landlord so we chose to use WordPress as the content management system and a theme from ThemeForest as the basis for the design. WordPress has traditionally been used as a blog platform but after customisation it’s equally suitable for a brochure-style website with individual pages.

We also wanted to make sure that the website is effectively indexed by search engines and that a Google sitemap is automatically generated when the website is updated. There are many plug-ins for Wordpress which enable you to tweak the core functions and these are the search engine-related WordPress plug-ins we used for this project:

• The Google (XML) Sitemaps Generator
• Add Meta Tags.

We also modified the page titles using a custom field and several other plug-ins were used, in part to give more flexibility with the page sidebar if we choose. WordPress is a very good website content management system but it usually requires customisation to get the best from it (in my opinion).

We hope to be doing more with the website over the next few months.

How to create drop caps with CSS (and CSS3)

Posted in CSS Typography on 2 February 2010 | Comments [1]

Drop caps are a nice typographic detail that look great on many websites; I’ve used these myself on several examples including Just Holiday Nannies (main page headings) and Occupational Synergy (leading paragraphs). There are a few ways of achieving this effect but the CSS selector I like to use is the :first-letter pseudo-element. This selector is reasonably well supported across most modern browsers (albeit with a few minor bugs here and there). Here’s how it works.

Read more ...

Website case studies are a great way to learn

Posted in Web design CSS on 27 January 2010 | Comments

I like to browse a lot of websites with the aim of learning from how others do things. I figure that this is part of my job as a freelance web designer/developer. However, sometimes it is difficult to know what went on during the design process of any website you look at. That’s why I particularly like blog posts, articles, and other case studies, where a website design is explained. Normally, this will deconstruct the website in question and I find these really useful. Here are a few case study ‘design stories’ that I have been reading recently:

• Simon Collison recently redesigned his personal website and in this blog post called Redesigning the Undesigned he explains the design process, including the eventual idea to base the design on a miscellany/journal approach, why he chose Times New Roman (brave choice?) as the main font, and the use of black and white animal illustrations. I must say that I love the design of this website and it’s great to see it explained.
• CoffeePowered is Paul Stanton’s personal website and he describes the redesign process in this post. I like the description of the font choices, the colour palette, the use of Modernizr, and the description of the sketching and design approach that was used.
• In the new second edition of CSS Mastery (» Amazon USA · Amazon UK) by Andy Budd, there are two case studies by Cameron Moll and Simon Collison (him again) that are well worth reading. For example, these studies (Roma and Climb The Mountains, linked from the CSS Mastery website) include explanations of new CSS methods, the grid structure, style sheet organisation, and the typographic choices.
• Jeremy Keith explains the design and build of Workshops for the Web including why he ditched the initial design idea and the use of HTML5 and microformats.

All these chaps are talented designers and more than likely they will also do things differently to you. It makes sense to try and learn from them….

CSS3 box-shadow and image hover effects

Posted in CSS CSS3 on 22 January 2010 | Comments [8]

The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser support. The box-shadow property is supported by Firefox and Safari, using their proprietary -moz- and -webkit- prefixes, but it’s not supported by Internet Explorer (or other browsers). For this reason, I think the box-shadow property is ideal for adding image link hover effects where the shadow is not absolutely essential but where it provides a nice style enhancement (enrichment) for modern browsers.

Read more ...

Using JavaScript for enhancing CSS support in Internet Explorer

Posted in CSS JavaScript on 18 January 2010 | Comments [3]

One of the subjects that I have been keeping an eye on recently is the use of JavaScript to enhance support for more advanced CSS methods in Internet Explorer (IE). We all know that, despite some big improvements, Internet Explorer 8 does not support some of the newer CSS properties used by Firefox and Safari, which tend to lead the way in this respect.

Read more ...