Several years ago, I got my first paid website design job from a professional wood turner, Mike Mahoney, who happens to be one of the nicest people I’ve ever met. With the help of my older brother, I performed a site redesign for him – updating some content and giving the site a fresh look. He had a paid third party store backend (VeraCart) that was used to manage products and payments, so I just had to skin the static pages and tie them into the cart code. A couple of years later he asked me to come up with another new look. I did so and we were both pleased with how it turned out. I went with a rich color theme of browns and tans, using lots of textures and graphics to give a warm feeling to the site.
Planning and Mock Ups
In January of this year, we started discussing a new design for the site again. This time I suggested he consider moving to a free open source shopping cart solution, rather than paying for VeraCart’s services every month. He liked the idea and asked me to proceed to both convert the site to Magento and to redesign the site, using a black and classy look. I began my process, which typically goes something like this:
- Gather info from the customer on what style, look, colors or feel they’re interested in.
- Present and critique several sites that match that description to see what they like and dislike about each.
- Use the notes from that research to begin to mock up a custom design in Photoshop.
- Show it to the customer to get feedback and, once edited and approved, begin to create it online using html, css, javascript and whatever else is necessary.
So the process began. We came up with a look that he liked and because I took the time to understand his tastes (and because he’s amazingly easy to work with), we moved ahead with the first mock up. This is what I came up with.
Download the PSD of the Mockup
Digging In
If this were to be a static website, like the previous redesigns of his site had been, I would have started slicing and dicing in Photoshop, using slices, css and my favorite web add-on, Web Developer, to get it all laid out as planned.
ADHD Moment (sigh)
On a side, I have been really getting used to the “Inspect Element” feature in Chrome to replace much of the functionality of the Web Developer add-on. While there is such an add-on in Chrome, it is not nearly as robust as the Firefox version – specifically being unable to offer the “View Style Information” feature. Once you understand the Inspect Element (right click on any area in Chrome) feature, you can mostly do without Web Developer.
Return from ADHD Moment – Getting the Look Right
OK, back to the task at hand. Since this was not a static site, I needed to install Magento then customize the skin/theme to end up looking like my mockup. This was a time consuming process but came out pretty well. The general process (at least for Magento) is as follows:
- Look for existing free themes that would get me closer to my starting point. In my case, I found that the Telescope Theme was better than the default theme so I installed that to start.
- Start replacing images, background images and styles to get the layout and look in place. To dod this, I would either use the Web Developer extension in Firefox or the Inspect Element feature in Chrome – find out what the image or background image is and then replace it.
- Try to find out how to remove (or add) certain page elements. For example, there were things like Welcome Messages, Newsletter Signups and Sample Products that didn’t need to be there for my design. To remove these, I mostly had to dig through the forums on the Magento site (and wherever else Google took me) to discover if I needed to alter the hard code or if I could disable/remove things through the Magento backend. In all this I found myself amazed at the small amount of control given to designers in the Magento backend. To make even simple changes, you have to dig 27 levels deep into the code and comment out a line or replace something. Not very intuitive. This also creates potential issues with upgrading to newer versions of Magento. Hopefully those newer versions will help address this issue.
- Update fonts, font-sizes, install new fonts, add jQuery elements and whatever else you want to do to give it just the right look.
Content – It’s King, right?
So after getting it to where I wanted it, which took some time, I was ready to start filling it in with content. In this case, I was trying to convert a Vera-Cart based site to a Magento site and, unfortunately, I looked high and low and found NO way to do this directly – I had to manually convert all products from one store to the next. I had decided to hire this out to someone overseas using the online contractor service, oDesk. This went pretty well but another contractor I hired ended up screwing the whole thing up. But that’s another story.
The process was very manual – it was really a matter of going in and setting up categories, subcategories and individual products but it doesn’t take too long. Just tonight, for example, I added about 15 products, their descriptions, weights, photos and skus and it took about 90 minutes. If you have a site with tons of products, I’d recommend hiring a programmer to convert the old database into a format that can be imported to the Magento database. I’m a front end designer with limited programming ability. Actually, I’m useless at any programming so I did what I had to do.
Setting up CMS Static Pages in the Navigation
I also had to bring over all of the other pages of the site, such as the resources pages, contact info, about us, events and others. I wanted each of these show up in the main navigation but didn’t want to hard code the links into the nav, so I found a suggestion online that one could add each static page (or set of pages within a group, like a resources section) as a category. From there you have two options to control this all in the backend (no-touchy-the-code).
- You can place your content for that page (html included) right in the category description or . . .
- You can create a static block that the category shows.
To do either of these, you’ll want to go to the Display Settings tab for the category and set the display mode to Static block only. If you’re opting to put all of the content right in the category description, just leave the CMS block at the default “Please select a static block …”. If you have a static block with your content in it, then select it from the dropdown. Obviously you’ll have to create said static block first.
Another nice benefit of doing this is that if you have multiple static pages in a group, you can set them up as subcategories and you’ll be able to set the main category as an anchor (see screenshot above), then its subcategories will show up as a dropdown in the nav. Nice!
Spicing it Up: Eye Candy
I’m a big fan of subtle interactions on website. I like clean designs but I want them to be SEO friendly. Anything you can do to give a site that extra edge over other sites is crucial. Here are a few of the tasks I performed on this site to add that extra spoonful of web design love.
Animated SEO Friendly Home Page Banners
I heart jQuery for allowing me to use crawlable animations, among other things. And, since I’m javascript challenged, I let jQuery do the heavy lifting for me. As you can see on the home page, I inserted a smooth scrolling set of html blocks, which include images, links and text. All of this is 100% crawlable by the spiders and requires no flash. It definitely took some tweaking to get it to work right but I’m pleased with how it turned out. This serves several purposes on this site. It allows several messages (I think three is the magic number – seven seconds each) to be shown to those who arrive on the home page. It also gives lots of juicy keyword goodness for Google and other engines to crawl. Lastly, it breaks up the monotony. It’s iPhone friendly (no Flash) but it doesn’t just sit there. Me likey. This particular animation is a modified version of the AnythingSlider.
Custom Universal Fonts
I love good fonts but I don’t love the limited set of “least common denominator” fonts that are web-safe on everyone’s computers. Enter Google API Fonts. This bit of typeface goodness allows you to tell the user’s browser to go fetch a font from Google and use it right on your site. It doesn’t need to be installed on their machine. How nice is that? The font selection is still somewhat limited but it’s a great start and there are certainly many other sets of web-based fonts out there. Breaking away from the standard Verdana, Times New Roman, Arial (blah, blah, friggin’ blah…) is a good thing.
Live Feed From the Blog = Constant Fresh Content on the Home Page
I found a handy little trick to allow me to put the most recent posts from my client’s blog onto the home page. This is fantastic because my client is good about updating the blog, which means his home page suddenly becomes a constantly updated source of content. The search engines love that. It also directs visitors right to recent posts, which lets them know that he’s actively contributing to the site and let’s them keep up with his latest work.
To add this to the site, I simply set up a feedburner account for him (extremely difficult – took at least 37 seconds) and then, once it was set up, went to the “Publicize” tab in Feedburner and select the BuzzBoost link. This allows me to generate some customized html code that I can just drop in the home page and it will show recent posts (you choose how many, how long, etc.) as simple as that. Check this article out for more info.
Wrapping Up
Once all that was done, I went through the usual web design tasks.
- Make sure there are no broken links, spelling errors or design issues
- Run through the site (account login pages, the checkout, site search and more) and make sure there aren’t any areas that weren’t styled the way you want.
- Make sure you have killer page titles, chock full of keywords and relevant info for your visitors
- Make sure your pages contain relevant and SEO friendly text, including good anchor tags for your images
- Set up the payment gateway if you haven’t already done so. Magento and Authorize.net go great together so if you have that option – it’ll make your life much easier.
- Have others look through the site and double check your work.
Summary
There are more exhaustive lists out there about all this but you get the gist. If you have any questions about anything I’ve discussed, please post a comment and I’ll try to get back to you quickly. You may have noticed that I mentioned that I started this in January and it is now almost October and I’m just finishing up. Luckily my client was in no particular hurry and was exceedingly patient. I ran into some ridiculous issues with overseas programmers and learned a valuable lesson but in the end it all worked out – just very expensively for me.
Here’s the finished result of how this particular design worked out.
See the finished website of Mike Mahoney – Woodturner!
Best of luck on your custom Magento (or OSCommerce or ZenCart or whatever other type) store and may the Schwartz be with you!
Rock on,
Nils