skip

Planning your website: Thinking it through

Consider the following when planning your website:

 

Goals: What do you want to accomplish?

Take a few moments to think about what you want to do with your website. One goal most faculty have is to communicate the following:

o   About Me: Personal introduction and select details on professional and/or personal history

o   Research Activities: Overview of and links to current and past research and projects

o   Teaching Activities: Overview of current and past classes and approach to teaching

 

Visitors: Who will visit your website?

Adjust the content and tone of your website for your visitors by answering the following questions:

o   Why do you want people to visit your website?

o   What information will your visitors expect?

o   What essential information do you want your visitors to have?

o   What levels knowledge, expertise, or interests will your visitors bring?

 

Layout and Design: How do I want my website to look?

These general rules will help you plan a simple yet attractive website:

o   Be consistent: Format all graphic elements, fonts, typefaces, sizes, headings, and footers consistently.

o   Use readable font: Use easy to read fonts like Verdana, Arial, or Helvetica, 12 or 14 pt font sizes and no more than two different fonts.

o   Limit use of color: Choose two or three well-balanced colors.

o   Limit use and size of images: Add visual interest with a few appropriately sized images; however too many images can be distracting.

o   Limit text length: Keep lines of text to under 20 words and limit vertical page scrolling.

 

Website Content: What will I put on my website?

Good rules for writing and choosing your website content are:

o   Write less rather than more: Use concise text to achieve your goals and address your visitors’ needs.

o   Focus your content: Limit each paragraph to one idea. Try to limit each page to one screen.

o   Use descriptive titles, headings and sub-headings: This will break up page content and help visitors locate information.

o   Easier to scan

o   Less intimidating

o   Usually more succinct

o   Use open space: Open or empty space makes your site feel accessible. Don’t fill pages with solid blocks of text or images.

o   Create viewable documents and files: Convert any downloadable files to PDF (Portable Document Format). Free conversion programs are listed in the Image & File Tools section.

o   Use lists rather than sentences when possible: Lists are preferable to paragraphs because they are:

 

Navigation: How will visitors move around my website?

Build a simple and intuitive navigation system around your website goals and visitor needs while keeping in mind the following:

o   Limit the depth of your site: Keep all content within three clicks of the main page whenever possible.

o   Use brief but descriptive navigation menu titles: This allows for quick access to content.

o   Make navigation stand out: Make navigation menus the most prominent elements on your pages so visitors can easily find them.

o   Identify location: Use page titles, headings, or sub-headings that match your navigation menus.

o   Limit number of navigation menu options: Use only 6 or 7 menu options. Consider combining content on your pages and using headings and subheadings to help organize the content.

 

Graphics: How can I add graphics to my website?

Treat graphics as accents to a page and be mindful of the following:

  • Use images with small file sizes: Images under 200kb are most appropriate for web pages. Free applications for editing file sizes are in the Image & File Tools section.
  • Crop and edit images: To edit an image, use the free tools in the Image & File Tools section rather than tools built into the webpage building software.
  • Resources for images: Images drawn from the internet and other sources may require copyright permissions. The university offers two sources for finding copyright-free images

Free Stuff: Multimedia Toolbox

University Communications Photo Database.

You can review the libraries resource:How do I find images?

Try searching the web for “Royalty Free” images or “Creative Commons License” images.

Other image considerations:

·  Use the JPEG format for photographs.

·  Use the GIF or PNG formats for line drawings, maps, graphs, or other non-photographic art

Identity and Copyright: What should I know?

The university has guidelines for both the appearance of websites and the use of copyrighted material. Use the following resources to address these topics:

  • UCB Web Publishing Policy: Considerations for designing a website that accurately represents the University of Colorado’s mission.
  • Web Identity Standards: Layout and design standards that promote the brand of the university as well as links to common university resources.
  • UCB Copyright Office: Help with concerns about using copyrighted works and resources, including your own published works.

Top

Where will my website be located? – Hosting

A web host is a place where your website is uploaded, stored, and made viewable to visitors on the Internet. Some basic options for website hosting are:

Department Server Host

Some departments host their own departmental and faculty websites. Contact your departmental web coordinator to obtain the following information:

1.            Department server name and location (path) of your personal space on the server

2.            Your username name and password

ITS Server Host

ITS hosts websites for students, staff, and faculty on its Spot server (spot.colorado.edu) and allows 25MB of space for faculty. Call 5-HELP to request an account. Also obtain the following information:

1.                Spot username and password

2.                Directory path to your Spot account

Ex. http://www.colorado.edu/oit/identikey

Other Third Party Hosts

There are also private sector options for website hosting. Some of the most popular and least expensive are:

Bluehost | Dreamhost

Bluehost ($6.95/month) and Dreamhost ($8.95/month) offer similar services including choice of domain name, unlimited storage space, and FTP/SFTP file transfer.

Google Sites

Google will host a free site with 100MB storage space. Google provides simple webpage building software that includes templates.

WordPress

WordPress is a free blog service that allows 3GB of storage space and the ability to create multiple pages, much like a typical website.

Top

What program should I use to build my website? – Website Building Programs

The following are some popular website building programs ranging in complexity, capability, cost, and platform. If you need help determining the best program for your needs, contact TLCs. The tools below are listed from most basic to more advanced.

Cross-platform (Windows and Mac):

Windows PC only:

Mac only:

 iWeb

 Rapidweaver

 Freeway

Top

Image & File Tools

Image Resizing:

Image Editing:

Portable Document Format (PDF) Conversion for Viewability:

 Cute PDF

 Primo PDF

Top

How do I get my site onto my host and on the web? – Publishing

When your website is ready, you will need to move your website files to your host using a File Transfer Protocol (FTP) application. Below is a list of programs you can use:

Windows PC only: SSH Secure Shell (ITS)

Mac only: Fetch (ITS) or Cyberduck

Alternative Cross-platform: Filezilla

Top

What do I do now that my site is published? – Maintaining Your Website

After publishing your website, update it regularly with the most current details on your projects, teaching, and other information. Also, keep these tips in mind:

o   Record your login information: Keep your username and password information in a secure but easy to remember place for later use.

o   Assign responsibility for updates: Assign someone the responsibility to update your website and make sure they can access your web files and login information.

o   Revisit and Review: Visit your own website regularly and review its content to be sure that its content and materials are current and accurate.

Top

Contact Teaching and Learning Consultants

If you need help designing, building, and publishing your site, please contact ASSETT TLCs.

Amanda McAndrew

amanda.mcandrew@colorado.edu

303-735-5057

Office: HUMN 1B25

Andy Saltarelli

Andrew.Saltarelli@colorado.edu

303-735-5615

Office: HUMN 1B25

Nigora Azimova

Nigora.Azimova@colorado.edu

303-492-0431

HUMN 1B25

Top

Tutorials & Training:

The following is a list of links to tutorials and training to help you build your website:

Top

Faculty Website Examples

Below are websites built by CU Faculty that represent good overall web design. Use these examples to help you generate ideas for your own website.

·               Example 1

·               Example 2

·               Example 3

·               Example 4

·               Example 5

·               Example 6

Top

Templates

For help using these templates, see our  Step-by-Step Directions for Using the Academic Website Templates page. Please note that these templates are for faculty use only. If you are interested in redesigning your department’s website, please contact our ASSETT web team at assettweb@colorado.edu.

Click on an image to download a compressed zip file of that template:

Template 7

Template 6

Template 5

Template 4

Template 3

Template 2

Template 1


Click on an image to download a compressed zip file of a template with new CU branding:

TemplateCU1

TemplateCU2

TemplateCU3

TemplateCU4

TemplateCU5

TemplateCU6

TemplateCU7
Top

 

 

Glossary

 

Blog – Blog is short for Web Log, which refers to a personal journal published on the web. Many novice website builders adapt the simple software used by bloggers to help them build websites that even include Web 2.0 technologies.

Domain Name – This is the first part of an Internet address or URL. It is typically the name of the host/server or the name of the person or organization owning the web page. The domain name typically gives you some information about the owner. For example, Colorado.edu is a domain name where Colorado is the name of a server and the suffix signifies that it is an educational institution.

FTP/SFTP – These are two acronyms for File Transfer Protocol/Secure File Transfer Protocol. This refers to the method used to transfer files between computer or to your website’s hosting service. SFTP uses SSH (see below) to encrypt files during the transfer.

Hosting – A host is a server which holds your website and makes it available on the World Wide Web. You must identify a server to host your website before it can be viewed on the Internet.

HTML – This is an acronym for Hyper Text Markup Language. HTML and refers to the code (or language) that is translated by web browsers into a viewable form. You do not necessarily have to learn HTML to build websites.

Publishing – When you are building your website, the files will be saved on your local computer and not yet visible on the Internet. FTP is the process of uploading your website files to your host’s web server. Using the FTP software and your username and password, you will log in to your host’s server and upload, or publish, your files to the server. Once on your host’s server, people on the Internet will be able to visit your website.

Server – The Server is similar to a publisher in the print world. Once you upload your files and images to the server, they will be viewable on the World Wide Web. Another way to think about a server is as an intermediary computer between your computer and someone visiting your page. The terms host and server are often used to mean the same thing.

SSH – SSH is short for Secure Shell. It is a set of rules for a network that allow for a secure way to transfer files as referred to in SFTP.

URL – Uniform Resource Locator, the Internet address assigned to your page, made up of the domain name, folder and file names. A URL can be dissected as such:

http://www.cusys.edu/newsletter/2009/11-18/christmascarol.html

·               cusys = server name

·               .edu = type of organization

·               newsletter = folder on the server

·               2009 = folder inside the newsletter folder

·               11-18 = folder inside the 2009 folder

·               christmascarol = name of an html file inside the 11-18 folder

Webpage – A single page within a website.

Website – A collection of web pages.