2014-10-10

Web design, ecommerce and WordPress. Three new, essential – and possibly frightening – elements of the modern brand.

But I’m writing this blog post to officially say that I, as a writer, built my own ecommerce website. And you can do it too, in just a few days.

Throughout this post, it’ll become more and more clear, but I just want to reiterate: I’ve never dabbled in web design. Besides making a MySpace for my garage band in the 8th grade, I’ve pretty much stayed away from any sort of web design.

So, here is a story about a writer; with no background in web design, creating my very own ecommerce WordPress website.

This is where my tale begins.

The Start Of My Website Build

After spending a year on the content side of digital marketing as Snap’s content manager, I thought it was only a natural progression to beef up my knowledge of the web design side of digital marketing as well. I thought to myself, “It might be nice to know what Tim [our web designer] is blabbing about all the time.” As someone who dives head first into any challenge, I naturally decided to build first and ask questions later.

So, I hopped on GoDaddy to buy my domain name. The one I wanted was of course taken, so I decided on another. I purchased the second perfect domain name for my personal ecommerce WordPress website for just over 10 bucks after a discount. Entered my card information – and BAM. In minutes my domain name was tossed out to the ether.

I just couldn’t wait to get my fingers typing on the backend of that site and make it the most spellbindingly interactive, responsive, icon-littered, parallax-ical, retina-HD-in-your-face website that ever existed on the Internet.

I’m laughing at myself now. Wishful thinking.



Money Spent:

$12.95

Rocky Starts with Domain + Hosting

Since I had no idea what I was doing, I went ahead and purchased the cheapest hosting package I could find, which coincidentally came from GoDaddy as well.

With the GoDaddy package, I received the website building platform, Website Builder to put together my website. How did it work, you ask? Well, another whole blog post could be dedicated to a negative review of Website Builder, but I’ll just quickly run through some positive and negative experiences. You’ll get a better idea of what an alternative to WordPress consists of.

Website Builder Short Review

First of all, if you don’t have much of an eye for web design or any experience with visual design, and just want something cheap and easy, this will do the trick. If you really want an optimized website for ecommerce, SEO and UX purposes, you should probably go for a better platform. For a personal art portfolio or simple blog, this is sufficient. For me and my vision – this wasn’t the best option.

These were the best elements of the Website Builder platform in my eyes:

It’s drag and drop

No coding necessary

Some easy SEO shortcodes

Edit elements directly on the page

It was easy to upload images

The grid feature made aligning images easy

My complaints are much more extensive, but essentially, this builder didn’t offer the freedom I wanted with building my website. The editor was restricted to the built-in options, and without a lot of HTML coding experience, I couldn’t customize the site behind-the-scenes to represent what I envisioned on the frontend.

Like I said, I wanted all the trendy features – device-responsive, parallax-enabled, compelling header slides, Google fonts API; all that good stuff. So, I reexamined my options, and while I was looking for the answer to my hosting problems, stumbled upon a helpful (but at the time misleading) YouTube video explaining how to set up a WordPress site.

If you watch the video, he explains how to set up domain hosting on HostGator. Now, at the time I had no idea that your website domain needs to be synched up to your hosting account. So, off I went onto HostGator and swallowed up a piece of Internet real estate through the form of a Baby Plan hosting package.

This is where the real trouble began.



Money Spent:

$12.95 + $3.95 =

$16.90

Even More Problems with Hosting

I bought a yearly subscription on a Baby Plan for $6.36 per month, or about $75 bucks a year. They also have the more introductory Hatchling Plan, and the premier Business Plan. My package works well for me because I plan on developing more websites and the Baby Plan gives you unlimited domains, disk space, bandwidth and a shared SSL certificate.

So, now I had a website set up on GoDaddy, a new hosting package with HostGator and absolutely no knowledge of how to switch my domain hosting plan to get my website back up and running with a HostGator WordPress platform.

So I journeyed into the depths of Google, through the veins of internet content to troubleshoot my problem. I found that WordPress development is much harder than it seems.

Troubleshooting DNS + Name Servers

For someone to visit your website, you need to configure DNS and set name servers. I had no idea what either of these terms meant, so I did some research and diffused it for you below.

DNS

DNS stands for Domain Name System (or server or service). What DNS does is convert your domain name into a numerical IP address so that your computer server can be identified by other devices throughout the world. DNS allows sites like Google to authority-rank your domain. Without DNS operation, the Internet essentially wouldn’t exist.

These two elements of the Internet, both DNS and Internet protocol (IP addresses) are the two main hierarchical structures of the functioning web – with domain name system considered of greater importance than that of IP protocol.

I found a great analogy for DNS: It’s like a modern-day phone book. The DNS transforms high-level hostnames into numerical data, much like a phone book assigns each name a numerical phone number. We would never refer to Janis Smith as “555-343-7777”, just as we would never refer to ebay.com as “66.135.217.240”

Name Server

A name server is a computer server that implements a network service (either DNS or IP) and provides responses to questions asked against a directory service. A directory service is the software system that stores, catalogues and accesses the information in a computer operating system’s directory.

So, now that we got some textbook definitions down on paper, let’s get to work fixing this website.

According to this HostGator resource I found, there are two options to setting up name servers and squaring away your DNS.

Option 1: Using HostGator Name Servers

This is the recommended way HostGator customers to use name servers, since they are built to operate with HostGator web hosting accounts.

First, you need to find out your name servers for your hosting account. To find these, either go to your

Welcome email from HostGator. These name servers can be used on all sites that are hosted on your HostGator web hosting account.

In Your HostGator control panel (if you have shared web hosting).

Second, you need to change the name servers.

If you are smart, unlike me, and purchase your domain and hosting through the same company, then all you have to do is head to your control panel and click “Domains” at the top to manage your domain names.

If you are like me and didn’t purchase your domain from the same place you bought your hosting, then you have to head to where you bought your domain and go to their FAQ section, or give customer service a call. GoDaddy has a bunch of helpful and easy directions to follow no matter what domain-hosting pitfalls you may have come across (most other companies have tools as well for assisting you.)

All I had to do was remove my registrar’s current name servers and replace them with HostGator’s that I found on my control panel (accessible through welcome email as well).

Option 2: Use Name Servers Elsewhere (For the experienced only)

If you’re an experienced developer, you can use different name servers if you desire. This won’t automatically update themselves, and require much more upkeep, but it’s definitely doable if you’re searching for this option. Visit this article for more information:

How to Point Your Domain to HostGator when Using DNS Elsewhere

Of course if you’re like me, you’re probably not experienced – hence why you’ve made it this far in the post. I chose option one, and it viola – it worked like a charm. I was now able to see my domain name on my HostGator control panel.



Money Spent:

$12.95 + $3.95 + $76.32 =

$93.22

Almost Setup On WordPress

After my troubleshooting woes were gone and my hosting was set up on HostGator, it was time to put my domain name on a WordPress platform. I logged into my cPanel.

To access your cPanel on HostGator, follow these instructions.

Thankfully, HostGator (can’t speak on other companies) has a very easy to use WordPress Quick Install feature within the control panel. When you login into your cPanel, scroll to the 10th section in your main dashboard, “Software/Services”, click on “WordPress Quick Install”.

From there, it’s fairly self-explanitory. Click on the WordPress icon on the left-hand side of your screen. A blurb about WordPress will come up, click “continue”. Blank fields will show up, enter your desired information like domain name, email, admin name, etc.

It will take a few hours for your site to go live, at minimum 2-5, so be patient. Check back later today or tomorrow, by typing in www.yourdomainhere.com/wp-admin. Type in your administrator information, and you should be on the backend of your very own WordPress ecommerce website.

Finally Choosing a WordPress Theme

Finally, I got to the fun part. Picking a theme. There are millions of options — literally. It’s almost overwhelming at first, because it’s difficult knowing where to start.

I started with a Google search: “wordpress themes”. Three million results. Okay… “responsive wordpress themes”, I typed. Five million results. “What?!”

I had research ahead of me.

I never realized how many options there are when choosing a WordPress theme. There are free themes and middle-priced, hundred, and thousand dollar premium themes. There are companies like ThemeForest, Elegant Themes, WordPress.org Themes, ThemeRoullette. The list goes on and on.

I visited so many sites including the ones I listed above, and first of all, found that most of these websites really need updated themes themselves. But second, and most importantly, many themes are just variations of one another. Above all, make sure that the theme style matches what you or your brand is trying to communicate and everything else should fall into place.

Here are some more elements to consider when choosing a WordPress theme:

Budget

For a personal site, I knew that I wanted it to look good and be customizable, so I avoided pretty much all free themes. But I also didn’t have the necessary means to break the bank. I wanted to invest some money, about 100 bucks and ended up spending a little more, but there’s no reason you can’t do it for much less than I did.

Make sure you have a budget in mind, because believe me, if you don’t educate yourself – you’ll be spending money on things you never even realized you needed – the costs add up quickly.

Free Themes vs. Premium Themes

A free theme can be a blessing to those with a small budget, and a curse to those desiring more freedom with their website design. If you’re like me – doing this on a budget – then there’s no reason not to at least research free WordPress themes. You can even download a few and test them out. If you don’t like them, you can always restrategize your design and decide on a premium theme instead.

Go Simple

A simple + optimized website development isn’t just smart for easy building, it is better for compatibility, responsiveness and all-around better usability. For the best functionality, choose a theme that can be customizable, perhaps one that costs money. Remember my experiences with Website Builder. This gives you the freedom to manipulate backend code to get the frontend experience you’re envisioning.

Read the terms of service

Unlike your iTunes Agreement, you should actually read the theme’s terms of service. When buying a WordPress theme, this is important because there may be information within the TOS that will affect your entire site. For instance, there is important theme licensing information about legal ownership and distribution, as well as the theme offerings, refund policy and support.

Refund policy

I can’t reiterate the importance of a solid refund policy. I was about to purchase a seemingly awesome theme from ThemeForest, but knew I had no experience with HTML coding. I researched their theme support and came up empty handed. Which brings me to my next point.

Support policy

If you don’t have much experience with web design, then make sure the theme support is solid. Investigate their included documentation, dedicated support portal on their website, or other offered communication line to the theme developers before you buy.

The theme I almost bought had almost no support. They had a dedicated support website which they pushed in their sales pitch, and was a great UVP to convince me to research their theme farther. But when I accessed the portal there were about 6 threads with no useful information for me. Real bummer, so I moved on to another theme.

Responsiveness

You know how having a mobile strategy was all the rage a few years ago? Well, now mobile strategy has to adapt to every conceivable device, like tablets, phablets, laptops, TVs and soon even smartwatches. Depending on whether you choose a free or premium theme will most likely dictate your website’s responsiveness. Whether that’s important to you or not should depend on who you’re trying to reach and how.

To choose Onepage or Multi-purpose

This confused me at first. I love the ease and look of onepage sites, where every section is contained on the same page as Home. But as a content manger, I had my suspicions about their SEO value. Turns out my suspicions were valid, and onepage sites actually aren’t very useful with SEO. You should go for a multi-purpose theme if you want to rank well in search engines.

Included demo + built-in features, templates and SEO capabilities

Without much coding experience, it’s nice when the theme offers a free download of their demo. Certain premium themes either offer this or some sort of alternative, like pre-installed templates or plugins. But strangely, many do not. The theme I ended up returning did not have these capabilities, so I wasn’t about to design a website and manipulate CSS stylesheets without any knowledge of how to do so.

Buying the Perfect WordPress Theme

After going my proverbial research checklist as a analytic content nerd is one to do, I finally settled on my theme of choice: Outeredge, for $48 dollars.

What I loved about this visual design of theme is the clean layout, the clear headers + icons, Google font integration, shortcode abilities and page templating.

The bonus was what’s included on the backend. Free dummy data was included so I could upload the demo versions of the theme just like what was advertised. Also, the Revolution Slider plugin for $19 was included free with my purchase as well as SEO plugin compatibility.

Money Spent:

$12.95 + $3.95 + $76.32 + $48 =

$141.22

Making Headway

After a quick download of a .zip file, I uploaded the theme to my WordPress site, pressed “activate”, clicked into my site, and there she was; my very own WordPress website with premium theme.

I went a little over-budget, but thankfully I planned for that because I knew I was going to incur surprise expenses. Perhaps with a great blog post detailing hosting issues I could have avoided that problem ;).

And that wraps up the first part of my ecommerce web design journey. Stay tuned for the next installation of I Built My Very Own WordPress Website. I detail my experiences in building the actual site and reveal my website to you the audience (granted I don’t hit many roadblocks in finishing up the site build). I’ll also outline extensive ecommerce web design guidelines and best practices, including a WooCommerce tutorial.

Show more