Basics of Web Design

WHAT I S A WEBSI WEBSI TE •

•

• •

•

Web Sites are virtual “locations” on the Internet (ie, Internet address is: www.yahoo.com) that are accessed and an d displayed by Web Browsers (Internet Explorer, Netscape Navigator) A Web Site can be about anything, but often people use them to inform, entertain, sell, or conduct business. On the Internet, content is king. A web page is the individual page that make up a whole website . Web pages are navigated using Hyperlinks (commonly referred to as “links” ). These allow you to “jump” “ jump” from one page to another, or o r access files directly. Web pages are coded in what’s known as HTML – HyperText Markup Language.

 HTML (HyperText Markup Language): •

•

•

•

A simple, universal computer language that allows people to create simple or complex pages of text, images, audio, video and other content for viewing on the Internet. HTML uses “tags” that encase regular text to give special meaning and functions that a web browser (a program, such as Internet Explorer) understands. HTML dictates the layout, formatting and linking within a web page. The browser  processes the HTML and presents the content/web page accordingly. Format: Web browser on your computer contacts co ntacts website ! Website server sends HTML page and content (text, graphic/audio/video/other files) to your computer ! Browser processes HTML and content on local machine and displays page accordingly.

Issues: •

•

•

•

•

•

Purpose of HTML is that theoretically, web pages can be viewed by anyone on the Internet and will always be displayed the same way, regardless of what kind of computer, monitor or browser is used. However, browser compatibility issues / different monitor sizes / screen resolutions means not every page will look the same on every computer This has created a number of problems for web designers when it comes to  building a website that will look the same in all browsers. Best solution: write clean, efficient HTML code and design de sign a website that adheres to World Wide Web Consortium standards. Otherwise, there is a ch ance that not everyone will be able to view your page as you intended. In the old days, people used to “code” web pages in HTML by typing it out by hand. However, a lot of people don’t have the time or patience to memorize HTML codes and create a website by typing in HTML.  Nowadays, there are web design programs that allow you to design the way the site looks and will automatically write the appropriate HTML c ode “behind-thescenes” for you. These programs p rograms are known as WYSIWYG Editors (What You See Is What You Get). Most people prefer these to hand-coding but it is very useful to know and understand what most of the HTML tags do.

PLANNI NG YOUR YOUR WEBSI WEBSI TE

 Before you even begin designing your website, consider: As in other media, the heart of design is communication. Ask yourself: Who are • you, what is the point (topic) of my site, what are my goals with this site, how will I communicate those goals? Who's your intended target audience for this website? • Focus your ideas. Make sure everything you want to put on your page has a really • good reason for being there. Redundant and extraneous information is a waste of  people’s time and they will likely not read most of it anyway. Some ideas for websites: Personal/family, business (e-commerce), music (band), • online portfolio, pets, movie fans, video games, etc.  Issues to consider: How will your audience view and access your page (which browsers are you • targeting, cross-browser compatibility issues)? If you don’t know about browser compatibility issues, design for Internet Explorer as the minimum. The Internet is all about bandwidth. The more content-heavy your site is, the more •  bandwidth people will need to be able to load it in a reasonable amount of time. Broadband (cable modem, DSL) is immensely faster than dial-up over a phone line. Speed of people’s connection (bandwidth) to the Internet will affect amount and • type of content you can offer, such as large files, video, etc (metaphor: size/diameter of pipe, water = data. Small pipe = slow, Big pipe = fast) Solutions: Either design two sites (broadband/dialup, more work), optimize site • for lowest common denominator (dialup, best route), or neglect n eglect dialup altogether and stay broadband (only of you are positive of your target audience using such technology). Plug-ins – only use if necessary. Plugins are a re extra programs for viewing specific • types of content not initially supported by a web browser. If you decide to use plugins, it presents user with a choice: • 1. they either have to download the plugin before being able to see the content (takes time and is annoying when you visit lots of sites that use different  plugins)… 2. … or not download the plugin at all and won’t be able to view the content of your site 3. Either way it can be a deterrent to people visiting your site.  Navigation: Map out site’s navigation using a flow chart/hierarchy before b efore you begin building • any web pages so that you can plan out how users will browse your site Remember, users can often enter your site from any page. Make sure each page • has built in navigation to access ac cess other areas of your site. “Back”, “Forward”, “Home”, “Contact” are common links to put on every page. • Pick relevant page titles than encapsulate the idea behind that particular section of • the site, ie “Photos”, “Music”, “Projects”, “News”… don’t put something nondescript.

•

The less clicks the better. Having to click through page after page to get to what you’re after is tedious and annoying. Design your site in such a way so that it facilitates the straightest, most direct path to whatever content someone might be trying to access.

DESI DESI GN

Screen Resolution: •

•

•

•

•

Screen (monitor) resolution is usually defined by the width and height of the monitor’s screen in terms of pixels . Pixels are the tiny dots used by the monitor to display images. Monitors range in size from 14”, 15”, 17”*, 19”*, 21” (*generally considered standard size today). The bigger the monitor, the higher the resolution it can support – but your video card must also be capable of displaying that same resolution. Depending on size of the monitor and capabilities of the video card, you can display such resolutions as: 640x480, 800x600, 1024x768, 1280x960, 1600x1200 When designing a website, chances are not everyone will be using the exact same computer/browser setup that you have to view the webpage. Thus, you should design for a minimum set of resolution parameters, say 800x600. 800x600 . Remember, not everyone has a huge monitor – most important elements should be at top of page/screen

Colors •

•

•

Colors reflect theme or topic of site - do the colors you select work well with the goals and message of your site? Try to be consistent with the colors you choose and use throughout the site. There is a universal, 216-color palette that all browsers can use as bare minimum to draw from; do the colors you’ve selected exist on the 216 universal-color  palette? Otherwise, certain colors may not show up exactly as you intended (ie, yellow looks brown) Tip: use a limited palette: A few colors can go a really long way. Be smart about the colors you pick and don’t overdo it just for the sake of having color. Too much garishness and contrast creates eye strain and is bothersome.

Text & Readability People read left to right and top to bottom. Eyes reach upper-left corner first – • thus, a good place to put something really important White space helps the reader's eyes rest on what's important - whether an image or or • words. Type should sit comfortably on background color (Example: White type on black • is readable, but light-grey type on black = end result more comfortable to the eye) You can never go wrong with black type on a white background The bigger the type, the easier it is to read. The longer the line length, the more difficult it is to read • •

• •

Avoid making entire sentences links Avoid blinking text – its annoying

Content: •

•

•

•

Keep your content fresh. If you update your site on a regular basis you will have  people coming back to read more, thus making your website “sticky”. Maintain consistency in the voice of your writing, font selection, layout, colors, graphics and navigation menus to create a unified “image” you are trying to  portray. When creating your site hierarchy and content, maintain separate directories (folders) that relate to your topics. This will help in organizing your files: o Eg, if you have a photos page for 3 separate topics (family, pets and friends) from 2001, 2002 and 2003, create a folder called “pictures”, which is then subdivided by topic top ic – family, pets, projects – which are then subdivided by date (year) in each category. Eg, /pictures/family/2001 or /pictures/family/2002, or /pictures/pets/2003, o etc. Include contact information (email address), date the site was last updated, site disclaimer, browser/plugin requirements, site selection (if you offer more than one version of the site, ie Flash or HTML) on front page, if you use a splash/entry  page. Most sites nowadays have done away with intro pages and start directly on the main “content” page of site.

Using Images: Use images selectively to enhance your page – they are much larger than text in terms of file size. For gallery-type pages that display many photos, use thumbnails which link to full size pictures, rather than full size pictures all on one page (takes forever to download otherwise). There are many free programs available on the Internet that will produce thumbnails automatically for you. When creating graphics for web pages, pag es, remember to use web-palette as your basis for color selection. Optimize images for web. Many programs (Adobe Photoshop, Macromedia Fireworks) have a “Save for Web” function that will optimize graphics specifically for the Internet. This compresses the images with minimal loss in quality for quicker downloading. •

•

•

•

Website WYSIWYG Editors:  Netscape Communicator (free) • Macromedia Dreamweaver (trial/buy) • Adobe GoLive (buy) • Microsoft Frontpage (buy) •

 Reference Sites (learn more): www.htmlgoodies.com • www.webmonkey.com • www.builder.com •

ADV ANCED CONTEN T I SSUES: UES:

Sound: • •

•

•

Sounds can be quite bandwidth intensive depending on the quality/filesize. In general, sounds that the user has ha s no control over starting up automatically a utomatically when visiting a web page can be extremely annoying. The golden rule is: don't subject your web page visitor to sounds unexpectedly - a  page that offends is not likely to be revisited. There are exeptions to the no-sound rule: 1. on a page whose known intent is sound, such as a music sampler page or some humor pages. p reviously informed (that is, prior to linking to this page) 2. the user has been previously that they are going to hear something, such as by a link to a flash  presentation, or to a video 3. the user has the option of turning the sound off (often only possible through flash websites) 4. The sound is part of a navigation menu or button that reinforces the user’s interactive experience of selecting or clicking that particular menu item or  button.

Video: •

•

•

•

Video produces huge filesizes, but can be compressed to reduce file size at the sake of video quality (compression can introduce visual artifacts, choppiness, grainyness). Video is extremely bandwidth-intensive, almost exclusively relegated to  broadband users, as dial-up modems simply cannot handle the huge amount of data necessary to create full-motion (24 frames/second) video. “Streaming” is almost always the best delivery method to use when it comes to video. It will play instantly instead of you having to wait hours for it to download to your machine, depending on your connection to the Internet. Audio can also be streamed. Streaming requires you to encode video into a streaming file format, and also have a web host that supports this feature. To actually get video footage onto your machine from a camera is a process unto itself (which I will not go into), but can be b e done cheaply using a Firewire card/USB port and Windows XP’s built in Movie Maker (free) or Adobe Premiere (buy).

D OM OM A I N N A M E S   •

•

Once you’ve designed and built your website, you will probably want to uniquely identify it on the Internet by registering a domain name. A domain name is composed of three parts: 1. www. 2. the actual name of the site 3. the extension

•

Extensions can be: (Visit http://www.norid.no/domenenavnbaser/domreg.html for a list of all available): o o o o o

•

•

•

.com (commercial) .net (network) .gov (government) .org (organization) or newer suffixes such as “.biz”, “.tv” or “.info” (visit http://www.wdbc.com/domain/extensions.cfm for explanations)

For a fee, you can register a domain name at any of dozens of Domain Name Registrars such as www.godaddy.com (you can find a list of more registrars at www.internic.net and www.internic.net  and there's also a non-technical explanation of the name system there too). Once your domain name is registered and setup, it looks like www.yourdomain.xxx (where .xxx is the extension). Because millions of people have registered domain names over the years, the chances of a common name being already taken are fairly probable, especially when it comes to .com names. To get around this problem, you can try: 1. registering extravagant names that others (hopefully) may not have thought of  before you (ie, instead of trucks.com, try superdupercrazytrucks.com) 2. registering the name you want under a different extension (for example, while www.yourwebsite.com is already taken by someone else, www.yourwebsite.net or .org may still be available) 3. offering to buy the domain name n ame you want from the current owner/registerer o wner/registerer of that name (use www.samspade.org to help you find info on the owner)

•

It is also possible to hang your website off someone else's domain name (www.theirdomain.name/yourwebsite). While this does work, it's not very elegant or professional (especially when it comes to representing a business website), and makes it harder to remember the longer longe r a name gets. Often times, this is how free webhosting  works.

WEB H OSTI OSTI NG: •

There are two options when it comes to having your web page hosted somewhere: Free and Paid. Remember the old saying “there’s no such thing as a free lunch”? Well, this also holds true when it comes to having ha ving your website hosted on the Internet. Beginners often start out with free hosts and then migrate to paid hosting as their web design knowledge progresses. As well, people may want more functionality in their website that a free host simply cannot provide, they get sick of ads and pop-up windows, or want to have their website accessible through their own domain name.

 Free Hosts: •

•

•

•

In exchange for providing you with free hosting services, free host companies usually place their own ads and content on top of your website as a way gain exposure to your visitors and hopefully generate revenue through clickthroughs (users clicking on their ads). These advertisements are usually in the form of popup windows, banner ads and animations that can sometimes annoyingly take over the user’s whole screen until they close them. These ads will show up for all visitors to your site (read: ANNOYING). Free hosts often have built-in website building programs that will allow you to construct simple (but limited in style, layout and functionality) web pag es directly on their website. If you’ve designed and built a web page on our own computer using other  programs, free hosts will often have built-in methods on their webpages for you to upload (transfer) these files from your computer to theirs. For beginners, using a free host’s uploading webpage is oftentimes o ftentimes easier than having to use a FTP (File Transfer Protocol) program to transfer these files. The domain name will not be yours – it will often be appended to the free host’s domain name and may not even reflect the nature of your website at all (eg, http://www.geocities.com/Area51/Cavern/2690/)

Free Webhosting companies : •

www.geocities.com

•

www.angelfire.com

•

www.tripod.com

 Paid Hosts: •

•

With a Paid host, you have complete control over all content that is displayed on your site (no annoying pop-up windows or banners ads). Because you are paying the company for their hosting services, they do not put their own content on top of your site. Your site remains clean and free of all advertising unless you put it on on yourself. Paid hosts often do not provide any web page building software. People who use  paid hosting are oftentimes knowledgeable enough about web design (or have

•

•

•

•

 paid another company to design their site for them) that they do not need to rely on the free tools provided by the hosting company. When it comes to transferring files, paid hosts usually rely on FTP (File Transfer Protocol) using programs such as SmartFTP (www.smartftp.com, free), instead of  built-in upload webpages. The domain you registered will be the actual name of your website (eg, www.yourwebsitename.com). Hosting companies charge monthly/yearly fees for their services. Pricing is usually based on the amount amoun t of storage space (for your website files) required,  potential bandwidth (website traffic) usage you use (or will potentially use), number of email accounts you’d like, and other features such as databases, shopping carts and forums. Just like any other product or service, shop around and compare what each company offers for the money you will be paying. Decent hosting can be had anywhere from $6 - $20+ a month, depending on the number and types of features you require.

Paid Webhosting companies  (disclaimer: I make no guarantees about, warranties for and am not responsible for the quality of services offered by the following providers. These are companies I found after doing a brief websearch for web hosts in Canada – I myself use Stormwire even though they are located in the US): •

www.stormwire.com

•

www.blacksun.ca

•

www.allover.ca

•

www.hostroute.ca