Book

Suggestions

Enter your email address:

Delivered by FeedBurner


Home Page

Bloglines

1906
CelebrateStadium
2006


OfficeZealot

Scobleizer

TechRepublic

AskWoody

SpyJournal












Subscribe here
Add to 

My Yahoo!
This page is powered by Blogger. Isn't yours?

Host your Web site with PureHost!


eXTReMe Tracker
  Web http://www.klippert.com



  Friday, October 16, 2009 – Permalink –

Plan for your Site

Outline then do


Always a good idea. Pre-plan and then do. Too often projects are started without a plan and too often plans are made and not carried through.

"When creating a website there are several different tools and methods available, but it is important to plan the steps. This guide will help outline the important steps required for website creation and promotion. Information in this document should help readers avoid many pitfalls and save time throughout the process."

  1. Inception and Planning

  2. Design

  3. Construction

  4. Promotion
CompTechDoc.org:
Website Creation Tutorial




See all Topics

Labels: ,


<Doug Klippert@ 3:15 AM

Comments: Post a Comment


  Saturday, October 10, 2009 – Permalink –

Web Furnishings

Clips, buttons, templates


ZeroWeb.org accepts submissions and provides free downloads of web ingredients.

Website Layouts
Clean
Heavy
Strange
Premium

Web Graphics

Clipart


Zeroweb.org -- Free website layouts and templates, clipart, graphics and website tools.




See all Topics

Labels: ,


<Doug Klippert@ 3:09 AM

Comments: Post a Comment


  Tuesday, September 29, 2009 – Permalink –

Collection of the Good Ones

Striking sites


Here is a collection of well designed sites that make use of CSS.

How do you pick the sites?

Well first they have to be done in CSS. Tables can only be used for tabular data. Second they just have to look good to me. Beauty is in the eye of the beholder so I do not expect every site that is posted to be liked by everyone or even anyone. Also do not expect a site to be posted just because you sent it in.

With the large amount of submissions I get daily and the increasing number of showcase sites, getting your site into the Vault will now be more challenging. I look for use of color, typography, whitespace, IA and how they all fit overall in the site's structure.



CSSVault.com




See all Topics

Labels: , ,


<Doug Klippert@ 3:01 AM

Comments: Post a Comment


  Tuesday, August 04, 2009 – Permalink –

Web Things to Remember

A few small things you shouldn't forget


The Web Workshop suggests that these four items are among the many you should make sure are used correctly on your web page:
  • The Page Title

  • The Background Color

  • The Submit Button in Forms

  • Non-Breaking Spaces

See all Topics

Labels: , ,


<Doug Klippert@ 3:29 AM

Comments: Post a Comment


  Sunday, March 29, 2009 – Permalink –

Web Magazine

The difference between a blog and a magazine is thin


Here's on online mag that collects information, direction, and designs for web sites


"A List Apart Magazine (ISSN: 1534-0295) explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.

Steal our code? Copy our content?

ALA's content is protected by copyright shared jointly by the magazine and its writers, but our source code is freely available to all."

A list Apart




See all Topics

Labels: , , ,


<Doug Klippert@ 3:23 AM

Comments: Post a Comment


  Tuesday, February 24, 2009 – Permalink –

Form Design

Fancy functionals


Here is a discussion about how to design a form for use on the web.

"Computers are supposed to make our lives easier, not more difficult. As usability-conscious designers, we can make our users' lives easier by thinking about the way people interact with our websites, providing clear direction, and then putting the burden of sorting out the details in the hands of the computers—not the users.

It's that last part that we're going to focus on here. We've all heard and read about big usability mistakes time and time again: "Don't use images or flash for navigation," "Don't use Javascript for links," and I certainly hope we're all applying those lessons in our work. It's often the smallest usability quirks, however, that create the biggest annoyances for users, especially when it comes to HTML forms. Follow these guidelines, and you'll be off to a good start."


  • Use the right field for the task
  • Give them room to type
  • Shorten your forms and question "mandatory" fields
  • Mark mandatory fields clearly
  • Provide descriptive labels for all of your fields
  • Let the computer, not the user, handle information formatting
  • Use informative error messages
  • Don't return users to an altered form
Sensible Forms Brian Crescimanno




See all Topics

Labels: , , ,


<Doug Klippert@ 3:11 AM

Comments: Post a Comment


  Monday, February 09, 2009 – Permalink –

Photo Gallery

A CSS exercise


FrontPage had a Photo gallery template, and you can also save a PowerPoint show as a web page.

For another take on the problem, here are the instructions needed to create a gallery using CSS.

Click here to see what it might look like:



How to Create a Photographic Gallery Using CSS
By Stu Nicholls




See all Topics

Labels: , , , ,


<Doug Klippert@ 3:19 AM

Comments: Post a Comment


  Wednesday, December 31, 2008 – Permalink –

Photos on a Web Page

For all the world to see


A photo gallery is a Web page that contains a collection of photos arranged in a specific layout. Microsoft FrontPage provides four different layouts that you can use to arrange your graphics.



Photo Gallery

PowerPoint:
  1. Open your Microsoft Office FrontPage 2003 Web site.
  2. On the File menu, click Import.
  3. In the Import dialog box, click Add File.
  4. In the Add File to Import List dialog box, browse to the Microsoft Office PowerPoint presentation that you want to import, select it, and then click Open.
  5. Click OK.
"You can use the Web to give others access to your presentation by publishing it to a Web server or another computer that is accessible to those you want to view the presentation with a Web browser. When you publish a presentation, a copy of it is created in a file location you choose. You can publish from a presentation that is in .ppt format or that is saved as a Web page or Single File Web page."


Publishing to the Web




See all Topics

Labels: , ,


<Doug Klippert@ 1:52 AM

Comments: Post a Comment


  Tuesday, October 14, 2008 – Permalink –

Design Patterns

More suggestions


Martijn van Welie of Welie.com, has a collection of designs for web sites, GUI designs, and MobileUI designs.

Patterns

Some topics covered are:
  • Site Types
  • Ecommerce
  • Navigation
  • Basic Page Types
  • Managing Collections
  • Page Elements
    and
  • Visual Design

(As suggested by John Walkenbach's blog: j-walkblog.com)



See all Topics

Labels: , , , , ,


<Doug Klippert@ 1:30 AM

Comments: Post a Comment


  Wednesday, September 10, 2008 – Permalink –

Free Web Templates

and Flash Movies




"Want a great new look for your website? Free Layouts.com offers you just that - select from our huge database of complete "look and feel" designs. Professional, sports, technical and others — they are all here. Free Web Templates are available for you to download now.

Look around and download your favorite page layouts — for free. Also, submit templates of your own and increase traffic to your website greatly. Currently over 500 free HTML templates and 50 Flash templates for you to download!"

Free Layouts.com



See all Topics

Labels: ,


<Doug Klippert@ 4:38 AM

Comments: Post a Comment


  Monday, June 09, 2008 – Permalink –

Low Vision

Screen-magnification or zoom




Creating a Web site that accommodates people with low vision should be a goal of designers. Accessibility laws require it in some cases.

The online magazine AListApart.com, has some interesting articles:

Big, Stark & Chunky

"[Participants] told us that they often copied and pasted material into Word where they could enlarge the font even more and make it bold, thus rendering it easier for them to see."

"We have not done a good job of catering to these screen-magnification or zoom users. Using CSS, it's easy to do, as we shall soon see. And moreover, using CSS to develop zoom layouts is almost exactly what developers of handheld and PDA browsers are doing in their quest for small-screen rendering of wide, multicolumn web pages."


Also:


Web Accessibility



See all Topics

Labels: , , ,


<Doug Klippert@ 8:09 AM

Comments: Post a Comment


  Thursday, May 22, 2008 – Permalink –

Dynamic Web Templates

DWTs


"FrontPage 2003 introduced Dynamic Web Templates, a new and sophisticated type of Web page template that enables you to share a layout among several pages in a site, preserve specific regions of content from unwanted changes, and save time when you begin to manage the Web pages on your Web site.

By creating a Dynamic Web Template, you can make regions on attached pages available for other authors to add and modify content, while preventing changes to other regions on the same page. This provides you with control to preserve the layout of the pages and the template itself. When you update the content in a Dynamic Web Template, you can update the attached Web pages simultaneously."



Microsoft:
Create a master Web page layout
by using Dynamic Web Templates

Change the master page layout
by using Dynamic Web Templates

Also:

Dynamic Web Template Interchange Guidelines

"The Dynamic Web Template Interchange Guidelines have been established by a consortium of web designers and developers in an effort to provide webmasters using a third party DWT the ability to cross over from one design to another with relative ease. The goal of the DWTIG is not to standardize design; rather, to standardize the method in which the content is added to a DWT through Editable Regions within the design."

FrontPage Learning Center:
FrontPage 2003 Dynamic Web Template Packages

Themesets.net:
Help with FrontPage 2003 Dynamic Web Templates (DWT)

FP Techniques > Dynamic Web Templates
by Tina Clarke



See all Topics

Labels: , ,


<Doug Klippert@ 5:52 AM

Comments: Post a Comment


  Saturday, March 08, 2008 – Permalink –

Site Maps

Point the way



"As a Web designer and HTML builder, one of the first places I visit on a Web site is the site map. The site map shows an entire overview of the structure of the site, and more importantly, indicates how much effort was put into usability testing during the site's construction.




Learn how to chart a better site map
By Jim Kukral -Builder.com


According to Jakob Nielsen's Alertbox Usability Study on Site Maps

"27 percent of users turn to site maps when asked to learn about a site's structure. If your site map is poorly designed, you may lose 27 percent of your Web visitors. That could translate into millions of dollars of missed sales for an e-commerce site, or a massive amount of missed leads for a service company."


(A Site Map is a guide to a web site used by visitors. A Sitemap is a file used by search engines to index entries on a site. )



See all Topics

Labels: , , ,


<Doug Klippert@ 7:20 AM

Comments: Post a Comment


  Sunday, January 27, 2008 – Permalink –

Web Accessibility Checker

Make it easy



Accessibility features in FrontPage

"Accessibility, the design of HTML documents for accessibility by people with disabilities, is such an important aspect of the Internet today that the Worldwide Web Consortium (W3C) has adopted a set of guidelines for designing accessible Web sites. The Web Content Accessibility Guidelines (WCAG) closely follow Section 508 of the U.S. Rehabilitation Act.

For some Web sites, adherence to the WCAG is not optional; it is a necessity. Expression Web/FrontPage 2003 has tools for evaluating the accessibility of an entire Web site, identifying elements that violate the guidelines, and finding ways to correct the violations. The accessibility checker provides all of this functionality in a single dialog box.

To access the accessibility checker on the Tools menu click Accessibility (Accessibility Reports). You can use the accessibility checker to check a single page or an entire Web site. The accessibility checker checks for varying levels of accessibility and specifically for adherence to Section 508 of the U.S. Rehabilitation Act. You can check for errors or warnings, and you can add a manual checklist."


MSDN:
Adding Rules to the Accessibility checker


University of Toronto:
Adaptive Technology Resource Center (ATRC)



Making Your Web Site Accessible to the Blind
Cynthia Says



See all Topics

Labels: , ,


<Doug Klippert@ 7:04 AM

Comments: Post a Comment


  Monday, January 21, 2008 – Permalink –

Page-break CSS

Before or after


You can put a break on a web page like you can in a document.
A Cascading Style Sheet makes it simple

"The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn."


Orphans are parts of a paragraph that begin on the previous page. An orphan has a future, but no past.

The only paging properties supported by Internet Explorer 7, Safari 3 and Firefox 2 are page-break-before and page-break-after.
The page-break-before and page-break-after properties enable you to say that a page break should occur before or after the specified element. The following example starts a new page every time an h1 heading is encountered and after every .section block.
h1 {
page-break-before:always }
.section {
page-break-after:always}


Etiquette of Pagination



See all Topics

Labels: , ,


<Doug Klippert@ 6:23 AM

Comments: Post a Comment


  Saturday, August 18, 2007 – Permalink –

CSS

Cascading Style Sheets



As a web page is formatted in FrontPage, the style choices are applied to each element.
To format the body of the page, the HTML code might be:

<body background="blue" color="white" font-family="times, serif" font-size=10pt>

Every page on the site would need to be coded this way in order to have a consistent look.
Cascading Style Sheets will simplify the problem. On an external page the elements can be defined like this:

body {
background: blue;
color: white;
font-family: times, serif;
font-size: 10pt


Each page would contain a reference to the CSS definitions:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


When the element "body" is used it will now use the CSS references.

For more information see:

Using Cascading Style Sheets on Your Web Site
David Berry

and
Eric Meyer's Site

In this Blog:
CSS Links
and:
More Cascading Style Sheet Help

[Edited entry 9/4/2004]



See all Topics

Labels: , , ,


<Doug Klippert@ 6:53 AM

Comments: Post a Comment


  Saturday, May 19, 2007 – Permalink –

Themes and Templates

Need a look?



Themes are a collection of design elements and color schemes that can be applied to your web site to give it a unified appearance.

Templates include themes and layout modules to aid in quickly creating a web site. Templates can be purchased through the web, but here is one of the locations that provide free design help.

FreeLayouts.com

"Want a great new look for your website? Free Layouts.com offers you just that - select from our huge database of complete "look and feel" designs. Professional, sports, technical and others - they are all here. Free Web Templates are available for you to download now.

Look around and download your favorite page layouts - for free. Also, submit templates of your own and increase traffic to your website greatly. Currently over 500 free HTML templates and 50 Flash templates for you to download!"




See all Topics

Labels: ,


<Doug Klippert@ 7:27 AM

Comments: Post a Comment


  Sunday, March 11, 2007 – Permalink –

Color Safe Not?

The other side of the wheel



Death of the Websafe Color Palette?
One of the givens of Web design, the holiest of holy truths, is the sanctity of the 216 websafe color palette. It's a rite of initiation for every Web designer or developer: Use only these colors, we are told, and don't question why.

By David Lehn and Hadley Stern. David is a senior information architect and interface developer in the Milan office of Razorfish. Hadley is a senior designer in Razorfish's Boston office.



See all Topics

Labels: ,


<Doug Klippert@ 6:50 AM

Comments: Post a Comment


  Thursday, February 15, 2007 – Permalink –

Color Blind

Be seen by all



Books on web design warn against using the colors red and green.

One out of twenty people have problems with some form of color blindness.

Here is a site that will let you check your web pages. You will be able to see the page as it appears to someone with one of the three main types of color deficit.

Vischeck

Normal



Deuteranope color blindness

hats, deuteranope



Colorblind Web Page Filter


How do things look to Color Blind People


Web Colors


Consider the Color Blind



See all Topics

Labels:


<Doug Klippert@ 7:47 AM

Comments: Post a Comment