- You are here:
- WebsiteTips Home
- About WebsiteTips
- Colophon
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
- The WebsiteTips.com logo, “WebsiteTips.com” uses ITC Kabel Demi and ITC Kabel Book, part of the ITC Kabel font family.[*note]
- The WebsiteTips.com logo tagline, “Tutorials, Tips, and Top Resources” and “WebsiteTips.com,” use Joe Gillespie's MINI 7 pixel font.
- Web Site Icons, such as “New!” and “Updated!”: the text in those icons use Joe Gillespie's MINI 7 pixel font.
For fonts and dingbat fonts used within artwork throughout the site, see the section below, Artwork, Graphics Throughout the Site.
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.
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
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.
All 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.
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
- Education Collage, vector illustration purchased from iStockphoto, entitled Articles of Graduating Student.
Design and Layout Section Images
Page: Design and Layout
- Drawing Tools Collage, hand drawn in Adobe Illustrator CS3. Inspired in part by:
- Graphic Arts JL font. Font designer: Jeff Levine, Jeff's Fonts and Dingbats (Note: If his site's server is down, there are many of his dingbats featured at the Dingbat Pages here).
Fonts Section Images
Page: Fonts (Section Homepage)
- Fonts and Sun collage at top of page, fonts used:
- 'Fonts' characters: MemphisDisplay. Font Designer: Dennis M. Walsak.
- 'Sun' dingbat: Mixed Bag O' Dings, by Jeff Levine, Jeff's Fonts and Dingbats
(Note: If his site's server is down, there are many of his dingbats featured at the Dingbat Pages here).
Page: Web Sites with Freeware Fonts or Shareware Fonts
- Sun and Stars Collage next to A-Z Font Library listing, font used:
- Circular Building Blocks 1 from About.com's Desktop Publishing Fonts Library. Free dingbat font created by Jacci Howard Bear, About.com Guide for Desktop Publishing.
- PictSwirls collage next to the Coron's Sources of Fonts listing, font used:
- Pictish Swirl Script from Coron's Sources of Fonts. Dingbat font designer: Fuzzypeg (free font available from both sites).
- WaterDrops collage to the right of the Divide by Zero listing, fonts used:
- Tombots, Tombats 3. Font designer: Tom Murphy of divide by zero.
- 'Dingbats' collage, fonts used:
- Business/Industrial, by Alan Carr (free dingbat font from The Dingbat Pages).
- Border Corners 2, by FontFreak, free font available via the FontFreak Web site.
- ITC Stone Sans.[*note] Font Designer: Sumner Stone (commercial font), originally via Linotype, ITC.
- 'Typewriter fonts' collage, fonts used:
- Mom's Typewriter, by Christoph Mueller (free font available via Mueller's site Free Fonts by Christoph Mueller or via Urban Fonts: Mom's Typewriter).
- Postage Stamps. Font designer: Dixies Delights (free font).
- Note: the 'postage stamp' squiggly lines are NOT part of the Postage Stamps font - I created those myself using Photoshop.
- Drawing Tools Collage, font used:
- Graphic Arts JL. Font designer: Jeff Levine, Jeff's Fonts and Dingbats (Note: If his site's server is down, there are many of his dingbats featured at the Dingbat Pages here).
Page: Font Foundries
- Fonts collage at top of Fonts Foundries page, font used:
- Roughwork Initials. Available for purchase from Scriptorium.
- Collage of font names next to Adobe Type Library listing, fonts used:
- All fonts, ornaments and dingbats are from Adobe Fonts:
- Adobe Caslon (typeface and ornament)
- Anna, aka ITC Anna. Font Designer: Daniel Pelavin, for ITC (1990).
- Bauhaus
- Isadora
- Sonata (music treble clef symbol)
- Tiepolo, aka ITC Tiepolo Book. Font Designers: Cynthia Hollandsworth and Arthur Baker, AlphaOmega Typography, for ITC (1987).
- ZapfChancery
- Zapf Dingbats
- All fonts, ornaments and dingbats are from Adobe Fonts:
- Lyre Graphic next to Emerald City Fontwerks listing, font used:
- Musical Instruments Third Chair Clipfont. Font designer: Steven Lundeen, Emerald City fontwerks.
- 'Lisa' text graphic next to Letterhead Fonts listing, font used:
- Lisa. Font design by Chuck Davis, Letterhead Fonts. (This font makes me want to change my name to Lisa!) Note that the gold braid and effects created with Photoshop by Shirley Kaiser, SKDesigns (no plug-ins were used).
- Egyptian hieroglyphics next to Matchfonts.com listing, font used:
- Nahkt. Free sample from Matchfonts.com
- P22 collage next to the P22 listing, fonts used:
- Font Designer for all fonts in this collage: P22 Type Foundry:
- Cezanne
- DaVinci
- Johnston Underground
- Font Designer for all fonts in this collage: P22 Type Foundry:
- Decorative Initial next to Scriptorium listing, font used:
- Pyle's Initials, (letter 'T'). Font designer: Scriptorium.
- Collage of 3 Fonts next to Type Quarry listing, fonts used:
- Font Designer for all fonts in this collage: Brian Willson, Type Quarry:
- Treefrog
- Houston Pen
- Pumpkinseed
- Font Designer for all fonts in this collage: Brian Willson, Type Quarry:
- Swan image with English Hand font sample next to Walden Font Co., fonts used:
- Font Designer for all fonts in this collage: Walden Font Co.:
- English Hand, from Minuteman Printshop set
- Swan image, from Minuteman Printshop set clipart (colors added with Photoshop)
- Font Designer for all fonts in this collage: Walden Font Co.:
Page: Educational, Learning, Teaching Fonts
- Cursive writing font graphic, font used:
- DN Cursive with Rules. Available for purchase from Educational Fontware.
Page: Music Notation Symbols Fonts, Music Dingbats
- Music image next to Adobe Sonata listing, font used:
Page: Pixel Fonts, Screen Fonts
- Collage at top of page, fonts used:
- Cayetano Round Italic. Font Designer: Fredrick Nader, Apostrophic Labs.
- screenfox 9 - Font designer: nothing.ch
- Silkscreen Expanded, Silkscreen Bold. Font Designer: Jason Kottke.
- snoot.org pixel10. Font designer: Tom Murphy, Divide by Zero. (Check out his dingbats - they're whacky and wonderful!)
- Standard 07_66. Font designer: miniml.com.
- 04Fonts - Font designer: Yuji Oshimoto, 04
- Tenacity, Mini7. Font Designer: Joe Gillespie.
- Lemuria. Font designer: Webtype.org, no longer online.
- Ivorg Fonts. Font designer: Andre Nossek, Meanworks, via Hi-Type.
- Collage next to MINI 7 Listing, fonts used:
- MINI 7, MINI 7 Extras. Font designer: Joe Gillespie. Available for purchase from minifonts.com.
- Collage next to pixietype listing, font used:
- CD-Icons. Font designer: pixietype. Available for free from pixietype.com. Incredible number of icons in this free dingbat font!
Page: Euro Symbol
- Euro symbol graphic at top of page, font used:
- Adobe Euro Symbol (free font)
- Euro symbol graphic next to Adobe Euro listing, font used:
- Martin Vogel's Marvosym Symbols, (free font)
Graphics Section Images
Graphics Main Page
- Collage at top of page next to introduction, fonts used:
- Artntest (Dingbat). Font designer: Listemageren, 1998. “Postcardware” font.
- ArtNouveau 1 (Dingbat). Font designer: Denise Clendenin, 1999. Freeware font available at Dingbats-UK: The Sassy Graphics Collection, Freeware Dingbat Fonts by Denise Clendenin, and elsewhere.
SEO, SEM Section Collages, Images
Pages: SEO, SEM; SEO, SEM » SEO, SEM Articles, Tutorials; SEO, SEM » SEO Tools
- Collages within introduction on each page, dingbat font used:
- Geared Up. Font designer: Gabrielle Gaither (1999). Available from RAH Creative via MyFonts.com - Geared Up.[*note]
Page: SEO, SEM Articles, Tutorials » Link Popularity and Development
- Collage within introduction on Link Popularity and Development page, dingbat font used:
- Webdings. Font designer: Microsoft's Vincent Connare (the designer of Comic Sans MS and Trebuchet MS) and top Monotype designers Sue Lightfoot, Ian Patterson and Geraldine Wade. Created for Microsoft (1997). Included with some Microsoft software, and also available for purchase, such as from MyFonts.com - Webdings.[*note] See also Microsoft's Web site for more history on the Webdings dingbat font.
- Geared Up. Font designer: Gabrielle Gaither (1999). Available from RAH Creative via MyFonts.com - Geared Up.[*note]
Typography Section Images
Page: Typography Main Page
- Collage to right of Table of Contents, font used:
- Adobe Garamond Regular (via MyFonts.com).[*note]
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: