Web Design Basics
What is Web Design?
Web design is a multi-faceted term for a variety of skills used to produce anything from an accessible document to a multimedia experience.
Thousands of people express themselves on “hobby” websites without much knowledge about either site design or technology. Obviously, the bar is much higher if you are going to develop a business or e-commerce site.
Don't Underestimate the Required Skills
If you are promoting a business or building an e-commerce site, your needs are different and the resources you need to achieve these goals will probably be different.
Many people don't understand what is involved in building or maintaining an effective site.
A professional image, needs professional assistance.
Challenged by Technology
When you publish a book, a finished product is released requiring no special software or hardware to view it (except for e-books).
Unlike the book publisher, the web designer must keep the viewer's capabilities in mind. They must be aware of the capabilities and shortcomings of the various browsers in use as well as the various platforms they are hosted on.
Different Browser, Different Experience
There are differences in the ability of various web browsers to portray specific enhancements. In addition, users may modify how their browser displays content.
Pages designed with only with one browser in mind can create unexpected results when viewed in another browser.
There are differences within different versions of the same operating system (never mind between different platforms). Proprietary tags may work in one browser but not in another or only in the latest versions of certain browsers.
You need to accommodate all browsers to some degree if you want to make your site accessible to all visitors.
It is better to have the site degrade gracefully rather than not work at all.
An HTML Validator can check your HTML for errors and help prevent problems you're unable to see with your browser or operating system.
HTML Challenged by Today's Content
The inventors of the Internet designed HTML for scientific exchange of information rather than the much more demanding multimedia and ecommerce platform it has become.
The Web has grown from an estimated 50 websites worldwide in 1994 to where millions of websites, blogs and social media sites make information available to everyone.
- The first website (May 1993) was a far cry from today's rich experience.
The pursuit of browser dominance rather than security or ease-of-use resulted in a broad range of "hacks" to make pages appear relatively similar in most browsers and mediums. These hacks depended upon browser quirks (“quirks mode”).
As new browser versions were released, older sites could break if the hacks no longer worked. HTML5 was designed to end that problem.
Introduction to Web Design
The resources on this page and the other related pages on this site should give you enough information to learn the basics of how websites work and help you to make some decisions.
The Cut 'N Paste HTML Editing page is a very basic introduction to HTML intended for those wishing to edit an existing hand-coded HTML document using cut and paste techniques.
It will also provide you with a rudimentary understanding of how HTML works but there are more detailed HTML primers and courses available.
Cascading Style Sheets
CSS (Cascading Style Sheets) allows for a whole new realm of layout and styling of websites. CSS greatly reduces design complexity and speeds up the display of site content.
Separating Content From Layout
CSS also reduces the amount of HTML necessary to display the text in the fonts, colours and styles you wish to use.
By separating the content from the layout using CSS, you can control the entire site using one or more external CSS file that load once for the entire site. The HTML becomes much simpler and easier to modify.
Two excellent early sites were launched to illustrate the power of CSS:
- css Zen Garden: The Beauty in CSS Design uses different style sheets to create spectacularly different views of the same content.
- Eric A. Meyer's Complexspiral Demo uses different backgrounds to render the page differently.
CSS has moved a long ways since these sites pioneered CSS layouts. The effect and flexibility of the content could not have been created using traditional layout methods.
There are a number of sites on the Web that include CSS resources. The resources and books from SitePoint are strongly recommended.
Hand Coding or Software Tools?
Even today's word processors are capable of creating a relatively-functional website but they don't give you the control that a dedicated professional programs can provide.
Older programs make proprietary sites inaccessible to modern browsers like FireFox, Chrome and Safari.
Hand-coded sites load quickly and are very flexible without a lot of extra unseen content but require advanced knowledge of how HTML and CSS work.
Content Management Systems
Most recent web development software has moved to some sort of content management system (CMS).
There are hundreds of CMS systems, but WordPress's market share is 64.2% of all CMSs.
With the use of free and purchased templates inexperienced folks can create a blog or website without understanding how the technology works.
This has resulted in a lot of sites that degrade over time much like an unskilled mechanic “tuning up” a car which then no longer runs well (or at all).
Visitor Patience is Limited
Physical stores and service locations are often protected from their competition by the time and distance it would take a customer or client to check out the competition.
On the Web your competition is only a click away, so you'll want to leverage whatever advantage you can and present your information as quickly as possible to the largest potential audience.
Hand-coding provides for an additional level of control and minimizes the size of HTML files. Sites have faster download speeds, reducing the chances that a viewer will abandon your site to check out your competitor's site without waiting for yours to full load.
Most current web design software (including CMSs) don't add nearly as much proprietary code as they once did.
The smaller your page files, the quicker your site will load. Google Developer recommends removing all spaces in your CSS, but that can create issues when you want to make an adjustment.
Today's software can provide some impressive effects for web design, but this needs to be tempered by the reality that such content may never be viewed by your intended audience if the download times are too long.
Today's browsers are removing support for most plugins since newer HTML5 technology provides better options for multimedia content.
Never use technology unnecessarily — any special requirement is going to limit the availability of your content to someone.
Be sure to evaluate such effects using the sort of bandwidth (download speed) and equipment available to your target audience rather than how it works on the designer's computer.
Content is King
Unless you're specializing in videos or multimedia, most people view a site for the information it contains.
How it is displayed is secondary (unless it impedes their ability to view the content).
You need a decent presentation, but an exceptional presentation will not overcome the lack of useful (or expected) content.
Many of today's “modern” websites are designed for smartphone viewers, resulting in websites containing large graphics but minimal text. So much for the “information” age.
Who is Your Audience?
What do you know about your expected (targeted) audience? About their expectations and limitations?
A site aimed at seniors may have different content and layout than one designed for children or young adults. One aimed at corporations may not have the flexibility of a hobby-related site.
Whatever the audience, you'll want to ensure that the site degrades gracefully so viewers using legacy browsers can still view your site.
Don't Make Your Site Visitors Work!
A website should provide quick access to information the viewer is looking for.
People tend to skim websites much like they read magazines in a waiting room.
If your site doesn't capture their attention quickly, they move on (your competitors' sites are listed right next to yours in a Google search).
Navigation should be intuitive and there should be alternatives to your main navigation.
Avoid "mystery meat navigation" that challenge's your visitor's expectations.
- Ensure links are clearly visible and meaningful.
- A site map can help people to find what they are looking for (especially items not in the main navigation menu).
Don't Confuse Visitors
Using “click here” for links can frustrate site visitors. Instead, use descriptive text that explains where the link goes or what it opens.
Avoid underlining regular text for emphasis because this indicates a hyperlink to most people.
Keep Them On Your Site
Provide solutions to visitors broken links (a “404” error). A dedicated 404 page will keep visitors on your site rather than sending them to your hosting service's site.
Use Colour and Images Carefully
Your site's colour scheme should reflect the nature of the site, not be jarring or cause anxiety.
Be sure that the images you choose are illustrative of the content and appropriate.
Provide alternative text for images on your site in case they don't load. The amount of detail depends upon how much information is conveyed in the image to regular site visitors.
Stop Using Obsolete Technology
Older techniques for laying out websites will no longer work in today's world of multiple screen resolutions and costly mobile data plans.
Frames-based sites are aren't user-friendly — the frame element is obsolete in HTML5.
Tables for Site Layout NOT User-friendly
Sites using tables for layout are bulky, difficult to maintain and not user-friendly.
The problem with using tables (originally a series of slides) explains the problem with tables in greater detail.
Use Tables Only for Presenting Tabular Data
Tables are intended for presenting data like the following:
|Processor:||Calculations per second||4.9|
|Memory (RAM):||Memory operations per second||4.9|
|Graphics:||Desktop performance for Windows Aero||3.1|
|Gaming graphics:||3D business and gaming graphics||3.5|
|Primary hard disk:||Disk data transfer rate||5.4|
Avoid Special Characters
Many people assume that what they see on their computers is what will be seen by others. However, there are many character encodings around the world including ISO-8859-1 (U.S.) and UTF-8.
Windows Special Characters
Windows characters 128–159 don't display properly as characters on most web pages. Here they are in order (129,141,143,144 and 157 don't display and aren't shown):
€ ‚ ƒ „ … † ‡ ˆ ‰ Š ‹ Œ Ž ‘ ’ “ ” • – — ˜ ™ š › œ ž Ÿ
This can happen when someone copies the contents of a Microsoft Word file that contains smart quotes, em dashes and other special characters into their web document (especially when the HTML document is using the UTF-8).
Special characters may also be displayed incorrectly (such as a diamond with a question mark inside), or not at all.
Check your pages using the W3C Validator to catch these problems and fix them.
Mac Special Characters
Mac special characters (such as ⌘) may also create problems for Windows users.
Correctly Encoding Special Characters
Many special characters are available using special HTML character entities but some are only available as numerical entities:
These characters (and many more like them) have been more problematic in older browsers and some operating systems, including IBM OS/2.
Server Side Includes
SSI can be used to insert a section of HTML that is repeated throughout your site such as a header, footer or navigation bar.
These do take slightly more time to scan a page and plug in the SSI files before rendering the page, but you can alter SSI content for the whole site in a single edit rather doing so for every page on your site. Imagine how much easier it is to update footers and other similar site-wide content.
SSI only works on a server and may not be permitted by your host server, so you will want to test to see if it works before going to all the work of converting your site.
Some sites require that you use the
.shtml extension on all your files. Apache hosting software may require an entry to the .htaccess file to enable SSI (ask your hosting service).
Adobe invented PDF. When Acrobat was originally developed, most word process and other office software was incompatible with each other. By generating a PDF, that document could be viewed or printed on any system while retaining the layout and fonts.
Adobe developed Acrobat as the professional software suite for creating and editing PDFs but then made a free PDF viewer called Adobe Reader to encourage widespread use and it soon became virtually universal.
Great for Newsletters and Printable Forms
PDF documents are an excellent way to post print-based documents like newsletters. PDF documents retain the same control in layout you have come to expect with printed documents and you can update newsletters by replacing the PDF file of the same name (e.g., newsletter.pdf).
PDF forms work great for registration and membership forms distributed online or emailed, especially if you make the forms fillable before printing.
Where you're dealing with online transactions like PayPal or INTERAC e-Transfer, a web-based form that emails the content directly following the form submission in the form's landing page avoids human handling.
PDF-based Websites NOT Recommended
Adobe adapted Acrobat to be capable of generating PDF-based Web sites. These sites are slower, don't have the flexibility that HTML provides and are may provide serious issues meeting accessibility requirements.
Privacy & Security Concerns
The fact that PDF documents are routinely catalogued by search engines complicates privacy.
Be selective when posting any PDF documents on-line because email addresses and other private information on linked PDFs are automatically included in search databases.
Because Adobe Reader is so widespread, its vulnerabilities now present a threat to the security of computers running all common operating systems as well as mobile devices. I strongly recommend using an alternative PDF reader because of security issues with Adobe Reader.
While most modern browsers are capable of displaying PDF files natively, an external reader provides a better user experience.
Make Using PDFs Easier
Ask yourself if the information might not be better embedded on your site in native HTML format. This information will load quicker and is easier to interact with.
If you elect to use PDFs, ensure that it is used primarily for secondary documents like downloadable forms and newsletters. Keep the PDF file as small as possible.
PDFs no longer require plugins to be viewed in the browser and most people are more aware of these ubiquitous documents, so you don't have to document PDFs on your site like previously when the Adobe Reader plugin was required.
Reducing the Size of PDFs
You can reduce the size of PDFs by pre-sizing large images to appropriate dimensions before you import them into the original document.
Commercial PDF software usually generates smaller PDF files.
If a large PDF is unavoidable, be sure to indicate its size on the introductory link.
Professional PDF Software Recommendations
Microsoft Office and LibreOffice can both create PDFs, but you might want to explore purchasing professional software to create the smallest and most flexible documents without risking the vulnerabilities of Adobe Acrobat.
Specify A DOCTYPE
You need specify a DOCTYPE at the start of each page (except for HTML5 where it is simply
<!DOCTYPE html>). This indicates how your page is constructed to browsers or to a validation service. It is the first item on the page.
Without a DTD each browser will make a guess at what you are trying to present — likely getting it wrong.
Unfortunately, Internet Explorer is still in use and operates in "quirks" mode if it cannot determine the document type (it assumes that the page is designed for earlier versions of HTML).
HTML elements and valid DOCTYPES from W3Schools.com shows which HTML elements are valid with each DOCTYPE.
Indicate Encoding Format
Since the Internet is international, your page is bound to be viewed in countries that don't use the same language as you do. Specifying a Encoding format tells the browser how to display your page.
The most common in North America are iso-8859-1 (Western Europe) or UTF-8 (Unicode, world-wide).
Using Pre-made Graphics
If you use graphics created by others on your website, please be sure to read the usage agreement for those images.
Most free graphics will require a link back to the creator's site. Assume that the use of free graphics on commercial pages is prohibited except where it explicitly states otherwise.
Create Your Own Graphics
Modern graphics programs are quite adept at creating buttons and drop shadows, particularly those especially designed for the task. Programs like Paintshop Pro are quite reasonable and you can try many before you buy the one that works best for you. Photoshop is excellent, but the purchase price is commensurate to its abilities.
In modern browsers, buttons, drop shadows and other special effects can be created using HTML5 techniques.
This Site's Graphics
The graphics on this site are either created by myself (I don't permit reuse), are licensed to me or they are used exclusively to link to the page where they were obtained (usually links to proprietary software).
My images may not be used elsewhere. Before using third-party images found on this site, you need to verify permission with their legal owners.
I create the majority of the graphics used on the websites I design.
In some cases they were created by a professional graphic artist expressly for that site; are provided by the client; or are licensed to me for use on such sites.
NONE should be considered available for redistribution or use on other sites without my express written permission.
HTML5 is intended to make the development of Web applications much easier without the need to “trick” browsers.
It can embrace newer and simpler technologies while allowing older browsers to still function, even if it is with a degraded user experience.
If you're just learning HTML, check out Sitepoint for their learning and reference resources. Sitepoint books are well-written and affordable. Strongly recommended.
The Technology is Changing
HTML5 has changed the way we're viewing the Web. It is much simpler than earlier HTML versions, removing much of the excess markup needed in HTML 4.
- <!DOCTYPE html> not <!DOCTYPE html public "-//w3c//dtd html 4.01//en">
Much of the old HTML markup has been deprecated, replaced with CSS.
The widespread collection and sale of personal data as well as increasing cybercrime has made the Internet much less safe.
HTTPS secures the connection between the browser and the server to improve security and privacy, but only if the site supports HTTPS.
SEO Tip: Enable HTTPS
Site owners should encrypt their site to help improve SEO because Google has made HTTPS a priority determinant of placement in search results.
Access to your hosting account is required to enable HTTPS.
HTML5 Media Controls
The way we're viewing multimedia on the Web has changed.
Plugins like Flash, Adobe Reader and Shockwave have been replaced with native HTML5 technologies that are safer and faster.
HTML5 media controls are supported by all modern browsers and mobile devices — even on older browsers that traditionally required plugins.
Audio controls are simple but intuitive:
Source: Free Sounds (Public Domain)
Video controls are similar but add the video components:
Source: Pixabay via Pexels.com
The style of the controls may vary between browsers and operating systems.
Adding HTML5 Video
Adding the <video> element is quite simple:
<video controls="controls" preload="metadata">
<source src="Sunset.webm" type="video/ogg" />
Your browser does not support the video element.
The "your browser does not support the video element" text appears if the viewer's device doesn't support the HTML5 video.
“Video for everybody” is a transitional page about the HTML5 <video> element which provides alternatives for legacy browsers and hardware.
HTML 5 has come far enough that most current systems should work with it since Flash and other technologies have disappeared.
Proprietary Media Players
Many commercial websites don't use the simple HTML5 players displayed above.
Instead, they use proprietary media players designed to cull information for their marketing department in exchange for the ability to play their videos. This “surveillance economy” is a one-sided bargain.
HTML5 3D Rendering
CSS Preserve-3D allows for the 3D rendering of animated objects (supported by most modern browsers).
- Beautiful CSS 3D transform examples.
- CSS transform-style property.
- CSS Demo: transform-style.
- CSS: 3D Transforms and Animations.
Visually Impaired Access
Accessibility has several meanings and objectives.
Wonderful tools like aural (speaking) browsers give the visually impaired access to the Internet, but repetitive menu systems can become annoying unless they are suitably designed to allow users to skip them.
Make Your Page Viewable
Consider carefully the colours you use on your site. Ensure a decent contrast between the text and background and that links are clearly visible.
- Red text on a black background may give you some interesting 3D effects, but is very difficult to read and may not print as expected.
- White text on a black background can also result in unexpected problems.
- Small light-gray content is very difficult for many people to read.
The most recent trends are to use very large graphics and minimal text suitable for cellphones. I attribute this to the narrowing amount of time people will wait for a page to load.
Style Sheets Offer Flexibility
Improvements in style sheet properties have provided the ability to alter the content to make it more flexible.
Careful CSS enhancements can make audio presentations more realistic and provide for variations in pitch-range, richness, volume and more.
You can provide your site visitors alternatives by adding specialized style sheets that offer the user multiple choices in how they view, hear or print the site.
Responsive Web Design techniques take advantage of media queries to determine screen size and fluid display techniques to optimize images for the viewer.
Modern Browsers Help
Modern browsers allow the user a great more control, including the ability to increase or decrease the size of content. Earlier font resizing efforts suffered problems because graphics don't resize — particularly an issue where graphics are part of the navigation. CSS helps with this issue.
Use Resources Appropriately
Avoid browser-specific enhancements since you can seldom control the browsers in use.
You will want to determine your audience before using enhancements that either require third-party plugins (mostly a legacy problem) or other addons.
Music may add an ambience to your site (unless people find it annoying), but you're probably doing so illegally unless you've paid the copyright holder(s) for the right to broadcast the music you're using. Do you really want to risk a takedown order for your entire site?
My favorite way of explaining the concept of intellectual property to the illiterate tribesmen I encounter daily isOkay, imagine that all the sheet music in the world burned up in a huge bonfire, and then imagine that they threw on all the CDs. You can still hum the music, right? The music still exists, right? Well, that thing you can't touch, or buy, or break…that is what we own.— Why You Can't Use Music On Your Web Site
Don't forget the possible barriers this can create for your viewers:
- Cellular users paying to download data won't appreciate the extra bandwidth required to play background music.
- There are potential delays while the viewer waits for the music to download (time that could be spent viewing your site).
- Unexpected sounds from your site may be disturbing in certain settings, such as work, classrooms or in late-night or early-morning environments.
- The potential need to find and install the appropriate plug-in is disruptive to many users and may make your site appear to be broken.
- Your choice of music may not enhance some people's experience. There are cultural and other considerations.
Everything you add to your site adds a complexity that your audience needs to deal with. Don't give folks a reason to leave your site.
Responsive Web Design techniques provide a better option.
Other Helpful Sites
- Web Pages That Suck teaches good design by showing bad design examples.