This tutorial is based on a project I did in college for my “Web Development” course. I wrote the original document that this tutorial is based on, about 2 years ago, it totalled a whopping 63 pages of text and source code and took about two months to finish. If you see mentions to a “customer” it’s because each project had a virtual customer, played by the teacher, that would give feedback on different steps of the process.
Back then web development was very new to me, I only had a few sites under my belt, most of which were static or at best modified versions of WordPress themes.
Some of the code and techniques presented here might not be up to date or there might be better ways of achieving the same result. I’m always open to sugestions on how to improve my code so if you think you can help, please don’t hesitate to contact me.
Building the basic HTML document
In order to meet my customer’s demands, I needed to design the website from scratch. None of the templates found online were suitable for the site I was designing. Instead I started with an empty html document and made sure along the way that the HTML code that I wrote was compatible with the XHTML 1.0 standard and optimized for SEO.
I started out with a basic HTML document, formatted for XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> ... </body> </html>
This basic document provides a strong starting point for my website and is used as the basis for all the pages on the site.
The first part also known as the doctype
<!DOCTYPE html…> is responsible for letting the browser know how to display the current page and what set of standards to follow. If no doctype were present there would be major differences between how a page looks in one browser and how it would look in another.
Another very important part of the document is the charset
<meta… charset=utf-8"/>. This html tag is placed in the document head and will inform the browser on what type of characters are present in the current document. UTF-8 is the most widely used online and provides support for most common characters. However, there is another popular standard, ANSI that may cause problems as some ANSI characters aren’t supported by UTF-8. If you’re using a text editor to write HTML, make sure that you save your files with UTF-8 encoding.
The last part I want to mention here is the title HTML tag
<title>…</title>. This tag informs the browser on what it should display on the title bar and is very important for both SEO and users as both search engines and site visitors can differentiate between pages by looking at the title tag.
Creating a working design
The next step in creating the website was coming up with a working design. Creating a website design from scratch can be a very challenging task. In addition to making the website look nice, it also must provide an easy to use interface for the users. Some traits that this interface needs to exhibit would be:
- It should be easy to use and navigate
- It should be easy to learn
- It should be intuitive and consistent
- There should be no errors, glitches or other problems
- It should be efficient and functional
These 5 traits are found in every successful design. They’re also the reason that designers exist, because anyone can come up with a design but only a professional can make one that actually works.
The customer asked for a way to display all of the shop’s products on the main page. This presented a challenge as the store had a lot of products and creating a very long page wouldn’t be very appealing to customers. I decided to try and find some middle ground between the principles of good design listed above and my customer’s demands.
After multiple tries I came up with a final design that grouped all of the site’s categories into 4 major parent categories. These parent categories would correspond to 4 columns on the main page.
Rather than cramming a lot of items into the limited space, my design has large pictures of the items in the store followed by 4 or 5 key traits for that item, an order button and a message button that allows customers to ask for more detailed information on the item.
This way, items in each of the 4 major categories show up on the main page and users can browse through them. The top part of each column plays a double role; it’s also a menu that allows users to specify what subcategory they want to browse through.
Having satisfied the customer’s demands I initially decided to add similar product columns to every page of the site. The idea was that no matter what page a customer was browsing, he could instantly get information on what items are available for purchase.
While it seemed a good idea at first it soon became apparent that this would only confuse the customer and this feature was later dropped.
The color scheme that I chose for the site relies heavily on blue contrasted by a combination of red an orange. Blue is used because it symbolizes trustworthiness and reliability. Red and orange were used because they stand out easily on a white background, that’s why they’re used to indicate product prices, sales and links.
Another important part of the design is the image carousel at the top of the page. This was added because pages were too static and I wanted to have something to separate the main menu from the category columns.
Other design elements
Several other minor design elements were added to improve the site’s functionality and usability. The most important one of them is the footer.
Rather than going for a classic small footer with copyright information, I decided to give the footer a more important role. I added a contact form, contact information, links to other sites that the client owns and even a social plugin for Facebook that links to a Facebook page made especially for this website.