|
Before you turn your computer on, sit down with a pencil and paper
and plan your Web site. This will save you time and energy in the
long run and will lead to a more enjoyable experience.
Goals and Audiences List
the top three to five goals of your Web project, in order of importance.
Your main goal may be to sell your artwork, share your opinions,
build a photo gallery, or promote an event.
Next, describe the intended audiences. Are they
young or old? What Web sites do they visit? What is their typical
connection speed to the Internet? How much time will they spend
on your Web site?
These exercises will keep you focused throughout
the Web development process. When you are deciding to add a new
feature to the site, refer back to your goals to check the relevance.
Use your audiences to make decisions such as the placement of content,
font size, and use of bandwidth-heavy technology.
Site Architecture Diagram
the hierarchy of your content. You can do this on the computer,
as we did in our example, or with pencil and paper. Connect the
main topics to the home page, then connect the subsections to the
main topics. These connections will be links, or pathways for users
to reach the content.
When completed, think as if you were an end-user.
How quickly can you find certain content? What information needs
to be linked to the home page? Keep in mind how your audience will
use the information. What will they be looking for? What will interest
them?
File Structure When designing
your site, always remember that a Web site is a collection of files.
Every page on the site is a file, and so is every graphic or movie.
Each file has its own name and location (address). The browser reads
all those names and addresses and builds a page on your screen.
Your site architecture is a blueprint of the way the files will
sit on your hard drive and on the server. Use this blueprint when
you are creating HTML files.
Research Find Web sites
that you like and ask yourself why they are successful. Look at
the design and placement of navigation elements and the use of colors
and typefaces. Look for Web sites that are similar in audience,
subject matter, or look and feel to your future Web site. Look for
simple sites that are not too far beyond your technical ability.
Collect Materials and Content
Transfer photos and art work to digital format. Save graphics as
jpgs and gifs. Gather these materials before you start the design
process so that you can use them in your design or as inspiration.
You also need to assemble your written content early
in the Web process. Delays are often caused by missing content.
Save the copy in text documents; you can copy and paste into HTML
later in the process.
Sketch On paper, sketch several layouts
for your home page and interior pages. Try different placements
of the logo (or header), navigation, and content. Plan how the navigation
will change on the interior pages.
Taking your Design to the Computer
The standard image-editing software for building a Web site is Adobe
PhotoShop. Use it to make shapes, choose colors, crop images, type
content, and save files for the Web.
Start by creating a document that is 750 pixels
wide x 480 pixels high. This size will fit into the standard Web
resolution of 800 x 600 pixels and will allow users to print the
pages of your site. Next, place the design elements in the locations
indicated in your sketch.
Color Choose a color scheme
that matches the feel of your site. It could be serious or fun,
warm or cold. Use contrasting colors to highlight certain features.
It is important that your image files are saved in RGB, since this
is the format computer monitors use to read colors.
Type There are two main
ways to display text on the Web: HTML text and graphic text. HTML
text is written in an HTML document. There are only a handful of
fonts that are displayed on all platforms. Common HTML typefaces
are Times, Arial, Helvetica, Verdana, Courier, and Georgia. Graphic
text is created in an image-editing software tool such as PhotoShop
and is displayed as an image.
Use HTML text for large bodies of copy and text
that you want to download quickly. Use graphic text when you want
to use a specific font or integrate type with an image. Navigation
and header images are commonly in graphic text. Text is best saved
as a gif file.
HTML Layout and the Grid
The designs that you have created on the computer will be broken
down into components of an HTML page. As you work, think about how
the design will translate into HTML. Most HTML layouts use tables
with rows and columns. If this is your first Web site, you may want
to design using a simple grid.
Optimizing Graphics for
the web Web professionals use programs such as Adobe ImageReady
(companion to Adobe PhotoShop) and Macromedia Fireworks to optimize
and save images. These programs allow you to optimize multiple images
at a time and save them to your images folder. This is especially
helpful for rollover navigation images.
File Structure When building a Web site,
it is important to organize your files and graphics in a simple,
consistent way. On your local computer, create a new folder with
the name of your project. Do not use any spaces or special characters
in the folder or file names; use the underscore character to separate
words. We suggest creating three folders inside the main folder;
name the folders docs, source and Web. The docs
folder will contain content materials, including the sitemap and
text files. The source folder will contain files used in
the design of the Web site, such as PhotoShop, Illustrator and non-optimized
image files.
All HTML pages and files that will be uploaded to
the Web should be in the web folder. This folder serves
as your development space before uploading files to the Web. Within
the web folder, create a new HTML page and name it index.html.
This is the standard default page on most Web servers and will serve
as your home page. Create an images folder inside your
web folder for all the optimized images on your site, as
well as folders for your main content areas.
HTML is a set of tags that
are inserted around the content in your files to tell the browser
how to display your files. HTML stands for “hypertext markup
language.” Writing HTML does not require any special software;
all you need is a text-editing program such as BBEdit or SimpleText
that types plain text with no formatting. HTML tags tell the browser
to make text big or small, to use a particular font, to get a picture,
to build a table, and to create links to other files in your site
or out somewhere in the World Wide Web.
HTML Editors are programs
that allow you to create Web pages and manage Web sites without
a strong knowledge of HTML. Two popular HTML editors are Macromedia
Dreamweaver and Adobe GoLive. These programs provide a visual system
to develop a Web page, import images, create links, add color, and
set type. You can toggle back and forth between the visual design
and the HTML code. We highly recommend working with an HTML editor,
which can be easily learned through workshops and tutorials.
Tables Many HTML pages
use tables to create a structure and hierarchy within the code.
Tables contain rows and columns. Each component in the table is
called a cell. Inserting tables within cells is called nesting tables.
Web designers manipulate tables to create orderly and interesting
pages.
Accessibility Visually
impaired users employ automated screen readers that “linearize”
Web pages into a continuous text that can be read aloud by a machine.
Techniques for achieving accessibility include the captioning of
all layout tables (or, better yet, the avoidance of tables altogether),
the consistent use of “alt tags” (which identify image
files), and the placement of page anchors in front of repeated navigation
elements that enable users to go directly to the main content. Various
software programs allow designers to test the linearization of their
pages.
In many Web projects, HTML is not enough. If you want to add a form,
produce a blog, or even create a rollover image, you will need to
employ additional Web technologies and scripting languages. Listed
here are a few possible directions to pursue in creating interactive
Web sites.
CSS (Cascading Style Sheet)
is used to specify fonts, colors, headers, and positioning of text.
Linked to your HTML page in the <head> tag or embedded in
the document, style sheets provide control and consistency throughout
your site, especially with type. You can define styles for each
font used on your site, and if you need to make changes to the size
or color in the future, you only need to adjust the style sheet,
not each individual page. HTML editors, like Dreamweaver, make it
easy to create and use style sheets.
Javascript is a scripting
language used to enhance Web pages, often executed by mouse functions,
buttons, or other actions from the user. A simple navigation rollover
is an example of JavaScript. You can use an HTML editor to automatically
generate JavaScript behaviors, or you can copy and paste desired
code from existing Web sites.
Macromedia Flash is used
for making animations, games, interactive menus, and other elements.
You don’t need this program to build an informational Web
site, but it is fun to add motion to your pages. Flash is extremely
powerful and complex, but creating simple animations is easy.
Dynamic Web Sites use databases
to supply content. A programming language such as ASP, ColdFusion,
PHP, Perl or JSP is used to communicate with the database. As the
user interacts with the site, dynamic Web pages are built on the
fly.
This is also called a Content Management System. A CMS enables users
to modify content through an administrative Web site, eliminating
the need for content producers to have intimate knowledge of HTML.
Open Source describes computer
programs, scripting languages, and operating systems that use publicly
available source code. In true D.I.Y. spirit, the open source philosophy
encourages social interactivity. Programmers modify and improve
the source code and then enter it back into the public domain. PHP
is a popular open source scripting language that can be embedded
into HTML.
XML (Extensible markup
language) was created to solve the processing, presentation and
scalability issues associated with HTML. Using descriptive markup
tags, such as <name>Katherine</name>, XML provides meaningful
data that can be stored in a database. However, most browsers do
not recognize XML. The Web standards commission, World Wide Web
Consortium (W3C), developed XHTML to solve this problem.
XHTML (Extensible Hypertext
Markup Language) is a combination of XML and HTML. Whereas HTML
code can be written loosely, XHTML code follows strict guidelines.
A true implementation across the Web will produce faster processing
of Web pages and consistency of design across browsers.
Domain Name A domain name is a unique name
that identifies a Web site, such as micadesign.org. When typed into
a browser or sent as an e-mail address, the Domain Name System (DNS)
translates micadesign.org into Internet Protocol (IP) numbers, such
as 216.168.224.70. These numbers are used by the Internet to connect
you to micadesign.org.
Domain name extensions include .com, .net, and .org.
Many extensions are country-specific; for example the United Kingdom
uses .co.uk and .org.uk.
Registering a Domain Name
When you choose a name for your Web site, check the Whois database
located on a domain registry Web site to find out if the domain
name is available. You can usually register the domain name at the
same place where you purchase Web server space.
Purchase Web Server Space To
make your site public, you need a server, a dedicated computer that
holds your Web site files and is available to users 24/7. You can
rent space on a server for a relatively low cost per month. If your
Web site uses programming other than HTML, the cost per month may
be higher.
FTP File Transfer Protocol
allows the transfer of files over the Internet or from one computer
to another. When you buy Web server space, the hosting company will
provide you an ftp address or another method of transferring your
files to the Web.
E-commerce If you intend
to sell items on your Web site, you will need a merchant account
and shopping cart capability. You can build your own shopping cart
with a programming language, or you can rent space from a network-based
e-commerce solution. One popular method for transactions is PayPal.
Remember that once an item sells, you will have to produce the item
and plan a method for shipping.
Search Engine Optimization
There are several ways that you can optimize your Web site in order
to obtain a higher ranking in the search engines. Of course, nothing
guarantees that you will be listed at the top, but it’s a
good start.
There are numerous companies that will submit your
Web site to search engines for a fee. Since this is a time-consuming
process, purchasing this service may be a helpful option. Type in
“Search Engine Optimization” on a search page to find
providers. Otherwise, go to the major search engines and learn how
you can submit your site.
Several search engines, such as Google, rank Web
pages by the number of links pointing to the site. The Web crawlers
also look at the text around the links and the link popularity of
the referral Web site. Find Web sites that have similar content
and ask them to list your Web site. Often times you can list their
Web site in return.
Marketing Look at the list
of audiences that you created at the beginning of the Web development
process. How can you best reach these audiences? What sites do they
visit on the Web? What keywords will they type into a search engine?
You can use this information to create targeted
advertisements on search engines. If you have a list of email subscribers,
you may also want to research email blasts.
|
