Once DeathWish Piano Movers owner Greg Keane stepped in front of the cameras for the Travel Channel’s new show, DeathWish Movers, he realized that his company would need to update their website to a more dynamic version that would also function as their online storefront. Since hoisting Black Sabbath-worthy mixing consoles and antique Steinways out of Boston loft spaces and brownstones can be a little time-consuming, DeathWish wanted to find a method to easily keep their site fresh and current. Luckily, I had met Greg’s wife Lissa through my local BNI chapter and with her and Greg’s input and Kevin Keane’s graphic design skills, a WordPress version of their previous site began to come together.

One of the biggest design hurdles was creating a CSS/Javascript-driven navigation bar that not only looked like a piano keyboard, but had to show the keys going down as the user hovered over the link. Not only that, but they also wanted the actual note to play. Luckily, I have done some other custom navigation in which the background image changes when the user hovers over the link. The sound, however was a different story. After a bit of searching, I found an excellent library of piano note samples and with a bit of javascript, was able to get the effect to work.

The next order of business (literally) was to find a way to easily integrate a shopping cart provided by Sage Virtual Terminal with the wordpress site. Developers beware! If you are working with a client that thinks they have an Authorize.net account, do whatever you can to ensure that that’s what they do have early in the game. I didn’t find out that Authorize.net wasn’t included as part of the client’s Virtual Terminal account until I was really close to purchasing what looked to be a great plugin. So the moral of the story is, whenever e-commerce is involved make absolutely sure that everyone involved knows exactly what you need to enable e-commerce and make doubly sure that you know exactly what you are getting to work with. This story has a happy ending though- the virtual terminal interface gave me urls for each product (and product variation) and I got to design my own buttons and simply wrap links to the specific urls around each.

The DeathWish Movers show has had two episodes so far and the site is getting a good amount of traffic. So set your DVRs to DeathWish Movers every Wednesday at 10pm est on the Travel Channel. I’m hoping that it gets picked up for another season because, as someone who moved about 8 times when they lived around Boston and worked as a set dresser on a lot of Back Bay sets, I know how hard these guys work!

This is the previous home page:

And here is the new design, which was based on the Mystique theme by Digital Nature. I went with their theme because it offered a good choice of options, while giving a more code-minded designer like myself “under the hood” access to the template files.

I really liked their design framework for the dropdown menu at the top. I felt that the original site’s navigation didn’t include the right architecture and the user kept having to go back to the home page for links to Financial Advice and a few other items.

The original image theme of the site was lighthouses, which tied nicely into the logo and the concept of the company being a guide to financial safety. However, the photos I had originally taken now struck me as a little cold and distant; probably because I had first created the site during the winter of ’07 and I would have needed a boat to get close enough to get bigger images. So I decided to find images that seemed warmer and more engaging. I found this picture for the Long Term Care Insurance page on iStock.

The sidebar was another area that was ripe for improvement. While the old site had pages where potential clients could request a quote for whatever insurance type the page was about, Beacon decided that it would be easier all-around if they had one standard “Request a Quote” form in the sidebar where it was easy to find no matter where you are on the site. I used the CForms II plugin by Delicious Days here.

The other feature I wanted to upgrade was the location map. It’s become one of my pet peeves when a website has a static image of a map on a page when embedding a Google map of a business’s location is so damn easy. The list under “Insurance News” is a simple list of the site’s blog categories.

By converting the old site’s newsletter-style Insurance Updates pages into blog posts it killed two birds with one stone. The new site could be launched with a full blog already built in and, any new updates that a Beacon agent wanted to write would be easy to fit into the existing set of categories.

Last but not least was one feature that I really love to use on sites: the Subscribe via Email form provided by Feedburner.

A lot of clients want to have some way to contact their client base/readers without a lot of fuss. Unless they really have the resources to manage a full html newsletter service such as Mailchimp or Constant Contact, this is really an elegant solution. While some readers might understand what the orange rss icon means, there are so many still unconverted to the wonders of feed subscription that offering them a way to sign up to receive an email whenever a blog is updated with new content can be very handy.

It’s nice to come full circle with a client and re-visit an earlier job. I needed to come up with a fresh approach and I hope the new site will work well both for Beacon and their customers!

PatsyAnn.net: Welcome Page

Jenn Mears Web Design has just launched a site for Patsy Ann doll enthusiasts that was designed for Marblehead resident, Debbie Essig. After collecting Patsy Ann dolls, furniture and ephemera for many years, Debbie decided to combine her love of this unique doll of the Depression Era with her gift for creating vintage design doll clothing into a site that would showcase her extensive knowledge of Patsy Ann as well as providing a way to sell her unique hand-made outfits online.

PatsyAnn.net's navigation bar

Debbie wanted to emulate the style of Effanbee’s 1930s advertising flyers, so I needed to incorporate vintage Depression Era graphic elements into the overall design. I found the Fairfax Station font to be a good choice for the main header as well as the side navigation and the page headers.

Patsy Ann with vintage clothing and accessories

I built the page template based on the Silver Dreams theme (available at WordPress.org), and it was a highly adaptable, lightweight theme that provided a solid foundation to bring Debbie’s vision online.

Mona Hersey, the proprietor of To Do! Ta Done√, a personal assistant/home organizing business, hired me to do an overhaul of a site that had started out as a hosting company generated template. 
Since Mona’s business is all about helping people to clear the clutter and confusion out of their lives, it made sense to use a cleanly organized theme such as Corporate Globe by Rankerz SEO Services. I was able to develop a new template via CSS that used the To Do! Ta Done√ colors of light green and violet and also incorporated hints of orange from the original theme. The end result is a site that is organized, colorful, easy to use and that showcases a great local business!

Last year Carrie Stack of the Say Yes Institute and a certified Life Coach, asked me about helping her to launch a s site for her new project entitled EO.  EO stands for Emotional Orgasm which is a term she and her business partner Michele Lazcano came up with to describe a moment when you connect with another person and the both of you realize that the connection has moved both of you forward to living your life fully.

I have to say I had a few EO’s of my own with this project.  In collaborating with Katharine Navins of Tallow Studio for the visual aspects of the site, I came to realize that the “splash page”, long considered a no-no among designers, can actually be a very effective tool in focusing the user’s attention on the site’s various sections before they dive right into the content.  Katharine’s use of the gentle blue and white gradient tile in the background and the clean look of the EO logo makes for a very soothing inital impression and prepares the viewer for a relaxing enjoyable time spent reading about Carrie and Michele’s vision of how we can all connect with each other and live our lives more fully.

One thing that was a fun challenge in developing the site was finding a way to display the beautiful navigational buttons Katharine designed without having to resort to javascript or tables.  I found that giving the unordered list that contained the navigation its own id and then using relative positioning to place it on the page, then allowed me to style all of the links with some universal styles, such as visibility, borders, margins, padding and line-height (to fool IE into expanding the clickable area to cover the entire button).  Then, giving each list item its own id gave me precise control over where the link was displayed via absolute positioning and also allowed me to display a different background (the various buttons) for each link.

Social networking, by its very nature, is also a big part of EOyourlife’s focus.  In addition to the text links to Twitter and Facebook at the bottom of each page, I also installed the Add-to-Any plugin so users can easily share the site with friends.  Also in use are the plugins; MailChimp/Analytics 360 to help maintain the newsletter email list and monitor site traffic, Cforms, for the site’s contact forms and All-in-One SEO pack to enhance the use of page titles and optimize the site’s content.

Check out EOyourlife.com and share the good vibes!

When Katharine Navins, Tallow Studio’s owner needed a WordPress developer to bring her site design for Lovejoy Designs to fruition, she came to Jenn Mears Web Design with the page concepts and site architecture wonderfully laid out with a great eye towards color and balance. Utilizing a theme called Silver Dreams, I was able to re-create Tallow’s design and developed some page templates to match the various looks through-out the site. The biggest challenge came with the desire to present the Portfolio and Featured Products sections with an interactive gallery that allowed the user to click on thumbnails to view a full-size image on the same page. I decided to use Alex Rabe’s NextGen Gallery plugin with some extensive modifications developed by Arafatbd.net and several other members of the WordPress community. After a few late nights and some wp forum stalking, the site finally came together. Love Joy Designs is a Boston-based interior design firm owned by Phoebe Lovejoy Russell, a designer with a great flair for color, form and function. Her throw pillow designs were especially fun ( a great bonus when you are tweaking a gallery of them at 1am!) and her blog, Design Lab, is sure to inspire readers everywhere.

Jenn Mears Web Design is thrilled to announce a new site launch for C3 Salon based in Marblehead, MA. Recently voted Marblehead’s number one salon, C3′s owner, Christine Knight found that she wanted to give her web site an overhaul to match her re-vamped business. Formerly Creative Cuts and Color, the name C3 Salon was available and the new url c3salon.com was chosen.

Christine wanted to emulate the rollover navigation used on a salon’s site that she liked, and it was a fun challenge to create a similar effect using just an HTML list and some a:hover CSS trickery. The home page has four nature images which, when moused over, reveal four main areas of the site.

The site’s main navigation also made use of a drop-down menu that was also styled with CSS to match the color theme of the site.

In addition to information about the salon’s stylists and services, a new contact form was utilized to enable clients to book their appointments online. This was a great experience in working with a client who was full of constructive ideas and feedback and the resulting collaboration will hopefully be a new asset to an already very successful business!

Michael McCarthy Law has been in development for a while now and readers will soon find that it was worth the wait!

Meant to be much more than a simple “shingle site” for a Personal Injury and Estate Handling firm, MML is aimed at educating both current and potential clients, an approach that more and more businesses are finding to be beneficial to both parties. Creating this site was an exercise in conditional tags, one of WordPress’s most powerful site architecture tools. Certain pages were designated by the client to live in the top navigational bar, while pages dealing with the various areas of practice were to have their own listing in the left sidebar. The theme is a customized version of CognoBlue 1.0 by BlogsDNA, which was a pleasure to work with, clean, flexible and consistent across browsers. Feel free to stop by Michaelmccarthylaw.com and take the grand tour!