A year later, the owners of the website go out looking for a new website because their once gorgeous website now looks terrible.
What has happened?
The code hasn’t changed but the content has. As developers or designers we often fail to appreciate how hard it can be for non web people (usually the owners) to manage their content.
When developers hand over websites to clients they are always tweaked to look perfect, if the content doesn’t quite fit the design, the content can be amended. If you have just built and populated a website it is very easy to add quickly add a couple of new styles, it is not so easy for most people.
Most people are not stupid; most business owners are not stupid – the problem is simply that most people have never had any visual training, nobody has ever sat down and given them any tips.
As a result, despite having the best of intentions, websites (and most printed material that hasn’t been produced by a designer) tend to end up as a bit of a mess. Technology like WYSIWYG editors, user friendly web applications and easy to use desktop programmes have made content creation accessible to huge numbers of people, but they have also made it very easy to make an incredible mess.
A few useful guidelines
There are a few guiding principles to making the content, specifically the copy of a website look good:
Keep it simple & consistent.
Choose a few colours that are easy to read, and which are appropriate for the design of the website.
Choose your fonts carefully and stick to them. It is common practice now to choose a body font that is easy to read (e.g. Arial) and then choose a webfont for headings to provide visual interest.
Don’t use go crazy with all the different font sizes and variants. Use elements like sub-headings, blockquotes and one or two nicely crafted styles (e.g. a wrapping a paragraph in a keyline)
Use images to break up the flow of text, but make sure they enhance and are complementary to the text (and For emphasis don’t forget the alt tags)
Think about floating elements like images or videos so that the text wraps around to add further interest and provide a flow to the page.
What we can do to help
A lot companies have style guides and brand guidelines that they use to help maintain consistent printed material. I’m always amazed how few companies do the same thing to help manage their online presence. You should produce a style guide in conjunction with the website visuals. Having a guide to follow makes the business of inputting or updating great swathes of content much easier.
A PDF of the guide is often useful but why not just create a private page within the CMS that gives the user examples of what they can do? Here are some of the things I include:
Show the headings and sub headings and give examples of how you would use them.
Give examples of lists
Show images displayed block, floated left and floated right
Show images with captions displayed block, floated left and floated right
Give an example of a blockquote and cite, with an explanation of when to use them
Even after you have formally handed over a site do a bit of hand holding – being nice to clients usually pays dividends.
Here’s one I prepared earlier…
This is a style guide that is part of another WordPress site. Feel free to copy and use as a basis.
Screenshot of a style guide page created for a WordPress site.
Code for a WordPress style demo page
This is a style guide to demonstrate how you can style up the text on your website. Try to make your website interesting and easy to read. Break content up into small chunks. Add visual interest with lists and images.
This is an H1 tag.
Do not use the H1 ever, we generate them automatically from the page title.
This is a H2 tag.
Use this for sub headings on a page.
This is an H3 tag.
Use this for for further headings. This is bold text. This is some text in a tag Use the tag for emphasis e.g. to highlight the first paragraph on the page. This is italic text.
This is a paragraph with an image floated to the left.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a ante ligula, ut hendrerit odio. Donec posuere felis vel velit feugiat eu euismod dolor aliquam. Vestibulum fringilla posuere nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt posuere tristique. Nam elementum convallis elementum. Aenean in arcu commodo quam tempor tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac ipsum et quam porta molestie. Nunc ac erat velit, eget convallis nisi. Donec quis eros ut dui hendrerit accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a ante ligula, ut hendrerit odio. Donec posuere felis vel velit feugiat eu euismod dolor aliquam. Vestibulum fringilla posuere nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt posuere tristique. Nam elementum convallis elementum. Aenean in arcu commodo quam tempor tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac ipsum et quam porta molestie. Nunc ac erat velit, eget convallis nisi. Donec quis eros ut dui hendrerit accumsan.
This is a paragraph with an image floated to the right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a ante ligula, ut hendrerit odio. Donec posuere felis vel velit feugiat eu euismod dolor aliquam. Vestibulum fringilla posuere nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt posuere tristique. Nam elementum convallis elementum. Aenean in arcu commodo quam tempor tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac ipsum et quam porta molestie. Nunc ac erat velit, eget convallis nisi. Donec quis eros ut dui hendrerit accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a ante ligula, ut hendrerit odio. Donec posuere felis vel velit feugiat eu euismod dolor aliquam. Vestibulum fringilla posuere nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt posuere tristique. Nam elementum convallis elementum. Aenean in arcu commodo quam tempor tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac ipsum et quam porta molestie. Nunc ac erat velit, eget convallis nisi. Donec quis eros ut dui hendrerit accumsan.
This is a paragraph with an image floated to the left the image has a caption.
This is a caption to this image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a ante ligula, ut hendrerit odio. Donec posuere felis vel velit feugiat eu euismod dolor aliquam. Vestibulum fringilla posuere nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt posuere tristique. Nam elementum convallis elementum. Aenean in arcu commodo quam tempor tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac ipsum et quam porta molestie. Nunc ac erat velit, eget convallis nisi. Donec quis eros ut dui hendrerit accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a ante ligula, ut hendrerit odio. Donec posuere felis vel velit feugiat eu euismod dolor aliquam. Vestibulum fringilla posuere nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt posuere tristique. Nam elementum convallis elementum. Aenean in arcu commodo quam tempor tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac ipsum et quam porta molestie. Nunc ac erat velit, eget convallis nisi. Donec quis eros ut dui hendrerit accumsan.
These are lists.
Try and break up your content into short snappy bite sized pieces use lists frequently. They add interest to your page and let you highlight key points.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean a ante ligula, ut hendrerit odio.
Donec posuere felis vel velit feugiat eu euismod dolor aliquam.
Vestibulum fringilla posuere nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed tincidunt posuere tristique.
Nam elementum convallis elementum.
Aenean in arcu commodo quam tempor tempus.
This is a blockquote
Use this to highlight things like quotes, testimonials or key points.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a ante ligula, ut hendrerit odio. Donec posuere felis vel velit feugiat eu euismod dolor aliquam. Vestibulum fringilla posuere nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt posuere tristique. Nam elementum convallis elementum. Aenean in arcu commodo quam tempor tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac ipsum et quam porta molestie. Nunc ac erat velit, eget convallis nisi. Donec quis eros ut dui hendrerit accumsan.
This is an
tag. Use this split up blocks of content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a ante ligula, ut hendrerit odio. Donec posuere felis vel velit feugiat eu euismod dolor aliquam. Vestibulum fringilla posuere nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt posuere tristique. Nam elementum convallis elementum. Aenean in arcu commodo quam tempor tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac ipsum et quam porta molestie. Nunc ac erat velit, eget convallis nisi. Donec quis eros ut dui hendrerit accumsan.
I’ve been meaning to announce the launch of my company Symbiotica Media Ltd – based in Devon near the city of Exeter. As you will be unsurprised to learn it is a web development company – so if you need beautiful, functional websites and applications that are a joy to use, look no further.
I have been so busy that our main website still isn’t ready, but we now have a delicious looking blog up and running.
If you read flipflops.org regularly, you will rightly guess that we will be working with CakePHP quite a lot, but current projects also make extensive use of WordPress and Tarzan AWS. I’m also built and am using a great a little, lightweight XML template engine based on the Page Controller pattern, and hopefully more Django soon.
At the moment I’m working on an e-commerce project using the Amazon Product Advertising API. The website is called www.science-fictions.co.uk, and as the name suggests its theme is Science Fiction Books and Fantasy Literature.
The project is built on my brand new CakePHP based CMS system and the Tarzan AWS library which makes connecting to and utilizing Amazon web services, whilst not a breeze, rather enjoyable.
The website is hurtling along at an astonishing rate and with any luck, the first version should be up and live early next week.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a ante ligula, ut hendrerit odio. Donec posuere felis vel velit feugiat eu euismod dolor aliquam. Vestibulum fringilla posuere nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt posuere tristique. Nam elementum convallis elementum. Aenean in arcu commodo quam tempor tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac ipsum et quam porta molestie. Nunc ac erat velit, eget convallis nisi. Donec quis eros ut dui hendrerit accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a ante ligula, ut hendrerit odio. Donec posuere felis vel velit feugiat eu euismod dolor aliquam. Vestibulum fringilla posuere nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt posuere tristique. Nam elementum convallis elementum. Aenean in arcu commodo quam tempor tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac ipsum et quam porta molestie. Nunc ac erat velit, eget convallis nisi. Donec quis eros ut dui hendrerit accumsan.
