Archive for the ‘web design’ Category

Crescendo E-Commerce

Monday, September 6th, 2010

Crescendo LogoIt is always interesting and exciting doing something that you have never done before. When Elvira of Crescendo Retail contacted Rev Software about designing and building their website and e-store it was a great opportunity to really demonstrate our creativity and programming prowess.

Crescendo Shop

When designing and building this web store it was the nature of the products being sold that presented the most challenges. See, selling oils, vinegars, and spices by weight and volume in different containers, or in no containers at all, over the internet is not something most shopping carts and out-of-the-box solutions can handle. This niche market requires something unique, something custom, a solution that can help customers to find the products they want and purchase them in an easy, intuitive, and attractive manor. We are confident that this is that solution.

For us building the web store for Crescendo meant re-imagining the shopping experience. We researched, and white boarded, and thought hard to come up with ways to reproduce the natural and effective shopping experience you get from walking into a Crescendo store and here is what we came up with:

  1. Visual: walking into a Crescendo location you are immediately treated to a feast for the eyes, oaken barrels, spices you can see and smell, and a soft and inviting Mediterranean colour scheme. For the web store we matched this by using super high resolution and high contrast images of the base ingredients to really make the different varieties of oils and vinegars “pop”, we had macro photos taken of all the herbs and spices so you could see them as if you were there, and finally we took the mediterranean colour scheme and expanded it with warm and appealing background images.
  2. Selection Process: when you are buying an oil or vinegar in a Crescendo shop you first select your liquid, then you are able to select from a wide variety of containers. Your container selection determines the amount of liquid you purchase as well as adding a decorative quality to the purchase. For the web store we built an intuitive system that guides you through this very same process of first selecting a liquid and then selecting the desired container, all the while keeping you apprised of the final price and amount of product being ordered.
  3. Information: when you are in a Crescendo shop you will never be overwhelmed by information, but you also will never leave without knowing all of the important information about your product, how to care for it, and how to use it. This same philosphy was applied to the website through the subtle use of info buttons for the products description, origin, acidity and other important information, the FAQ page for answers to common questions, and the Recipes section for all sorts of amazing ways to use Crescendo products to make amazing meals.

So by identifying these, and other, essential features of shopping Crescendo and ensuring they were preserved in the web store we at Rev Software hope that customers find their experience online as pleasant as their experience in store. Well maybe not quite since we can’t offer samples online ;-) .

This website and the accompanying web store is our largest and most important web development to date. It is our opportunity to showcase what we are capable of. We encourage all of our readers, and anyone who enjoys amazing food products and fantastic service to head over to Crescendo Canada’s Web Store.

I only hope people enjoy shopping Crescendo online as much as we enjoyed building it. I would also like to extend a very big thank you to Elvira and Daniel of Crescendo Retail for providing our small company the opportunity to create this website.

Launch of Crescendo Canada Wide Website Phase 1

Friday, April 30th, 2010

Rev Software is proud to present the release of the first phase of our latest project, the Crescendo Canada website. The Crescendo brand represents the home of Oil, Vinegar, Spice, and flavours from around the world. For those who like to cook and haven’t been into the Crescendo shop in Revelstoke, I invite you to go and sample the difference that quality makes.

The Crescendo Canada website was commissioned by local Revelstoke proprietors Daniel and Elvira Brunner and will be the home of not only the Revelstoke franchise, but of all future Crescendo franchises across Canada. The Crescendo project  presented many unique challenges that had to be overcome and we hope you will agree that the end result is as beautiful as it is functional.

The Crescendo Canada by Rev Software Ltd.

The Crescendo Canada by Rev Software Ltd.

I am very excited to be working with Daniel and Elvira on this project and am proud to announce the completion of the first phase. The website features a fully custom content management system that is allowing Elvira to edit, create, and update the websites content as often as she has time. Check in often to see the new recipes, or to find out the latest news & events.

Be sure to check back in June when we release the second phase of the project, which will include both French and English, as well as a full e-commerce store, allowing loyal Crescendo customers to order their favorite products from anywhere, anytime.

Screen Smart Website Goes Live

Thursday, January 29th, 2009

Rev Software has completed design and implementation of the Screen Smart organizations new website. The site, which will be hosted by Rev Software, can be found at http://www.screensmart.ca and is a product of the hard work of all the Screen Smart organization members, including Andrew Sykes, Anne Cooper, Jane Morris, and Linda Chell, to name just a few of the volunteers who have contributed to the sites content.

The Screen Smart website will be dedicated to providing families the information they need in order to make informed decisions about screen time. This website is loaded with high quality, well cited information on all aspects of media awareness, and the effects of screens and the media on health, education, and internet safety.

As Rev Software’s lead web designer I created the site using structured W3C validated XHTML and CSS integrated with the PHP content management system, ModX. This design will ensure the Screen Smart organization members can update and maintain their website within the safe and user friendly ModX system, while enjoying fast, streamlined, XHTML & CSS code.

Valid XHTML 1.0 Transitional

I highly reccommed you check this website out, and I guarantee you will learn something new.

Should you list projects you have done at work in your home business portfolio?

Tuesday, December 2nd, 2008

If you are a freelance developer or designer of pretty much any flavour you have probably encountered this issue. You are working on a project at your day job and you come up with some wonderful design that you are really proud of.  After patting yourself on the back, you start to wish that you had come up with this design outside of work so you could add it to your portfolio and use it to advertise your amazing skills. This thought usually leads to a pondering of the ethics of listing a design on your site that despite being created by you, technically belongs to the company you work for.

There are several ways you could approach this but my suggestion on this one is simple, talk to your boss. Explain how you feel and indicate that you only wish to show on your site that you were indeed responsible for the design, but in no way wish to imply ownership. I would consider offering up some form of link from the work to the company and be clear that you will make no attempts to hide the fact that this work was produced by your employer.

This is just my opinion on this rather touchy subject, and I would love to hear how you feel about this issue.

Content is King. A Layered Approach to Designing Websites

Thursday, November 20th, 2008

When coding a new website, most of us begin by laying out the page and writing the CSS and generally working from what I consider to be the “outside” inwards. Once the layout is complete and we are happy with our design, we then begin to fill the various containers we created with the content. I recently came across an article by Aaron Gustafson on the topic of Understanding Progressive Enhancement. In this article Aaron brings up some good points about why designing this way might not be the best option.

What’s the Alternative?

Designing from the content out, and when you think about it this kinda makes some sense. People come to your website with one goal, to consume content. Whether your content is text, audio, or video it cannot be disputed that people are there for the content. With this in mind it seems only logical that content should be the foundation of your design, on which you will layer the decoration and interactivity. An easy way to visualize this is using a peanut M&M, where the content is represented by the peanut, the presentation is the chocolatte dip, and the client-side scripting is the hard candy shell.

Structure of a Website Using an M&M

Structure of a Website Using an M&M

Using this analogy an “inside out” approach to design would imply that we start with our content, the peanut, marked up with XHTML. Then coat this with some CSS, the chocolate. Finally, add on some hard candy goodness in the form of some Javascript interactivity.

The Peanut

The peanut represents content in it’s undecorated XHTML state. It is the cornerstone of your website and, in the case of search engine spiders and some mobile browsers, it might be the only part of your site that is accessible. Keeping this in mind it becomes apparent how important it is to have your markup describe to the highest detail the content that it contains.

Tasty in it’s own right, this little bit of spider/human food could be served up all by itself but it’s not all the snack it could be without a little help.

Chocolate Coating

If your browser supports it, CSS is the graphic chocolatty indulgence that turns plain content into dazzling web pages. Despite the apathy of search engine spiders to the “attractiveness” of a web page’s presentation, your human viewers are far more inclined to have a positive reaction to your website after it has been drizzled in chocolate.. erm.. CSS.

Hard Candy Shell

Finally we can wrap up our content and css in some Javascript to really provide a an interactive web experience. The Javascript, just like the candy shell, is not really necessary but it’s presence can really improve the user experience for those users having the browser setup that supports it. Your website should be able to function and appear “whole” even when the Javascript has been disabled, much as an M&M without the hard shell is still a delicious chocolate covered nut. Designing websites from the inside out aids greatly with achieving this, as it forces you to think about the content first and foremost.

Putting it Together

Putting it all together requires a relatively simple workflow, and the steps that follow are just one way of doing it.

  1. Open up Textmate (or your favourite editor) and code up your index page using only your content and semantic XHTML. Be as descriptive as possible in your markup. Code as if there was no second step and this was it.
  2. Save your file into your htdocs folder and fire up MAMP (Mac Apache MySQL PHP). Once Apache has finished starting go ahead and open up your page in your browser. At this point it should look mighty plain, but still readable and organized.
  3. Open up CSSEdit and browse to the local html file we just wrote in TextMate. Get out your tongs and prepare to dip that plain webpage in some chocolate CSS goodness.  Once you are done with the chocolate you can head back over to TextMate and top it all off with some client-side scripting.

Original Content Credit to Aaron Gustafson