Web Design Resources
While you can use most recent word processors and any number of web page creation software titles to create your own website, you need to be aware of their limitations and be sure you're producing the sort of site that is usable to your intended audience.
There comes a time when you may need to know enough about the underlying layout used to build websites to correct a problem with your page or incorporate some of the newer techniques you observe while surfing other sites.
In order to discuss this, you'll have to understand a few basic terms.
- HTML (HyperText Markup Language) is the base markup used to display content on the Web.
- CSS (Cascading Style Sheets) are used to alter the way various elements look on a site without having to redefine each and every paragraph. In more advanced sites, like this one, it separates the content from the layout by defining the layout in the CSS.
- XML (Extensible Markup Language) is related to HTML, but XML was designed to carry data, not to display data, an important distinction.
- XHTML (Extensible HyperText Markup Language) is an application of XML resulting in a much stricter implementation of HTML 4.
- DOM (Document Object Model) defines the way that a page is intended to be displayed, be it HTML 4 loose or HTML 3.2 (like much earlier browsers).
HTML is a markup language. Perhaps the easiest way to understand this is to use an example from a standard word processing program. When you write something, you can choose to add bold or italics or underline to a selection of text. This doesn't alter the text, only how it is displayed.
In the same manner, HTML doesn't alter the text, only how the browser displays it. HTML is not an arcane code in the same manner as computer programming might be. If you look closely at the source (click on the View menu, then select Page Source—some browsers may use different terminology) of this page, you'll see that this is so.
For example, look at this section of HTML:
<p><strong>This is a sentence displayed in bold text.<strong></p>
is displayed as follows:
This is a sentence displayed in bold text.
- <p> and </p> tell the browser to display the text in a paragraph.
- <strong> and <strong> tell the browser to display "strong" (usually bold) text.
Cut 'N Paste HTML Editing
This site offers more of this very basic introduction to HTML. Cut 'N Paste HTML Editing is intended for those wishing to edit an existing hand-coded HTML document using cut and paste techniques. It is not an extensive education in HTML.
More Extensive HTML Instruction
For more extensive instruction in HTML check out these resources:
HTML Reference Links
- SitePoint HTML Reference is the most detailed and up-to-date reference on the subject available.
HTML Basics Links
- An HTML primer is a beginner's guide to HTML.
- The HTML Writers Guild has various HTML resources.
- HTML Basics from HTML Goodies.
- Bulletproof HTML: 37 Steps to Perfect Markup is both an introduction to HTML but also deals with making your HTML work correctly.
- The HTML Writers Guild offers on-line courses (with reduced fees for their members).
- Virtual University offers beginner courses on HTML.
- IWA-HWG eClasses.org.
- Sitepoint's Learnable.
CSS (Cascading Style Sheets) can be defined at the top of a page or in a separate external CSS file. You can also redefine an element within a page, but that is nowhere nearly as useful.
By defining the way elements like headers and paragraphs display (e.g. the font, colour, indent, spacing and more) in an external CSS file, you can avoid repeatedly re-defining these elements if a simple change is needed site-wide.
For example, if you'd built a 30 page site to display everything in Arial brown, only to find out that the customer wanted Verdana and hated brown, the amount of work you had to do would depend on how the site was coded:
- If you'd used the traditional method of defining every paragraph as you went along, you'd have a long night ahead of you — 30 pages with dozens of paragraphs each.
- If you'd used an external CSS file, you'd only need to redefine one file.
If you want to see this explained more graphically, have a look at Adding CSS.
CSS Example Sites
The following sites will give you an idea of the power and flexibility of CSS:
- css Zen Garde: The Beauty in CSS Design dramatically illustrates how changing CSS can alter the look of the same content.
- Complexspiral Demo demonstrates some spectacular results using CSS. This page may be a little technical, but the clever use of background images is worth the visit even for novices. Scroll near to the bottom of the page to load different views.
CSS Reference Links
- SitePoint CSS Reference is "the most detailed and up-to-date reference on the subject available."
HTML Standards & Browser Compatibility
Learn More About Responsible Design
Web sites are created and will be viewed using different web browsers and operating systems, which means you don't have the absolute control that you would have with a print project.
To further complicate this, your page will be viewed using various screen resolutions on multiple platforms (computers, cell phones, PDAs, etc.). It is important that you understand the effects these variables will have on how your site is seen to minimize the problems your site visitors may encounter.
You can learn more about screen resolution and how you might select an appropriate width for your site display.
The W3C site's content may be a bit intimidating since it is aimed at those designing and building browsers rather than the average web designer, but it is the place where the standards are created. Unfortunately, the implementation of those standards is less than perfect.
- W3C World Wide Web Consortium is the body working to set the standards for HTML, CSS, XML, DOM and others.
Issues with Internet Explorer
Internet Explorer (IE) has interpreted web standards differently for each version and has done so deliberately to use their operating system dominance to make the other guys look bad. To further complicate this, each version of IE has its own quirks.
Until recently, many designers coded for compliance then added hacks to deal with the quirks of the IE browsers (one of the most famous being the Holy Hack).
Beginning with IE 7, Microsoft began adhering more closely to the standards they'd been a part of developing all along, creating a dilemma for those with IE hacks in their site markup.
The most recent versions of IE (IE 8 and later) are mostly compliant with the standards and have opened up the Web to newer technologies. As a result, many (including Microsoft themselves) began a campaign to get rid of IE 6. There is more on my blog.
A newer area of compliance is accessibility for those that use screen readers and other tools to "view" web content. This is an area that is relatively unknown to many, yet is important both to provide for access to those individuals and to comply with existing or pending legislation in many jurisdictions.
- Cynthia Says provides an on-line service to validate your website pages for compliance of various standards.
- Understanding Web Accessibility by Shawn Lawton Henry.
- Web Accessibility Handbook by HiSoftware and Microsoft is a guide to best practices for achieving web accessibility.
Unfortunately, the implementation of those standards is less than perfect. These sites provide you with access to ways to minimize the impact those differences will have on visitors to your site.
- SitePoint has excellent design content and forums. Their books are strongly recommended, if you are serious about your coding.
- W3 Schools provides tutorials as well as various references and examples to demonstrate how various web technologies are employed and what effects they can have.
Cascading Style Sheets
Cascading style sheets (CSS) is moving from merely altering HTML to replacing much of the layout and design functions that HTML has been used for in the last few years. These sites will give you an idea of the possibilities and provide you with some tools to work with:
- Box Lessons examines the creation of CSS layout (boxes) and has wonderful links to other sites.
- Layout-o-Matic provides a quick way to set up a typical one- two- or full-page layout using CSS.
web browser Features
There are a number of sites that provide information about how the various web browsers work with what features.
- Browser Statistics tracks browser usage by type. It is always a good idea to test your page on multiple browsers.
- Webmonkey's Browser Chart tracks which browsers support what features.
- evolt.org Browser Archive has an incredible number of archived browsers including earlier versions of Internet Explorer and Netscape.
- BrowserCam is a commercial service that will allow you to view your site as it appears in dozens of browsers in various operating systems.
Sometimes it just helps to talk to someone that has faced the same challenges and can provide a working solution.
HTML Validation Tools
These tools will help you to avoid HTML errors, spelling mistakes and code that stops users with different or older browsers from viewing your web pages. Most of the spelling checkers will not recognize British or Canadian spellings of words such as colour and flavour, and will not recognize most proper names. Some offer more complete services for a fee.
HTML Validation Sites
- W3 Validator is an excellent free resource that will help your pages display correctly.
- Bobby allows you to type in the URL of any site and choose the browser you'd like to have Bobby display the page through. The resulting problem report is based on the results you'd get when actually using that browser.
- Accessible Web Authoring Resources and Education (AWARE) Center is a web designer reference for creating sites that can be used by anyone regardless of computer setup or disability.
Firefox Addons for Web Developers
Firefox has a number of addons that make validating your pages much easier:
- Web Developer extension adds a menu and a toolbar to the browser with various web developer tools, including the W3C Validators.
- Html Validator based on Tidy adds HTML validation inside Firefox, displaying errors and warnings with an icon (and optionally, text labels). You can then view the page source with the errors and warnings highlighted. Note: HTML 5 is handled differently as it doesn't have the same strict rules.
- LinkChecker validates links on a page.
- Rainbow Color Tools helps you to analyze colour information on a page.
Free Web Graphics and Stock Photography
If you aren't adept at creating your own graphics for your page you can find some on the sites below.
Respect the copyrights and requirements stated on the site where you obtain images. If you aren't sure if you are permitted your planned use of an image or graphic you should email the site owner for permission. Some graphics are so widely used on the Net that they are considered "public domain," but make sure before you use them. Some sites also post material sent to them by their users, so even the site host cannot be 100% certain about the copyright. The fact that their site stated the images were free will not release you from legal repercussions if they are wrong.
Several of the pages below allow you to use the images provided that you link back to their site. Read the conditions of use to be sure you can comply with all the requirements before downloading images.
You might want to create a folder specifically for the site where you get the images from and to include the conditions of use in that folder in some form to remind yourself of any obligations.
Personal Use Only
Most sites will not allow you to use free images commercially (although some will). That generally means that you can use them on personal websites, but not on company websites or on projects for commercial use. Some make an exception for non-profit uses.
Graphics for Specific Links
Many companies and individuals create various graphics to put on your page that are intended only to link back to their site. An example on this site is the “Firefox” graphic displayed on the right side of the Browser Resources section of this page.
Images on This Site Copyrighted
Be sure to read the conditions of use for the images on the sites below. Royalty-free images are not free — it means you don't pay fees for every single use. Unless specifically permitted, many images cannot be used on commercial sites or projects; others require a link back to the site hosting the image.
Mighty Deals offers time-limited specials, including some where you can purchase royalty-free images at a discount that permit use on commercial projects.
- Absolute Web Graphics Archive.
- All Free Backgrounds has backgrounds for websites and some HTML hints.
- OTC's Virtually Free Web Graphics Library are “linkware” (you need to link back to their site if you use the free graphics on your site).
Free membership required to purchase images on most of these sites:
- Can Stock Photo affordable royalty free stock photography.
- iStockphoto royalty free stock photography.
- Fotolia royalty free stock photography.
- Stock.XCHNG free stock photography.
- Wikipedia:Public Domain Image Resources.
Search engine provide one of the best ways to locate information from the millions of websites on the Internet. The designer's challenge is to get their site listed within the first page of listings for the relevant search terms for their business or topic.
Search Engine Optimization
Search engine optimization (SEO) is the term used for the methods used to obtain the best ranking possible. It is important for you to understand that most search engines will determine your ranking based upon the relevance of the information on your site.
Many rankings are determined by how many sites link back to you, which has spawned the “link exchange” trend. Unless the link is relevant to the content on your site, a link to your site could actually decrease your rank!
If you hire a SEO company, be aware that many have only short-term success. If your site gets banned from a major search engine because of unethical SEO tactics, you will have a much greater problem than not being on the top-ten list.
Adding Your Site
To get your website linked, click on the Help menu for the search engine you wish to list your site with.
More About Related Issues
Secure Net Commerce
The following related pages offer more information about providing online services in an ethical and safe manner:
- Don't Spam — Use Opt-in Lists
- Proper Email Address Etiquette — Using To:, CC: & BCC: Correctly
- Email Newsletters — Accessible & Opt-in Only
- Copyright — Who Owns Content on the Internet?
Protecting Your Online Identity
The following related pages offer more information about protecting your online identity:
- Encryption — Protecting Your Data
- Passwords — Protecting Your Electronic Signature
- Avoiding Spam — Unsolicited Emails and Mailing Lists
- Phishing & Identity Theft — Obtaining Information by Deceit
- Proper Email Address Etiquette — Using To:, CC: & BCC: Correctly
Updated: August 3, 2013