March 23rd, 2010

How to Build a Website: The Fundamentals

More and more, a website is one of the most effective means of marketing yourself or your company. Many businesses nowadays view their website as the foundation of their marketing efforts, and for good reason. Rather than printing thousands of expensive brochures, posters, knickknacks and other marketing collateral, companies can simply display their products or services on their website, where the storage is unlimited and they have extensive multimedia options like video and Flash to promote themselves.

To start your own website, you need three things: a computer server, a domain name, and, of course, content.

  1. You need a computer server to “host” your website: basically you need a place to store your website content in a manner that other people can access and browse through it through the internet. Any computer can become a web server, although it takes a decent grasp of the technical and security issues involved if you want to turn your personal computer into a web server. What I recommend to my clients is leasing server space from a dedicated hosting company like HostMonster.com. The prices are cheap — around $6 a month — and they take care of all the technical support and security issues for you.
  2. In addition to a place to host your website content, you will also need a domain name for your website. What is a domain name? Quite simply, that is the address of your website, as in “www.yourdomain.com.” You typically lease domain names in increments of one year or more through companies that specialize in facilitating these transactions. Odds are, the company you choose to host your website will also offer domain name leasing services, so you can take care of both of these steps together.
  3. Finally, after you have server space and a domain name set up, the last thing you need is content. This is the text, pictures, video and/or anything else that you want your site visitors to see and interact with. Website content is arranged and formatted in a computer language called HTML: HyperText Markup Language. These HTML files are the foundation of every website. The HTML code of web pages determines both the structure and division of the page content, and the visual design and formatting of the page. If you cannot or do not wish to try and design and develop these HTML files yourself, contact a professional who can work with you to build your website for you. Website design and development is the primary service we offer to our clients nowadays.

This is just scratching the surface of the process of building and maintaining website. If you have additional questions about starting a new website or updating your current site, you can write to us on our contact page, and we will be happy to answer your questions. We will publish featured questions and answers in future news articles on our website.

February 24th, 2010

Case Study: Steamers Coffeehouse & Wine Bar

Steamers coffeehouse & Wine Bar is a for-profit coffeehouse and wine bar in Arvada, Colorado, dedicated to hiring people with developmental disabilities.  They are expanding their facilities and operations and wanted to update their website as well.  We worked with Steamers to rethink, redesign and rebuild their website from the ground up.

Steamers Coffeehouse's existing website

Steamers Coffeehouse's previous website

We started out re-organizing the site’s information architecture.  The original site was flat — that is, the page hierarchy was only one level deep.  Since we were expanding the website and adding additional content, we couldn’t continue to use this site structure.  So we changed it to a two-level page hierarchy, with all the site sub-pages still easily accessible through drop-down menus and sidebar menus.  We consolidated the breakfast, lunch and coffee menus under a “Menu” tab, we expanded the content listed under “Services” to multiple pages, we added an “About Us” tab for content such as a staff gallery, company history, and company partners, and expanded the Location page into a “Contact Us” page, with sub-pages holding contact forms, address info and embedded Google maps.  We kept “In the News” as its own tab on the main bar.

The Steamers Coffeehouse facilities have wonderful interior design, utilizing a bright red/orange/green color scheme on the walls, natural materials for the furniture, and extensive framed pictures on the walls.  When we were building the website, we wanted to emulate the colors and textures of the coffeehouse itself.  Thus, you can see a similar bright-yet-mellow color scheme in the website’s visual design, along with extensive visual textures to add interest.  In fact, this is one of our favorite website visual designs to date.

The Steamers facilities

The Steamers Coffeehouse facilities

A sample of some of the colors and textures used on the new website

A sample of some of the colors and textures used on the new website

Steamers Coffeehouse prominently features a “staff picture wall,” showing framed pictures of all of their employees, and they wanted to do something similar on their website as well.  So we designed a Flash-based picture slideshow to feature prominently on the website’s homepage, cycling through both formal portraits and candid shots of the coffeehouse staff.  The slideshow is powered by an RSS feed from Steamers’ Flickr Photostream, making it very easy to maintain and update.  We also designed the slideshow to look as if it were an actual picture frame hanging on the wall, to further match the visual motif of the coffeehouse facilities.

The Flickr-powered slideshow on the homepage

The Flickr-powered slideshow on the homepage

Finally, we built the entire website on a custom content management system.  Our content management system gives Steamers employees the ability to easily update the text and pictures on their pages, and to add, delete and re-arrange pages with a visual drag-and-drop editor.  This will give them the ability to maintain and manage their website long into the future.

It was a pleasure working with Steamers Coffeehouse throughout this project, and we’re very proud of the results.  Steamers has a great group of people, great facilities, and some of the best food and drinks around.  Working with them was a great opportunity to produce some very high-quality work, both on a visual and a technical level.  We wish Steamers the best of luck going forward in their business, hope that their newly revamped web presence serves them well.

You can find Steamers Coffeehouse’s new website at www.SteamersCoffeeShop.com.

January 25th, 2010

New Website Launch: Chaput Rootmaster

We kicked off the new year with a new website launch for Chaput Rootmaster, Inc, is a Denver-based plumbing, heating and cooling company.  They’ve been in business for 65 years and are very well-respected in their community.  They had an existing website, but it was unsatisfactory for many reasons: aesthetically lacking, technologically out of date, and difficult to maintain.  Realizing this, they approached us to give their site a top-to-bottom redesign.

Chaput Rootmaster's existing website homepage

We started off by analyzing Chaput’s marketing objectives for their website. Who was their target audience? What are their needs? What should their target audience know about Chaput Rootmaster? When visitors come to the Chaput website, what is their desired action?  After discussing this with the Chaput Rootmaster employees, we analyzed and refined the site’s information architecture to align the site content with their marketing objectives. We also planned out wireframe layouts for each page, determining what content needed to be on each page, and where it would be placed.

Our wireframe for the redesigned site's homepage

After we had the site structure and page layouts determined, we worked on the site’s graphic design and look-and-feel.  We decided upon a silver, blue and orange color scheme, with extensive use of brushed-metal texture, to fit the semi-industrial image of the website’s subject matter.  We also placed prominent calls to action on every page of the site, with a prominent phone number and a link to an online appointment-scheduling form in the header of each page, and with an additional appointment-scheduling form placed on the right side of all the body pages of the site.

The website's page headers, showing the blue and brushed-metal color scheme, and the prominent calls to action

We coded the site on a custom content management system based on SilverStripe technology. This allows the Chaput Rootmaster employees to easily update and manage the site content themselves, rather than having to manipulate HTML code or outsource site maintenance elsewhere. We also coded the website to be extremely flexible, with the page menus and interface designed to handle a page hierarchy up to four levels deep.

As we coded the site, we made extensive use of jQuery functionality.  This is most immediately obvious on the homepage, where we used a heavily customized version of the jQuery cycle plugin to create the “Featured Services” slideshow at the top of the page.  We also used jQuery in more subtle ways as well, such as auto-formatting date fields and form validation on the input forms on the site.

jQuery auto-formatting for this form's date input field

jQuery form validation alerts the user if they forgot to fill out a required field on a page form

One particular challenge in development was displaying a map with an overlay showing Chaput’s service area in the Denver metro area.  We wanted to use Google Maps to accomplish this, but we were limited by their terms of service: you are allowed to display screenshots from Google maps, but are not allowed to alter that screenshot in any way.  What we ended up doing was creating the map and the service area overlay as two separate images, with the service area overlay positioned to lie on top of the Google Map screenshot.  Thus we could still visually illustrate Chaput Rootmaster’s service area without violating the Google Maps terms of service.

The Google Map screenshot and the separate overlay image layered on top of each other in the web page

We launched Chaput Rootmaster’s new website on January 5th.  Since then, both us and the client have received a lot of very positive feedback.  Several people have told us that it’s “the best-looking plumbing company’s website [they've] ever seen.”  We’re glad to hear all the positive responses to the new website and we’re happy to have the opportunity to help out this well-respected company.  We’d like to congratulate Chaput Rootmaster on their first 65 years in business, and we hope their newly-launched website will be a great asset for their business both now and into the future.

To see Chaput Rootmaster’s full website, please visit www.ChaputRootmaster.com.