Vectaire website case study discussion
Demo site is available, where you can explore site's features and admin interface. Live site is vectaire.co.uk.
Ideally the logo should be clickable (liking to the home page) and placed in the top left corner. As per the client's request, we placed it in top right.
We like the rule "a man from Mars must know what site is about under 3 seconds" and that's why "ventilation specialist" is there.
- The main navigation is very simple. The selected item is always highlighted.
- The Product showcase is the largest and most important part of this website, so (colour-coded) categories were placed where the navigation menu is usually expected.
- Breadcrumbs are a "You are here" sign that helps the user understand the layout of the website and his/her current location
- Pictures provide a large clickable area. The number of columns in the view changes dynamically to fill all available space.
- This website is just a product showcase, so the sales telephone number can't be buried inside contact pages. It's always visible, with branch numbers shown when clicked (to avoid cluttering the page).
- An always-visible search box is very important for websites. After launching the website, we collected search queries to understand what visitors expect from search. Based on our observation we added special handling of product catalogue numbers and suggestions of product categories for broad search terms. The Top 10 results of the last user's query are kept in a sidebar under search box. This lets users check these products without going back to search page.
What's missing?
For various reasons, we couldn't implement everything that such a website needs.
- A product comparison tool would be very helpful. However there are situations, where an inadequate fan installed can be dangerous, so we've dropped that feature, leaving the website purely as a catalogue and having experts advise by telephone.
- Diagrams and tables are implemented as images. This simplified admin forms, but reduced website readability and accessibility.
Technologies used
- Fully object-oriented, modular PHP 5.1 code built on top of Ideadesigners framework
- MySQL used through transparent O/R Mapping
- Content generated as DOM/XML and processed with XSL templates
- Lightweight CSS-based layout with a touch of DHTML
- Apache mod_rewrite
Features
- Layout that works with wide range of font and screen sizes (even as small as 640x480)
- Clean, well-formed, semantic XHTML code that's search engine friendly.
- Flexible backend:
- Unlimited nesting of categories with option to flatten view of deep category trees
- Products being in any number of categories at the same time
- Unlimited number of images per product (per each product section)
- Easy admin interface with:
- Fully automatic image resizing and optimization that chooses between PNG and JPEG formats
- Easy wiki-style editing of product descriptions, news, info pages, etc. that produces clean and semantic XHTML
- Preview of all changes
- Simple, readable and search engine friendly page addresses
- Search that includes product categories, info pages and understands product catalogue numbers
- Recent search results stored in sidebar for easy navigation
- Standard features like web contact form, news section with archive and light CMS for info pages
