31
KARA NTUMY AWESOME WEBSITES WITHOUT MASTERING A CODING LANGUAGE INTRO TO DESIGNING

Intro to Designing Awesome Websites

Embed Size (px)

Citation preview

KARA NTUMY

AWESOME WEBSITES

WITHOUT MASTERING A CODING LANGUAGE

INTRO TO DESIGNING

Hi, I’m Kara.Founder @ Digita Design

@iamkarasmatik

Agenda

The Secret to Nabbing the Best Domain & Host1

The Rough Road and the Easy Road to WordPress2

X Marks the Spot: WordPress Theme Park3

Keep an eye out for the yellow keys throughout the deck as these will point out some expert tips!

\Thanks to the introduction of web-based tools such as WordPress and SquareSpace, the

barrier to building websites has been lowered! Like most things, you start with the purpose.

I want to build a website - but where do I start?

Firstly, ask yourself,

“What will this website help me do?”

\Once you have your idea - the purpose of the website - you’re ready to start gathering the

tools required to build an awesome website!

I want to build a website - but where do I start?

And by familiarising yourself with a CMS - a Content Management System - you will be

able to build and design a website that can serve as a blog, a CV, or a business marketing tool.

\This is just a fancy way of describing a computer system (or application) that commonly

exists on the Internet and supports the creation and modification of digital content, via a

user interface.

What is a Content Management System?

Using one of these, I will show you how to build and tweak the website for nearly any

purpose! But how, you ask?!

“Magic.”

Here’s your treasure map!

Domain - your website’s address (ie. www.mywebsite.com)

Hosting - the place your website will live

WordPress - the CMS your website will be built on

Theme - your website’s “skin” or design style, and basic functions

Plugins - extra add-ons that can power up your website

This is a list of the elements of building a CMS-based website - but don’t worry, we’ll go through them one-by-one:

The Secret to Nabbing the Best Domain & Host

1

\

Creating a good website address (domain

name) isn't as simple as using a business name

or stringing together a few words to describe

your product/service. A web address is one of

the determining factors for whether your

website gets found or not - so you should

spend some time carefully picking a good web

domain.

Creating a good website address

There are two parts to this hunt for the best domain:

1. Researching your keywords, and

2. Checking your domain's availability.

Try and get into the mind of your potential customers; you want to foresee what types of words they will be typing into their search engines to find you. If you choose the best domain, something we refer to as a "keyword rich domain name", then you would pop up in their results - as early in the list as possible.

The goal, is to find a web domain name that is suitable, easily findable and maybe even memorable (and available!) for your website.

\Keyword research is important to quickly rank in the first few spots on page one of any search engine. If you are looking to design a personal blog, or a website for family occasions - or anything that isn't supposed to generate income - then this may not be as important. If, however, your aim is to direct a ton of traffic to your website, this is of great importance!

Keywords are simply words that someone would typically type into a search box in their browser when they are looking for something online. Depending on the niche of your website (the area of interest, like fashion or sports), our research will allow us to know which words people are typing in order to decide which words or phrases we should use for our domain name.

Researching your keywords

Before you begin researching, spend 10 minutes checking out Google’s tips for building the best keyword list - it’s very useful!

\

There are a lot of tools online you can use for your keyword research; two of the most popular free ones are offered by Google:

1. The Google website, and

2. The Google Keyword Planner

The Google Keyword Planner

You will have to create a Google Adword account first (or use your existing Google account), and once you do it's super easy to get searching!

Although the Keyword Planner is geared towards finding keywords for online marketing campaigns, it's a great tool to use to come up with a domain name. You can search for words or phrases that are relevant to your product or service, or different niches/product categories.

When searching words or phrases you want to focus on getting higher numbers in the Average Monthly Searches column - the higher the better, to prove that your word or phrase being searched many times. Pay special attention to the suggestions the tool makes for keywords that are similar to yours but have a higher amount of monthly searches.

\

On the other hand, when using the Google search engine as a research tool, the opposite is true; the lower the search results, the better. Simply type your keyword or phrase into the Google search box and click enter. The search results page will always tell you how many results were found - this is the figure you want to be low, to give you better chances of a higher ranking.

The Google Search Engine

Keep a list of potential domain names so that you can see which ones work best (highest ave. monthly searches), and in case you need alternatives!

Checking domain availabilityOnce you've gathered a list of potential domain names, it's time for the fun part: checking availability! This is where you use an online domain checker to see whether your favourite domain is available - or whether it's been snatched by an evil domain hoarder!

There are a number of ways you can go about this, one of which is searching for "domain checker" or "domain register" in Google and select one of the many websites that offer this (I like to use WhoIs.com sometimes).

\

Choosing a good web hostSo you've completed your keyword research and you finally have your web domain name picked out! GO YOU! The next piece of the puzzle is to decide where your website is going to live - or in webspeak, where your website is going to be hosted. This may seem as easy as going to Google and typing in "web hosting services", but with the vast number of services out there, how do you select a good one? The task is essentially like picking someone out in a busy train station.

A lot of the hosting companies that pop up first in the search results may simply be well-known, but not particularly good - and the sites that claim to list the "top 10 web hosting companies" may be listing companies they will make commission off.

So what to do?!

A number of good web hosts now offer a free domain when you purchase a hosting solution - it’s much easier to purchase such a package

A good place to start is to find a relevant forum (a topic-based chat site) where you can ask members what their favourite web hosting site is, and why. Something to note with choosing any web hosting service is that you can always change services and migrate your website to another company if you need to. Even though this is the case, if you can choose a good one from the beginning, you can save yourself a lot of time.

After selecting your web host, navigate to their website and have a look at the different hosting packages they offer. If they have a online customer representative available on chat, you can query them to find the most suitable package for your website. Another name for this is “cloud hosting”, so don’t be confused if you hear this term - it simply means virtual hosting. You will be looking for a package that allows you to host your single website and even includes a free domain as part of the purchase. By purchasing the domain and hosting solution from the same company, not only do you save money, but you also you save time by not having to configure your web address to work with your web host.

The Easy Road and the Easier Road to WordPress

2

\

The Easy Road to WordPressManually installing the WordPress platform is the slightly lengthier method - but it’s still quite easy! To do this, you will need (in addition to your web browser and access to your host server):

A text editor, and An FTP client (or program) such FileZilla.

If you are lucky, your hosting solution will provide an FTP client built into your hosting account - so you won’t need FileZilla. You should also have handy all of the FTP details emailed to you when you purchased your hosting solution; more specifically, this will be a username, password, and a FTP host.

\

The first step involves downloading the most current version of WordPress in zip format - you can do this here - and unzipping the package.

The second step involves creating a MySQL database within your hosting account (I demonstrate this in my webinar, but you can ask your web host for help). Give this database a name, and a user, and finally assign user to the database.

Take note of the database name and user name here - you might want to keep this window open - this will be needed in the next step

1 2

Locate the wp-config-sample.php file within the unzipped WordPress package and rename it to wp-config.php.

Now, you want to add in your database name, and user name, as well as the password and database host used when you created the database (usually “localhost") - and save the file. The file should have something that looks like this:

3

Once the file is ready, using your FTP details, log into your FTP client and upload the WordPress files to your web server. Be sure to upload them to the "root" (the home folder in your file manager, http://example.com).

4

Finally, run the WordPress installation script by accessing the URL you installed it on in a browser -

this should be where you installed the WordPress files. If you installed WordPress in the root directory, type

http://example.com in a browser; if you installed it in a subdirectory called Blog, then type http://

example.com/blog. That's it! The site will load correctly with no errors if you installed it correctly.

5

\

The Easier Road to WordPressThis method is the easier and quicker of the two, and this is generally an option provided by most hosting companies - so you will only need access to your hosting account.

This method involves selecting the WordPress platform from the list of Web Applications in your hosting account, and installing this directly onto one of your servers - that's pretty much it! You will have the chance to do a few things before the installation is complete: the title and domain you want to attach to the site, your login details for the WordPress admin site, and whether you want to automatically update to newer versions of WordPress (totally recommended!). Once, you're happy with all of these details, voila! You've installed your WordPress site!

3X Marks the Spot: WordPress Theme

Park

\

When it comes to customising

WordPress, the sky is the limit!

With thousands of templates

available, you can tailor the

look-and-feel of your site

no matter what the

purpose is.

One of the most popular theme

sites (read: WordPress Theme

Parks) is ThemeForest. Take

your time to browse and

compare the themes -

before settling on

one - there’s no

refunds!

Installing WordPress templatesTo install a theme, firstly navigate to

Appearance > Themes on the left-

hand column menu.

Then, hover your mouse over the

theme of choice, click on Activate,

and voila!

\

If you’ve made it this far, then

congratulations! You’ve configured your

domain with your web host, installed your

WordPress site, and found your perfect

theme (read: buried treasure). The treasure

hunt is over!

The next step (covered in the next deck) is

theme customisation, and depending

on how particular about the look-and-feel

of your site, the longer this can take. This

is why it helps to choose a theme that looks

as close to your vision as possible.

There is usually a ReadMe (.html) file in the theme’s folder which describes the basics to customising the different parts of that theme

Once your theme has been customised to your liking, and you’ve tested your website, you

just might be ready to launch!

AWESOME WEBSITE

Of course, there are tweaks you can do to improve searchability (e.g. Search

Engine Optimisation), and functionality (e.g. plugins and widgets) - and these are covered in

the following decks - but for now, give yourself a pat on the back; you’ve completed the first

part to designing an

Thank You!If you enjoyed this deck, please share the love.

Click to tweet!

@Iamkarasmatik