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.).
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
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.
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?