Website revamp for fluentintuition

A recent big success at B Websites has been the website revamp for fluentintuition – a local language training facility based in Woking.

fluentintuition is run by the amazingly focussed Nikki Oliver Pentucci who came to us after being recommended by the equally amazing Caroline Arthur for whom we created a website last year. fluentintuition provide a range of innovative language learning courses and experiences, such as book clubs, cookery classes as well as the more traditional training.

The branding was already in place so our brief was to reuse the company colours to create a new accessible and easy to use website with 50+ pages and on-line booking system. 

The entire website had to be planned from the ground up. Part of the challenge was that we had just 3 weeks to plan, design and build the site since it needed to be ready for the September term and to top it all Nikki was to take a (well deserved) holiday half way through our development time. 

In terms of the back end and user experience we included a massive list of features:

• 50 + pages all with their own custom banner
• Tweet this, send to friend, bookmark this
• Print button with print friendly version
• Facility to upload and store 100′s + PDF downloads
• E-commerce to allow visitors to book and pay for courses online
• Secure area for fluent training materials
• Newsletter sign up
• Easy to use navigation (so no drop downs!) which includes a breadcrumb (the “you are here” but at the bottom of the page)
• Integration with the existing fluent database
• Extensive cross browser testing (let me know if you spot anything…)
• Lots of work on SEO to retain the links and credibility obtained from the previous website

And to top it all fluent can manage every aspect of their website using our bespoke SMART CMS (which we’ve tailored specifically for this project) along with full technical support from us for the lifetime of their website.

We have thoroughly enjoyed working on this project. Designing websites that are easy to use and include such a lot of data is not always easy.

Everything else, Website Examples | 31.08.2010 12:01 | LEAVE COMMENT >>

Do you have a content strategy?

So hands up – who has a content strategy? Who’s never even heard of one?

Content strategists would be horrified to learn about the ad-hoc approach that small businesses often take to their content.

You do not need to have a zillion online pages to benefit from a strategy. The typical small business with a small website and blog and using social media will benefit from regular content audits.

By understanding your content and where it lives you will be able to identify redundant or missing data. Inefficient content on the web can often do more harm than good. You’ll be able to identify a strategy in-line with your business goals and plan for improving your content over time.

So what does a content strategy look like?

There are a number of steps involved. You will need to ask yourself a number of questions. The key elements are:

• What content do I have?
• What does the content look like?
• How large is this content?
• Where is my content?
• What is it for?
• How do I measure my content’s effectiveness?
• What is the metadata for my content?
• How do I manage my content?
• When was the content last updated?

And the list can go on and on.

Documenting your content will be both productive and liberating. Once written down in black and white you should easily be able identify content that needs urgent attention and formulate a plan for refining the remaining content.

I’d suggest that content strategy is key – the website is ALL about the content. Have you heard the phrase “content is king”?

Everything else | 27.08.2010 11:10 | LEAVE COMMENT >>

8 finishing touches that really matter to your website

It’s probably true to say that anyone can get a website on-line these days. But getting on-line and building an effective and functioning website are not the same thing at all.  

Clients frequently come to us with websites that are poorly designed or coded.  Even those who have paid a lot of money to have one built. 

Here are my top 10 snags… 

---

1.  Make your links stand out.  If you have a link anywhere on your website (menu or content) it must look and behave like a link.  Usually links are underlined but it’s ok also to have them display in a different colour.  They absolutely must change colour/behaviour when hovered over. 

---

2. Current page indicators.  When moving around  a website visitors will not always remember what page they are on. You have to remind them and the best way to do this is by clearly showing them on the menu by highlighting the current page. 

---

3. Using images as links.  You must use images as links with caution as they do not help your SEO and are not always great for accessibility.  However if you do decide to use one make sure it looks like a link and includes a hover-over image so that it behaves like a link. 

---

4. Cross browser testing.  This is so often skipped by designers/agencies that are not specialised in website design.  It is simply not good enough for your website to look good on your machine – it needs to look good on all machines and that usually means testing in 10 or so different browsers/versions of browsers/devices etc and spending a fair bit of time dealing with browser bugs. 

---

 

5. Optimising images.  A tell tale sign of an inexperienced designer is a poorly optimised image.  This might be an image that is stretched/skewed or massive file size or just really poor quality resolution. Either way poor images will let a website down. 

---

6. Big banners.  I am a fan of big banner images but they must be used correctly. If you make them too high it’s possible that they will get in the way of your content.  This is particularly true where the menu is above the banner and the text underneath.  On smaller screens the visitor might not see the text change and believe the website to be broken. 

---

7. Font sizes.  By law you need to demonstrate that you have considered accessibility in your website design.  Part of this is allowing the website text to be changed in size. 

---

8. Layout of pages.  Currently there is a massive trend for WordPress websites. I love WordPress and in the hands of an experienced developer it can be used as the foundation of a great website.  But so many designers are just plonking in fixed headers and sidebars without care or consideration for the content on the page. Layouts and calls to action need to be worked around the copy and never the other way round. 

---

For me a great website is all about the finishing touches, the things that you would probably take for granted. A poorly written website will  jar with your visitors user experience and will affect your on-line message.  

If you have a website that you are not sure stacks up (even if you have only just had it built) ask us for a free review…

Website Design | 19.08.2010 20:10 | 2 Comments

New e-commerce for Petit Poppet

We have had an amazing few months working on some fantastic new e-commerce websites. First up was BuyStudentArt, then What Katie Did Next and this week we are working on a new website for Petit Poppet.

Laura founded Petit Poppet after spotting a niche in the market for baby slings. Laura’s unique idea was to allow her customers to try a sling before they commit to purchase. Even better still is that all profits raised from the “try before buy” are donated to the very deserving charity: Sands. Personally I have experimented with a number of slings and have never found the perfect sling for my body weight, type of baby and lifestyle. So I am certain that Petit Poppet is a winner!

I love planning e-commerce websites, they are very different from a standard website or blog. The e-commerce website absolutely has to sell. It has to provide visitors with masses of reassurance before they will place an order and technically they have to be spot on (have made a note to write a blog re do’s and don’ts for selling on-line!).

Have you ever made a purchase on-line and instantly worried whether or not you’d receive the goods? E-commerce websites need to break down all barriers between the visitor and the checkout page.

The current Petit Poppet website was a low cost project aimed at testing the market before committing to a major investment. The creative logo was drawn by Laura’s brother and we really liked the shades of blue and pink.

We identified the need to be able to search for slings by type or brand. Not wanting to take up too much on screen “real estate” we have used a nifty tab system so that the visitor can select their own default.  Laura also plans to incorporate some other baby related products into the site so we’ve included these in the early design stages to prevent major re-engineering later. We have also helped Laura to de-clutter the website and she will be using a new integrated blog and chat forum to house extra content.

I love the design, the colours are vivid and engaging and I can’t wait to hear about all Laura’s new sales!

Website Examples | 16.08.2010 19:02 | LEAVE COMMENT >>

New website for antdesign

We have recently been lucky enough to work with the very talented Kashmira Jhaverim: the brilliant graphic designer at antdesign.  Kashmira designs cards, calenders and corporate graphics based on her unique style -  a fusion of  Asian images and healthy living.

Kashmira came to us because – in her own words “I have a design that I have created for a website but I do not know how to code it”.

The requirement was a small 7 page website with integrated blog and scrolling home page banner – all done on a strict budget.  To be fair coding it was a challenge even for our developers –  with 10 years experience a piece!

Converting flat graphic designs into fully functional websites are always a bit of an undertaking.  We had to give Kashmira a bit of a crash course in website design (and use a bit of creative thinking ourselves!)  in order to adapt the vision into a fully functional website with as little compromise to either design or functionality as possible.

The main differences between print design and web design are as follows

1. Colours.  Whilst colours can be coded into a website, the actual colour on screen will depend on the visitors screen.  Their monitor settings and may be a bit more red, more blue etc – the end result is that the shade you specify will not be the same shade that is displayed on screen.  As for matching print colours to websites – forget it!
2. Fonts. Although it is looking optimistic for the future, we are currently stuck with a limited number fonts that we can use reliably on the web.  Websites can only use fonts that are installed on the visitor’s machine (yes really!) and there are only a small selection that are reliably safe to use. In many cases an image may be used instead of a font but these cannot be read by search engines.
3. Font sizes.  The visitor ultimately has control over the font sizes.  As you can imagine changing the size means that the entire website needs to grow/shrink accordingly.  It’s possible to cripple the font changing functionality but this is really poor practise.
4. CMS.  Every content management system has its limits.  The antdesign website has been built using our very own SMART CMS.  Using any CMS means that the website needs to be coded to allow for change and variety of content (different sizes of text and images).
5. Design port.  Porting a design to a CMS in pixel perfect precision is very time consuming. I like to use the phrase “approximation” – which essentially means that we will reuse as much of the existing design as possible. In many cases a pixel perfect port is possible but the additional time required to pindown the last 5% can be significant.  Opting for an approximation can really help to keep the budget down.
6. Text formatting.  Having been so used to print, Kashmira was really keen to have the text line up and include breaks in very specific places.  In print this can work but the reality of a website (particularly one with a CMS) is that it will need to grow and shrink. Web designers take a much more organic approach to seeing their website looking different on varying screens/browsers & devices.
7. There are many other significant differences also (pixels and not cms, SEO, accessibility, writing copy for web, image optimisation, download speeds, user experience…)

Back to ant design… One of the features that we are particular pleased with is the image gallery.  SMART already supports a number of gallery formats and creating Kashmira’s vision almost perfectly was simple with a bit of CSS know-how from the developers at B Websites!

The thumbnail gallery allows user to see all the images on the screen and to select the image that they would like to see bigger.

We absolutely love Kashmira’s work and are chuffed to bits that we were able to do such a great job on translating the website design from print – to web. What do you think?

Website Examples | 14.08.2010 12:42 | LEAVE COMMENT >>