Marketing for Libraries Logo

Web Design and Development

Learning Objectives
• Define and provide examples of online website builders.
• Define and provide examples of content management systems.
• Define and provide examples of web development software.
• Describe the use of text editors to create HTML, CSS, and XML files.
• Evaluate websites based on content, design, and technical elements.
• Define HTML, CSS, and interface design.
• Define web accessibility and provide practical examples.
• Identify a web accessibility tool to check for web accessibility.
• Define web usability and discuss examples.
• Define web validation and provide practical examples.
• Troubleshoot common HTML and CSS errors.
• Define XML and related standards.
• Describe the need for website maintenance.
• Define web analytics and describe website use statistics.
• Define file transfer, provide examples of tools, and describe examples of use.
• Apply knowledge of programming to solve problems.
• Conduct usability testing on digital systems.

Web-based resources have become a substantial part of today’s libraries.

As such, library and information science professionals spend substantial efforts on web design and development activities.

While web design will be a primary task of some librarians, it will be a secondary concern to others. Either way, all professionals need basic skills.

Librarians may use online website builders, content management systems, or web development software to produce web-based content.

Online Website Builders

builderWebsite builders provide tools for creating and storing websites without coding skills.

Many free and subscription services use templates and authoring tools to help automate the process of creating web pages. The following websites provide a free option.

The advantage of these services is that no coding skills are required. However these free services are limited in terms of flexibility, power, and storage capacity. Some of these services provide the option to edit HTML and CSS documents. With a subscription, it’s possible to redirect to your own domain name.

Content Management Systems

Content Management Systems (CMS) are computer programs that allow users to create, edit, and publish web-based content from a central interface. These systems promote a collaborative approach to website content creation by allowing multiple users to access and edit levels of content. Many large corporate and library websites use this approach to web-based content. Although the system doesn’t require a knowledge of coding, it’s helpful to adapting the CMS to fit the needs of a particular organization.

Drupal is a free, open source content-management system that contains tools for a wide range of activities including blogs and forums. Many libraries are using this software as their website platform.

WordPress is an example of a free, open source content-management system often used by bloggers, but it also has excellent tools for both dynamic and static web pages. This software can be installed on any web server.

LibGuides is a content management system often used by libraries to produce subject guides, however it’s increasingly being used for library websites.

Collaboration is increasingly important in website design. Tools like content management systems provide built-in levels of access for both experienced and novice web designers to work together on website construction.

Web Development Software

Web development software like Adobe Dreamweaver allows designers to build, test, and debug code. Users can generally view both code and design versions of the page. A knowledge of HTML and CSS is necessary to make effective use of web development tools.

To make use of these pages, users must have access to a web server where these pages can be uploaded using an FTP client. Many libraries purchase a subscription to a web hosting service through an international service such as DreamHost, Hostgator, and Network Solutions. Others use their local service provider.

Try It!
Download Adobe Dreamweaver as part of the Adobe Suite from IUware. Create a page.

course page

Approaches to Web Design

Website builders, content management systems, and web development software can all be used for producing web pages.

You don’t need a specialty tool to create raw HTML, CSS, or XML documents. A simple text editor works fine.

In Windows, use the text editor NotePad found in the Accessories directory.
In a Mac, use the text editor TextEdit found in the Applications Folder (see below).

Although most word processors and page layout programs also allow users to export documents as web pages, they don't have the tools and flexibility needed for high-quality web design.

doc

Library Website Evaluation

As you explore library websites look at how they communicate with their users. What kinds of physical and virtual spaces do they provide for library users? How many different ways could you connect with this library? Look for live chat, email, phone, RSS feeds, email, twitter, flickr, facebook and more.

Explore the following libraries:

Evaluate library websites based on content, design, and technical elements.

content

Evaluation: Overall

mobileWhen evaluating websites, consider the environment used for the evaluation.

Evaluation: Content

When evaluating websites, consider the effectiveness, efficiency, and appeal of the site in terms of content.

Evaluation: Design

When evaluating websites, consider the effectiveness, efficiency, and appeal of the site in terms of design aspects.

Evauation: Technical

When evaluating websites, consider the effectiveness, efficiency, and appeal of the site in terms of technical aspects.

Markup Languages

markupA markup language is used to annotate a document so that it can be read by software. Rather than giving a computer a task to do like a scripting language, markup language tells the computer how to interpret something.

HTML is probably the best known markup language because it’s used to create documents that are read by web browsers.

XML has become a very important language with a variety of applications including creating RSS feeds. It’s purpose is to tell the computer the hierarchy of data.

HTML, CSS, and XML are all free, open standards.

HTML

HTML stands for HyperText MarkUp Language. It’s the markup language used for creating web pages that can be displayed in a web browser. It’s purpose is to describe what should appear on in the browser when the page is loaded.

The World Wide Web Consortium (W3C) is the organization that coordinates the development of web standards and guidelines.

HTML5 is the currently supported version.

HTML Coding

HTML is written in the form of elements consisting of tags enclosed in brackets such as <body>.

Generally, HTML tags come in pairs including a start tag like <p> and end tag like </p>, however they are sometimes unpaired such as <br>.

Attributes in the tag assign values.

A web browser interprets the HTML code and displays the results.

coding

Try It!
Work your want through the w3schools HTML tutorial. This will take some time, but you’ll gain valuable skills in creating HTML documents.

CSS

body cssCSS stands for Cascading Style Sheet and is a style sheet language. It allows document contents to be separated from document presentation.

CSS focuses on design elements such as fonts, colors, and layout.

A web browser refers to the CSS specified in the HTML to determine how the page will be displayed.

CSS Coding

Cascading Style Sheets (CSS) define the appearance of the web page in terms of visual aspects and layout. In other words, it describes what the content will look like on the web page.

Selectors are used to declare what styles to apply. For instance, h1 is a selector.

Properties are the characteristics of objects. For instance, heading properties include color and font size. Each property has a value.

coding

Try It!
Work your want through the w3schools CSS tutorial. This will take some time, but you’ll gain valuable skills in creating CSS documents.

CSS Locations

You can use styles ways: inline, internal CSS and external CSS.

There are three places where you can use styles:

Inline. Use the style attribute within HTML elements such as a paragraph tag. This approach is discouraged.

Internal. Use the <style> element in the <head> section to define styles on a single page. This approach is effective if you just have one page, but if you’re working on a website use external CSS.

External. Create a separate document called an external style sheet such as cat.css. Use a <link> element in the <head> section to call an external CSS file. An external CSS file is the preferred approach because a single file can be shared by many documents in a website.

css

Web Accessibility

Web accessibility involves the practice of making websites usable by people with all abilities and disabilities. Accessible websites are designed to ensure that all users have equal access to website information and functions.

Below are some examples of ways to make a website accessible:

The World Wide Consortium (W3C) has published Web Content Accessibility Guidelines (WCAG) that should be followed in designing accessible web content.

alt

Try It!
Skim the Web Content Accessibility Guidelines (WCAG). Think about the importance of accessibility for different types of people such as those with hearing or vision challenges. Think about why accessibility is important for libraries to consider.

Web Accessibility Tools

A number of tools are available to help web designers ensure that their web pages are accessible.

WAVE and Cynthia Says are two examples.

These websites check the code of a website to see if ALT tags and table summaries are being used as well as potential issues with colors and other problems that might interfere with use.

Try It!
Try using both WAVE and Cynthia Says to test a favorite website. What are the results? What changes would you make in the website?

Web Usability

keyboardWeb usability relates to the ease of use of a website.

It’s important to test HTML documents on computers and mobile devices with different operating systems, screen sizes, resolutions, and web browsers.

A web page may look very different on different computers with different browser software and screen sizes and resolutions.

Sometimes text or images can be cut off if a page is viewed on a small screen. In some cases, features such as forms may not work with all web browsers.

Web Usability Testing

Usability testing is an approach to measuring how well users are able to interact with computers and other devices.

These tests attempt to determine whether an human-computer interface is user-friendly.

Interviews, surveys, focus groups, and one-on-one observations are all used to determine usability.

Web Usability and Validation

It’s important that websites run without errors on a wide range of browsers.

The World Web Consortium (W3C) has developed guidelines for well-formed code.

A validator is a computer program that checks the syntactical correctness of code. The term is used when validating HTML, CSS, or XML documents.

The Markup Validation Service is a validator from W3C that allows web developers to check the correctness of the code in their documents.

A validation won’t ensure that a particular webpage will load well in all web browsers. Some web browsers haven’t been updated based on the latest W3C guidelines or run better on a particular computer or mobile operating system. As such, it’s still important to test web pages using a variety of devices, operating systems, and browsers. For example, the validator will ensure that each element has a matching start and end tag, but it won’t ensure that element will work on Chrome or Safari.

Try It!
Go to the Markup Validation Service and try validating a page. Notice the error messages. These should be fixed.

Troubleshooting Coding Errors

When writing HTML and CSS code, there are a few common errors you’ll want to avoid.

XML

xmlThe W3C produced the guidelines for eXtensible Markup Language or XML.

This markup language defines rules for encoding documents in a way that is both human-readable and machine-readable.

Many document formats use XML syntax such as RSS.

Many commonly used productivity tools such as Microsoft Office and Apple iWork use XML-based formats.

API

flickrApplication Programming Interfaces (APIs) help software developers process XML data and direct how software components interact.

For example, they are often used in accessing databases and creating graphical user interfaces.

Through using open APIs, the web community is able to easily share content between networks.

For instance, photos shared on Flickr can dynamically posted on Facebook. Authenticate FourSquare users for a library GPS project. Or, video from YouTube can be embedded in LinkedIn.

File Transfer

filesFile transfer involves moving files over a network such as the Internet.

File Transfer Protocol (FTP) is used to transfer files from one location to another over a TCP-based network such as the Internet. FTP is a standard network protocol built on client-server architecture. Users normally authenticate themselves using a username and password and are then provided an interface for sharing files.

The most common use for FTP is downloading files from the Internet. Web developers use FTP to upload files to their web server.

Today, many networks require Secure File Transfer Protocol (SFTP) that provides file access, transfer, and management options over a secure channel.

FTP Client

An FTP Client is software used to transfer files between two computers over the Internet.

FTP or SFTP tools are commonly used to upload files (e.g., HTML, CSS, XML, audio, video, image, text, PDF) to a web server.

Website Maintenance

Creating a website should not be thought of as a one-time activity.

Policies and procedures need to be established that handle the ongoing need to update, revise, and add new content.

Web Analytics

Web analytics gather, analyze, and report on website usage.

Most website hosting services provide statistics about website use such as web traffic. This information can be valuable in updating the website and planning services.

The statistics can include who visits, how often they visit, and what they visit. It can also identify what users do at the website such as where they click, how long they stay, and where they’re from.

analytics

Conclusion

Librarians may use online website builders, content management systems, or web development software to produce web-based content. Evaluate library websites based on content, design, and technical elements.

HTML, CSS, and XML are all free, open standards that use a markup language. A markup language is used to annotate a document so that it can be read by software.

Web accessibility involves the practice of making websites usable by people with all abilities and disabilities.

Web usability relates to the ease of use of a website. A validator is a computer program that checks the syntactical correctness of code. File transfer involves moving files over a network such as the Internet. Web analytics gather, analyze, and report on website usage.


| eduscapes | IUPUI Online Courses | Contact Us | 2014 Annette Lamb (Adapted from earlier s401 materials)

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.