pilobilus.net a website that might grow on you

Resources for New (and used) Web Designers

© 2013 SF Kinney, released under CC BY-NC-ND 3.0 License
http://creativecommons.org/licenses/by-nc-nd/3.0/

source code from this page
By definition, all web pages are Open Source

I started writing down some resources for new (and used) web designers, one thing led to another and it turned into a bit of a production. So I turned it into a slightly bigger production, and this page is the result. The Internet is its own comprehensive manual, library and classroom. All the necessary tools and information for building cyberspace have been developed and released inside cyberspace. In the 21st century, basic literacy includes the ability to make basic websites. This is easier than it sounds and there's no time like the present to get started.

Manuals: Beginner to Professional

Joe Barta's Page Tutor site has been on the Internet for a long time, and it is still there for a good reason: Joe covers only, and exactly, the bare bones basics needed to start building web pages. Simple exercises familiarize the student with hypertext markup language in small easy steps, with visible results every time a new concept is introduced. Crude, primitive, obsolete, and indispensable for beginners.

Build Your Own Web Site The Right Way Using HTML & CSS: That's an ambitious title, but Ian Lloyd manages the job nicely, picking up where Page Tutor leaves off. The reader is encouraged to build an "example" website chapter by chapter, using the new features and techniques as they are presented. In addition to Standards compliant (x)html and CSS coding and page layout techniques, the reader will learn essential basics about image files and formats, form submission code, and using a web hosting service. There is even a chapter on integrating a web page with Google's Blogger service - an elementary introduction to creating CMS driven sites.

HTML Utopia by Rachel Andrew & Dan Shafer is a detailed and thorough course and reference on using CSS for all aspects of page layout and content formatting. By the time the student has gotten to the bottom of the materials presented in HTML Utopia, writing semantic markup to separate content from presentation will be a habit, not a theory, and creating pure CSS page layouts to meet any presentation objective will be a process, not a problem.

Some Tools of the Trade

Bluefish is a project oriented text editor for writing (x)html & css. Includes line numbering, context highlighting and tag autocompletion, global find and replace across any number of documents, a full set of "wizard" functions for common tasks such as writing image tags, building correct heading fields, generating and linking image thumbnails, etc. Cross platform, Free Software under GPL License.

The GIMP is one of my very favorite things. It is the Internet's own native raster image (i.e. photo) editor, massively configurable and extensible. I have tried Adobe's products more than once, but I always return to the GIMP when I need to get real work done under deadline. Cross platform (see details here), Free Software under GPL License.

Inkscape is a vector editor with tutorial docs that you "edit as you read", the ultimate learn by doing method. It can search and download Free clip art from a massive online library. When logos and other graphics from websites spill over into print, labels, signage, and other uses you will be glad you designed them as vector art to begin with. Cross platform, Free Software under GPL License.

The Web Developer Toolbar converts Firefox (or Chrome) into an analytical tool for troubleshooting and reverse engineering web pages. Identify visible or not so visible page elements at a glance, measure anything, check rendering in a variety of viewports, validate (x)html & css and more. Cross platform, Free Software under GPL License.

Firebug allows the developer to take the lid off the Document Object Model to see and manipulate its innards in real-time. Browse the DOM tree, select and tweak anything you see - which is everything that affects the form and function of the page. Firebug is a very powerful tool for troubleshooting and altering complex layouts, building and debugging Javascript code and analyzing a live website's performance. Don't try to customize a Wordpress theme without it. Cross platform, Free Software under BSD License.

XAMPP is the "biggest" tool on this list, of interest only if one intends to develop interactive, database driven websites. "Believe it or not" XAMPP installs the Apache web server, the MySQL database server, and the PHP interpreter on your desktop computer: Not for public consumption, but so you can have a convenient, local instance of a /working/ Wordpress site (or other CMS site) on your desktop machine. Why? So you can have a hassle free and free of charge test server of your very own to build, tweak and refine your configuration and design work on. Cross platform, but hear me now, believe me later: Install it on a Linux workstation, because the real world web server your work will end up on runs a UNIX style operating system. It better had: CRM based sites expose a live, interactive database to queries from a hostile planet, all day every day. Don't let YOUR site become a spam relay, botnet control node or illegal porn server behind your back.

Wordpress is not just a "blogging" platform; to the web developer it present a powerful ready-made CRM platform, easily customizable via 3rd party themes and plugins, supporting a wide range of online publishing and e-commerce missions. A Worpress child theme enables the developer to go far beyond ready made templates to control nearly all aspects of presentation with normal HTML and CSS code. Wordpress is under the hood of a surprising number of websites that don't look or act like "Wordpress" at all. Comparable platforms are avaiable (one has to mention Drupal) but Wordpress is the one I picked to screw around with. Choose carefully: The energy you put into the initial learning curve with a tool like this is not just a preference, it is an investment.

That's all folks: Add an FTP client (i.e. FileZilla) and a collection of random web browsers to test pages against, and you are ready to do it all. Is there ever a reason to pay $1,300.00 or more for (most of) the same tools as packaged by Adobe? Yes! If you are someone's employee, wasting their money is the right thing to do: Using very expensive tools creates the illusion that you, too, should be very expensive. But if you work for yourself - or for smart people - there is no reason to spend a dime on software for website construction.

Online Web Design Resources

The W3C provides several useful online tools for quality assurance testing, including validators for (x)html and css. A self-test link to the validator in the footers of your pages is the best defense against "Your page is broken." When your page really is broken, the validator returns a description of every detected coding error with its line number for e-z fixin. (Try the links in the footer of this page.)

Conditional Comments are almost the only thing Microsoft ever did right in Internet Explorer. Conditional Comments allow you to use an alternate style sheet (or other markup) with code that is hidden from all web browsers except the specific version(s) of Internet Explorer that can not render your perfectly good Standards compliant page layout. Bizarre hacks and work-arounds are no longer required to accommodate the world's worst web browser.

The CSS Zen Garden: Chill out and groove on the experience of seeing the exact same xhtml 1.0 page over and over, completely and beautifully different every time. How? The style sheet changes, and with it, the whole page layout and image content. Not as "cutting edge" as it was back when the Voice of God first called web designers to cast out their tables, but no less inspirational.

CSS Sprites: All your round corners, rollover menu items, icons and doo-dads can live in one image file. The "individual" images are revealed in fixed size divs with background-position set to show the parts of the "big picture" you want shown. Fast and light, *blink* and all those elements appear at once.

Suckerfish Drop-Downs: We don't need no stinking Javascript to turn nested tables into multi-level flyout menus for big, complicated websites. The mighty Suckerfish css from Dan Webb and Patrick Griffiths does all that and a bag of chips. Search teh interwebs for several useful variations on this method, all of them SEO friendly and Section 508 compliant.

jQuery Image Scripts: We don't need no stinking Adobe Flash to make pictures dance and zoom and skate around. We got stinking Javascript for that. The Free (MIT License) jQuery library supports scripts for everything from animated page headers to cycling product illustrations and some very fancy image gallery transitions.

Google SEO Guidelines: I never heard of an "SEO Contractor" who was not a thief, but every competent web designer works with not against search engines and builds SEO into every page. Google is the only major search engine: Bing is a Google scraper and Yahoo! search is a Microsoft "partner." So, if you cover Google you cover everything.

Google Analytics: Remember hit counters? Forget them. Google Analytics is silent but deadly, the most evil user surveillance system on the Internet, and it is the right tool for the job. Everything worth knowing about traffic to and on your site is at your fingertips, and when you install the Analytics tracking code your new site gets crawled and indexed FAST. Visitors who don't want to be tracked by Google may be advised to use NoScript (or an AdBlock Plus filter rule) to fly under the radar.

Open Clip Art: This is the site that Inkscape's search tool searches for SVG files. Sometimes it makes sense to design an icon, doo-dad or dealie bob from scratch, other times it makes more sense to snag one that's kind of close to what you want, pop it open in Inkscape and make it into exactly what you want. The price is right and the results? Priceless.

Speaking of Free art sources, the images on Wikimedia Commons are Free as in Freedom, most with a GNU or CC Attribution/Share-Alike license. Every image created by the U.S. Government (but not every image found on every .gov site) is free as in Public Domain. Here's a lifetime's worth of raw material for image editing practice, and some places to turn when your client just won't give up any useful pixels:

Wikimedia Commons: A database of over 16 million freely usable media files

The Library of Congress: Most older images here are in the public domain

National Parks Service: Photo galleries from specific parks and sites

NOAA: the National Oceanic and Atmospheric Agency

NASA: the National Aeronautics and Space Administration

From Old Books dot org: Over 3,300 free high resolution images, site by Liam Quin

Public Domain Photo Database: A repository for free public domain photos.

Trademarks and Copyrights

A trademark is a sign or design that identifies a product or service from a specific vendor. Trademark registration is a Government monopoly, and in the United States using the ® symbol without written authorization from the USPTO can lead directly to legal problems. Web designers should verify the legal right of a client to use the ® symbol if asked to use it on art produced for the client, and educate their clients if necessary to avoid violations. However, the ™ symbol is only a notice of intent to file for trademark protection, and may be used freely.

In the U.S., independently produced works are automatically Copyright © by the author. Works produced for an employer or under contract for a paying customer are Copyright © by that customer. This is true whether or not a copyright notice is used: A copyright notice only prevents confusion and declares the copyright holder's intent to defend the work from unauthorized uses. The correct form for a U.S. copyright notice is "Copyright © [year] [owner]." Copyright Registration is available from the U.S. Copyright Office for $35 USD per work, but it is redundant and strictly optional. A DMCA takedown notice does not require copyright registration.

Creative Commons licenses should be understood by all publishers, including web designers. Once upon a time, copyright granted a limited term monopoly and worked "to encourage progress in the useful arts and sciences." Today, copyrights are eternal and "prevent progress in the useful arts and sciences." The cure for this is to specify the terms & conditions of use for works under copyright, reserving some rights and granting others to the world. The Creative Commons copyright models enable you and your clients to make rational choices about what others are allowed to do with your works.

About HTML 5

The HTML 5 Standard is a collection of proposals for extended functions in web browsers, intended to encourage the makers of major browsers to reach agreement on how to do things like rendering audio and video files without using the Adobe Flash plugin, rendering vector graphics and animations natively, and supporting increasingly bloated and complex Javascript and AJAX code. Not to mention, tracking users' web browsing habits and physical locations with more depth and accuracy than ever. At present, some of the new features introduced in HTML 5 work in all modern browsers, some work in some browsers but not others, a few don't work yet on any existing browser. The Comparison of Layout Engines article at Wikipedia reflects progress toward HTML 5 support - which is still a moving target.

W3C Standard document types enable web developers to do consistent, reliable work, and enable the makers of web browsers to render that work accurately on screen. The doctype declaration at the start of any (x)html document tells the browser what to expect on the page and what to do with it. The page you are reading now is a Standards compliant xhtml1-strict document: That means this page looks and acts almost exactly the same on every browser that supports this Standard, which includes all major web browsers. HTML 5 does not, as yet, enable web designers to achieve this objective without research and testing to keep track of which elements of HTML 5 are universally supported and safe to use.

The good news: A web designer who has learned to use xhtml 1.0 and CSS 3 has already learned most of HTML 5. As and when it becomes necessary to use HTML 5 to meet technical objectives, acquiring the specific techniques will present no major challenges.

* The section on HTML 5 was substantially improved by comments and suggestions from Tom Williams and Liam R E Quin, which prompted a major re-write. Thanks guys!