Web Publishing
gold star
 Exceptional resources are marked by gold stars.
General | CSS| HTML| Forms | Design | Type | Programming
SEO | Web Metrics | Mobile

Web Tips logo WebsiteTips.com is an educational Web site design and development resource, containing many things not indexed here.
Codetch is a new Firefox add-on designed to function as a Web authoring tool on the order of Dreamweaver. This application is still in development, and so it is too soon to pass judgment. A preliminary look is promising.



See also:
Note: Kompozer is used to create these pages. The program works, but it is still in beta. I would not advise anyone unfamiliar with HTML and CSS to use it. Dreamweaver remains the standard for WYSIWYG Web page creation. Current price: Buy US$399

Komposer logo Kompozer is an open source web development tool built on NVU. The project strives to fix bugs in the NVU project and added new features to it. Both the HTML editor as well as the CSS editor has so far be fixed and updated as part of the Kompozer project - and many more changes are scheduled. Apart from that the main feature set is exactly as in NVU. And one of the most important features is still that editing take place in WYSIWYG (What You See Is What You Get) mode allowing you full control of layout as you work with your web design.
Dreamweaver logoDreamweaver CS4 [N]ow includes CSS tools, Ajax components for building dynamic user interfaces, and intelligent integration with other Adobe software.



Dreamweaver tutorials:

See also:

PDF logoCreate PDF From Any Application

Three methods for creating PDF documents are available to most computer users:

  • "Export to PDF" or "Save As PDF" from your word processing program. To use this method, consult the documentation for your word processing program. Open Office is a free, Open Source program containing a word processor that will create a PDF document.
  • Use an on-line conversion utility. One such program is PDF OnlineTM. For others, consult Google using the search phrase "convert to pdf online." These services are usually free, allowing you to upload a word processor document, which is then converted and emailed to you in PDF format.
  • Use a PDF printer driver This method uses a virtual printer on your computer. This virtual printer creates a PDF document when you click on "Print" while having the virtual printer selected as your printer. A number of free programs exist for the PC, including the Open Source program cutePDF. Macintosh computers have a built-in function to create PDF documents.

See also:
  • PDF Toolbox: 40+ Tools to Rip, Mix and Burn PDFs.

  • PdfonFly: a pdf conversion service that allows you to convert Web pages, reports and images to Adobe PDF files. Currently, the service offers conversion ofr valid urls of your html, asp, php, .Net, cgi, jsp pages and jpg / jpeg, gif, png files. Very soon "doc to pdf" will be available as well. You can also create PDF online by entering your text / html into a Web form.

  • Planet PDF caters to anyone and everyone with an interest in PDF - from professional Web or print publishers seeking appropriate tools, to rank beginners wondering exactly what "PDF" stands for. Assisting PDF users since 1998, Planet PDF is a comprehensive, popular and independent Web site exclusively focused on Adobe Acrobat/PDF users and uses. Planet PDF is a division of Nitro PDF Software.

  • Scribus, an open-source alternative to Adobe Indesign. This app is still in Beta. In testing it, I created a PDF document fairly easily. Templates--check for availability.

  • Pisa, an HTML to PDF converter--supports HTML5 and CSS2. German.

  • FPDF--a PHP class which allows to generate PDF files with pure PHP, that is to say without using the PDFlib library. F from FPDF stands for Free: you may use it for any kind of usage and modify it to suit your needs.

  • HTM to PDF, an on line service. See this page converted by the service on March 11, 2008. Note that the Flash menu at the top is going nuts, while the links in the body all seem to function.

Further reading:
Google logo
Google Page Creator Google Page Creator is a free online tool that makes it easy for anyone to create and publish useful, attractive web pages in just minutes. At the same time, google will host any valid Web page, including Flash, created off-line and uploaded to the Google servers. Note the URL of this page--it is on the free Google server.
  • No technical knowledge required.
    Build high-quality web pages without having to learn HTML or use complex software.
  • What you see is what you'll get.
    Edit your pages right in your browser, seeing exactly how your finished product will look every step along the way.
  • Don't worry about hosting.
    Your web pages will live on your own site at http://yoursitename.googlepages.com

Google Page Creator is a Google Labs project, and is still in an early testing phase. If you're interested in taking it for a test drive, login with your Gmail account to begin making pages. If you don't have a Gmail account and you have a mobile phone, you can sign up here. We invite you to let us know what you think by sending us your feedback and suggestions.

Further reading:

See also:
  • AWARDSPACE* offers ad-free web hosting, domain names, free web hosting and email adress services.

  • FREEHOSTIA* is a fully featured free plan, perfect for hosting a personal web site or a small community portal or forum. Using the "Elefante installer," you can install the necessary scripts easily with just a few clicks. There are no forced ads. Free hosting accounts are on the same servers as the paid ones.

  • 40+ Free Blog Hosts on Mashable.

  • Top Free Web Hosting, a list on Web Hosting Guide.
*These hosting sites do not require banners, popups, or other included advertising.
Flash logoYou can host a Flash site for free on the Google Page Creator. This mockup of a splash page is hosted on this same Google site.


How to get your Flash [or any kind of] site hosted by Google
  1. Create a Google account. You must create a Gmail account.
  2. Sign up for a Google Page Creator account. Opera and Safari may not be supported, so use Firefox anyway. What's the matter with you?
  3. On the main page for the Google Page Creator, click on Site settings, just down from the top, to the right.
  4. Find the "Experimental Features" button, and enable it.
  5. Your main page will now have an upload section on the right side. This is titled "Uploaded Stuff." At the bottom of this section is a link that looks like: [upload]. You will click on this link to upload your files. As of July 14, 2007 you must upload files one at a time. This will likely change soon.
  6. Upload your Flash files as you normally would. The link to your Flash site will be the URL for your Google pages plus a slash--/--plus the name of your HTML file--e.g., http://johnrobertlemon.googlepages.com/index.html.
111mb logoI have a page hosted by Google Page Creator that runs a Web form on a free PHP site called 111mb.net. Type in a name and email address to test out the form. 
Drupal logoDrupal is a powerful publishing and content management system. Users can add all sorts of content to Web pages through a system of modules. The software itself is free and open-source; users need simply pick out which site elements they want, and then put them together.

Further reading:
See also:
  • Textpattern, ditto that.

  • BIGACE - Dynamic Web CMS written in PHP, using a MySQL database, and a fully-integrated WYSIWYG Editor. Versioning, Workflows, User and Right Management, Templates, many Mods via Update, full access on the Backend with the Object-orientated PHP API.

  • Jaws is a Framework and Content Management System for building dynamic web sites.

  • CMS Toolbox: 80+ Open Source Content Management Systems on Mashable.

  • 13 free CMS options for Web Design Professionals Reviewed by Paul Anthony on not your average geeks.

Screenshot of an error messageThis image from a screenshot comes from a service called "Test your web design in different browsers." It shows a message put up by MSIE 4.01 / Windows 2000 for one of my pages.The page in question otherwise displays quite well in a number of browsers on a variety of systems. I'll have to track this down.

"Test your web design" is a great service to anyone who puts up a Web page, and wonders what others see.

See also:
  • IE7, a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6.

  • Netrenderer, screenshot of a Flash site shown below:
Edited screenshot
OOPS!
htmlPlayground XHTML+CSS REFERENCE BY EXAMPLE 0.4 BETA This beta creates visual examples of styles and tags, showing them in code form.
WEB STYLE GUIDE, 2nd edition by Patrick Lynch andSarah Horton

[This book] puts the essence of the Yale University Center for Advanced Instructional Media's wonderful online site design guide into traditional print.

The book begins the presentation of its helpful and forward-looking advice with a discussion of the overall process of defining the objectives and users of your Web site, as well as the goals you will use to measure your progress. The authors then use time-tested, traditional print concepts to clearly illustrate how to make your site interface welcoming and efficient. High-quality illustrations show how to design for overall style and professional appeal. The sections on typography and editorial style set this manual apart from many Web style guides with attention to the fine details that separate the good sites from the great.

Multimedia elements and cascading style sheets (CSS) are covered, but within the overall context of building a fine site--not with the usual hype. Media compression and delivery are addressed at a high level with concrete suggestions on formats, frame rates, and image sizes for a well-balanced approach to multimedia.

                                                                         --Stephen W. Plain
PostNuke logoPostNuke is a robust, interactive, editable CMS. You you can have your site up and running within minutes of download!

Features include:

  • Modular Structure
  • Customized Functionality through Third-Party Modules
  • Advanced User Group Permissions System
  • Multi-language Support (About 36 Language Packs Available)
  • Embedded WYSIWYG HTML Editor Activated
  • Site Search
  • Advanced API (Application Programming Interface)
  • Focused on High Level of Security
  • Easy-to-Use Guided Browser Based Installation and more!

Key advantages include:

  • Open Source - GNU GPL Licensed
  • Adheres to W3C standards (XHTML and CSS2)
  • Accessable output - follows WCAG accessibility guidelines
  • Search engine optimized output.
Further Reading on Web publishing:
See also:
Textism logoHTML Cleaner is an online application that strips proprietary Microsoft tags and other crud from Word HTML documents, leaving basic formatting intact. File sizes are greatly reduced, and the returned HTML is easier to read, revise, and employ.

This thing saved me a whole lot of time. Microsoft Word is worse for documents than NAMBLA is for the Cub Scouts.

Here is a step-by-step explanation of the process.
Plone logoPlone is a ready-to-run content management system that is built on the powerful and free Zope application server. Plone is easy to set up, extremely flexible, and provides you with a system for managing web content that is ideal for project groups, communities, web sites, extranets and intranets.

Search Engine Optimization
seo-browser logo



See your website as a Search Engine sees it.
See also:
  • A Cook's Tour of Search Engine Optimization. A series of tutorials on the basics.

  • Hide .php extension with url rewriting using .htaccess on Roshan's Blog.

    When a search engine visits the dynamic url like product.php?id=5 it does not give much importance to that URL as search engine sees “?” sign treat it as a url which keeps on changing. so we’re converting the dynamic URL like the product.php?id=5 to static url format like product-5.html. We’ll rewrite the url in such a way that in browser’s address bar it will display as a product-5.html but it actually calls the file product.php?id=5. So that why these kind of URL also named as SEO friendly URL.

  • Search Engine Keyword Position, on SEO Tools, checks the search engine result pages of Google, Yahoo, and MSN to see what position your site holds for a particular keyword phrase.

  • The Web Developer’s SEO Cheat Sheet.

  • SEO Guide for Designers  who want to learn about making it easier for websites or blogs to be found by search engines. The article explains common mistakes made by designers and developers, and provides some basic tips to optimize a site for search engines. On Web Designer Wall.

  • 10 SEO Rules for Designers, on Just Creative Design.
    Rule Zero: Do Not Cheat.
    Rule One: Stick to Your Keywords.
    Rule Two: Content is King.
    Rule Three: Clean Code is Searchable Code.
    Rule Four: The Home Page is the Most Important Page.
    Rule Five: Links Have Meaning.
    Rule Six: Title Tags for the Win.
    Rule Seven: Alt Tags Matter.
    Rule Eight: Ignore Most Meta Tags.
    Rule Nine: Have a Site Map.
    Rule Ten: Design for Humans.

  • An SEO implementation for Flash, on zero point nine.
Further reading:
  • The Word of Mouth Manual, Volume II, by Dave Balter, in PDF format.

    This book is intended for several audiences: word of mouth practitioners and participants, so they can better understand and celebrate their medium; traditional marketers and advertisers who are trying to truly understand word of mouth and know they must do so in order to evolve, adapt, and succeed; and the general public, who live by word of mouth every day whether they realize it not.

  • 10 Ways to Promote a Business Online for Free

    Most businesses can benefit from free online promotion. We round up a handful of the best free resources for promoting your business on the web. While there are hundreds of free services out there, these are our pick of 10 of the essential resources that will help drive traffic to your site.


Web Metrics
Google Analytics LogoGoogle Analytics is a free service allowing anyone with a website to track conversion data, analyze the flow of visitors through their site, and identify elements of their site that could be changed to improve visitor retention.

See also:
CSS
General | Fonts | Tricks | CSS3
Sitegrinder logo  Sitegrinder 2 is a Photoshop plugin that creates CSS-styled Web pages directly from PSD files. It has what is perhaps the worst documentation I have ever seen for an application. That said, the application itself seems to work.

I created a page from it here.

Admittedly, I went back into the code to correct things that were likely the result of my lack of familiarity with the tool. The methods are less than intuitive. But it may well be that with a bit of practice, even I could whip off something sophisticated using it.

One thing that the tool cannot do is to replace a good foundation in CSS. If you don't know what CSS can do, this tool will be of limited use to you.

The trial version does not appear to have a time limit. Instead, it watermarks images. It watermarked the header in the page I created. I promptly opened the file that it created, and pasted in a non-watermarked version of the image. Hey! You can't watermark CSS.

But that's OK. The company should be paid for developing this nifty tool. It allows you to make finished pages during your evaluation. Then, when you get tired of removing the watermarks, you can pay them the money and get a key.

Stay tuned for a more in-depth evaluation.

See also:
  • psd2css online converts PSD web page designs into strict XHTML compliant CSS web pages automatically. Use Photoshop or The Gimp to create designs , then upload the PSD files. This service returns valid XHTML, along with subsidiary CSS and image files.

  • A Photoshop to HTML/CSS Tutorial from Swinburne. Shows you how to take a website design from Photoshop or Illustrator, slice it up and rebuild it using HTML and CSS. It covers a wide range of CSS concepts from positioning to styling, using a real world project.
CSS and Text by Ross Shannon--a nifty and concise reference, on HTMLSource.
W3CThe WC3 CSS Stylesheet Tester.


See also:
*

CSS Zen Garden

 
Big Huge Labs Palette Generator. screen shot (A rollover triggers a popup.) The accompanying popup is a screenshot of how this color palette generator works. I have it listed under "CSS," because it very nicely generates the CSS color codes as well has the hex codes. I retained the quote that came with the screen shot, as it aptly describes the contents of the photo.

For more color palettes, see the Imaging Page.
Macloo logoMacloo's small set of pages provides basic examples of some of the most simple aspects of using CSS to control fonts, colors and spacing on Web pages. The page has listed some up-to-date links to helpful CSS resources on another page.

There are no lengthy explanations here, but the code is very brief. By comparing any example page to the previous page (linked to it), you can see what was changed to produce the new appearance.

Please feel free to copy the CSS and use it on your own pages.
Photo by Chris MancheroVisual CSS Creator is a helpful tool that will turn any style sheet (CSS) into a html page that will show the CSS visually for the developer to use to understand the styles better. To use enter the url where the CSS is located and hit the Create Visual CSS button, when the new page loads you can save the file as html and use it as a reference.
Css Toolbox logoThe CSS Tinderbox is an effort to support open source web design by providing very basic, yet solid, CSS/XHTML design templates that web designers and web developers can use as the foundation for their own projects.
Spiffy logoSpiffy Corners and Boxes CSS Code generators for borders and boxes.

Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript and the extra server calls that are incurred when using external JavaScript files or images. When your websites are serving millions of files a day you start to pay attention to how many files a particular page needs in order to load.

See also:
Sourceforge logo  CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).

In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

CSS Fonts

CSSType logo Web Safe Typography on Screen for Pixel Perfectionists--an online visualization utility and CSS generator for browser fonts.
Further reading
  • Font Sizes on the Web--Specifying fonts for websites can be confusing, however, the use of a Cascading Stylesheet (CSS) will provide the greatest control. The use of CSS will allow you to control the pixel or point size, leading or line spacing, color, weight, and more. In short CSS allows the designer to dominate the browser's default font setting. On Designer's Toolbox.

See also:
CSS Font embedding:
cssLibrary logoCSS Library from Dynamic Drive--layouts, menus, image presentation, and a lot of other resources for CSS.
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them by Chris Coyier, November 15th, 2007, on CSS-Tricks.Com.

You’ve heard of them, but… Do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one.
See also:
Subcide logoCreating a CSS layout from scratch. This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout, explaining the concepts behind each step.
CSS tricks:
  • CSS Image Rollovers Using JavaScript for image rollovers seems messy, requires two separate images, and can only degrade gracefully to nothing if the user has JavaScript turned off. Here is an all-CSS method of achieving the same effect. At RedVodkaJelly.com.

  • IE6 Min/Max-Width Hack--a nice little "hack" for one of the most annoying oversights in IE6 - minimum/maximum widths.

  • Pure CSS Scrollable Table with Fixed Header--Using CSS to allow scrolling within a single HTML table

  • GreyBox, a CSS-based popup. The basic features:

    * It does not conflict with pop-up blockers
    * It's only 22 KB!
    * It's super easy to setup
    * It's super easy to use
    * You can easily alter the style as it is controlled through CSS
Other CSS templates and code generators:
 The EM Calculator, a simple em calculator for working out pixel to em values based upon the current set font-size. You could use this for working out the width of an element in em’s. Where your design is say 120px you could get that value in em’s. Just enter the pixel value in the box and it will auto calculate.


CSS cheat sheets:

See also:

Further reading:
  • CSS Layout Techniques: for Fun and Profit

  • 6 Keys to Understanding Modern CSS-based Layouts  
    Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There's font styles, margin, padding, color and what not. But there's a wall that people will run into... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser. These are the six things that will help people get over the hump.

  • CSS Reference, based on the CSS 2.1 specification.

  • Another CSS Reference, an alphabetical list over the most common CSS1 and CSS2 syntax and properties. Click on a property to see examples, browser support, possible values etc.

  • CSS Basics a good primer.

  • TopXML CSS Introduction. Another good primer.

  • 5 Web Design Subtleties Often Overlooked from Martin Ringlein.

  • Learn CSS Positioning in Ten Steps on BarelyFitz Designs

  • Index DOT Html and Css sites are meant to be repositories and references for technical information about the HTML and CSS languages. Index DOT Html covers the elements, attributes and the popular browsers that support them. Index DOT Css covers CSS syntax, properties, the popular browsers that support them, as well the zillion or so miscellaneous bits that make CSS such a wonderful boon/headache for authors. These references are not meant to replace any of the official references put forth by the W3C or its member companies, it is rather meant to collect all of the far-flung resources into a single, hopefully coherent whole.

  • 70 Expert Ideas For Better CSS Coding on Smashing Magazine.

  • Pro CSS and HTML Design Patterns by Michael Bowers. Published by apress® on April 23, 2007.

  • Google Directory CSS tutorials.

  • CSSBEAUTY™--a project focused on providing a database of well designed CSS based websites, to showcase designers' work, and to act as a small portal to the CSS design community.

  • A Killer Collection of Global CSS Reset Styles On Perishable Press.
    Using CSS to style semantically meaningful (X)HTML markup is an important key to modern web design practices. In a prefect world, every browser would interpret and apply all CSS rules in exactly the same way. However, in the imperfect world in which we live, quite the opposite frequently happens to be the case: many CSS styles are displayed differently in virtually every browser. 

  • Ten CSS tricks you may not know, on webcredible.
CSS Tutorials:
  • KAOZ, a tutorial aggregator.

  • The House of Style has several cascading style sheets tutorials, with explanations, excercises and worked examples to get you up and running with style sheets as quickly as possible.

  • Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts

CSS3

CSS3 Resources, by Ryan Carson, on Think Vitamin.
HTML
Lynda logoHTML Essential Training with William E. Weinman on Lynda.Com. A series of video lectures covering the how and the why of HTML documents, including document structure, block and inline level tags, floating images, controlling white space, phrase and font markup, including setting up a simple web page, and adding CSS style sheets and JavaScript rollovers. Subscrption, $25/month.

A Bare BoneThe Bare Bones Guide to HTML lists every official HTML tag in common usage, plus Netscape and Microsoft extensions. Version 4.0 of the Guide is designed to conform to the HTML 4.0 specification.

See also:
See also:

Landofcode, a series of tutorials to help you become acquainted with HTML through an introduction to the language with an explanation of its usage, what you can do with it, its limits, a short discussion of the world wide web, and the protocols used to display HTML documents on the world wide web.

The HTML Tutorial at the W3C Schools.

Cheat Sheets for Front-end Web Developers on Six Revisions.

htmlPlayground XHTML+CSS Reference by Example.

HTML Basics, an OpenUW course from the University of Washington.

Introduction to Semantic HTML , on Web Design From Scratch.
Anyone who creates their own HTML pages today should aim to make their markup semantically correct.
HTML 5

HTML 5 is a set of specifications that define "the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability."

Further reading:

  • Dive Into HTML5 by Mark Pilgrim elaborates on a hand-picked Selection of features from the HTML5 specification and other fine Standards... The final manuscript will be published on paper by O’Reilly, under the Google Press imprint (though perhaps under a different title). The Work will remain online under the CC-BY-3.0 License.
Mobile
Emulators:


Tools:

3 Firefox Plugins To Test Your Website In Different Resolutions, by Tim Lenahan, on makeuseof.com.

Further reading:
Micro Formats

A micro format is a markup specification for meaning. Typically, a micro format can be embedded into another document, and is parsable by an interpreter which can extract the structured information. Currently, the two most important micro formats are vCards and iCalendars, along with their styled counterparts, hCards and hCalendars.

Although not wildly popular by Web standards, micro formats present great potential in the area of the Semantic Web, sometimes called Web3.0.

The following is an hCard. To view the parsed information, load the Tails extension into Firefox, or use the Microformats Bookmarklet.
*formatted in CSS 3
See also:
Web Forms

SPRY for Web Forms:

Script Generators:
  • Contact Form Generatorr, from telepro.co.uk. This free Website Contact Form Generator utility enables you to create form-to-email scripts for your ASP, PHP or Perl web site with no programming skills needed. Just follow the steps below to start using your contact form scripts on your website straightaway.

  • PHP FormMail Generator - A tool to create ready-to-use web forms in a minutes. Once the form has been generated, you have a full functional web form. Including error checking of required fields, email address validation, credit card number & expiry date checking, multiple attachments sending, and email auto responding.

  • Web Form Factory is an open source web form generator which automatically generates the necessary backend code to tie your form to a database.

See also:
  • Validate e-mail addresses using PHP on SoapTray.

  • The files that we used in class, April, 2008.

  • LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere in your javascript, it is not just limited to form fields.

  • File upload forms that don't suck--an unobtrusive Javascript to allow for reduced-confusion, multiple file uploading.

  • PHP form tutorial. Detailed information from the form basics to advanced form processing.
Typography

Letterforms
fontstruct logoFontStruct is a free font-building tool from FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. Once you're done building, FontStruct generates high-quality TrueType fonts, ready to use in any Mac or Windows application. You can keep your creations to yourself, but we encourage users to share their "FontStructions". Explore the Gallery of fonts made by other FontStruct users and download them or even copy them and make your own variations.
Linotype logoLinotype has a nice online font finder application, FontFinder. With that accomplished, they can attend to an application they desperately need--LogoDesignerFinder.
Font Forge Logo  FontForge -- An outline font editor that lets you create your own postscript, truetype, opentype, cid-keyed, multi-master, cff, svg and bitmap (bdf, FON, NFNT) fonts, or edit existing ones. Also lets you convert one format to another. FontForge has support for many macintosh font formats.
Bitfontmaker logoBitfontMaker is an online pixel font editor. It also has an archive of Pixel Fonts that were created by others, free to download, at the Bitfont Museum.

My Fontbookis a free and easy way to browse your font collection, allowing you to easily review and catalog all of your installed fonts, previewing specific text that you enter.

See also:

  • AMP Font Viewer, an easy to use but powerful font manager, which allows getting a quick overview of both installed and non installed fonts. It can install and uninstall fonts, and organize them in categories.
Truetype logo A lot of information about it.
Showfont logoShowfont.Net All fonts are their authors' property and are either freeware, demo versions or shareware. All fonts have been collected from around the web, and are maintained with all files intact.
What the font logoWhatTheFont Upload a scanned image of the font and instantly find the closest matches in our database. If WhatTheFont can’t figure it out, you can submit your image to the WhatTheFont Forum where cloak-draped font enthusiasts around the world will help you out!

See also:
Free Brand Example FontsFree Brand Name Fonts Collection (TTF). This is a Windows site, having a number of interesting Windows fonts and utilities. These faces may not work on Mac and Linux systems.  Other font collections are also available on this site, including movie fonts, and band fonts.


See also:
typeNow logoTypeNow.net is an exhaustive repository for fonts and information about fonts. This is a really good site, and worthy of at least a quick look around. 
Urban Fonts logoUrban Fonts Most fonts on this site are freeware, however, some are shareware or linkware. You are advised to review the file included with your download, which includes information on the usage of the fonts. 
The Typetester logoThe Typetester is an online application for comparison of screen fonts. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Technical details Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.
Type Naavigator logoType Navigator:A font-finding utility based on description.
CSSTYPE. An online utility to test the on-screen appearance of  various type and color combinations. Very cool!

Screen shot of CSSTYPE

A cropped screenshot of the application in action.
I Love Typography logo
 A blog on the subject with good articles and links.
fawnt logoFawnt Fonts, a free fonts archive, has a library of over 9348 fonts, all with large previews, character maps and a customisable preview.

Flicker TypographyThe Flickr Typography Group.
Daily TypeA creative project run by several Russian type designers. Day by day, they create original typefaces and post their results along with routine.
Elements of typographyimage from the book plate Must reading, built on Bringhurst's notable work.

As we move closer to the holy grail of absolute control over typography on the Web, designers will find more and more of the sorts of tools available to users of Adobe Indesign. This work, along with Bringhurst's, shows what Web designers can do using scripting and CSS to style and control letterforms displayed in Web pages by browsers.
Fontspace logo FontSpace is an online social community of font designers and font addicts. All 8971 (a changing number) free, downloadable typefaces have been hand-categorized into 3000+ categories. Each font is tagged, making it simple to find just the font or dingbat you are looking for. Registered users can bookmark their favorite fonts, rate fonts, and add comments.
The Font Feed logoA daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world.
Typedia Logois a community website to classify typefaces and educate people about them. Think of it like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.
See also:
  • Text Sizing: The Ground Will Not Be Friends With You by Owen Briggs.

  • /CSS/ Better web typography--Craig Grannell demonstrates how to take a leaf out of print typography’s handbook in order to transform your type using a baseline grid.

  • Mark Boulton, Five Simple Steps to better typography, and other tomes.

  • Fontcapture.com, create a font from your very own handwriting. There's no software to download and install, all you need is a printer and a scanner. Simply fill in the font template, scan and upload it to our website, and download your completed font. The fonts you create using fontcapture.com can be used on both Windows and Mac computers.
More font libraries:
Font library aggregators:
Further reading:
See also:

FLASH FONTS

Flash Kit logoFlash Kit Fonts--an ever growing list of shareware and freeware fonts for download. Interactive font previews, powerful searching and fast downloading make this a powerful font resource site. Favourites lists allow you to save your personal font choices.
Foundation Flash CS3 For Designers by Tom Green and David Stiller, Chapter 6
  • The basics of type
  • Using static, dynamic, and input text fields
  • Putting type in motion
  • Creating, formatting, and using dynamic text in Flash CS3
  • Using ActionScript to create, format, and present text
  • How to use HTML formatting with ActionScript
  • Creating hyperlinks
  • Using the spell checker

Scalable Inman Flash Replacement
Wikipedia logoScalable Inman Flash Replacement on Wikipedia.

[sIFR]is an open source JavaScript and Adobe Flash based technology initially developed by Shaun Inman and improved by Mike Davidson and Mark Wubben that enables the replacement of text elements on HTML web pages with Flash equivalents. Whereas standard HTML and CSS do allow a webpage author to assign any font of their choice to a text element, there is no guarantee that the element will show as intended as the browsing user may or may not have the specified font installed in their system. sIFR on the other hand allows website headings, pull-quotes and other elements to be styled in any font by enabling the designer to embed the font of their choice in a Flash element that displays the text. As a result the font used does not have to be installed on the user machine.

See also:
Adobe logo Introduction to Scalable Inman Flash Replacement (sIFR) on the Adobe site.

Beginner HTML limits what you can do with font styling on the web. Pick a stylin' font that's only on your system, and your visitors get a fall back font; that's the way it works, or rather used to work...This presentation will introduce you to a technique, called Scalable Inman Flash Replacement (sIFR), which will allow you to use that hot new font on the pages you create, without being forced to use images, all in a easy to use, unobtrusive, backwards compatible, search-engine friendly manner by using a nifty combination of Flash and JavaScript.

FONT ALIASES

About Dot Com logo About.Com list of lookalike fonts
See also:

LOGOS

logoblog logo Logo Blog presents independent, user based reviews and advice about logos, and logo design companies.




*Physician heal thyself.
Logopond logo LogoPond is a resource for graphic designers. The site contains an extensive user-submitted gallery. The site also contains resources, including graphic design books, a forum, jobs, and a series of articles.
eulda logoEulda is a European award for logo design. The best designs are awarded the Funnel Prize, named after the organizations own logo. This logo is purposely made to look silly to avoid competing with the submissions made. Funnel Prize winners are selected by an international three-tier jury consisting of 10 top design professionals, 10 marketing managers from major international clients and finally 10 members of the public (provided respectively by the worldwide established organizations BEDA, Aquent and Consumers International). 
Further reading:
See also:
  • Logotypes.ru 4989 logos (and counting)! a 100% free service. All logos are available in Adobe Illustrator format and are compressed by ZIP.

  • Best Brands of the World is World's one of the most visited web sites intended for browsing and exchange of the World's famous brands and logos. The primary use of site is to enable designers to access vector forms of the well-known logos that they can use in their presentations, given the permission of the copyright owner. The web site also enables designers to upload their own logo design works and professional details.

  • Logo design tutorials at E Logo Design.

  • AllTheLogos.Com, an extensive database of thumbnails of commercial logos. This is a commercial site that charges for useable files.

  • Notes on Fonts maintained by Nelson H. F. Beebe: An extensive list of font software and information.

  • Complete Logo Design Guide
    from E Logo Design.

  • Brand New--Displaying opinions, and focusing solely on corporate and brand identity work.

  • 25 inspirational logotypes - cache new ideas
 
Web Design

Design View logoDesign View is the personal Web space of Andy Rutledge, designer. This site contains a number of good articles on the subjects of design in general, and Web design in particular.
Cookie cutter pictureFree Website Templates, a listing of sites that provide free templates. Some are better than others.
Open Source logoOpensource Web Design, thousands of free templates from the opensource community.
Smashing Magazine logoSmashing Magazine delivers useful and innovative information for web-designers and web-developers, informing readers about the latest trends and techniques in web-development.
WebdesignerWall logois designed and maintained by Nick La, who also runs N.Design Studio and Best Web Gallery. "I’ve been designing for several years and my works have been published on numbers of magazines," Nick says. "I love to share ideas and design techniques. WDW serves as my public blog where I post my design ideas, tutorials, and talk about modern web design trends.

"Why Web Designer Wall? As a designer, I often have a lot of ideas that flow in my mind; usually I draw them on my sketch pad and then paste on the wall. This is how the name was created — a wall of ideas."
Design is Kinky logoDesign is Kinky, a sort of aggregaor of design news on the Web.
Faveup GraphicFaveup styles itself as a simple gallery of inspirational design. Everybody gets designer's block sometimes so it's nice to have somewhere to go to get your creative juices flowing again. Faveup also gives credit where credit is due, rewarding great design with the respect and linkage it deserves.
Further reading on Web design:
  • Home Page Design"
      DANIEL SZUC
      August 6, 2007

    Ideally, a home page should reflect and balance business objectives and user needs. It is time to review a company home page design. There are a number of stakeholders involved in home page design, and each of them wants a piece of the home page real estate. Are there questions you can ask before approaching home page design that can move it beyond the influence of specific stakeholders in the company toward a common vision? Are there tips to consider when designing a home page? This article will help you better understand how to approach home page design.

  • "PDF Prototypes: Mistakenly Disregarded and Underutilized
    KYLE PERO SOUCY
    August 8, 2007

    Creating a clickable PDF to prototype a new design is not a new concept, but it is a valuable tool that is often overlooked and underutilized. While working over the years with other designers, information architects and usability professionals, I’ve noticed that many of my colleagues believe the same fallacies about the limitations of PDFs. Contrary to popular belief, you can do more than just create links and interactive forms with PDFs; you can also add dynamic elements such as rollovers and drop-down menus, embed audio and video files, validate form data, perform calculations and respond to user actions. PDF prototypes have the ability to replicate most interactive design elements without investing a lot of time and effort.

  • The Elements of Style for Designers by Christina Wodtke on Boxes And Arrows.

  • Elements of Great Web Design: The Polish in Designing by Collis on psdtuts.com.

  • Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies
    Christina Laun
    November 14th, 2007

    Eye-tracking studies are hot in the web design world, but it can be hard to figure out how to translate the results of these studies into real design implementations. These are a few tips from eye-tracking studies that you can use to improve the design of your webpage.

  • 9 Essential Principles for Good Web Design
    Collis Ta'eed

    Web design can be deceptively difficult. Getting a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent...


  • 4 Design Elements You Hate, But...They Work
    Samuel Ryan
    November 30, 2007

    If you've ever created a website for someone else, you've had to go through that painful process where the client submits edits that you feel are unnecessary, ugly, or just heart-breaking. You think to yourself, "Design is King," and wonder why the client can't understand that your original comp doesn't need any editing. But before you write off your client as a design-ignorant troglodyte, perhaps you should consider that there are many elements that you may hate, but they actually "work"...

  • Color and Typography in Good Design
    Steven Snell

    [F]inding just the right font, size, spacing, etc. can require considerable time and attention. In addition to typography, color is also a major factor in the success of the design. What is sometimes overlooked is the combination of color and typography and the effect that it has on the overall project.

  • Killing Some Bad Layout Conventions
    Andy Rutledge
    December 8, 2007

    As good design further penetrates the Web, once highly-regarded conventions fall into disfavor and are replaced by more effective ones. Yet some flawed conventions persist. In fact, they persist on some pretty high-profile websites; to their detriment.

  • Getting Real, the business, design, programming, and marketing philosophies of 37signals — a developer of web-based software. A free e-book.


See also:
  • Color Tools on the Imaging Page.

  • SitePoint: a fast growing online media company and information provider targeting the Web professional market, specifically Web Developers and Designers. The company has five major revenue streams: advertising and sponsorship, content-based products both online and in retail, software, and more recently streaming video subscriptions and classified listings.

  • Open Designs ByThe Open Design Community, a group of Open Source Website Designers providing hundreds of XHTML and CSS based free web design templates available for download. The main goal of TODC is helping to make the internet a prettier place. Our Community Mission: Open Designs is a community owned and managed site, where users, designers and application developers can share their free website designs and templates, discuss web design and promote their services.

  • A list on Lifehacker--Open Source: Web Design Templates & Tools.

  • A List Apart Magazine (ISSN: 1534-0295) explores the design, development, and meaning of web content, with a special focus on web standards and best practices

  • Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business. Since 2001, it’s been a peer-written journal promoting contributors who want to provoke thinking, push limits, and teach a few things along the way.

  • The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources.

  • 60 More Places to Get Design Inspiration - Online and Off at FreelanceSwitch, a Community & Resource for freelancers of all varieties - designers, writers programmers, illustrators, photographers.

  • Top 50 Inspirational Websites for Designers .

  • Vitamin is an online magazine dedicated to the new Web industry.

  • The Open Source Web Design Toolbox: 100 Web Design Template Sources, Tools and Resources on DesignVitality.

  • Website Layouts Cookbook An Illustrated Reference of Website Layouts for Web Designers.

  • 'Web Design from Scratch' aims to be a complete guide to web design for everyone interested in creating effective web pages. Web design is a complex discipline that involves a wide range of skills. I notice that some of the most basic skills are lacking in many web site designs. Those basic skills are quite simple, but can be hard to gain because of a lack of teaching material. That's what WDFS aims to solve!

  • CSS Juice, list of online generators and tools with brief description that particularly for web designers and freelancers.

  • Alertbox: Current Issues in Web Usability Bi-weekly column by Dr. Jakob Nielsen, principal, Nielsen Norman Group

  • 7 Incredibly Useful Tools for Evaluating a Web Design on Six Revisions.

  • The 60 Best Photoshop Tutorials to Design Your Own Amazing Site, on PST Blog, an aggregator of various tutorials.
Related topics:
       WEB PAGE ANALYTICS
  • WebsiteOptimization.com For this page, the service says: "TOTAL_SCRIPT - Caution. The total number of external script files on this page is 3 , consider reducing this to one or two. Combine, refine, and optimize your external script files. Ideally you should have one (or even embed scripts for high-traffic pages) on your pages."

  • Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

       See also:
    YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites. YSlow is a Firefox add-onFirebug web development tool. YSlow gives you: Tools including JSLint integrated with the popular
      • Performance report card
      • HTTP/HTML summary
      • List of components in the page

  • WebXACT is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues.
 
usable logo

ACCESSIBILITY
  • Accessibility 101 is a collection of FAQs, research, findings, UK laws & recommendations concerning accessible website design in the UK. Marketeers examining the subject of accessible website design, or looking for information to develop a website design tender, will find this site a valuable resource.

  • Color accessibility on the Imaging Page.

  • Dive Into Accessibility 30 days to a more accessible web site
    This book answers two questions. The first question is "Why should I make my web site more accessible?" If you do not have a web site, this book is not for you. The second question is "How can I make my web site more accessible?" If you are not convinced by the first answer, you will not be interested in the second.

  • Watchfire WebXACT is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues.

    You can use Watchfire® WebXACT to scan and analyze any web page for quality, accessibility, and privacy issues.

    Watchfire WebXACT

    Terms of use Copyright © 2003-2005 Watchfire Corporation. All Rights Reserved
    The temptation is to check this very page. Go ahead. It's all set up for you.

    Applications such as this have their own issues. A check of this very page shows broken links that are, in fact, working perfectly. It also returns an error for page efficiency because images are not given a size--for instance, http:// johnrobertlemon. googlepages. com/ 111mb.gif, which appears on this page in the following tag: <img class="imageleft" style="width: 150px; height: 57px;" alt="111mb logo" src="111mb.gif">. The W3C link checker has similar problems.

    One checker that I tried--I forget which--suggested that this page has too many links. This criticism doesn't account the fact that the page is, for the most part, a simple list of links. All of which goes to demonstrate that you must evaluate the results of such tests for yourself, and not worry about being able to put a British police helmet or whatever as a badge of compliance on your site.


  • GrayBit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast.

  • Google Directory Internet Accessibility.

USABILITY

Browser Comptibility
browser shotsmakes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server.
netrenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany.
Compatibility Master Table: a table containing a list of CSS elements and corresponding browser support.
See also:
  • ViewLike.Us. See how your website looks in the most popular resolution formats. It's all powered by Ajax & PHP so no need to download anything--just type your URL into an input text box.

E-Commerce
PHP Payment Library for Paypal, Authorize.net and 2Checkout (2CO), on <phpfour.
Tools | CSS | Design | Type | Programming | SEO

Contact