Building a Website Takes Planning

Building a website takes planning.

You should have a good idea of your website’s purpose and design before you ever go online. Here are some questions to consider:

• Why do you want a website?
  
• To run a business or make money
• To gain wider exposure as an artist
• To help run or gain exposure for an organization
• To help friends and family keep up with you in one place
• To share thoughts or experiences about a subject
• Something else?

• Knowing the previous answer, who will most likely be using your website?
  
• Friends and family
• Children
• Adults interested in a particular subject
• Adults interested in a particular service
• Companies or organizations

• With this information, you can begin to think about design.
  
• What information is most important to display up front?
• How simple does your website need to be?

You might draw on a piece of paper what you’d like the site to look like, so you’ll have ideas for design when you get to the construction phase. If your site will have many pages, a flowchart like the one below might also be helpful.

This example flowchart represents a website where four links show on the homepage, “Home,” “About me,” “Portfolio” and “Contact.” When a user opens the Portfolio page, or perhaps when they hover their mouse over the button for it, they will see subpages called “Book Covers,” “Paintings,” and “Digital Photography,” and so on.

Now that you have an idea of what you want your site to look like, there are a few different options open to you.

• A full website
• This is what our class will focus on. It is the largest and most complex of the three options.
• Can be interactive or informational, with many pages to work with and few limits on how you can use it to interact with the public
• It is also the most work to create.

• A Nameplate Website
• This type of website is only one page (the homepage). It is like a business card that can be accessed from anywhere. It gives a little information about you or your company, and how to contact you. You might also consolidate social media links here.

• A Blog
• A blog is different from a website in that you continue to post material regularly. People use blogs to share ongoing experiences, write essays concerning specific topics, or share pieces of work as they create them. Public users have the option to “follow” the blog, meaning that they will be notified by email when you post new material.
• Companies will often keep a blog in addition to their website, to keep customers up to date with daily or weekly news.
• Some blog services do allow for a static front page, so that it can be made to look like a website.
• This type is the easiest to create, but the most work to maintain

The Different Parts of a Website:

Homepage: The page that comes up when someone types in the address to your website.

Pages: Your website may have a menu, where each item links to a different page, such as an “About us” page or a “Contact” page. All these pages are collectively known as the website.

Domain Name: The part of your web address between the “www” and the “.com”. In “lexpublib” is the library’s domain name. You will choose your domain name, and it will act as the unique identifier that takes the viewer to your website. As such, you must choose a domain name that is not already in use on another website.

Layout: How the elements of your website are arranged. You can see some of these elements below.Your website may have all or just some of these elements.
Page Background: A color or image that appears behind all the other parts of the site.

Header: An area at the top of the site where you can include important, up front information, like your name, your business’s name, or a logo.

Info bar, or sub-header: A small area underneath the header for a slogan or a line of additional information. You may also put your navigation menu here.

Left and Right Panels: Areas to the right or left of your content. There you could include your navigation menu, links, advertisements, feeds from a blog or other site, social media buttons, etc.

Main Panel: This is where you put your main content for visitors to read. You can add text, images, links, videos or any other type of content here. This area may have its own header and footer.

Page Footer: A small area at the bottom of the entire site. You might put copyright information here, less commonly used links, or other information that isn’t as important to most people viewing your site. Sometimes, your webhost will include a link to their site here.

Scary Terminology You Might Run Into…It’s Okay!

Bandwidth: How fast information can be transferred between your website and the rest of the internet

Data Transfer Per Month: How much information is allowed to be transferred between your website and the rest of the internet

What you need to know: The above terms are often used interchangeably. Almost 80 percent of websites use less than 5 GB of Data Transfer per month. Unless you are planning a website that’s going to have thousands of visitors every day, 5 GB will be enough, and almost every web host offers at least that much.

CSS: The code used to create your website’s layout and style. It stands for Cascading Style Sheet.

HTML: The code used to add content to your website. It stands for Hyper Text Markup Language.

What you need to know: The webhost does this for you. The theme you choose has files of code behind it. When you move elements of the site around, it changes the code automatically. You do not ever need to see the code.

Okay, I know what my website is for and generally how I want it to look. What’s the first step?

Find a webhosting service.

• A webhost provides you space on the internet for your site.
• There are many to choose from. Some are very simple to use, but more limiting in your website’s design and function. Others are more customizable, but more complicated.
• They all have different prices and packages depending on what kind of site you want.
• For example, you might have to pay more if you want an e-commerce option. You need this if you want to sell items or take payments on your site. If you’re not selling anything, you don’t need e-commerce.
• Also, don’t pay more for higher Data transfer per month if you don’t need it!
• For this class we will use but we have provided a list of others at the end of this hand out.
• When choosing a webhost service, I always recommend that you do your own research! The best way to do this is look up reviews others have written about the service through google. At google.com, search for “weebly.com reviews,” replacing weebly.com with the name of whichever service you are considering.
• Alternatively, you can use google to search for “webhosting service reviews” to find lists of many services, with reviews for each, all in one place. This is helpful if you don’t have a specific service in mind.
• Remember, even if a service has good reviews, go to their website and see what their packages consist of and how much they cost! There is no sense in spending more money for a bigger package if the extra benefits are not things you need for your particular site.

In Class Exercise: Build a Website with Weebly.com

Once you sign up, you’ll see a screen like this. Weebly is asking you to choose a theme for your website. A theme determines the overall look and feel of the website. Don’t worry, you can change this anytime!

Try to choose your theme based on its layout, like the position of menus, images, and text. Colors and fonts can often be edited later.

For now, choose the first theme.

Once you pick a theme, a window will pop up that gives you three options.

For now, we’ll select the first option, “Use a subdomain of weebly.com.” This means that your address, whatever domain name you choose, will read This is free to you because Weebly is getting to advertise by letting people know they made your website. You can always select the second option if you wish to buy a domain name that doesn’t include “weebly.” Or, if you already own a domain name, you can select the third option.

Once you have typed in the domain name of your choice, and it has been accepted, click continue. You’ll then see a screen like this:

For now we will skip the video, but at home it may help give you some basic information before moving on. “Plan my site” is another tool offered by Weebly to help you get an idea of your website’s design and function before you even start putting it together. For now, we want to click “Build my site.”

This screen will look slightly different depending on the chosen theme. Still, some things are the same. On the left you have your elements. Different items that you can click and drag onto your website. You might notice that some of these won’t work for a free plan.

You’ll also notice some tabs along the top.

Build is where you will add content to the page you’re currently viewing

Design is where you will change colors, fonts, or your theme.

Pages is where you will add more pages to your website, or switch between pages to edit them.

Settings is where you’ll go to edit some of the more administrative parts of your website, like your domain name, your website’s title, privacy settings, etc.

In the top left corner, where it says “Free” there is a drop down arrow. Go here to compare plans or upgrade to a more expensive plan in order to get more features.

In the top right corner, to the left of the button that says “publish” is a toggle to switch from “Desktop view” to “Mobile view.” Clicking “mobile view” will show how your website will appear on a mobile phone, like an iPhone.

When you are finished and want to make your website available to the public, click Publish!

KEEP IN MIND:

• Putting a website out on the internet doesn’t mean people will automatically find it. There are billions of websites out there. To get your website the attention it deserves, I recommend doing research on advertising, Search Engine Optimization, and other ways to promote your website to the public. It takes a lot of work to get a website on its feet and easily accessible to the public.
• Another way to help people find your website is to also have a presence on social media sites, like facebook or twitter, and link the two together.
• If you plan to make sales on your website, also do research on e-commerce security. The last thing you want is for someone to hack your website and get a customer’s credit card number!

Recommended Web Hosting Services: These are just a few…there are literally thousands of web hosts out there, so feel free to do your own research!

If you want cheap, simple, user-friendly, but more limited in abilities:

If you want it to be simple to use, but contain more features:

If you want lots of features and are willing to sacrifice user-friendliness:

If you only want to make a Nameplate Site, you might check out these services:

If you would like to make a blog, check out these blogging services:

• service can be intimidating for users new to the internet, but it has lots of options for customizing.
• This service is easy to use, but owned by google, so you’ll have to have a google account.
• This is a unique form of blogging called Micro-blogging. Posts tend to be shorter, and it is easy to “reblog” things from other tumblr blogs. It’s kind of a cross between a blog and a social media site.
• This site makes blogging and design easy, but it costs money where as the three above are free to start.

Additional Resources:

Don’t Fear the Internet:
Who is Hosting This?
Getting a Domain Name and Putting Up a Website:

Self-Evaluation

Evaluate your understanding of the following concepts and tasks. Please ask the instructor if anything is unclear

1