Just took it, so should you.

.

We built and launched Invisequine.com as a redesign and rebranding of Invisequine Co. The previous website was a template based e-commerce site that offered far more than what Diane Sheets, the owner of Invisequine Co., needed to sell her waterproof equestrian products. The site template was really designed for companies who sell hundreds of projects, and Diane’s company offered a small and select list of specialty products. The resulting mismatch was a cluttered site that was difficult to navigate. Our goal was to restructure the information architecture to allow users to purchase products with as few clicks as possible. We were also tasked with organizing the different types of products and options in the best possible way. As far as the rebranding was concerned, Invisequine Co. wanted to be modern and trendy yet elegant.

The information architecture was reduced to pure simplicity. There are only 3 pages on the whole site- Home, Catalog, and Contact. Take note that there is no cart page.

For the shopping cart we employed a rather inventive technique. When an item is added to the cart a bar at the bottom of the page appears to show all of the cart functionality and products. From this bar you can checkout through PayPal. If you’re a return visitor the bar will appear just as it did when you last left the site. When the cart is emptied, the bar disappears.

The Branding borrowed the standard horse jumping mantra of Equestrian brands and took it a step further. The horse is jumping over the logo type and has some extra flare to set it apart and make it more “hip” . The raindrop helps convey that Invisequine Co. sells equestrian rain products.

In a future article I will walk through the process of creating this logo from start to finish.

When it comes to marking up your document with bold and/or italicized text there is a bit of an argument about what tags to use. The W3C recommends using <strong> instead of <b> for making text bold and using <em> instead of <i> for making text italicized. Their reasoning is that <strong> and <em> tags both separate structure from style by placing some sort of meaning to the text inside those tags. Text inside the <em> tag is to be emphasized and text inside a <strong> tag is to be strongly emphasized. On the other hand, The <b> and <i> tags simply imply that the text should be displayed a different way. If you read the text inside the <b> or <i> tags you should not be reading them with any emphasis.

Matt Cuts, an employee of Google’s search engine team, noted in this video that Google had no preference between <b>/<i> and <strong>/<em>. So if you’re worried about SEO (search engine optimization) reasons for using the more semantic tags, don’t worry about it. However, I’ve put together a good checklist here to go over when you’re deciding which tag to use:

• <b>- Strictly a presentational element. If you want text to be bold but not have any semantic meaning.
• <strong> – Strictly a structural element. If you want text to be spoken with strong emphasis using a screen reader.
• <i> – Strictly a presentational element. If you want text to be italicized, but not have any semantic meaning.
• <em> – Strictly a structural element. If you want text to be spoken with emphasis using a screen reader.