Building for a client – The Hair Saloon and More

Prior to my latest project, most of my projects have been built either for myself, my wife, or friends. While I was confident with my abilities at this point, I had not yet had the opportunity to build something for someone who I would consider a real “client.” Recently, I had this opportunity, and wanted to document my experience in building a website for an actual client.

I regularly get my haircut at a small business local to me called The Hair Saloon and More. About a year ago, I decided that I would keep my hair cut very short. While I am happy with the look, I have the unfortunate problem of rapidly growing hair, and have to get my haircut about every 2-3 weeks to maintain it. I’ve gotten to know the owners well, and enjoy my regular visits.

On my last visit, I decided to be bold, and asked Paul, one of the owners, “Do you guys have a website?” The answer was no, which lead to my follow-up proposition, “I can build one for you.” We had a short discussion, where he mentioned that they had a Facebook page, and he gave me a business card with a logo. I told him I would build something in the next week or two, and then we would take it from there. Then, I came home, first excited, and then thing, “Oh no, what did I just get myself into.”

I had never really built something specifically for someone else, let alone someone’s business, and I wasn’t sure how exactly to get started. I knew that I would be responsible for coming up with the design, which, as a developer, is an area of weakness for myself. I also wasn’t sure what I needed to include in the site, or what they would expect from it. Then there were logistical questions like, “Who would host the site?” and “How do I go about purchasing a URL for someone else?” For the first time I was dabbling in freelance web design/development, and this was a little scary.

After a couple of days of mulling everything over (and generally procrastinating), I decided to get started. I took at a look at their Facebook page, which had some good content to get me started. I also decided that I would use their business card both as a header image, as well as inspiration for the design in general (fonts, colors, etc.).

The Hair Saloon and More Business Card

While I eventually planned on using WordPress as a CMS for this project, I decided to hard-code everything at first while I worked on the design. I went with a single column layout, with the header image at the top and a navbar underneath. The front page would feature a slideshow of images of the business. Below that would be the content, followed by the businesses phone number, a link to their Facebook page, and an e-mail link, which would appear on every page. Beneath everything would be the footer with copyright info.

I started with the mark-up only. Inspired by two great podcast episodes on accessibility I heard recently (Episode 20 – Accessibility on CodeNewbie and Accessibility with Austin Seraphin on Turing Incomplete), I decided to use HTML5 Semantic Tags in my markup. I found that, not only does this make the site more accessible, it also makes the mark-up easier to read. In order to prevent issues with backwards compatability, I used the normalize.css reset, which sets all of the HTML5 semantic elements to display: block.

In coding the navbar area, I had the opportunity to think about the site’s structure. I decided to duplicate and categorize the basic information on their Facebook page, and planned out sections for hours, specials, and location, in addition to a home link back to the front page.

For the slideshow, I wanted to get something up-and-running quickly, and found slides.js to workout well. I only had one picture of the storefront for the slideshow, so I subbed in pictures of other salons I found on Google Images until I had a chance to take some pictures.

For fonts and colors, I wanted to closely match the style of the business card, but also wanted to give the site a more flat and modern look. I grabbing the yellow color from the card, I used Paletton to generate a color palate to work with. I also used Google Fonts to find a font for the page, choosing a serif font the complemented the font used on the business card.

I then went to the CSS, applying my styles throughout. I have gotten comfortable with creating responsive designs from my previous project, and switched back and forth between the desktop view and the mobile emulator as I edited the CSS. I prefer to edit my CSS file directly in the chrome console, as I see my updates live. I just have to remember to save my changes back to the local webserver, which I frustratingly forgot to do a couple of times.

Once I had the design down, I set up a WordPress site on my dev machine, and went through the process of converting my hard-coded page into a WordPress template. Each page on the nav area is represented with a page entry in WordPress. I split off the header and footer into separate template parts, and placed a very basic WordPress loop in my index.php, that pulls the content for the current page. I also created a separate front-page.php for the home page that includes the code for the slideshow.

In my design, I wanted the phone number, Facebook page, and e-mail address to appear on every page below the content. I placed these in footer.php, but wrapped them in an <aside> tag, since they are technically not part of the footer.

After everything was ready, I wanted to share what I had done with Paul and Carol, the owners, but ran into the issue of everything being hosted locally on my machine. I guess I could have stopped by with my laptop and showed them in person, but I wanted to give them a way to come back to the original design as often as they needed. I started by creating a ‘demo’ section of my own domain, and created a sub directory called ‘hairsaloon.’ I used the WordPress plugin Duplicator to deploy to this demo area, and the site demo was in production.

I set-up a meeting with Paul and Carol to discuss the site, take some interior pictures, and purchase a domain name. They really liked my design, and had some good feedback. They wanted a ‘prices’ page, and also wanted to see the phone number in header image. This number appears on the business card, and I had ironically removed it when doing my initial design. Since I saved the original scan, this was no problem to recrop it. We also discussed domain names and hosting. My current Namecheap hosting plan allows 4 additional domains, of which I am using only two, so I offered to host the site on my hosting plan. This worked in this case, but as a general rule, is obviously not sustainable, and I will have to work out how to do this as I get more clients. Once they settled on a domain name, I purchased it, and they paid me for the yearly cost. Again, I am sure there are better ways to do this, but I will have to work out those details later.

Armed with two dozen or so pictures and some changes, I got to work on implementing their suggestions. I set-up the add-on domain on my Namecheap hosting plan, and redeployed to this domain. Once the site was officially in production, I added Paul and Carol both as editors to the WordPress site, which will allow them to log in and make changes if need be.

You can view the live site at thehairsaloonandmore.com. You can also check out the code at github.com/bobderrico80/hairsaloon.

Overall, I am happy with this experience. I consider myself a developer, not a designer, but I feel like I got the opportunity to sharpen my design skills with this project. I also got my first taste of freelancing. I would definitely like to work on getting a few more clients, as well as better navigating the business aspects of freelancing (taxes, contracts, payments, timeframes, etc.). While in the process of writing and editing this post, I had the opportunity to listen to the lastest episode of starthere.fm which featured some of these decisions.

So, check out the site and let me know what you think? For developers old or new out there, is your process similar? What advice might you have for someone who is just getting into freelance web design?

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

1 Comment

  1. Great post, Bob!

    I’ve only looked at the site via mobile but it functions quickly and I like that the homepage slider is responsive to swipe.

    Your approach is exactly how I build sites from scratch for WordPress (when I’m not customizing a theme). I start with simple HTML/CSS to articulate the structure and style. Once the style and structure, including responsive, are done I roll them into the various pieces required for WordPress. I love building this way.

    Many people will help the client create an account at a registrar to buy and host the domain. That way, the client is in possession of it but they can give you login details. If you host the site files elsewhere you’ll need to change the DNS records or NameServers depending on how they want to handle things like email.

    Use Evernote or Google Docs to keep track of client details. Name, business, address, phone, usernames and passwords. Create a new note or Doc for each client. You will greatly appreciate having this information organized and accessible (always keep it secure). Just last week a client from 2 years ago approached me because he couldn’t access his registrar account. I found his details and replied to his email within 5 minutes. He was very grateful. Of course, I’m not mentioning all the times I’ve needed this info and had it.

    Don’t be afraid to charge for hosting, even if you’re giving the site away. They are going to have to buy hosting anyway, you might as well make a bit of money and provide peace of mind to your client by telling them you’ll keep an eye on it. Perhaps include basic maintenance like WP updates, backups, etc.

    I’ll mention a few things I hope will help you get to the next level with WordPress. First, you didn’t mention a blog so I’ll assume you didn’t build for one. Anytime, I build with WP I always make sure the blogging system works and the style is in line with the rest of the site. The client will say they don’t want to blog but we all know how important content marketing is and when the client figures that out they’ll want to blog. It’s easy to forget about featured images and comments so create a post that has both and build it so it works. Display the featured image in the blog list (your primary blog page list) and your single post page.

    Second, always register your menus. I didn’t check to see if you did this or not. If the client has access to the back-end, they may add pages and they’ll want them in the menu. It’s always better to assume the client will use at least the basic WP functionality. I style dropdowns for two levels deep beyond the top-level nav.

    Third, always include things conditionally. For example, if you add the featured image to the top of the single.php file, always check to see if one exists. If it doesn’t exist then don’t display any code/HTML intended only for that part. For this example you would use has_post_thumbnail() in your if statement.

    Fourth, it’s really easy to extend WP. Here are two free plugins I use on almost every site: Advanced Custom Fields and Custom Post Type UI. I’ll let you find out more if you’re not familiar but I can solve most information architecture issues with one or both of them.

    Fifth, WordPress is OK for SEO but it needs a little help to be great. SEO by Yoast is the best plugin for managing titles and descriptions for pages and posts. Use it on every website. Make sure to go back and write SEO and human friendly titles and descriptions for each page/post before launching the site. Just this will go a long way in helping search engine visibility.

    Sixth, don’t forget about vistor tracking. You might never look at the data and your client might not care but it’s too easy to do to just leave out. Use Google Analytics by Yoast. Create a Google Analytics account and just add all your sites to it, even your cients’ sites (I think you can have up to 100 sites per Google account). If they already have an account use their UA code. Otherwise, you can grant them access to the data, if they ask, or even transfer their account to them if they need.

    Last but most important, use The Poor Man’s Styleguide to check that you’ve styled everything consistently. Go to his website, copy the HTML code and paste it into a page or post. View that page and make sure that ever element is styled appropriately. Just because you didn’t use an H6 doesn’t mean the client won’t. Don’t forget to make videos responsive. Videos are what breaks responsive sites most often for narrow widths.

    You’re doing great! I’m sure you’re already doing a bunch of this so keep it up!

Leave a Reply

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