Featured Image

Building a website? 20 Minutes.

I'm going to start this article with a little anecdote:

I'm lying in the sun on one of those rare days in the Netherlands where there is sun to be had. Lost in thought my cellphone goes off. It's my "little" brother. Me and my brother usually communicate very minimalistically. The conversation went something like this:

Brother: "Mentor, I need a website for a project the manager is doing in the cinema" Me: "When do you need it?" Brother: "Press release goes out in 15 minutes" Me: "You didn't think of asking me a day in advance?" Brother: "Please?" Me: "Sure, send me a file with some text and check your mail in 15 minutes"

The website was finished 20 minutes later. Do I say this to illustrate how good I am? No, not really. The lesson in this story is that webdesign is not the hard part. It is the content and little changes that take a lot of work. If you are or your client is not too picky, 30 minutes will do for a great looking website. Learning how to build a website is not that hard.

No Programming, Unless you want Deep Level Customisation

In highschool I spent many days messing around with HTML. I never became a real pro, but I know enough to now be able to understand what I need for webdesign (CSS, PHP etc). Don't let the terms freak you out, this stuff is really quite simple. Geeks like me just like throwing around words normal people don't understand.

We will be using an existing framework to build a website, the framework is called wordpress. Wordpress is a CMS, a Content Management System. Look at is as a bare house. Once installed all you have to do is add furniture and wall decorations to make it look good.

There are a number of basic steps to making your webpage:

  1. Get a domain + webhost
  2. Install Wordpress
  3. Install a Theme
  4. Configure the page the way you want

There is of course some nuance but we'll get into that along the way.

Section 1: Getting the Framework up

Get a domain and webhost

A domain name is the postal address of your website. This page's domain name is skillcollector.com. You may forget the details if you with, but a domain points to a physical server somewhere in the world. When you open this website, a physical server in a physical building containing the files that make this website will send those files to your browser. A website therefore builds upon two main components:

  1. A domain name
  2. A server

The service of storing your website on a server is called hosting, or webhosting. Where are some thing to keep in mind when deciding what domain and host to pick.

  • Make sure your Domain is
    1. Relevant to your topic
    2. As simple and short as possible
    3. Easy to remember
    4. Professional
    5. Available

To check if your domain name is available go to the website of any webhost and enter your desired domain name. My favorite host is Hoasted, it's a Dutch company but you can switch the language to English.

  • Webhosting

The webhosting us often the most expensive part of making a website. It however usually costs around 5o Euros per year. So it is not a bankruptcy causing amount. Always make sure your webhost fits your needs. For our purposes it needs:

  • To be able to run Wordpress. Most of them can these days
  • To run cPanel / DirectAdmin with installatron. This basically means you can install wordpress with 1 click.
  • Their service should be good
  • Their servers should be fast and reliable

Again, my favorite is Hoasted, but you can choose any webhost you like as long as they can do the above.

Once you have selected your domain name. Go ahead and order it. Within minutes you will be sent login details to log in to your administration panel.

Some of the Lingo

There is no need to get a major in computer science. But some terms will come in handy. Make sure you keep in mind what these are:

  • FTP

FTP stands for File Transfer Protocol. If you ever want to put a file on your website that won't upload through Wordpress. You will be using this.

  • Backend

The backside of a website. Also called the administrator panel. Your domain will have a backend (for which you receive login details from your webhost). When you install wordpress it will have a separate backend.

  • PHP

Often used programming language. This is usually linked to functional aspects of your website.

  • HTML

The old-school programming language for webdesign. By now it is pretty outdated, but if you understand HTML most other things will make sense too.

  • CSS

The coding language used for design. If you want to change your website payout, or heading text sizes you will probably be using this.

  • MySQL

Wordpress has 2 components. Files on your webserver, and a database containing the information of your site. There is some more nuance, but imaging the files to be the barebone structure, and the database the content.

Installing wordpress

Now that you have your login details, let's install Wordpress, the framework we talked about earlier. The steps are the following:

  • Access the backend

Your webhost will have sent you a url to access your domain's backend. With my host that is yourdomain.com/cpanel. Go ahead and open that url in the browser and log in using the login name and password that they gave you.

  • Find installatron

It may sound like a scifi movie, but installatron is a system that allows you to install website frameworks with 1 click. You will find it on the main page of your domain backend. Find "Installatron Applications Installer" and click on it.

  • Find Wordpress

Installatron will give you a list of available frameworks. You will see names like Joomla, Opencart, Magento, Zendesk and many more. If you want you can play around with these later. At your own risk of course. When you have found Wordpress (it's logo looks like a W), click on it.

  • Install wordpress

You will be given two options. Either to install wordpress or to import it. The import function is used for when you have manually installed or migrated your wordpress to your webhost. It is not meant to import your page from another domain.

Click on "Install this Application". You can leave most settings they way they are. Just make sure that:

  • Path is set to root. Again, geeky words. Root just means the highest folder. On your windows computer your root folder would be C:. On yout webserver it would be yourdomain.com/. To illustrate, yourdomain.com/blog/ is not a root directory. It is below the main domain. yourdomain.com/website/blog/ is two levels under the root level. Make sure your install path (the place where wordpress will be installed) is /. / Meaning yourdomain.com/.
  • Username is something you like
  • Password is something you can remember. You can copy the auto-generated one, but if you forget it you'll be in some trouble
  • Administrator email must be one you have access to.

Don't touch any of the database settings unless you know what you are doing. Even if you knew what you are doing, there is no reason to touch these settings in most cases.

Go ahead and click the install button. You will see installatron do it's magic.

  • Confirm that everything works

It has never happened to me that it didn't, but you should check it anyway. When wordpress is installed you should see a basic blog structure when you open yourdomain.com in your browser.

You should be able to access the Wordpress backend through yourdomain.com/wp-admin. Remember that URL, you will be using it a lot as the site's owner.

Your username and password should give you access to the backend when you log in at yourdomain.com/wp-admin.

Section 2: The Design

Get a great design

In the past this meant a lot of coding. Until some genius thought "hey, why reinvent the wheel?". Templates and themes were born. Wordpress has this functionality included. In essence you can find some great theme design from a theme supplier, and modify it to your needs.

There are a lot of great wordpress theme suppliers. Some of my favorites are:

The above offer premium (paid) templates as well as some free ones. For the download savvy readers, most these are released under a GPL license, meaning you can download and use them without paying as well. You won't get any support from the supplier too.

Personally I found getting a premium theme a great investment, especially since the support will help you out if you accidentally break something in the website design.

Installing a theme

For those who want a more basic, and free design. You can use the built in wordpress theme directory. Go ahead and log into your Wordpress backend. Don't worry about all the buttons and things, they'll make sense very soon. To install a theme a ahead and:

  • Click on "Appearance" in the left bar
  • Click on "Themes"
  • Click on "Install Themes"
  • If you want to use free themes go ahead and search for a nice theme using the page you are seeing right now
  • If you want to use a premium theme, click "upload" to install the file your theme supplier gave you.
  • After installing click on activate theme

Now when you open your webpage you will see a beautifully designed page. You may now open a bottle of champagne and celebrate your awesome webdesign skills. The framework is now complete. Now you have to modify it to your needs.

Configure the Theme / Framework

Often themes will have custom sub-frameworks under them. This all sounds very dramatic, but is really quite nice and structured. In your sidebar you might find an extra menu item after installing your theme, named after your theme. For example if you install the Whitelight theme by Woothemes you will see a menu entry "Whitelight" with the Woothemes logo.

Since I generally use woothemes, I will run through what to configure when you used one of their free or paid themes.

  • Enter a custom logo or text title

Navigate to your theme options as described above. Amongst the theme options you will see "Custom logo". If you want a text logo click "Enable text title". For additional instructions just use the help or question mark buttons.

  • General framework stuff

The tracking code box can be used to install any sort of code in the background, for example google analytics. Also configure your contact email, this will make sure that contact forms actually end up in your mailbox. The "favicon" setting configures the little logo you see next to the page title.

  • If you have a theme with featured panel / slider, put something in it to get an impression of what it looks like

This can be done later if you want your slider to be linked to specific articles or so. A featured panel can be configured under your Theme > Theme settings > Featured Panel. A content slider will have it's own link in the left bar, where you can make separate slides. To make sure images are shown properly set them as featured images in the slides.

  • Configure your Subscribe & Connect module

Under "your theme name" > Theme options > Subscribe & Connect. This module can be shown in your sidebar or under your post. It allows your users to subscribe to your newsletter and relevant social media profiles.

Configure your Design

Now it is time for the details. Well, general details anyway. The nitty gritty is for you to decide. But for the general design you will definitely want to have a look at some things.

  • Widgets

The Wordpress system is based on a system of widgets. When you look at the frontend (opposite of backend, basically means what your visitors see) you will probably notice a sidebar (depending on your theme). This bar might contain your author information, more recent articles or whatever you put in it.

To modify the widgets of a page, click on "Widgets" under the "Appearances" menu item in the backend. On the right you will see a number of available widget locations. Usually these will be something along the lines of:

  • Primary - This is the sidebar on the right/left. Even is the front page doesn't have one, separate articles often will. This is a great place for social media buttons (will go into that later) or subscription modules.

  • Secondary - These are below the primary bar. This structure is often used by Woothemes. The secondary widgets are two widget columns next to each other.

  • Footers - The footer modules are displayed at the bottom of the page. These may be used for links that you want to have on your page but not in plain sight, like the contact page or disclaimers.

  • Find things you want to change

Maybe you don't like the color of the widget titles, or whatever else. Keep in mind that these details are the most annoying to fix. In the beginning try to be happy with the basics, or commit to finding out how to change something. Sometimes a tiny little thing can take hours. Finding out how it works gives a lot of satisfaction though...

Section 3: The Content

Page vs Post

There are two ways to use wordpress:

  • As a dynamic blog

A blog has periodic updates. It will thus have some sort of way of presenting recent articles on the front/main page (the page you see when going to yourdomain.com).

  • As a static website

This is what most companies use for online presentation. It consists of some set pages with content that does not change. When using wordpress they will have it configured to show static content on the frontpage.

There are two different types of content in wordpress. One is called a page, and one is called a post. The difference is really quite simple:

  • Pages are used on static places and stand alone
  • Posts are published in your blog stream

Consequently pages will not have categories or tags. Pages are used for things like a contact page, or "about this website" texts. Usually your page will use both. But be aware of the difference. You can add both types of content in the menu bar.

Put in the content

This is where things become interesting. The framework of a site is 1, actually putting on stuff people want to see is 2. Now blogging is an art that deserves books, not short paragraphs in a web design article. So sorry guys, this one you're going to have to do yourself. I'll give you some tips though.

If you want dummy content on your page to see how it looks, try using lorem ipsum. It is a text that means pretty much nothing, but looks like it is an actual language. Here is an example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar sem ac turpis consectetur accumsan. Mauris bibendum suscipit est, ac volutpat nulla sagittis a. Vivamus placerat leo vel nisl dignissim mollis. Donec massa ligula, consequat eget scelerisque sit amet, sollicitudin vitae urna. Cras pretium adipiscing enim ut aliquam. Proin sem massa, faucibus ut cursus sit amet, imperdiet in metus. Maecenas euismod est non nibh pretium non aliquet libero pharetra. Mauris tempor augue euismod enim ornare ut dapibus mauris egestas.

I generally use this when someone asks for a website, but has no content yet. Keep in mind that a page looks very different empty from populated. You can get lorem ipsum texts here.

Things to keep in mind while writing articles on your website:

  • Always have a title

Seems obvious, but a missing or miswritten title looks very crappy on any page. Make sure the title is relevant, simple and understandable.

  • Make the body of the text easy to read for people and machines

People and Google are starting to like the same things. A text should have headings, structure and easy to use language. This makes you more appealing for people, as well as search engines.

  • Put your posts in categories

This serves multiple purposes. For one it becomes clearer what an article is about. In addition is makes finding similar articles on your blog easier to find. As a bonus Google likes it when you like content internally.

  • Use tags

Not because they look fancy, but for reason similar to categories. Tags are more flexible though.

  • Set a featured image

A featured image is what visual input Wordpress links to your article. It will not be visible in the article itself, but if the article is featured on the main page, this image will be used to represent it. Always set one.