A free HTML, CSS design and SEO Tutorial guide to making money: Part II
Okay guys and gals, it’s been a few months since I went back and forth over building PortableWirelessCharger.com from scratch, the further I dug, the more intimidating it got. The creative part wasn’t too bad, on a static screen I can build pretty much what I want – the same way that I used to build dozens of web sites per months years ago by hand using pure nested HTML Tables, it’s definitely an art form. However, having to design a responsive website that looks good on all devices quickly overwhelmed me. You have to take screen size into consideration, layout variations across screens, font sizes on different screens and more. It felt like an impossible problem to solve and I have gained a new appreciation for framework solutions such as Bootstrap, Skeleton, Foundation and many others. More importantly, I really, really appreciate solutions like Shopify who take it to a whole new level as a cheap, fast end to end all ecompassing e-commerce solutions, but I digress again. I do not advertise paid solutions in my Blogs so I will only link to free solutions that are high quality and have value.
Le’ts move on.. As I write this blog entry, take a look at PortableWirelessChargers.com, I chose to go with the Bootstrap framework, a free and very powerful HTML5 solution for many reasons. The primary reason is that Bootstrap has basically become an industry standard, it is widely used with tons of ability, and even better, it’s free!
I was really looking to build a basic website, I would be happy with 1 and 2 column sections that are basically laid on top of each other. Luckily, Bootstrap was the perfect solution for this. If you look at the site as-is today, you will notice that it’s basically the following sections laid out on top of each other: Header, Banner, List of suggested Portable Wireless Chargers, Informational Paragraphs, Footer.
I quickly realized that I put everything in my head down on paper, which translated to a long web page and I ran out of content for other pages. For a real brochure type website, this would be fine. But for an informational page that is supposed to be “relative” and have lot’s of specialized information on it, it is clearly to your advantage to break of larger informational paragraphs into separate pages. Why, you might ask? This might sound silly but, the more web pages that you have, the more realistic it will look to the spiders that crawl the internet which in turn determines your Search Enginge Ranking. Another example is, if you have content on multiple pages with links between them, the same spiders will index those links to determine your ‘authority score’ on the topic that you are building on. In general, the more specific the topic is for a page on your site, the better for your SEO Results, the more general the topics it will only hurt you as you will not stand out from your competitors.
One last thing to notice on the site as it is today, notice the 2 charger sections under the top banner area. They both link to Amazon products, at this point in your design you definitely want to make sure that you have an Amazon affiliate account and a small handful of products in mind. It’s really important to come up with a single consistent look and feel. Even more important though is to offer unique and valuable information so that people trust your site. If you’re not telling them something that the want to know, then they will not click on your links.
Stay tuned for Part III of this article which will describe how I split the current website (single page) into multiple pages with links between the pages. It will also have at least 5 recommended products and the site should be 90% complete.
I intend to have a Part IV of this series which will include tips on how to finalize the page. I will also briefly touch on some advanced tips which will not be for most readers, however – if you are into scripting/coding, you will clearly have an advantage over your competitors from an SEO perspective.
Post your questions and comments below and we’ll try to help you out.