This website - goHOWie.com - is the first site I've ever put together and I've had to learn the whole process from scratch.
How I did it, what I've learnt and where I've found help along the way makes for an interesting story, especially if you're contemplating doing the same thing.
I'm going to split the story up into logical steps, that hopefully will be easy to follow and understand. If you want to contact me with advice and suggestions for future improvements and additions then please do so via the Contact page.
Every 3 year old's favourite question - why? Well asking this question is just as relevant and useful for a grown up to ask at the start of a website project! A website must have a purpose, and the more clearly defined that purpose is at the start, the more focused and useful the site will be. Also, it helps to be able to state the purpose of the site clearly and simply on the home page, so that visitors know what they're letting themselves in for!
- At the start of this project I wrote down the 'Whys?' of goHOWiE.com as follows.
- To provide an outlet for me to showcase my photography and writing.
- To encourage visitors think about the spiritual side of life and their relationship with the Creator God.
- For me to learn a new skill (website design and programming).
- To promote my artist friends' work as guest contributors.
- Not to be a sales based site at the start.
- Defining what the site was for, right at the outset, enabled me to take the next step knowing what my end goal was.
Once the purpose of the site was understood, planning the structure of the site became much easier. I found it very important to plan the menu layout and the underlying directory structure on paper, before trying to write any code. This is because all the links and menus on the website refer to images or website pages saved in the site's directory structure. If the menus or directories were disorganised at the start that would have made programming these links very complicated, and a nightmare to change once the code was written.
Planning the menus and directory structure beforehand has subsequently enabled me to make additions and changes to the website with the minimum of fuss!
It's no good designing and coding a website without first registering the domain name. You may have thought of the greatest name ever, and built your site around it only to find that someone else has it already! You would then have to start again pretty much from scratch.
Your domain name should reflect the purpose of your proposed site (see Step 1). It helps to have a list of four or five possible names written down before starting the registration process, as your first choices may have already been taken.
Once you have found a suitable name that's available, register it immediately! You never know who else might be thinking the same as you!
I registered goHOWiE.com with Go Daddy.com as they have a good reputation and keen pricing. You might notice I also used their name as an idea for mine!
Your logo should appear on every page of your website, so it pays to have the logo sorted out before you start coding, or you'll have to add it to every page later on, which is a pain!
You can create a logo in a number of ways using various software tools. I found the most helpful explanation of this process at garysimon.netOf course, I'm blessed with an artist for a daughter, so I just told her what the purpose of the site was, and that I wanted a semi-playful logo. Literally two minutes later I had the goHOWiE.com logo in my hand ready for scanning and saving as a PNG file! Nice eh!
As this was my first ever website, I had no clue about how to code it when I began! I spent several hours trawling through a googled list of website coding tutorials getting ever more confused. Every different site I visited seemed to promote a different way of doing things.
See the update section at the bottom of this page.
This website was put together offline on my PC, not on the internet. This meant I could learn and make mistakes without anyone else seeing!
I was determined not to use any WYSIWYG (What You See Is What You Get) site construction software, such as Adobe Dreamweaver, but to write all the code by hand using nothing more fancy than Microsoft Notepad (free with Windows). This was because a) I didn't want to spend any money and b) being curious, I wanted to learn how to write code myself.
No doubt I could have put the site together faster if I'd used WYSIWYG software, but I know a whole lot more now, than I did before I started, by writing in code.
Before you upload your finished website, make sure it works properly. Check that the internal and external links work. Check the formatting of the site across the popular web browsers (Internet Explorer, Firefox and so on). Get your code checked for compliance to the recognised standard. Finally - get someone else to check your spelling and punctuation!
All these checks will make sure that visitors to your site are left with a good impression and will want to return.
There are a multitude of website hosts around. My personal opinion is to avoid the free ones, as they will offer a limited service and will load adverts onto your site over which you have no control.
Another thing to check is that the host provides a package that gives you enough storage space for your website, and enough bandwidth to cope with your anticipated traffic.
To choose the most suitable host for you, try typing 'website hosting reviews' into Google and check out the comparison and review information on some of the sites listed there.
I'm currently hosting this site at GoDaddy.com.
To upload your website, which is currently living on the hard drive of your home PC, you need ftp (file transfer protocol) software.
Most host providers have their own ftp facilities, and I used the control panel ftp at Go Daddy to upload this site.
Once your website is uploaded, you need to tell your domain name registrar where it is, so that when a visitor types 'www.gohowie.com' into their web browser they are directed to your website.
Instructions on how to do this are usually provided by your website host and domain name registrar.
This is easier to do if the domain name registrar and website host are, in fact, the same company but some people prefer to keep domain name registration and website hosting separate.
Once your website is online, visit it to check it's working OK as something might have been corrupted during the uploading process.
Also, get your friends and family to visit the site and let you know if they experience any problems as well, as different browsers and operating systems may handle your website coding in very different ways!
Finally, if you want visitors to keep coming back to your site, and if you want to stay reasonably high in search engine rankings, then you need to keep your website fresh, with new content added on a regular basis.
From the middle to the end of 2015 I carried out some major reworks to the code that goHOWiE.com is built on, based on current web trends.
These are described as follows:
Back in 2009 when I first compiled the code for goHOWiE.com I worked in the then industry standard of XHTML and CSS, in a PHP wrapper to allow me to use the very useful php_includes function.
However, with the introduction and increasing adoption of the more powerful HTML5 and CSS3 coding standards from 2012 onwards I realized that I had an opportunity to both simplify the coding and add extra functionality to goHOWiE.com by adopting the new standards.
So a re-coding of over 1,000 web pages was on the cards which took me quite a while but resulted in a much cleaner and more functional site.
The upgrade to HTML5 solved those problems and 'future proofed' goHOWiE.com for some years to come. (I hope!)
In early 2015 Google announced that they would start downgrading websites that weren't mobile friendly.
In other words, websites that used a fixed page width that didn't dynamically re-arrange their layouts depending on what sort of device they were being viewed on.
Then I started getting warnings from Google that goHOWiE.com wasn't mobile friendly and would be demoted in search rankings as a result.
Now not being a commercial operation, I wasn't particularly bothered about search rankings, but I was bothered about the sort of experience a visitor to my site was getting.
goHOWiE.com was originally designed and coded before the rise of smart phones and tablets, when viewing on a computer monitor was the norm, but when I checked how goHOWiE looked on a phone or tablet the different screen layouts certainly didn't suit the original website layout.
With tiny text, tiny pictures and unworkable menus the experience certainly wasn't great, so yet another complete re-coding of the site was in order.
So using the instructions and tutorials available at w3schools.com I, yet again, recoded the entire goHOWiE.com website (now over 1,500 pages) to make the whole site mobile friendly.
It was quite a task, but well worthwhile from the point of view of enhanced user experience.
I just hope that's the end of the re-coding for a few years at least!
All content copyright © Howard Litherland 2009-2017 unless otherwise stated.