design So You Wanna Design for the Web

Size: px
Start display at page:

Download "design So You Wanna Design for the Web"

Transcription

1 HAGAN HELLER and DAVID RIVERS ÀÀÀ ÀÀ,, So You Wanna Design for the Web Illustrations: Leo Comix Let s say you re an interaction designer who has been working at a company for a number of years. Then one day, quite by accident, you find that you ve been roped into designing for the World Wide Web. Maybe it s just one page, maybe it s the company s whole site. Maybe the site has been around for a while and someone has decided to call you in to give it a face lift. Before you start working on designs, there are some things you will want to think about: the goals for the site, who your customers are, what they will do when they visit your site, how to organize your site according to your goals and your readers tasks, and the design of the site, keeping in mind the limitations of the web as a medium. Establishing Your Goals Start by establishing what your company s goals are for the site. Consider whether or not the site will talk about products, services, or support; offer a way to buy or demonstrate products online; communicate the company s mission; publish corporate communications, such as press releases; provide financial information to stockholders; try to get new customers; provide special services to existing customers; provide ways for readers to contact company employees (sales, support, and so forth); or publish employees home pages. Most likely, your site will be a mix of these many sites try to be everything to everyone. That s okay, but it means that you re going to interactions... m a r c h

2 The images Yahoo uses are small so that people can get quickly to what they need: information. Hagan Heller Netscape Communications Corp David Rivers Independent Consultant have to plan the site carefully. Establishing the main goals up front will make it easier to plan the overall presentation and organization of the site s information. Identifying Your Customers Your existing customers are probably after specific information, support, product ordering, and so on. New customers may need more general information about the company s goals and products. They might be interested in things like product reviews, customer testimonials, and demonstrations. Again, your site will probably want to cater to both, but you may want to have distinct and separate areas for these different customer groups. If you re trying to target your international customers, you ll want to take them into account throughout the design; for example, remember to express phone numbers and addresses in an international format. If you have a need to connect to a particular country, you may even want to plan on providing translated pages. Also, as you may know, watch out for imagery that may be offensive or incomprehensible to your international customers. Does the site offer demonstrations, images, sounds, or multimedia? You ll need to decide what platforms (Macintosh, Windows, Unix) the site is going to support and make sure that those files will run on those platforms. Don t forget all of your customers connecting from home it can be tedious to load the pages of a site that wasn t designed for 14.4K bps connections. Don t use too many images, keep images small, and reuse your images rather than force your readers to download them again. Always provide alternate text for those who choose not to view images. If you make use of image maps, provide other ways to navigate. You may even want to consider providing an image-free version of the site. Decide on the lowest common denominator browser you re willing to support. If you want to reach everyone, your HTML is going to be less interesting than if you try to reach people who use the more popular browsers, for instance. Most browsers support basic paragraph types and styles, but if you want to use tables, for example, you ll exclude users of America On-line s browser. If you want to use Frames, the only readers that will see your Frame layout are those with Netscape Navigator 2.0, unless you provide alternate Frame pages that are available as a part of the Frame format. A specific comparison of browsers is available at Identifying Your Readers Tasks Identify the key tasks that readers of your site will perform. Provide mechanisms for performing those tasks that align with the goals for the site and the information that you have about your customers. Some common tasks: Find a particular product Learn about the newest products Hear product reviews and customer testimonials Order a product online Learn about product featurs Get product demonstrations Contact a representative in a particular department Contact a particular employee 20 interactions... march 1996

3 Ask a question to the appropriate person Obtain technical support Track an order Give feedback about your products or services Follow up on an advertisement Once you ve identified all of the important tasks, select the key tasks that will appear at the top level of your site. Those key tasks are likely to be repeated in navigation tools throughout the site. Organizing the Site Once you ve identified what your readers will expect to do on your site, you re ready to consider how the site will be organized. Regardless of what you decide, it s important to make the organization clear to your readers so that they can navigate among the pages without getting lost. The key is that at each level of the hierarchy you should present the right amount of information: neither too much nor too little. The top level, in particular, needs to be compact and clear; otherwise readers won t be drawn in. Similarly, if they can t find what they re looking for within a few clicks, your readers will leave the site. One thing we ve noticed is that some corporate sites are arranged according to their internal management structure. These organizations make them more efficient to run, but that isn t always in accordance with products and services in which customers are interested. As a result, information that users need is spread across the site, and there isn t a coherent picture of how everything fits together. On other sites, the front page offers dozens of possibilities with no clear indication of what the reader is supposed to do. Avoid these problems by making sure that the hierarchy is organized around your users tasks and your communication goals. The topics need to be high-level ones that readers can jump to with the confidence that they will find what they are after. For example: Products, Support, Contacts, Feedback, Help, and/or Search. From any given page, you also want to crossreference to other areas of the site that naturally fit together. For example, if a reader is learning about your products and decides he or she wants to buy something, there should be a connection to purchasing information. When sites become too large to navigate easily, they need alternative means for accessing information. For example, you could have a table of contents, an index, a search mechanism, or a chronological list of changes and additions to the site: what s new. The Bank of America site entertains, markets to potential customers, establishes its personality, and reveals its tools all in one. The Realist Wonder Society site imparts flavor, hierarchy, and thumbnails of the content on the very first page. 21

4 On the Mr. Showbiz site, the hierarchy, brand identity, and contents of pages are revealed on each banner. In this case, the reader is viewing The Critics: TV: Now Showing. Orient your readers with a visual language that conveys the nature of the content on the pages, the reader s position in the site, and your corporate brand identity. Use that language consistently throughout the site. It should include controls for reaching key topics. You may even want to include maps as additional visual cues to keep readers from getting lost. There are some key limitations of the World Wide Web that you need to consider when creating this visual language: You can t determine exactly how a page will look for your readers. Different browsers on different platforms present pages in a variety of ways. Readers can change the fonts and font sizes, colors, and the size of the window. As a result, it s better to make sure the page layout is flexible, rather than to concentrate on exact pixel placement. Don t forget to test your site in different configurations and make sure it looks the way you expect. Keep small screens in mind: 640 x 480 is not uncommon. To support the majority of machines, use fewer than 256 colors for each of your pages. If possible, use fewer than 200: many colors are consumed by other applications on the desktop. Effects can be created with free graphics, such as HTML horizontal rules, table borders, bullets, text, background colors, and text colors. These page commands take much less time to download than images and can have a profound effect on a page. Use smaller images when you can to cut down on file size. If you re willing to restrict yourself to the browsers that support them (for example, Netscape Navigator and Microsoft Internet Explorer), convert your photographic images to JPEG or progressive JPEG formats. Reuse images and they will not be downloaded multiple times. Designing the Site Now that you ve laid the groundwork for a site that is organized according to your readers tasks and your key messages, it s time to design the appearance and content of your site. Here are some important guidelines that may help: The Web is different from advertising. Although advertisements are geared toward Saturn cars site lets you know exactly what image sizes you re dealing with. 22 interactions... march 1996

5 attracting customers to your company and products, Web users have already chosen to visit your site: they are contacting you. Make sure that your site has information that will be of interest to them; provide something that they might not be able to obtain in any other way. Don t spend your readers time convincing them why they should visit your site: help them find the information they came for. Do some legwork for your readers. Collate information about products, services, organizations, and so forth, so that you can help your readers gain a more complete understanding of important issues that matter to them. Use your collated information as a tool to keep readers at your site, rather than pointing them to other sites on the Web, and you will become a destination for a wide range of readers seeking this information. Make your readers feel as though they have an impact on your site by soliciting and publishing their feedback and comments. Make sure you respond to their feedback. You may consider creating forums where users can meet and share their experiences with your products or where they can communicate with experts and obtain technical support. Create a space of interest for those who are just visiting. Provide a path for readers to take a tour of the site that highlights your company, products, and services. Avoid Under Construction signs. If you are still assembling the basic components of your site, it s more professional to keep it off the Web or bill it as a Coming Attraction. If you are trying to equate Under Construction with This site changes frequently, then you re better off telling your readers about your update schedule, so they will know when to return for fresh content. Keep the number of links on a page down. The more links you provide, the less likely it is that your readers will finish reading the page. Link only to pages that are relevant, or you will confuse your message. Make sure that links contain keywords, rather than words like click here because readers often scan the links on pages for topics that interest them. Give your readers performance cues. If you provide links to images or multimedia files, let your readers know how big the files are, so they may determine whether or not they want to wait for the download. If you allow your readers to run search queries on a database, let them know what kind of data are available and how to specify search criteria. Ultimately, your readers are interested in information about your company and its products and services. Keep that focus in mind, design something attractive and interesting, and readers will go to your site. For More Information In our upcoming tutorial at CHI 96, we will explore what it takes to make excellent Web sites, whether for corporations, individuals, publishers, entertainers, clubs, shopping, geographic regions, art, or the presentation of data. If you d like to learn how to work with the latest HTML, check out index.html Finally, it s always a good idea to spend some time on the Web yourself. Here are a couple of Web sites that put the spotlight on both excellent and horrible design: is one person s opinion of excellent Web design is devoted to finding the worst of the World Wide Web. PERMISSION TO COPY WITHOUT FEE, ALL OR PART OF THIS MATERIAL IS GRANTED PROVIDED THAT THE COPIES ARE NOT MADE OR DISTRIBUTED FOR DIRECT COMMERCIAL ADVANTAGE, THE ACM COPYRIGHT NOTICE AND THE TITLE OF THE PUBLICATION AND ITS DATE APPEAR, AND NOTICE IS GIVEN THAT COPYING IS BY PERMISSION OF THE ASSOCIATION FOR COMPUTING MACHINERY. TO COPY OTHERWISE, OR PUBLISH, REQUIRES A FEE/AND OR SPECIFIC PERMISSION ACM $3.50 DESIGN COLUMN EDITOR Kate Ehrlich Research Scientist Lotus Development Corporation One Roger Street, Cambridge, MA (617) Fax: +1 (617) interactions... march

Creating Web photo galleries (Photoshop)

Creating Web photo galleries (Photoshop) Creating Web photo galleries (Photoshop) You use the Web Photo Gallery command to automatically generate a Web photo gallery from a set of images. A Web photo gallery is a Web site that features a home

More information

A quick guide to... Effective HTML Messages

A quick guide to... Effective HTML Messages A quick guide to... Effective HTML Messages In this guide... Learn easy and effective ways to engage your subscribers, increase your click-through ratio (CTR), and get better results from your email marketing.

More information

Tips for clear websites

Tips for clear websites Plain English Campaign: Tips for clear websites Copyright Plain English Campaign Tips for clear websites This is only a basic guide. If you have any suggestions, corrections or improvements, please contact

More information

Department of Special Education Ball State University Developing Your Digital Portfolio Website

Department of Special Education Ball State University Developing Your Digital Portfolio Website SPCED Portfolio Instructions 1 Department of Special Education Ball State University Developing Your Digital Portfolio Website The following steps will guide you through the process of developing your

More information

Planning a Responsive Website

Planning a Responsive Website Planning a Responsive Website Planning a website is important for both web designers and website owners. Planning your website before you start building it can save you time, keep your site code more accurate

More information

How to start writing great copy for your website

How to start writing great copy for your website WILLIAMS GRAPHICS How to start writing great copy for your website Writing content for your own website can be hard. These pointers are here to help get you started. williamsgraphics.co.uk About Williams

More information

What you should know about: Windows 7. What s changed? Why does it matter to me? Do I have to upgrade? Tim Wakeling

What you should know about: Windows 7. What s changed? Why does it matter to me? Do I have to upgrade? Tim Wakeling What you should know about: Windows 7 What s changed? Why does it matter to me? Do I have to upgrade? Tim Wakeling Contents What s all the fuss about?...1 Different Editions...2 Features...4 Should you

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

More information

Creating Newsletters in Microsoft Word

Creating Newsletters in Microsoft Word Creating Newsletters in Microsoft Word This document provides instructions for creating newsletters in Microsoft Word. Opening Comments There are several software applications that can be used for creating

More information

LITE TUTORIAL. Trinity Innovations 2010 All Rights Reserved.

LITE TUTORIAL. Trinity Innovations 2010 All Rights Reserved. LITE TUTORIAL Trinity Innovations 2010 All Rights Reserved www.3dissue.com INTRODUCTION: Converting your press ready PDFs into digital publications After installing 3D Issue Lite, click on the 3D Issue

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE DREAMWEAVER CS3 TUTORIAL ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO

More information

15 minutes is not much so I will try to give some crucial guidelines and basic knowledge.

15 minutes is not much so I will try to give some crucial guidelines and basic knowledge. 1 Presentation. Good morning ladies and gentlemen, dear colleagues. First of all I would like to thank the committee for this invitation and letting me speak about one of my favourite topics: the internet.

More information

The steps to create an HTML Web site with Virtual Exhibit are:

The steps to create an HTML Web site with Virtual Exhibit are: 23 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web site creator for PastPerfect Museum Software. Virtual Exhibit converts collection records and images stored in PastPerfect to HTML for posting

More information

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 In this chapter, you will learn how to... LEARNING OUTCOMES Describe the most common types of website organization Describe principles

More information

TUTORIAL 4 Building a Navigation Bar with Fireworks

TUTORIAL 4 Building a Navigation Bar with Fireworks TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar

More information

Websites for Small Business. Copyright 2005 Three Rivers Internet

Websites for Small Business. Copyright 2005 Three Rivers Internet Websites for Small Business Why your business needs a website Today, over 60% of Americans use the Internet. We use it to communicate, to learn, to shop and to buy. It is just as important in our lives

More information

introduces the subject matter, presents clear navigation, is easy to visually scan, and leads to more in-depth content. Additional Resources 10

introduces the subject matter, presents clear navigation, is easy to visually scan, and leads to more in-depth content. Additional Resources 10 STYLE GUIDE Style Guide for Course Design Think of your Moodle course page as the homepage of a website. An effective homepage: introduces the subject matter, presents clear navigation, is easy to visually

More information

Introduction. Steps in Creating Web Pages

Introduction. Steps in Creating Web Pages 1 of 7 Introduction A basic web page is a plain text file that has been marked up with tags around a word or phrase to describe how it should be displayed by the web browser. To see the HTML codes of any

More information

Flash also gives you the ability to export your movie in other formats, such as an animated GIF or a Quicktime video.

Flash also gives you the ability to export your movie in other formats, such as an animated GIF or a Quicktime video. LESSON 6: PUTTING IT ALL TOGETHER OBJECTIVES In this lesson, you ll learn to: preview your movie with the Test Movie command export your movie to a Web-ready Shockwave Flash file use Macromedia Aftershock

More information

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame... Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with

More information

starting your website project

starting your website project starting your website project Here are three comprehensive posts from our blog, refined and updated through feedback from our clients. Together, they cover the essentials of building a successful website.

More information

2. Poster Presentations

2. Poster Presentations Learning Development Service Introduction to PowerPoint: 2. Poster Presentations Using Microsoft PowerPoint 2013 Dr Helen Dixon Information Services Teaching and Learning James Diffin Contents What this

More information

Getting Started with WebSite Tonight

Getting Started with WebSite Tonight Getting Started with WebSite Tonight WebSite Tonight Getting Started Guide Version 3.0 (12.2010) Copyright 2010. All rights reserved. Distribution of this work or derivative of this work is prohibited

More information

Hypercosm. Studio. www.hypercosm.com

Hypercosm. Studio. www.hypercosm.com Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks

More information

38 Essential Website Redesign Terms You Need to Know

38 Essential Website Redesign Terms You Need to Know 38 Essential Website Redesign Terms You Need to Know Every industry has its buzzwords, and web design is no different. If your head is spinning from seemingly endless jargon, or if you re getting ready

More information

Steps in Creating Web Pages

Steps in Creating Web Pages 5 M i n u t e W e b P a g e s - M o z i l l a 1 of 6 A basic web page is a plain text file that has been marked up with tags around a word or phrase to describe how it should be displayed by the web browser.

More information

Google Sites Tutorial

Google Sites Tutorial Google Sites Tutorial 1. Type the following web address into your browser s address bar: http://sites.google.com 1a. If you are not signed in, type in your email address then your password. Click Sign

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

CREATIVE BEST PRACTICES FOR ONLINE LEAD GENERATION

CREATIVE BEST PRACTICES FOR ONLINE LEAD GENERATION CREATIVE BEST PRACTICES FOR ONLINE LEAD GENERATION OFFER COPY I DESIGN I CONTACT FORM I LEGAL GUIDELINES Prepared by Q Interactive QInteractive.com 888 729 6465 solutions@qinteractive.com Introduction

More information

Introduction to Dreamweaver

Introduction to Dreamweaver Introduction to Dreamweaver ASSIGNMENT After reading the following introduction, read pages DW1 DW24 in your textbook Adobe Dreamweaver CS6. Be sure to read through the objectives at the beginning of Web

More information

PaperPort Getting Started Guide

PaperPort Getting Started Guide PaperPort Getting Started Guide This guide shows you how to use some of PaperPort s main features, including viewing items, creating stacks, sending an item electronically to a PaperPort Link, adding an

More information

1. Oral Presentations

1. Oral Presentations Learning Development Service Introduction to PowerPoint: 1. Oral Presentations Using Microsoft PowerPoint 2013 Dr Helen Dixon Information Services Teaching and Learning James Diffin Learning Development

More information

Making Documents Accessible using Microsoft Word This document describes how to create an accessible Word document and convert it into a PDF.

Making Documents Accessible using Microsoft Word This document describes how to create an accessible Word document and convert it into a PDF. Making Documents Accessible using Microsoft Word 2010 This document describes how to create an accessible Word document and convert it into a PDF. The University of Bradford retains copyright for this

More information

What Do I Need To Create My Webpage?

What Do I Need To Create My Webpage? How to Create and Maintain a Web Page or Website By CJ Chip Chapman, VA3KGB Webmaster for The Kingston Amateur Radio Club, The Signaller s Club of Canada, and my own web page I am not an expert on web

More information

BATCH FILE PROCESSING TUTORIAL

BATCH FILE PROCESSING TUTORIAL BATCH FILE PROCESSING TUTORIAL Batch files processing as it was in Elements 1 and 2 is now called processing multiple files in Elements 3 and 4. It is a quick way of adding information or captions to several

More information

How do you use word processing software (MS Word)?

How do you use word processing software (MS Word)? How do you use word processing software (MS Word)? Page 1 How do you use word processing software (MS Word)? Lesson Length: 2 hours Lesson Plan: The following text will lead you (the instructor) through

More information

Salesforce Summer '07 Release Notes

Salesforce Summer '07 Release Notes Salesforce.com: Salesforce Summer '07 Salesforce Summer '07 Release Notes Copyright 2000-2007 salesforce.com, inc. All rights reserved. Salesforce.com and the no software logo are registered trademarks,

More information

How-to Guide: MIT DLC Drupal Cloud Theme

How-to Guide: MIT DLC Drupal Cloud Theme How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

More information

CREATING YOUR OWN PROFESSIONAL WEBSITE

CREATING YOUR OWN PROFESSIONAL WEBSITE First go to Google s main page (www.google.com). If you don t already have a Gmail account you will need one to continue. Click on the Gmail link and continue. 1 Go ahead and sign in if you already have

More information

A Microsoft Expression Tutorial

A Microsoft Expression Tutorial A Microsoft Expression Tutorial Contents Page (click page numbers to move to the page) Page 1-2..Things to do and know before we start Page 3 How to save your web pages Page 4 Opening an existing web page

More information

Microsoft Migrating to PowerPoint 2010 from PowerPoint 2003

Microsoft Migrating to PowerPoint 2010 from PowerPoint 2003 In This Guide Microsoft PowerPoint 2010 looks very different, so we created this guide to help you minimize the learning curve. Read on to learn key parts of the new interface, discover free PowerPoint

More information

Amazon Digital Text Platform

Amazon Digital Text Platform Amazon Digital Text Platform Quick Start Guide Introduction This step-by-step guide will show you how to go from start to finish publishing material with Amazon DTP. If you need additional help, visit

More information

HTML Editing in WebObjects Builder

HTML Editing in WebObjects Builder HTML Editing in WebObjects Builder HTML Editing in WebObjects Builder Common HTML Elements and How to Create Them The typical way to add HTML elements to a page in WebObjects Builder is to drag the element

More information

HTML Email Power Tips. HTML messages improve your CTR. World s Easiest Email Marketing.

HTML Email Power Tips. HTML messages improve your CTR. World s Easiest Email Marketing. A quick guide to Learn easy and effective ways to engage your subscribers, increase your click-through ratio (CTR), and get better results from your email marketing. HTML Email Power Tips Be readable get

More information

Chapter 28: Expanding Web Studio

Chapter 28: Expanding Web Studio CHAPTER 25 - SAVING WEB SITES TO THE INTERNET Having successfully completed your Web site you are now ready to save (or post, or upload, or ftp) your Web site to the Internet. Web Studio has three ways

More information

Exploring Graphics in Microsoft Word

Exploring Graphics in Microsoft Word Exploring Graphics in Microsoft Word This document provides instructions for working with various types of graphics in Microsoft Word. Inserting Clip Art A gallery of clip art is available both within

More information

Lesson Overview. Getting Started. The Internet WWW

Lesson Overview. Getting Started. The Internet WWW Lesson Overview Getting Started Learning Web Design: Chapter 1 and Chapter 2 What is the Internet? History of the Internet Anatomy of a Web Page What is the Web Made Of? Careers in Web Development Web-Related

More information

Dreamweaver - Formatting your page with CSS

Dreamweaver - Formatting your page with CSS Dreamweaver - Formatting your page with CSS Creating your first website Part 4: Formatting your page with CSS Now I ll show you how to format text on your page using cascading style sheets (CSS). Learn

More information

All About A/B Testing. How to Test, What to Test, and How to Analyze Your Results

All About A/B Testing. How to Test, What to Test, and How to Analyze Your Results How to Test, What to Test, and How to Analyze Your Results vs [ 1 ] Introduction A/B testing, also called split testing, is one of the best ways to optimize your email campaign. But it can be daunting

More information

CS042A. Using Microsoft Word

CS042A. Using Microsoft Word CS042A Using Microsoft Word 2015 Professional Career Development Institute, LLC. All rights reserved. Accredited by the Accrediting Commission of the Distance Education and Training Council. The Accrediting

More information

ebooks: Exporting EPUB files from Adobe InDesign

ebooks: Exporting EPUB files from Adobe InDesign White Paper ebooks: Exporting EPUB files from Adobe InDesign Table of contents 1 Preparing a publication for export 4 Exporting an EPUB file The electronic publication (EPUB) format is an ebook file format

More information

How to make internal links in a Word document

How to make internal links in a Word document White Paper July 2014 How to make internal links in a Word document Making internal links in a Word document Usually a link is designed to go to another web page to your website or to a landing page or

More information

STRUCTURE AND FLOWS. By Hagan Rivers, Two Rivers Consulting FREE CHAPTER

STRUCTURE AND FLOWS. By Hagan Rivers, Two Rivers Consulting FREE CHAPTER UIE REPORTS FUNDAMENTALS SERIES T H E D E S I G N E R S G U I D E T O WEB APPLICATIONS PART I: STRUCTURE AND FLOWS By Hagan Rivers, Two Rivers Consulting FREE CHAPTER User Interface Engineering User Interface

More information

Comparison of Web Authoring Tools

Comparison of Web Authoring Tools Comparison of Web Authoring Tools (NetObjects Fusion, Microsoft FrontPage, and Macromedia Dreamweaver) Introduction to Web Authoring Tools It is easier than ever to create a Web site with an HTML editor,

More information

CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide

CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8 University Computing and Information Services Training Guide For additional help, contact the UCIS Help Desk at (910) 5216260 or helpdesk@uncp.edu, or visit

More information

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit

More information

Online Traffic Generation

Online Traffic Generation Online Traffic Generation Executive Summary Build it and they will come. A great quote from a great movie, but not necessarily true in the World Wide Web. Build it and drive traffic to your Field of Dreams

More information

How to Create a News Article

How to Create a News Article Universiteit Stellenbosch University How to Create a News Article The News Creation Process Scott Ortlepp Corporate Marketing Digital Media Team Contents Making sure you have the correct article type...

More information

Website Design Basics Learn the principles of building successful websites.

Website Design Basics Learn the principles of building successful websites. Website Design Basics Learn the principles of building successful websites. The following information was used with permission from http://www.websitedesignbasics.com/index.html Great website design Great

More information

Do It Yourself Website Editing Training Guide

Do It Yourself Website Editing Training Guide Do It Yourself Website Editing Training Guide Version 3.0 Copyright 2000-2011 Sesame Communications. All Rights Reserved. Table of Contents DIY Overview 3 What pages are editable using the DIY Editing

More information

How to Make an Entry in Blogger

How to Make an Entry in Blogger How to Make an Entry in Blogger 1. After you have created a blog, you can start posting your entries! Log in at blogger.com and it will take you to your blogger home page. Click on the orange button with

More information

computer class tutorial notes Adobe Macromedia Dreamweaver 8 Tutorial: Using CSS with Dreamweaver 8

computer class tutorial notes Adobe Macromedia Dreamweaver 8 Tutorial: Using CSS with Dreamweaver 8 Farnham Street Neighbourhood Learning Centre 28 Farnham Street Flemington Victoria 3031 Australia Tel: 9376 9088 Fax: 9376 7739 Email: info@fsnlc.org Web: www.fsnlc.org ABN: 30 202 169 571 computer class

More information

The Essential Guide to HTML Email Design

The Essential Guide to HTML Email Design The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters

More information

Factors to Consider When Preparing Graphics for Web

Factors to Consider When Preparing Graphics for Web Factors to Consider When Preparing Graphics for Web Pages by Rick Brower and Dr. Jerry Waite Because of the growth of the Internet and World Wide Web, web pages are becoming a necessity for businesses

More information

How to create PDF maps, pdf layer maps and pdf maps with attributes using ArcGIS. Lynne W Fielding, GISP Town of Westwood

How to create PDF maps, pdf layer maps and pdf maps with attributes using ArcGIS. Lynne W Fielding, GISP Town of Westwood How to create PDF maps, pdf layer maps and pdf maps with attributes using ArcGIS Lynne W Fielding, GISP Town of Westwood PDF maps are a very handy way to share your information with the public as well

More information

Microsoft Migrating to Word 2010 from Word 2003

Microsoft Migrating to Word 2010 from Word 2003 In This Guide Microsoft Word 2010 looks very different, so we created this guide to help you minimize the learning curve. Read on to learn key parts of the new interface, discover free Word 2010 training,

More information

Getting started with articulate studio

Getting started with articulate studio Getting started with articulate studio Table of Contents Getting Oriented 4 Creating Your First Project 6 Enhancing Your Slides 7 Adding an Engage Interaction 13 Recording an Instructional Video with Replay

More information

4 What s New in PowerPoint 2007

4 What s New in PowerPoint 2007 4 What s New in PowerPoint 2007 4.1 Overview of PowerPoint 2007 Microsoft Office PowerPoint 2007 is a presentation program which enables you to create robust, electronic slideshows. PowerPoint is used

More information

PowerPoint 2013 Basics of Creating a PowerPoint Presentation

PowerPoint 2013 Basics of Creating a PowerPoint Presentation Revision 4 (01-31-2014) PowerPoint 2013 Basics of Creating a PowerPoint Presentation MICROSOFT POWERPOINT PowerPoint is software that lets you create visual presentations. PowerPoint presentations are

More information

Microsoft FrontPage. 1. Introduction

Microsoft FrontPage. 1. Introduction 1. Introduction Microsoft FrontPage is a full featured HTML editor. A Web site is a group of HTML pages and graphics that are interconnected with hyperlinks. A FrontPage Web site is a site created in FrontPage.

More information

OmniPage Basics. High Tech Center Training Unit. of the California Community Colleges at the Foothill-De Anza Community College District

OmniPage Basics. High Tech Center Training Unit. of the California Community Colleges at the Foothill-De Anza Community College District OmniPage Basics High Tech Center Training Unit of the California Community Colleges at the Foothill-De Anza Community College District 21050 McClellan Road Cupertino, CA 95014 (408) 996-4636 (800) 411-8954

More information

Web App Development Session 1 - Getting Started. Presented by Charles Armour and Ryan Knee for Coder Dojo Pensacola

Web App Development Session 1 - Getting Started. Presented by Charles Armour and Ryan Knee for Coder Dojo Pensacola Web App Development Session 1 - Getting Started Presented by Charles Armour and Ryan Knee for Coder Dojo Pensacola Tools We Use Application Framework - Compiles and Runs Web App Meteor (install from https://www.meteor.com/)

More information

Developing an Electronic Portfolio using Microsoft Word

Developing an Electronic Portfolio using Microsoft Word Developing an Electronic Portfolio using Microsoft Word Here is the process to create a standards-based electronic portfolio using Microsoft Word. The Reflective Portfolio document will include the following:

More information

Good Call. A Guide to Driving Calls with AdWords

Good Call. A Guide to Driving Calls with AdWords Good Call A Guide to Driving Calls with AdWords Introduction Some people want to talk to a real person when they re looking for information. In fact, 70% of mobile searchers have called a business directly

More information

click2try Tutorial Freemind 2008 Presage Technologies, LLC.

click2try Tutorial Freemind 2008 Presage Technologies, LLC. click2try Tutorial Freemind 2008 Presage Technologies, LLC. Copyright 2008 2009 Presage Technologies, LLC. You may freely distribute or publish this content provided you publish the content in its entirety

More information

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

More information

VIDEO 1: BUILDING TEMPLATES IN HUBSPOT

VIDEO 1: BUILDING  TEMPLATES IN HUBSPOT VIDEO 1: BUILDING EMAIL TEMPLATES IN HUBSPOT Hello everyone and welcome to class two of the Design Certification. This is Building a World- Class Email Template. Once again, this is Angela Hicks, your

More information

ITD 210 EXAM 1 STUDY GUIDE

ITD 210 EXAM 1 STUDY GUIDE ITD 210 EXAM 1 STUDY GUIDE FINAL EXAM: ADOBE WEB COMMUNICATION USING DREAMWEAVER CS3 OBJECTIVES Domain 1.0 Setting Project Requirements 1.1 Identify the purpose, audience, and audience needs for a website.

More information

Webinar Q&A: Picturing Success With Instagram

Webinar Q&A: Picturing Success With Instagram Webinar Q&A: Picturing Success With Instagram Q: Besides feel good social networking, how can a business benefit using the platform? A: Businesses and associations can use Instagram to promote products,

More information

ToolBook 9.5. Getting Started with ToolBook

ToolBook 9.5. Getting Started with ToolBook Getting Started with ToolBook ToolBook 9.5 Copyright 2007-2008 SumTotal Systems, Inc. and its licensors. All Rights Reserved. SumTotal, SumTotal Systems, the SumTotal logo, ToolBook, ToolBook Instructor

More information

Google Drive: Access and organize your files

Google Drive: Access and organize your files Google Drive: Access and organize your files Use Google Drive to store and access your files, folders, and Google Docs anywhere. Change a file on the web, your computer, or your mobile device, and it updates

More information

Tutorial by Philemon Yalamu

Tutorial by Philemon Yalamu TUTORIAL - PART 1 Tutorial by Philemon Yalamu http://www.artech.com.pg/ 1. Introduction The internet is vast and is a rapidly growing medium of communication today. On it there are endless opportunities

More information

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5

More information

Principles of Web Design 6 th Edition. Chapter 12 Responsive Web Design

Principles of Web Design 6 th Edition. Chapter 12 Responsive Web Design Principles of Web Design 6 th Edition Chapter 12 Responsive Web Design Objectives Recognize the need for responsive web design Use media queries to apply conditional styles Build a basic media query Create

More information

Comparison of Web Authoring Tools (NetObjects Fusion, Microsoft FrontPage, and Macromedia Dreamweaver)

Comparison of Web Authoring Tools (NetObjects Fusion, Microsoft FrontPage, and Macromedia Dreamweaver) Comparison of Web Authoring Tools (NetObjects Fusion, Microsoft FrontPage, and Macromedia Dreamweaver) Introduction to Web Authoring Tools It is easier than ever to create a Web site with an HTML editor,

More information

WEB 140 WEB DEVELOPMENT TOOLS

WEB 140 WEB DEVELOPMENT TOOLS WEEK 2 Objectives: Website basics Planning a Website Setting up a site in KompoZer Resources: WEBSITE BASICS Websites and pages can have many forms but there are some basics that are generally on all sites

More information

Creating a website using Voice: Beginners Course. Participant course notes

Creating a website using Voice: Beginners Course. Participant course notes Creating a website using Voice: Beginners Course Topic Page number Introduction to Voice 2 Logging onto your website and setting passwords 4 Moving around your site 5 Adding and editing text 7 Adding an

More information

Internet, Intranet, or Extranet Define Your Audience and Establish Communication Goals

Internet, Intranet, or Extranet Define Your Audience and Establish Communication Goals PLANNING AND KEY CONSIDERATIONS FOR A NEW WEB SITE: Your Guide To Understanding What It Takes To Create A Winning Solution By: Rock Multimedia Solutions February, 2003 Rock Multimedia Solutions offers

More information

Navigation pane Press Ctrl+F to show the Navigation Pane. You can reorganize a document by dragging its headings in this pane. Or use the search box

Navigation pane Press Ctrl+F to show the Navigation Pane. You can reorganize a document by dragging its headings in this pane. Or use the search box Quick Start Guide Microsoft Word 2013 looks different from previous versions, so we created this guide to help you minimize the learning curve. Quick Access Toolbar Commands here are always visible. Right-click

More information

Chapter 6: Application Software

Chapter 6: Application Software Understanding Computers Today and Tomorrow 12 th Edition Chapter 6: Application Software Learning Objectives Describe what application software is, the different types of ownership rights, and the difference

More information

Web Design I. Introduction. This first exercise will cover the following concepts: Tutorial Topics

Web Design I. Introduction. This first exercise will cover the following concepts: Tutorial Topics Web Design I Web Enhancement XHTML/CSS Tutorial One Getting Started With the Internet Introduction Tutorial Topics This is the first of a series of tutorials to assist students enrolled in the XHTML/CSS

More information

Databases. Creating Databases CHAPTER 12

Databases. Creating Databases CHAPTER 12 CHAPTER 12 Databases This chapter covers the following MTC skills: 5.12 Database The database module provides a tool for collaborative development of a database within the course. For those of us old and

More information

PowerPoint Basics of Creating a PowerPoint Presentation

PowerPoint Basics of Creating a PowerPoint Presentation PowerPoint Basics of Creating a PowerPoint Presentation MICROSOFT POWERPOINT PowerPoint is software that lets you create visual presentations. PowerPoint presentations are a series of slides that can contain

More information

HTML-eZ: The Easy Way to Create a Class Website

HTML-eZ: The Easy Way to Create a Class Website For more resources click here -> HTML-eZ: The Easy Way to Create a Class Website Henry Borysewicz Director, AeroSpace Network / Scientific Computing Center John D. Odegard School for Aerospace Sciences,

More information

Why Your Practice Needs a Mobile Website Interface Right Now and How To Make it Happen.

Why Your Practice Needs a Mobile Website Interface Right Now and How To Make it Happen. Online Marketing Suite See page 4 to get a FREE mobile report! Why Your Practice Needs a Mobile Website Interface Right Now and How To Make it Happen. www.practicedock.com Ph. 877-412-4324 Why Your Practice

More information

Content Management. Step 1: Choosing Your Layout

Content Management. Step 1: Choosing Your Layout Step 1: Choosing Your Layout Content Management D. A. B. C. Using columns A, B, & C above, choose your layout, design, and option, in that order. Once you have chosen your layout, use the Quick Preview

More information

Microsoft Word 2010: Working with Styles

Microsoft Word 2010: Working with Styles CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Microsoft Word 2010: Working with Styles Fall 2014, Version 1.1 Table of Contents Introduction...3 Formatting Documents...3 Live

More information

New Solutions for Creating Accessible PDF Documents with Adobe InDesign CS5.5

New Solutions for Creating Accessible PDF Documents with Adobe InDesign CS5.5 New Solutions for Creating Accessible PDF Documents with Adobe InDesign CS5.5 Table of Contents 1 Requirements for Accessibility 1 The InDesign CS5.5- to-accessible PDF Workflow at a Glance 3 Step-by-step

More information

Ten Simple Steps Toward Universal Design of Online Courses

Ten Simple Steps Toward Universal Design of Online Courses Ten Simple Steps Toward Universal Design of Online Courses Implementing the principles of universal design in online learning means anticipating the diversity of students that may enroll in your course

More information

We re going to show you how to make a Share site. It takes just a few minutes to set one up. Here s how it s done.

We re going to show you how to make a Share site. It takes just a few minutes to set one up. Here s how it s done. Get started Sharing your pictures is a great way to keep in touch with friends and family. Now, you can connect and communicate with everyone, all in one place, by creating a Shutterfly Share site secure,

More information