Investing in yourself is a necessity for web designers who need to keep up with the latest tools and technologies. Sometimes it is hard to do amidst the day to day life of delivering client projects. Over the past six years plus years in business, I have had to bring new skills to the table for clients, including CSS3, the latest in Ecommerce, HTML5, Mobile Responsiveness in websites, and best practices in SEO.
This past month, I have taken on the challenge of applying my skills into crafting a new website to encapsulate a new business venture between my wife and I. I designed and built www.BaronHalfpenny.com. This is an ecommerce store selling aviation and adventure jackets, primarily serving the steampunk community.
The Steampunk Creative Aspect
One of the unique parts of the steampunk clothing and character culture is the tendency for adherents to craft personalities out of the characters they dress up as. Full of backstory, facts, statistics, and placed in time and geography, steampunk characterization can be quite elaborate.
With the creation of BaronHalfpenny, we sought to do the same thing. Still very much a work in progress, the Baron’s life is an open canvas, but we are crafting him as a low level aristocrat surviving on an island, off of the Isle of Man. His photograph is a combination of historical photographs of early mail plane pilots and one of the last British Rajahs of India.
This creative slant gives way to lots of opportunities to interact socially with our friends and followers. The name is exciting, and the character is our archetype client for the products we sell. What better salesman!
The Steampunk Website Design
There are many examples of Steampunk website designs on the web. Many are elaborate with a variety of characters, patterned flourishes and out of this world use of brass and glass. These designs are pretty, however upon inspection nearly none of the existing sites are not designed with mobile viewing in mind.
The aesthetics of steampunk and the efficacy of mobile design fight against each other. Elaborate versus simple. My fairly simple solution was to merely apply basic Victorian patterns through the design and background, hide them when viewed in the mobile setting via CSS size breakpoints, and leave the more elaborate imagery for the products and image squares throughout.
It is my belief that a store should be clean and clear. I hope I’ve captured that, and given ENOUGH of a steampunk feel to the site.
If you check the site on a large and small platform, you will find that it does well in either instance.
The Tools used to Craft our Ecommerce Site
As a fulltime web designer, I get to see and research a great number of tools – many of which my clients approve of, and some with which they show disinterest. My site, my way, right? Here is a full list of the technologies I have employed in the BaronHalfpenny website.
WordPress
Being that nearly all of my development work of the last year (and previous) is in WordPress, I chose the Content Management System in which I have the most comfort, experience and support. WordPress is a website engine that is probably the easiest to use for my beautiful bride, and being that she will be working in the site everyday, why change? Existing skills make All of the difference in web site management.
Genesis Framework
Brian Gardner and the folks at StudioPress have been perfecting the Genesis Framework (a theme framework for WordPress) for almost 7 years now. I bought into their theme package early on in their development and have seen the value in that purchase reflected back to me 5 to 10 fold. Unlike fancier, and technically heavier theme frameworks that offer thousands of features and can potentially slow your site, the Genesis Framework provides a blank canvas- an excellent choice for the Victorian themeing I had to do.
The Genesis Framework is extremely well supported, and offers many methods of customization through code. No clunky user interfaces and overlays- perfect for the coder in me.
But why? Why would I choose to edit a website with text code versus easy interfaces? My experience with these plug and play themes is that they eventually break down and stop working because of changing technologies of WordPress, and that customization outside of what they expect customization to be is nearly impossible.
WooCommerce
WordPress does not come preloaded with its ability to sell products, you have to add an ecommerce plugin. I have tried many plugins over the past 3 years, and have found the best to be WooCommerce. It shares some theming similarities to Magento, but it feels 100% at home in WordPress. WooCommerce has a zero cost out of the box, but, it does need plugins to add functionality- whether it be payment gateways, or shipping calculators.
WooCommerce sells many of these plugins at a hefty price, I have, however taken to the effort of buying ‘off-brand’ plugins at Code Canyon that perform the same actions, at a fraction of the price. Some of these are related below.
Gravity Forms
Gravity Forms is my Swiss army knife for form development. Whether it is for a newsletter signup box, contact form, or an application to submit a story or blog post, I just love Gravity Forms! The BaronHalfpenny site does not overly rely on this tool, but, most other sites I develop do, and I could not NOT include it!
Vicomi Comment System
You can replace the standard WordPress Comment System with any number of other comment system such as Disqus, IntenseDebate, and LiveFyre. Vicomi is a slightly newer child on the block that allows commenters to select how they feel about a particular blog post when they comment.
I was disappointed that the Vicomi WordPress plugin did not work with my site because I keep the back end of the site protected with encryption via an SSL certificate. Someday they may update the plugin, but for now I replaced the WordPress Comment System manually through code. I’m glad that the Genesis Framework makes the effort super simple.
Other Tools and Plugins for our ecommerce website
In addition to the above tools, I have loaded this WordPress installation with a number of other plugins- Here is an abbreviated list of the more interesting items.
- Genesis Connect for WooCommerce – Make Genesis and WooCommerce behave together quickly
- Genesis Simple Share – A beautiful squat, and simple social share tool that @NickTheGeek developed for his bosses at CopyBlogger.
- Gravity Forms MailChimp Add-On– For a newsletter
- Simple Image Widget– An Easy tool to add images to sidebars.
- Storyform – a beautiful full screen story telling tool that I hope to employ soon with Steampunk Fiction
- WooCommerce Menu Cart – Shows Cart Items in your menu
- SYN Media WooCommerce UPS – For showing UPS costs in WordPress
- WordPress SEO – My WordPress SEO Plugin of Choice.
I choose to keep the number of plugins that I use in WordPress very small. The more plugins you have, the slower your site will run. This is simply a subjective view, one I tell my plugin happy clients!
Website Hosting and SSL
The BaronHalfpenny website is hosted on WPEngine. I purchased the SSL certificate at the SSL Store.
Marketing a new Ecommerce Site and SEO
Social Networking
With each new website, siteowners must decide which social networks are the most important to exist inside of. Choices abound of course, but you have to decide where the most visibility is for you.
Cindy has decided and created Twitter, Facebook, and Pinterest Accounts for Baron Halfpenny. Upon the first week of effort, Cindy has found that
- The Twitter steampunk community most often discussed literature
- Pinterest users most often showcases professional photography of steampunk attire
- and Facebook often involve communities- both local and global, of steampunk afficionados that gather together.
Each of these avenues provides a unique viewpoint into the steampunk world – and helps Cindy craft a plan to most actively engage the various communities.
Building Website Links
In week #1 of the launch of BaronHalfpenny.com, we sought out a number of steampunk fans that list steampunk ecommerce stores on their websites. We asked for links! We also wrote a couple of blog posts that referenced various community members, and simply let them know in the hopes of some attention. Our next step is to engage in some steampunk forums and include out store site in our footer, whilest contributing in a non-commercial way.
Writing Content for the website
All content written on the Baron Halfpenny website was drafted by Cindy and I. With each piece of content or product description, we have added SEO friendly titles and meta descriptions. This is an effort that must continue to evolve, and will become an integral part of our marketing effort.
MailChimp for Newsletters
We have employed the use of MailChimp to manage the BaronHalfPenny newsletter. There are plenty of good options out there, but this is the one I am most familiar with. Last year I had the chance to develop a fully mobile responsive email template for Mailchimp- I will be utilizing it as I develop the first newsletter.
Advertising
I’ll be honest with you. I am not a great risk taker. Spending money on spreading a message has always been difficult for me to accept. The Remarkable Team, as a web design firm, has relied on word of mouth, and spending money on ads is hard for us. I am going to be bending the ear of some web advertising experts that I know personally this coming week and see if I can build up some courage in proper plans of action.
Conclusion
I hope you found this look into the method of our madness helpful.If you have any questions about how we are progressing, or how we can apply what we do to your upcoming project, do contact us anytime.
