Beauty Skin Deep

Beauty Skin Deep screenshot

The Beauty Skin Deep website homepage

The Beauty Skin Deep Website

Bighouse Marketing, an award-winning SEO firm, needed to help their client, Beauty Skin Deep, revamp their website. Since their focus is SEO and not web design, Bighouse Marketing called on Koger Creative to convert the existing site to WordPress. We chose WordPress because it is easy for the clients to add content and it’s also SEO-friendly—a win-win for all parties!

The Old Beauty Skin Deep Site

The old site was built by a firm which had total control. They controlled the design, the content, when web copy and graphics could be changed and how often, and they charged a hefty monthly fee while at the same time implemented requested changes at a snail’s pace, if at all. The owners of Beauty Skin Deep felt trapped and frustrated. I still recall our first consultation. When we told them about our plans to convert their website and how much the design and development would cost, one of the owners asked in an exasperated tone, “So how much is this going to cost us per month?” We looked at her, smiled, and told her, “Nothing! WordPress is free. You own the site. You can maintain it. You can add images and copy whenever you like! After I train you how to use it, you won’t need me any longer unless you run into any problems!” (BTW, they have never had to call.) You should have seen the look of disbelief/relief on her face! It was a joy to behold.

Out With the Old, In With the New

Original Beauty Skin Deep website home page

Original Beauty Skin Deep website home page

Since they had had their site for awhile, and a lot of their marketing materials were branded around the look, I decided to keep the basic look of their site by building a WordPress theme from scratch. Lynda.com has a wonderful course on how to do it entitled WordPress 3: Creating and Editing Custom Themes by Chris Coyier. This is a rather advanced course, because you are encompassing Photoshop comps with HTML 5/CSS3, PHP, and Javascript. I still go back to the lessons in this course even though I completed it a couple years ago.

The first thing I needed to do was get the header image. Unfortunately, as you can imagine, the firm that built the original site wasn’t going to just give their art away. So, I had to use the header they had created but Photoshop the heck out of it because type was plastered all over the image. After removing the type, I added the “Reveal Your Youthful Glow!” tagline back, but in an area we wanted it to be. The ladies wanted their logo and appointment contact info in the main header. I placed the menu underneath the main header and then the image below that.

Obviously, the home page needed to be a custom page. I could have taken the easy way out and made it essentially a static page where the content could not be edited except by someone with web development knowledge. I figured that defeated the purpose of having a WordPress site, so I made a custom home page for them. I did have to add styles to their contact info, but they ladies can edit the information themselves if they ever need to, right from within the Visual editor in their Dashboard.

I’ll have to admit, the menu was very difficult to pull off. WordPress 3 handles menus differently and the coding is a bit complex. There is nothing special about the menu (no images are used, nothing special about the rollovers) but to get it to where you can add custom pages—whew! I had trouble marrying the javascript, CSS and PHP. If you attempt a theme from scratch, be prepared for some heavy lifting! My hat goes off to you developers out there who do this on a regular basis. That’s why you command the big bucks, I suppose!

The Custom Products Pages

Beauty Skin Deep brushes page

Beauty Skin Deep brushes page

The ladies at BSD had plenty of content they wanted in their new site. They carry lines of high-end products which they wanted to highlight. While WordPress does make it easy to add images, sometimes you need to do a little extra to get them to look just right on a page. You can do this with CSS (Cascading Style Sheets). The downside to adding custom styles to a page is that you need to know what you are doing to add them. Luckily, BSD hasn’t had to change their product images so no panic phone calls from them yet! While these custom product pages may have been a headache to design, they have been a godsend for SEO (Search Engine Optimization). With all these product pages, and each one loaded with descriptive copy, the search engines have no problem pointing visitors to Beauty Skin Deep! So, for all you business owners out there, the takeaway here is that the more pages you have—especially pages with relevant, keyword-rich copy—the more Google, Bing and the rest of the search engines are going to like your site.

Font Squirrel to the Rescue

On the original site, the headers were graphics set in what looked like Garamond or something very close. The problem with using graphics as headers is that search engines cannot “read” them. Search engines can find text, however, and they look for header tags (H1, H2, H3, etc.) first. This is why smart SEO practitioners put keywords (terms people search for in search engines) in their headers and copy. However, from a design point of view, sometimes the default web fonts just won’t cut it, especially for branding purposes. You’ll often see headers set in “branding” fonts—fonts the company uses exclusively in their marketing materials. Up until recently, if you wanted to use branding fonts on a website, you had to use graphics instead of HTML. This is an SEO nightmare. Since we were trying to keep the new site as close to the look of the old site as possible, but we needed to make it SEO-friendly, I utilized the @font-face feature in HTML5 to allow us to use non-standard fonts in the h1, h2, and h3 tags. Font Squirrel is a great free resource which has tons of great fonts to choose from. If you look hard enough, you will probably find a font similar to what you need. Hats off to the great folks at Fontsquirrel!

Polished Background

BSD wanted to have a silver background. They pointed me to a beauty product site which had what they envisioned. A silver gradient is easy enough to create in Photoshop. However, I needed to make it fit with the look of the BSD site, not the site from which the idea was borrowed. So, to pull this off, I lined the white of the gradient with the eyes of the lady in the main image. Yes, this took quite a bit of tweaking to get it just right!

The Unveiling

As you might imagine, this project did take some time to complete. After training the BSD owners in how to use WordPress, all parties involved were pleased with the final result. Bighouse Marketing had a site which is optimized for SEO. The owners of Beauty Skin Deep have an eye-catching site to show off their services and products. Koger Creative has a nice portfolio piece to point potential clients to! 🙂

This entry was posted in featured by Keith Koger. Bookmark the permalink.

About Keith Koger

Keith Koger is the owner-operator extraordinaire of Koger Creative. Although one heck of a graphic designer and copywriter, he has yet to learn that Star Trek, Star Wars and Monty Python references are the quickest ways to drive away women.

Leave a Reply

Your email address will not be published. Required fields are marked *