Webpage Design TipsPlan
- What is the purpose of your site?
- Who is your audience? How will you meet their needs and hold their interest?
- Content, color scheme, font size, images, file sizes, download speed
- People tend to like images of people
- Short lists better than long paragraphs—KISS (stands for: Keep It Simple, Stupid.
- Decide how your information will be divided among pages
- List the page file names and titles.
- Draw a picture of your page layout.
- Create one page and make it perfect before creating more. Apply all links in your navigation (even if the pages aren't made yet—your list of page file names will come in handy here)
- Test in different resolutions (1024 x 768 and 800 x 600) and browsers (IE and Firefox)
- File --> Save as to create the remaining pages. Remember–each page should have a unique title.
- No spaces
- No characters other than letters, numbers, hyphens, or underscores
- No capital letters
- The home page is always named index.html
Accessibility TipsBe sure all site visitors can access your site. For more information, refer to the Web Content Accessibility Guidelines (WCAG) at http://www.w3.org/TR/WCAG20/. WCAG 2.0 Explanation WCAG Song
- Contrasting and easy to read
- Dark background with light text or
- Light background with dark text
- Search for Web Color Schemes for good resources.
Lots of resources in Chapter 3
Search Engine OptimizationSearch engines look for relevance and reliability when ranking websites in their results
Users who depend on screen readers often move through a page by tabbing from link to link or from heading to heading.
Links: The link, Click here does not stand alone well, but Download SuperSoftware 4.8 is self-explanatory.
H1 - H6: Be sure to use Heading tags (h1 for main headings, h2 for 2nd level headings, h3 for 3rd level...) to format your headings and subheadings.
Alt text: Include alternate text for all images. If an image doesn't really need alternate text, then enter a space as the Alt text (alt=" "). Note that you should never completely omit the alt tag. This omission subjects the screen reader user to hearing the file name of the image. If you are in doubt as to whether or not to describe an image with an alt tag, do it.
Colors: Use contrasting colors that are easy to read by users who are color blind. Also, place text over a solid background instead of a picture or pattern.
Navigation: When using drop down navigation, provide alternate navigation for users who have difficulty using the mouse. For example, the main link in a drop down list should go to a page that lists copies of all the links in the drop down menu.
Flash: Don't have anything that flashes more than three times in any one second period. (This could cause a seizure).
- Think of words and phrases a site visitor would use to search for your page. Describe what you do, not just who you are. Write a title and a short description This shows your page is relevant.
- Good Title: “Photography in Myrtle Beach, South Carolina”
- Bad Title: “Michael Gatewood Photography”
- Better Title: “Photography in Myrtle Beach, South Carolina, by Michael Gatewood Photography”
- Every page should have a unique title and description
- Use those words in your page title. The title appears in your title bar and in the Google results list.
- Use those words in your Description. The description appears below your title in the Google results list (Insert--> HTML-->Head Tags--> Description)
- Register your website with search engines
- Use those words in an H1 tag near the beginning of your page.
- Use those words repeatedly near the beginning of your page content.
ReliabilityHave lots of other sites link to yours. (shows your site is reliable)HTML Tags
- Hypertext Markup Language
- Most tags come in pairs. For example, and surround the content they control.
- A slash (/) is in the ending tag of the pair.
- Open any html page in a browser, select View--> Source to view the html tags.
- There are lots of html tags. Here is a list of the most common ones.
Every html page has one pair of html tags. These html tags surround everything after the Document Type Definition.
Html pages are divided into two main parts: head and body. The content within the head tags is not visible. Title, Description, and Keyword tags are surrounded by the pair of head tags.
These tags are within the head tags. Their content is visible in the title bar of the browser window. The title is also used by search engines to find your page, making title tags extremely important.
Every html page has one pair of body tags. These body tags surround the visible section of the page.
h1, h2, h3, h4, h5, h6
Headings. H1 is the largest, h6 is the smallest.
table, th, td, trEvery table is surrounded by a pair of table tags.Every row is surrounded by a pair of tr tags.Every header cell is surrounded by a pair of th tags.Every data cell is surrounded by a pair of td tags.
ul, liEvery unordered (bulleted) list is surrounded by a pair of ul tags.Every item in the list is surrounded by a pair of li tags.
ol, liEvery ordered (numbered) list is surrounded by a pair of ol tags.Every item in the list is surrounded by a pair of li tags.
dl, dt, ddEvery definition list is surrounded by a pair of dl tags.Every term in a definition list is surrounded by a pair of dt tags.Every definition in a definition list is surround by a pair of dd tags.
Every paragraph is surrounded by a pair of p tags. To begin a new paragraph, press the Enter key.
Every link (anchor) is surrounded by a pair of a tags.
imgEvery image starts with an img tag. This tag isn't in a pair.'
Every line break starts with a br tag. To enter a br tag, press Shift + Enter. This tag isn't in a pair. It begins with < and ends with />
hr Horizontal Rule. To enter a hr tag use the Insert menu.This tag isn't in a pair. It begins with < and ends with /> nbsp Non-breaking space. This tag will insert extra horizontal spaces. To enter, press Shift + Ctrl + Spacebar. This tag isn't in a pair. It begins with & and ends with ; "<!--This is a comment. Comments are not displayed in the browser-->" Comment: Insert a comment in your html to make it easier to find major sections or other useful information. Comments will not display.StylesBasic information about styles:
- The most efficient way to format your html page is to use an external style sheet.
- Consistency throughout the site
- Styles have more formatting controls than Properties
- AVOID using Properties to format text. This creates “embedded” styles that will only control the selected content of the page being formatted.
More Style Tips
- Tag type styles:
- Names match the html tag to be controlled.
- To apply, just create the style. They automatically control your content.
- Class type styles:
- Names start with a . (period)
- Control selected tags.
- To apply, right click the correct
listed at the bottom of the window, then Set Class to ___, and choose your style.
- ID type styles:
- Names start with a #
- Control an area of your page and always applied to
The easiest ways to insert a pairand apply an ID are:
Wrap a pair of Div tags around existing text: Select the content to be controlled, click the Insert Div Tag button, then choose Wrap around selection, and choose your ID name from the drop down list.
Insert a pair of div tags for new text at your insertion point: Place your insertion point where the new text is to appear, click the Insert Div Tag button, then choose At insertion point and choose your ID name from the ID drop down list.
Insert a pair of div tags after an existing div: Place your insertion point anywhere on the page, click the Insert Div Tag button, then choose After start of tag and choose the previous tag from the list, then choose your ID name from the ID drop down list.
To center all the content of the page, place it in one large div. #container would be a good name.
Suggested width: 960 pixels
Left & Right Margins: Auto (this will center the div on the screen)
- Styles can be defined together
- No space = and
- Controls content surrounded by both styles listed
- Example: #nav_area a will control all the links ( tags) that are inside the #nav_area Div.
- Comma = or
- Controls content surrounded by either style listed
Example: h1, h2 will control content surrounded by h1 or h2 tags.
- No space = and
- Don't use fancy fonts—your site visitor probably won't have them. The only safe fonts are Arial, Verdana, and Times New Roman. Although, Impact is becoming rather common.
- Set the body style first
It controls the base font and background color for everything.
Use pixels to measure the text size of the Body, then use ems (width of a letter m) to set text size of other styles.)
- Padding is the space between your content and border; Margins is the space outside your border.
- Use only Copyright Free images or your own—no stealing!
Go to PowerPoint find free images. Place image on a slide, then right click to save the image.
Entire PowerPoint slides can also be saved. In PowerPoint, select .jpg as the file type when saving.
CreativeCommons.org has copyright free images, music, and more.
Save simple graphics (only a few colors) as .gif
- Graphic Interchange Format
- Pronounced gif, not jif
- Save photos and complex graphics (lots of colors) as .jpg
- Joint Photographic Experts Group
- Pronounced jaypeg
- Create images in Fireworks.
- Default file type: png
- Portable Network Graphics
- Pronounced ping
- Can have lots of colors AND a transparent background
- Can be exported as .jpg or .gif
In Dreamweaver Properties:
gif or jpg images can be made smaller (Drag the lower-right corner, hold Shift to maintain proportion, then click the “Resample” icon to make the image clear.)
- gif or jpg images can be cropped (click the crop tool, adjust the crop area, then double click inside the image.)
- Text can wrap around the left or right side of the image (set alignment of image to left or right) OR Create a style that has float set to left or right, then apply the class to the img tag.
- Alternate Text should be applied to all images (Site visitors will have a description, search engines will find them, and screen readers can read them for blind people)
- When applying a link to an image, a blue border will display. To remove the border, set the border size to 0.
- People like looking at pictures of people.
- To insert a favicon (the image in the browser address bar), insert this code within your <head> </head> tags:
"<link rel="shortcut icon" href="favicon.ico"/>" and save your graphic as favicon.ico. There are several websites available to convert a jpg, png, or gif image to an ico file type. Be sure your favicon.ico file is in your root directory.
- There are tons of resources saved on my diigo.com cloud list.Click on the tags to filter the list. For example, to find out more about html. click the html tag.
- Create your own diigo account to store and save your own list of bookmarks.
- Spell check: Shift + F7
- Check links (right click file--> Check Links--> Entire local site)
- Look at other websites for design ideas