Web Design

Design grids for Web pages

2005-12-11T04:35:00.000-08:00

Design grids for Web pages

Consistency and predictability are essential attributes of any well-designed information system. The design grids that underlie most well-designed paper publications are equally necessary in designing electronic documents and online publications, where the spatial relations among on-screen elements are constantly shifting in response to the user's input and system activity.

Grids bring order to the page

Current implementations of HyperText Markup Language do not allow the easy flexibility or control that graphic designers routinely expect from page layout software or multimedia authoring tools. Yet HTML can be used to create complex and highly functional information systems if it is used thoughtfully. When used inappropriately or inconsistently, the typographic controls and inlined graphics of Web pages can create a confusing visual jumble, without apparent hierarchy of importance. Haphazardly mixed graphics and text decrease usability and legibility, just as they do in paper pages. A balanced and consistently implemented design scheme will increase readers' confidence in your site.

No one design grid system is appropriate for all Web pages. Your first step is to establish a basic layout grid. With this graphic "backbone" you can determine how the major blocks of type and illustrations will regularly occur in your pages and set the placement and style guidelines for major screen titles, subtitles, and navigation links or buttons. To start, gather representative examples of your text, along with some graphics, scans, or other illustrative material, and experiment with various arrangements of the elements on the page. In larger projects it isn't possible to exactly predict how every combination of text and graphics will interact on the screen, but examine your Web layout "sketches" against both your most complex and your least complex pages.

Your goal is to establish a consistent, logical screen layout, one that allows you to "plug in" text and graphics without having to stop and rethink your basic design approach on each new page. Without a firm underlying design grid, your project's page layout will be driven by the problems of the moment, and the overall design of your Web site will seem patchy and confusing.

Vertical stratification in Web pages

A Web page can be almost any length, but you've only got about forty-five square inches "above the fold" — at the top of your page — to capture the average reader, because that is all he or she will see as the page loads. One crucial difference between Web page design and print page design is that when readers turn a book or magazine page they see not only the whole next page but the whole two-page spread, all at the same time. In print design, therefore, the two-page spread is the fundamental graphic design unit.

Print design can achieve a design unity and density of information that Web page design cannot emulate. Regardless of how large the display screen is, the reader still sees one page at a time, and even a twenty-one-inch screen will display only as much information as is found in a small magazine spread:

Design for screens of information

Most Web page designs can be divided vertically into zones with different functions and varying levels of graphics and text complexity. As vertical scrolling progressively reveals the page, new content appears and the upper content disappears. A new graphic context is established each time the reader scrolls down the page. Web page layouts should thus be judged not by viewing the whole page as a unit but by dividing the page into visual and functional zones and judging the suitability of each screen of information. Notice the vertical structure of the home page reproduced below.website domain names,registering domain name,purchase domain,buy a domain,all are important to start your web site. The top screen of information is much denser with links because it is the only area that is sure to be visible to all users:

www.ynhh.org

Refinance Mortgage

Get quotes from up to 4 lenders today for refinance & mortgage. Quick and easy form matches you with lenders.

PAGE DESIGN-2

2005-11-27T07:07:00.000-08:00

Consistency

Establish a layout grid and a style for handling your text and graphics, then apply it consistently to build rhythm and unity across the pages of your site. Repetition is not boring; it gives your site a consistent graphic identity that creates and then reinforces a distinct sense of "place" and makes your site memorable. A consistent approach to layout and navigation allows readers to adapt quickly to your design and to confidently predict the location of information and navigation controls across the pages of your site.

If you choose a graphic theme, use it throughout your Web site. The Bridgeman Art Library home page banner, below, sets the graphic theme for the site and introduces distinctive typography and a set of navigation buttons:

www.bridgeman.co.uk

Below is a banner at the top of an interior page in the Bridgeman Art Library site. Note how the typography and the navigation theme are carried over to the interior banners. There is no confusion about whose site you are navigating through:

www.bridgeman.co.uk

Page dimensions

Although Web pages and conventional print documents share many graphic, functional, and editorial similarities, the computer screen, not the printed page, is the primary delivery site for Web-based information, and the computer screen is very different from the printed page. Computer screens are typically smaller than most opened books or magazines. A common mistake in Web design is spreading the width of page graphics beyond the area most viewers can see on their seventeen- or nineteen-inch display screens:

Graphic safe areas

The "safe area" for Web page graphics is determined by two factors: the minimum screen size in common use and the width of paper used to print Web pages.

Most display screens used in academia and business are seventeen to nineteen inches (forty-three to forty-eight centimeters) in size, and most are set to display an 800 x 600-pixel screen. Web page graphics that exceed the width dimension of the most common display screens look amateurish and will inconvenience many readers by forcing them to scroll both horizontally and vertically to see the full page layout. It's bad enough to have to scroll in one (vertical) direction; having to scroll in two directions is intolerable.

www.microsoft.com and www.mapquest.com

Even on small computer screens it is possible to display graphics that are too wide to print well on common letter-size, legal-size, or A4 paper widths. Current browser versions attempt to resolve printing problems by providing the option to scale the page contents to fit the standard paper width. However, many users are unaware of the "fit to page" option. Another problem is that wide pages that are scaled to fit are often illegible because the type has been scaled excessively. In many Web pages, however, printing is a secondary concern. Just be aware that your readers will either lose the right margin of your layout or produce a scaled document if they print wide pages in standard vertical print layout. Pages with lots of text should always be designed to print properly because most readers will print those pages to read them more comfortably. If the page layout is too wide readers will lose several words from each line of text down the right margin or have to contend with small type.

The graphic safe area dimensions for printing layouts and for page layouts designed to use the maximum width of 800 x 600 screens are shown below:

Graphic "safe area" dimensions for layouts designed to print well:
Maximum width = 560 pixels
Maximum height = 410 pixels (visible without scrolling)

Graphic "safe area" dimensions for layouts designed for 800 x 600 screens:
Maximum width = 760 pixels
Maximum height = 410 pixels (visible without scrolling)

Page length

Determining the proper length for any Web page requires balancing four factors:

The relation between page and screen size
The content of your documents
Whether the reader is expected to browse the content online or to print or download the documents for later reading
The bandwidth available to your audience

Researchers have noted the disorientation that results from scrolling on computer screens. The reader's loss of context is particularly troublesome when such basic navigational elements as document titles, site identifiers, and links to other site pages disappear off-screen while scrolling. This disorientation effect argues for the creation of navigational Web pages (especially home pages and menus) that contain no more than one or two screens' worth of information and that feature local navigational links at the beginning and end of the page layout. Long Web pages require the user to remember too much information that scrolls off the screen; users easily lose their sense of context when the navigational buttons or major links are not visible:

Scrolling

In long Web pages the user must depend on the vertical scroll bar slider (the sliding box within the scroll bar) to navigate. In some graphic interfaces the scroll bar slider is fixed in size and provides little indication of the document length relative to what's visible on the screen, so the reader gets no visual cue to page length. In very long Web pages small movements of the scroll bar can completely change the visual contents of the screen, leaving the reader no familiar landmarks to orient by. This gives the user no choice but to crawl downward with the scroll bar arrows or risk missing sections of the page.

Long Web pages do have their advantages, however. They are often easier for creators to organize and for users to download. Web site managers don't have to maintain as many links and pages with longer documents, and users don't need to download multiple files to collect information on a topic. Long pages are particularly useful for providing information that you don't expect users to read online (realistically, that means any document longer than two printed pages). You can make long pages friendlier by positioning "jump to top buttons" at regular intervals down the page. That way the user will never have to scroll far to find a navigation button that quickly brings him or her back to the top of the page.

info.med.yale.edu

All Web pages longer than two vertical screens should have a jump button at the foot of the page:

www.ynhh.org

If a Web page is too long, however, or contains too many large graphics, the page can take too long for users with slow connections to download. Very large Web pages with many graphics may also overwhelm the RAM (random access memory) limitations of the user's Web browser, causing the browser to crash or causing the page to display and print improperly.

Content and page length

It makes sense to keep closely related information within the confines of a single Web page, particularly when you expect the user to print or save the text. Keeping the content in one place makes printing or saving easier. But more than four screens' worth of information forces the user to scroll so much that the utility of the online version of the page begins to deteriorate. Long pages often fail to take advantage of the linkages available in the Web medium.

If you wish to provide both a good online interface for a long document and easy printing or saving of its content:

Divide the document into chunks of no more than one to two printed pages' worth of information, including inlined graphics or figures. Use the power of hypertext links to take advantage of the Web medium.
Provide a link to a separate file that contains the full-length text combined as one page designed so the reader can print or save all the related information in one step. Don't forget to include the URL of the online version within the text of that page so users can find updates and correctly cite the source.

In general, you should favor shorter Web pages for:

Home pages and menu or navigation pages elsewhere in your site
Documents to be browsed and read online
Pages with very large graphics

In general, longer documents are:

Easier to maintain (content is in one piece, not in linked chunks)
More like the structure of their paper counterparts (not chopped up)
Easier for users to download and print

PAGE DESIGN

2005-11-22T23:19:00.000-08:00

PAGE DESIGN

If you ask why something works and you push back far enough, eventually everything seems to be based on contrast: the ability to distinguish one thing from another. Composition, sequencing, even legibility all rely on devices that affect the contrast between things.

We seek clarity, order, and trustworthiness in information sources, whether traditional paper documents or Web pages. Effective page design can provide this confidence. The spatial organization of graphics and text on the Web page can engage readers with graphic impact, direct their attention, prioritize the information they see, and make their interactions with your Web site more enjoyable and efficient.

Visual logic

Graphic design creates visual logic and seeks an optimal balance between visual sensation and graphic information. Without the visual impact of shape, color, and contrast, pages are graphically uninteresting and will not motivate the viewer. Dense text documents without contrast and visual relief are also harder to read, particularly on the relatively low-resolution screens of personal computers. But without the depth and complexity of text, highly graphical pages risk disappointing the user by offering a poor balance of visual sensation, text information, and interactive hypermedia links. In seeking this ideal balance, the primary design constraints are the restrictions of HTML and the bandwidth limitations on user access ranging from slow modems to high-speed connections such as Ethernet or DSL.

Visual and functional continuity in your Web site organization, graphic design, and typography are essential to convince your audience that your Web site offers them timely, accurate, and useful information. A careful, systematic approach to page design can simplify navigation, reduce user errors, and make it easier for readers to take advantage of the information and features of the site.

Visual hierarchy

The primary task of graphic design is to create a strong, consistent visual hierarchy in which important elements are emphasized and content is organized logically and predictably.

Graphic design is visual information management, using the tools of page layout, typography, and illustration to lead the reader's eye through the page. Readers first see pages as large masses of shape and color, with foreground elements contrasting against the background field. Secondarily they begin to pick out specific information, first from graphics if they are present, and only then do they start parsing the harder medium of text and begin to read individual words and phrases:

Contrast is essential

The overall graphic balance and organization of the page is crucial to drawing the reader into your content. A dull page of solid text will repel the eye as a mass of undifferentiated gray, without obvious cues to the structure of your information. A page dominated by poorly designed or overly bold graphics or typography will also distract or repel users looking for substantive content. You will need to strike an appropriate balance between attracting the eye with visual contrast and providing a sense of organization:

Visual balance and appropriateness to the intended audience are the keys to successful design decisions. The most effective designs for general Internet audiences use a careful balance of text and links with relatively small graphics. These pages load into browsers quickly, even when accessed from slow modems, yet still achieve substantial graphic impact:

www.williams-sonoma.com

When establishing a page design for your Web site, consider your overall purpose, the nature of your content, and, most important, the expectations of your readers.

HTML Elements & Basic Tags

2005-11-05T06:45:00.000-08:00

HTML documents are text files made up of HTML elements.

HTML elements are defined using HTML tags.

HTML Tags

HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters <>
The surrounding characters are called angle brackets
HTML tags normally come in pairs like and
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, means the same as

Why do We Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: means
the same as . When you surf the Web, you will notice that most
tutorials use uppercase HTML tags in their examples. We always
use lowercase tags. Why?

If you want to prepare yourself for the next generations of HTML,
you should start using lowercase tags. The World Wide Web Consortium
(W3C) recommends lowercase tags in their HTML 4 recommendation,
and XHTML (the next generation HTML) demands lowercase tags.

Tag Attributes

Tags can have attributes. Attributes can provide additional information
about the HTML elements on your page.

This tag defines the body element of your HTML page: . With an added
bgcolor attribute, you can tell the browser that the background color
of your page should be red, like this: .

This tag defines an HTML table:

. With an added border attribute, you can tell the browser that
the table
should have no borders:

Attributes always come in name/value pairs like this:
name="value".

Attributes are always added to the start tag of an HTML element.

Quote Styles, "red" or 'red'?

Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single
style quotes are also allowed.

In some rare situations, like when the attribute value
itself contains quotes, it is necessary to use single
quotes:

name='John "ShotGun" Nelson'

The most important tags in HTML are tags that define
headings, paragraphs and line breaks.

The best way to learn HTML is to work with examples.
We have created a very nice HTML editor for you. With
this editor, you can edit the HTML source code if you like,
and click on a test button to view the result.

Try it Yourself - Examples

A very simple HTML document
This example is a very simple HTML document, with only
a minimum of HTML tags. It demonstrates how the text
inside a body element is displayed in the browser.

Simple paragraphs
This example demonstrates how the text inside paragraph
elements is displayed in the browser.

(You can find more examples at the bottom of this page)

Basic Notes - Useful Tips

When you write HTML text, you can never be sure how
the text is displayed in another browser. Some people
have large computer displays, some have small. The text
will be reformatted every time the user resizes his window.
Never try to format the text in your editor by adding empty
lines and spaces to the text.

HTML will truncate the spaces in your text. Any number of
spaces count as one. Some extra information: In HTML a
new line counts as one space.

Using empty paragraphs

to insert blank lines is a bad habit. Use the
tag instead. (But don't use the
tag to create lists. Wait until you have learned about HTML
lists.)

You might have noticed that paragraphs can be written
without the closing tag

. Don't rely on it. The next version of HTML will not allow
you to skip ANY closing tags.

HTML automatically adds an extra blank line before and
after some elements, like before and after a paragraph,
and before and after a heading.

We use a horizontal rule (the

tag), to separate the sections in our tutorials.

More Examples

More paragraphs
This example demonstrates some of the default behaviors
of paragraph elements.

Line breaks
This example demonstrates the use of line breaks in an
HTML document.

Poem problems
This example demonstrates some problems with HTML
formatting.

Headings
This example demonstrates the tags that display headings
in an HTML document.

Center aligned heading
This example demonstrates a center aligned heading.

Horizontal rule
This example demonstrates how to insert a horizontal rule.

Hidden comments
This example demonstrates how to insert a hidden comment
in the HTML source code.

Background color
This example demonstrates adding a background-color to an
HTML page.

Dreamweaver

Offers Macromedia Dreamweaver and Fireworks video tutorials on web developement.

affordable web design
affordable web design Company, offers complete range of website design and development solutions - from online brochure-ware to customized shopping carts and ecommerce website applications.

Introduction to HTML

2005-10-02T05:46:00.001-07:00

What is an HTML File?

HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions.

With newer software we think it will be perfectly safe to use .html.

Note on HTML Editors:

You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage, Claris Home Page, or Adobe PageMill instead of writing your markup tags in a plain text file.

But if you want to be a skillful Web developer, we strongly recommend that you use a plain text editor to learn your primer HTML.

Frequently Asked Questions

Q: After I have edited an HTML file, I cannot view the result in my browser. Why?
A: Make sure that you have saved the file with a proper name and extension like "c:\mypage.htm". Also make sure that you use the same name when you open the file in your browser.

Q: I have tried to edit an HTML file but the changes don't show in the browser. Why?
A: The browser caches your pages so it doesn't have to read the same page twice. When you have changed a page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to read the edited page.

Q: What browser should I use?
A: You can do all the training with all of the common browsers, like Internet Explorer, Mozilla, Netscape, or Opera. However, some of the examples in our advanced classes require the latest versions of the browsers.

Q: Does my computer have to run Windows? What about a Mac?
A: You can do all your training on a non-Windows computer like a Mac. However, some of the examples in our advanced classes require a newer version of Windows, like Windows 98 or Windows 2000.

Web Design | Search Engine Marketing | Akron, Ohio
Advertising, Web & Graphic Design, Online Marketing and Print Production

HTML Tutorial

2005-09-14T06:48:00.000-07:00
HTML Tutorial
In this HTML tutorial you will learn how to use HTML to create your own Web site.
HTML is very easy to learn!
You will enjoy it!
Start learning HTML now!

HTML Examples
Learn by 100 examples! With our editor, you can edit HTML, and click on a test button to view the result.
Try-It-Yourself!

HTML Quiz Test
Test your HTML skills at W3Schools!
Start HTML Quiz!

HTML References
At W3Schools you will find complete HTML references about tags, attributes, colors, entities, and more.
HTML 4.01 References

HTML Exam - Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building.
The HTML Developer Certificate is for developers who want to document their knowledge of HTML 4.01, XHTML, and CSS.
HTML Developer Certificate!

Computer Joke
Customer: "Will the Internet be open on Christmas Day?"

Product Spotlight
AJAX ControlsPowerWEB LiveControls provide rich user experience, instant server callbacks without page reloads, and dynamic updates to page elements. Download FREE Trial!

Web Hosting Partner Spotlight

"Lonex has lived up to all my expectations by providing an excellent package at a reasonable price, plus prompt, efficient, courteous service that is second to none. I am looking forward to a long association with this company."
Alan Ireland (Alan's website: www.nzsf.com)
Personal or Business hosting with 24x7 dedicated PERSONAL support
Call 1-800-574-0902 or 510-870-2470
2,500 MB disk space & 40 GB traffic for only $4.95/mo.
FREE domain registration or transfer
SiteStudio: Easy-to-use website builder - WYSIWYG
Elefante Installer: over 30 FREE ready-to-use scripts
Dual Opteron servers hosted in first class datacenter in California
Lonex.com - Delivering web hosting services since 2001

Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML 4.01, XHTML, and CSS.

Web Design Studio - Website design company in India outsourcing Web site design with aggressive inte
Web Design Studio specializes in website design, internet marketing and web hosting services. An aggressive internet marketing, outsourcing web design services, offshore Website Design & Development centers in India. Create your own website with Web Desig

Planning

2005-08-22T23:04:00.000-07:00

Planning

Web sites are developed by groups of people to meet the needs of other groups of people. Unfortunately, Web projects are often approached as a "technology problem," and projects are colored from the beginning by enthusiasms for particular Web techniques or browser plug-ins (Flash, digital media, XML, databases, etc.), not by real human or business needs. People are the key to successful Web projects. To create a substantial site you'll need content experts, writers, information architects, graphic designers, technical experts, and a producer or committee chair responsible for seeing the project to completion. If your site is successful it will have to be genuinely useful to your target audience, meeting their needs and expectations without being too hard to use.

Although the people who will actually use your site will determine whether the project is a success, ironically, those very users are the people least likely to be present and involved when your site is designed and built. Remember that the site development team should always function as an active, committed advocate for the users and their needs. Experienced committee warriors may be skeptical here: these are fine sentiments, but can you really do this in the face of management pressures, budget limitations, and divergent stakeholder interests? Yes, you can — because you have no choice if you really want your Web project to succeed. If you listen only to management directives, keep the process sealed tightly within your development team, and dictate to imagined users what the team imagines is best for them, be prepared for failure. Involve real users, listen and respond to what they say, test your designs with them, and keep the site easy to use, and the project will be a success.

What are your goals?

A short statement identifying two or three goals should be the foundation of your Web site design. The statement should include specific strategies around which the Web site will be designed, how long the site design, construction, and evaluation periods will be, and specific quantitative and qualitative measures of how the success of the site will be evaluated. Building a Web site is an ongoing process, not a one-time project with static content. Long-term editorial management and technical maintenance must be covered in your budget and production plans for the site. Without this perspective your electronic publication will suffer the same fate as many corporate communications initiatives — an enthusiastic start without lasting accomplishments.

Know your audience

The next step is to identify the potential readers of your Web site so that you can structure the site design to meet their needs and expectations. The knowledge, background, interests, and needs of users will vary from tentative novices who need a carefully structured introduction to expert "power users" who may chafe at anything that seems to patronize them or delay their access to information. A well-designed system should be able to accommodate a range of users' skills and interests. For example, if the goal of your Web site is to deliver internal corporate information, human resources documents, or other information formerly published in paper manuals, your audience will range from those who will visit the site many times every day to those who refer only occasionally to the site.

Design critiques

Each member of a site development team will bring different goals, preferences, and skills to the project. Once the team has reached agreement on the mission and goals of the project, consensus on the overall design approach for the Web site needs to be established. The goal at this stage is to identify potential successful models in other Web sites and to begin to see the design problem from the site user's point of view.

Unfortunately, production teams rarely include members of the target audience for the Web site. And it is often difficult for team members who are not already experienced site designers to articulate their specific preferences, except in reference to existing sites. Group critiques are a great way to explore what makes a Web site successful, because everyone on the team sees each site from a user's point of view. Have each team member bring a list of a few favorite sites to the critique, and ask them to introduce their sites and comment on the successful elements of each design. In this way you will learn one another's design sensibilities and begin to build consensus on the experience that your audience will have when they visit the finished site.

Content inventory

Once you have an idea of your Web site's mission and general structure, you can begin to assess the content you will need to realize your plans. Building an inventory or database of existing and needed content will force you to take a hard look at your existing content resources and to make a detailed outline of your needs. Once you know where you are short on content you can concentrate on those deficits and avoid wasting time on areas with existing resources that are ready to use. A clear grasp of your needs will also help you develop a realistic schedule and budget for the project. Content development is the hardest, most time-consuming part of any Web site development project. Starting early with a firm plan in hand will help ensure that you won't be caught later with a well-structured but empty Web site.

My Links

2005-08-18T11:35:00.000-07:00
Paid Survey

Get free information and details to more than 500 paid online survey companies that will pay you cash money to take online paid surveys. All of them are free to join!