Chances are, you have noticed that we’re all about Denver marketing here.  So today we’re going to expand a little more on our recent exploration of CSS3, and talk about how helpful this evolving web-based language can be in the realm of online marketing.

Stylizing Website Elements such as Forms

CSS3 can help amp up the appearance of elements that help your website grow and thrive.  For example, a questionnaire, survey, or newsletter subscription form can be fully customized with CSS to stand out among the other elements of a web page.  When you are trying to connect to people with newsletters or receive feedback via an online survey to help fuel your marketing campaign, it’s important to signal to your customers the importance of these things!  If you aren’t getting input from your customers, how will you know what to change?

Drastic Changes in Appearance without a Graphics Program

Last week, we elaborated a lot on the convenience factor of CSS3.  With your ever-growing, changing, and (last but not least) thriving business, easy edits in your online advertising campaign are very key.  CSS3 elements allow for new styling of borders, color and opacity settings, background images, and more.  The ability to make these changes with a few code edits is certainly helpful in keeping your website look up-to-date and fresh.

Easily Accessible Resources

To help you be successful and achieve your dearest CSS3 hopes and dreams, here is a list of CSS 3 resources we have compiled.

• CSS3 generator – a simple code generator that tweaks CSS3 elements such as border and box shadow.
• CSS3 previews at css3.info – pretty self-explanatory, this is a page on css3.info dedicated to showcasing many of CSS3′s most popular features.
• webfonts.info – resource for full utilization of CSS3′s @font-face embedding abilities.
• CSS3 @font-face design guide – more on keeping CSS3′s @font-face feature in check.
• HTML5 and CSS3 tutorial – fully outlined tutorial that walks you through building a website that utilizes HTML5 and CSS3.
• CSS3 multi-column module – all the information you need about CSS3′s multi-column layout abilities.
• CSS3 “cheat sheet” – quite as helpful as it sounds, this is a reference guide chock-full of CSS3 elements.
• staying up-to-date on CSS3 – to help you see what works, and what is a work in progress in the world of CSS3.
• Ars CSS3 gallery – eye candy, inspiration, competition…however you see it, this is a great site to explore.
• ordering CSS3 properties – perhaps a little on the nit-picky side, staying organized is rather useful all the same!
• HTML5 reset – a set of templates that utilize not only HTML5, but also CSS3 elements.

So, now you have got all the tools to create some beautiful CSS3 work!  Here are also a few reminders about creating effective web design (which can be even more effective when you use CSS3):

• Cater your marketing to the customer.  Think about your audience, and readily accept feedback!
• Stay up-to-date.  That means up-to-date on what your competition is up to, up-to-date on information pertaining to your business world…you get the drift!
• Be creative.  Come up with something unique.  Do something no one has done before!

Free e-Book: Website Fundamentals

You have a website, but is it getting found? Find out what you need to know about website fundamentals in our free e-book.

Download Now

A week ago we presented to you an overview of CSS and some of its main features.  We determined that CSS3 is a great tool for use in the realm of Denver website development.

In comparison to CSS2, CSS3 includes the addition of some great a elements that help with font styling, background image layering (two background images at once!), as well as layout set up (multi-column layouts for a newspaper-like feel).  CSS3 features also include a whole new range of color options.  Essentially, the possibilities are endless with CSS3!

Today we’re going to introduce a few specific advantages that CSS3 has over older versions, as well as the use of HTML or XHTML alone (without CSS).

CSS3 is Constantly Changing

Along with the ever-developing world of technology that we find ourselves residing and thriving in today, CSS3 continues to change. CSS3.info is an example of a website that frequently presents the continuing development of CSS modules.  Web designers and programmers continue to mold CSS3 to fit their needs, so you can count on new possibilities for your website coming up just around the corner!  The simple fact that CSS3 is versatile and stable, yet dynamic, is simultaneously comforting and exciting.

CSS3 Saves Time

Smashing Magazine is just one source that produced some interesting test results that show just how much more efficient the use of CSS3 can be for your website needs.  With CSS3′s intricate features, a whole set of images can be tweaked at one time.  Tweaking with CSS3 is a much faster process than individual tweaking with Photoshop images.  CSS3 files also take up less space in cyberspace, so file sizes are smaller; and therefore, loading times are quicker!

CSS3 is Versatile and Adapts to the Viewer’s Browser

As we are all surely aware, different browsers mean different appearances.  While a website may look great in Firefox, it may look absolutely dreadful in Internet Explorer.  One of the great aspects of CSS3 is that it helps the website developer program their site to adapt to the settings of multiple browsers.  Obviously, a solid code base that works across multiple browsers is necessary to get this to work.  However, once your base design is established, a variety of CSS3 tricks can be used to make this so-called “progressive enhancement” work!

CSS3 Includes the Use of Media Queries

With everything from Droids to iPads, people today are viewing the internet from many different forms of technology.  With CSS3′s use of media queries, the coding can be implemented to help fit the viewing device’s needs.

So…if you aren’t already using CSS3, what are you waiting for?!

Free e-Book: Website Fundamentals

You have a website, but is it getting found? Find out what you need to know about website fundamentals in our free e-book.

Download Now

There’s a relatively new addition to the world of web development out there, and that new addition’s name is CSS 3.  CSS 3 is the newest version of CSS, with plenty of unique and exciting features.

As you are probably aware, CSS is an important web language that functions to help meet your creative needs when building a website.  CSS stylesheets and style elements help to determine everything from background image placing to hyperlink appearances to table colors.  While CSS will not get you anywhere without some good solid HTML code behind it, it’s still an important element in terms of aesthetics.  While HTML is the “meat and potatoes,” so to speak, CSS is the salt, pepper, garlic, and butter…you get the idea.

So why is CSS 3 so great?  Today we are going to give you a few examples of CSS 3′s new features, and you will have to agree with us that it can certainly help satisfy your web design needs!

First, let’s talk about the basics of what CSS has to offer:

• background image alignment and repetition rules: without this, background images would certainly be a headache
• link style for hyperlinks, visited links, active links, and links on “hover:” so you can venture out of the blue and purple link world
• font styling aspects including color, size, and font-family properties: for those times when you get bored of Times New Roman
• styling for tables including background color, and some border styling properties: it’s all about uniformity, folks
• styling for text area boxes including background color, and some border styling properties: again on the uniformity…it keeps things looking neat

Now, besides having all of the above, here are some neat CSS 3 features:

• multi-column layouts to create a newspaper-like look so that text continues from one column to the next: pretty useful if you are into the whole blogging thing!
• the power of speech: if you are using Opera, that is
• the ability for users to resize website elements: say goodbye to any pesky little scrollbars that are hindering the user-ability of your website
• the ability to create shadowed text: a little cheesy, possibly, but pretty neat all the same
• the ability to designate background pixel size: way easier than editing the image repeatedly in Adobe Photoshop
• the ability to use multiple backgrounds on one page: again, so much easier than edits upon edits upon edits of one image
• use of opacity in terms of colors: for example, you could make red text fade to pink in precisely the same warm-toned shade
• ability to use an image as a border around tables: seriously, how cool is that?!
• a wider range of color options with the use of hue, saturation, and lightness numbered colors: it’s not all about hex codes anymore
• rounded border corners: simple, but this is an element that could certainly change the look and feel of your website!

So you get our drift.  CSS 3 has made some pretty snazzy additions to the CSS family, and chances are, you’re itching to try them out!  So we will get back to you next week with some more details on writing the CSS of your dreams.

Free e-Book: Website Fundamentals

You have a website, but is it getting found? Find out what you need to know about website fundamentals in our free e-book.

Download Now

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 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 Coffeehouse facilities

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

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.

Free Download: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now

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.

Free Download: Search Engine Optimization Fundamentals

You have a website, but is it getting found? Find out what you need to know about search engine optimization in our free e-book.

Download Now