WebsiteTips.com - Web Design Tutorials, Tips, Top Resources

Colophon

The latest version of WebsiteTips.com, online 28 November, 2006, has a fresh new design with warm, inviting colors inspired by rich woodwork and wood paneling. Behind the scenes, the new look is supported by standards-based markup and helpful server-side programming. The entire site, its design, and all its content are by Shirley Kaiser, SKDesigns, Web Site Design and Development. This page explains some of the details.

About the Visual Design

The overall visual design and color palette for the latest design of WebsiteTips.com (November 2006) was inspired by the gorgeous woodwork and rich wood paneling in some of the libraries that I've visited in Europe (such as the library at the Abbey at Melk in Austria along the Danube near Vienna), along with antique paneling or custom-built home libraries. Since WebsiteTips.com is a 'library' of resources, for years I thought about creating a visual design reminiscent of being surrounded by warm, luxurious, rich woodwork and paneling, cozy chairs and couches, a warm fire in the fireplace, a cup of hot tea, soft music, and an abundance of wonderful books and other sources. This latest design is one possibility from that inspiration.

What does this design feel like to you? Does it feel warm and inviting? Or something else? I'd love to know. Find anything amiss with the design - weird gaps, funny spaces, something that doesn't work right, broken links? Let me know that, too, via the Bug Report Contact page.

All images at this site, includes images for the visual design, are Web optimized to help keep their file sizes to a minimum and to help the initial page load times. As many Web designers and developers already know, images are then in the visitor's browser cache so they're only downloaded that one time, which also helps bandwidth and page load times.

People have asked if any part of this design is available for use - sorry, but no, it's not! I'm always happy to create something unique for you, though. Feel free to contact me for information and pricing - best to use my business site contact form, though. Thanks!

Fonts

For fonts and dingbat fonts used within artwork throughout the site, see the section below, Artwork, Graphics Throughout the Site.

top

Behind the Scenes

Behind the scenes, the development is based on W3C Recommendations, specifically XHTML 1.0 Transitional and CSS 2.1. The WebsiteTips.com Web site also conforms to the WCAG, the W3C's accessibility guidelines.

Server-Side Programming

The WebsiteTips.com Web site also takes advantage of server-side technologies to provide helpful efficiency and convenience for the Web site's overall management, maintenance, and changes. Once the design was established, a main template was created utilizing these technologies to centrally serve and customize navigation, headings, and other common page elements. The navigation, for example, is customized for each page, such as highlighting the current section and the current page. Server-side programming is also used to customize the page introductions, images, and breadcrumb navigation trails for each section and each page. In addition, server-side programming provides time-critical and time-oriented fresh content on the homepage and throughout the entire site that automatically changes or expires when I specify. In essence, I created a custom content management system to suit the specific needs of this site.

Everything that's customized for each page is intended to help the user experience, blending seamlessly into each page, in addition to making the site management easy and convenient behind the scenes.

 Cover: Don't Make Me Think, Second Edition (2005), by Steve Krug.  You might not notice all the details resulting from the server-side programming and carefully detailed information architecture and layout, but hopefully you'll be able to navigate through the site easily, know where you are at all times within the Web site, and be able to search for something and find it quickly and easily. As Steve Krug's book title says, “Don't Make Me Think.”

We also welcome and greatly appreciate feedback about WebsiteTips.com, so please let us know what you think.

Printability

If you click File, then Print Preview in your browser window, you'll see that the print version looks visually different than the screen version. (Just looking at the Print Preview onscreen will show you what I mean - you don't have to actually print a page.)

In addition, the URL references will appear in print in many newer browsers, such as Firefox and Opera, which can be especially handy since WebsiteTips.com provides thousands of Web site resources. Unfortunately, however, Internet Explorer 6 doesn't support the W3C recommended CSS for this. So don't use Internet Explorer if you want to print paper copies of any of the pages at this site and have the URLs appear.

The use of CSS to specify styles for print helps provide improved printability for each page, while also eliminating the necessity of creating and maintaining duplicate print-version pages.

Tools, Programs

Adobe Photoshop Extended CS4 After pencil and paper sketches, Adobe Photoshop CS2 was used for creating the visual design, all graphic images, retouching photos if needed, and for resampling (resizing) and optimizing photos and images for the Web. Adobe Photoshop CS3 Extended has been used since April, 2007, along with Adobe Illustrator CS3.

Adobe Illustrator CS4All development behind the scenes was created by hand using TopStyle Pro and validated with CSE HTML Validator and W3C's HTML and CSS validators. This helps to ensure the lean, clean markup based on Web standards.

top

Artwork, Graphics Throughout the Site

Unless noted otherwise, all artwork and graphics were created specifically for WebsiteTips.com by its owner, Shirley Kaiser, SKDesigns. And yes, all artwork and graphics are also copyrighted like everything else at this site - see our Copyright Information page for details.

In addition to asking about the fonts used for the Websitetips.com logo and headings (listed above), many have asked about the fonts used for various graphics, so they're listed below.

Jump to:

Web Design Business Section Images

Page: Training, Education, Online Courses

Design and Layout Section Images

Page: Design and LayoutAdobe Illustrator CS4

top

Fonts Section Images

Page: Fonts (Section Homepage)

Page: Web Sites with Freeware Fonts or Shareware Fonts

top

Page: Font Foundries

top

Page: Educational, Learning, Teaching Fonts

Page: Music Notation Symbols Fonts, Music Dingbats

Page: Pixel Fonts, Screen Fonts

top

Page: Euro Symbol

top

Graphics Section Images

Graphics Main Page

top

SEO, SEM Section Collages, Images

Pages: SEO, SEM; SEO, SEM » SEO, SEM Articles, Tutorials; SEO, SEM » SEO Tools

Page: SEO, SEM Articles, Tutorials » Link Popularity and Development

top

Typography Section Images

Page: Typography Main Page

top‘On this page’ menu

Disclosure Regarding MyFonts.com Affiliate Program

[*note] Links thus marked are to sites for which WebsiteTips.com has signed up for an affiliate program - such as MyFonts.com.

Since WebsiteTips.com already had links to their site anyway, I've purchased fonts myself from MyFonts.com, and because they have a strong reputation, WebsiteTips.com's owner, editor went ahead and signed up for their affiliate program.

  • WebsiteTips.com had links to MyFonts.com prior to signing up for their affiliate program.
  • WebsiteTips.com and its owner don't get paid anything for:
    • including any of the Myfonts.com links at WebsiteTips.com.
    • listing MyFonts.com links at WebsiteTips.com.
    • anyone clicking on the MyFonts.com links.
  • WebsiteTips.com and its owner do get an affiliate payment if and only if someone makes purchases from MyFonts.com from the MyFonts.com links on this page.
  • WebsiteTips.com continues to add ONLY quality resources, regardless of the above affiliate program that comprise only a handful of links out of our 2,500+ resources.
  • Like any other helpful resources, Websitetips.com continues to add new annotated resources discovered that we feel would be helpful to visitors, whether or not they are related to our very short list of affiliate programs.
  • Affiliate text links anywhere at WebsiteTips.com that aren't otherwise clearly noted as an ad or a sponsor are duly noted with the above [*note] link.
  • In addition, effective 04 November, 2007 all affiliate links now permanently include rel="nofollow" tags, a recently added requirement to Google's Webmaster Guidelines for “paid links.”

For more information on “paid links” and the use of rel="nofollow", see Potential Penalties or Banning by Search Engines and Directories here at WebsiteTips.com.

Sponsored Links:

top‘On this page’ menuNavigation belowSearch/Sidebar

About WebsiteTips

Most Popular Books

In association with  In Association with Amazon.com 

Our Other Sites

SKDesigns

Effective, accessible, standards-based Web site design since 1996

SKDesigns - skdesigns.com

Page copy protected against web site content infringement by Copyscape

Within Web Site Resources:
SkipShow or Hide Detailed Navigation