ITSE 1411 Beginning Web
Web Design Basics Chapter 3 Discussion
Discussion
- Design for Your Audience
- Different browsers render pages differently. Your page should look the best on the
most used browser of your target audience and acceptable in other browsers.
- Try to test your page on both PC and Mac when possible.
- Test your page on commonly used screen resolution. Avoid horizontal scrolling for these
resolutions.
- Keep in mind that many users regularly use smartphones for web browsing.
- Website Organization
- Hierarchical Organization
- Uses a clearly defined home page with links to the major site sections.
- Too shallow hierarchical organization gives too many major site sections.
- Too deep hierarchical organization goes past the 3-click rule. The visitor should
be able to get to the page within 3 clicks. Major reconstruction of the ACC site
occurred when the state legislature made the requirement of reaching all courses, syllabi,
and faculty pages within 3 clicks.
- Linear Organization
- Used with tutorials, books, anything that needs sequential access.
- Random Organization
- Has no clear path through the site and no clear home page.
- Principles of Visual Design (the look and feel)
- Repetition helps unify design
- Visual repetition may include the same shape applied to different elements such
as links. Different types of links may be displayed in different formats, yet
grouped with the same repetitive style. My home page is an example of this. I have
3 different groups of links, but all links within each group are formatted the same.
- Contrast
- Contrasting your background and your text is very important for readability. A dark
background with light text is harder to read than a light background with dark text.
- Proximity
- Close placement of related items and separating unrelated items gives a
visual clue for logical organization.
- Alignment
- Aligning elements both horizontally and vertically creates unity in the page.
- We will cover alignment through CSS later, but students always want to know how to center on a page.
In order to satisfy your curiosity without the difficulty of learning too much at once, I give
you an example of centering. You will learn more alignment later.
- The align attribute is used in HTML to align content. However, in XHTML strict, CSS is used for alignment. Unfortunately,
the method to center differs from element to element and browser to browser.
- margin-left: auto; margin-right: auto; centers a block level element.
- text-align: center; centers the inline content of a block level element.
- <h1 style="text-align: center;">Centers h tags</h1>
- <h1 style="margin-left: auto; margin-right: auto;">Required centering for IE block level tags.</h1>
- <h1 style="margin-left: auto; margin-right: auto; text-align: center;">Combine both methods to center
in multiple browsers.</h1>
- <div style="text-align:center; margin:0 auto 0 auto">Will center the content of the div</div>
- Design to Provide for Accessibility
- Accessibility is typically more usable for all because it requires a well-organized page.
- Search engines will pick up pages that have descriptive text for hyperlinks and alternate text
for images.
- Pages used by government agencies are required to be accessible to people with disabilities.
- There is discussion among lawmakers to require accessibility of pages by law.
- Principles of Accessibility
- Perceivable
- Perceivable content is easy to see or hear.
- Consider using graphic or multimedia in text format, transcripts for audio, and
closed caption for videos.
- Operable
- Content is operable when access works for both mouse and keyboard.
- Avoid flashing on sites because this can cause seizures.
- Understandable
- Understandable means easy to read and helpful error messages when appropriate.
- Readability considers the font typeface, size, weight, and color of the font.
- Use common fonts. (Typefaces for PC's are not the same as typefaces for Macs. You should
list a common font for each so that the browser will have a selection that is available
for the computer being used.)
- Do not bold everything.
- Remember the aging population when choosing font size. Font sizes are smaller on a Mac.
- If you do not have spell check on your editor, consider uploading your page, copying the text,
pasting the copied text into your text editor and doing a spell/grammar check on the text.
- Robust
- Robust sites work with assistive technologies and follow W3C Recommendations.
- Use of Text
- Write in short sentences.
- Be concise.
- Use headings and subheadings.
- Bullets stand out.
- Web Color Palette
- Colors on a monitor are created using red, green, and blue, called RGB color.
- Each color can be chosen between a value of 0 and 255 for the intensity of the color. The
numbers are not represented in digital values 0 - 255, but in hexadecimal which is 00 to FF.
- Color names that validate in CSS
- There is some confusion about what web safe colors mean. This is a very old term that means nothing now.
A few years ago, many monitors did not have the color spectrum that current monitors have.
Because of that, the 216 web safe colors were established as working on multiple browsers.
Don't worry about that at all anymore.
- But, the bigger problem is that there are only 16 colors that will validate in CSS.
- All others should use the hex value or RGB triplet
- Choose your Color Depending on your Audience
- Children and preteens prefer bright, lively colors.
- Young adults generally prefer dark background colors, some bright color contrast, music
and dynamic navigation.
- When trying to appeal to everyone, use neutral to white background with splashes of color.
- The easiest page to read uses a white background with black text.
- Older adults prefer light backgrounds with well-defined images and larger text.
- Use of Graphics and Multimedia
- When using graphics and multimedia, consider using text descriptors. Also consider if it
is important that our pages be accessible through mobile devices that might make the
graphic incomprehensible or too slow to download.
- Consider using a smaller image to link to a larger image. The smaller graphic will download
faster and give an option for those interested to look at the larger image.
- Antialiased images smooth jagged images and make them easier to view.
- Only use animation and multimedia if it adds value to your site. For example, my daughter
is a composer. Multimedia is essential to her page. See
Joni Greene Composition Site
- Provide alternate text for images to allow users configure to not show images.
- More Design Considerations
- Your page should load as quickly as possible. Try to limit your file size to 60KB unless it is a content page and users are already
invested in using your site.
- Use image slicing, where parts of an image displays so users can see that the page is loading.
- Consider breaking your page into multiple pages so that the user perceives that the load time is
shorter.
- Catch the users attention by showing the more interesting information first so it is shown first.
(In a newspaper, this would be above the fold.)
- Whitespace (minimally discussed on page 91 of Design text)
- In HTML when you enter multiple spaces of press the enter key, you still view one space on the screen. For example:
Hello
World
appears as
Hello
World
- Avoid horizontal scrolling on a page.
- Navigation Design
- Navigation on a site should be in the same location on each page of the site.
- Navigation bars add to readability. It is obvious to the user how to use the navigation.
- A breadcrumb trail indicates the path of web pages a visitor has viewed during the current session.
- Using graphics for navigation is outdated and does not provide accessibility.
- Do not overwhelm the user with too many navigation links. Consider using dynamic navigation where a mouse cursor
provides additional link options.
- For large sites, consider using a site map that provides an outline of the organization of the website.
- Consider using a search feature to help visitors find information in your site.
- Page Layout Design
- Refer back to Assignment 1 for the Wireframes notes.
- Popular Layout Design Techniques
- Fixed and Fluid Layouts
- Fixed layouts (also called "ice" design) hug the left margin and have a fixed width.
- Fluid layouts (also called "liquid" design) take up 100% of the screen. With high-resolution screens, the lines of text may extend
horizontally and make the page difficult to read.
- Design for the Mobile Web
- With increasing use of mobile devices, it is important to design web pages that are appealing and usable for your mobile users.
- Approaches for writing for mobile devices
- Develop a separate .mobi site.
- Create a separate website targeted for mobile users.
- Apply CSS to configure current website for display on mobile devices.
- Mobile Device Considerations
- Mobile devices use a small screen size.
- Many mobile uses experience slow connection speeds. Some users pay per kilobyte downloaded. Eliminate unnecessary images.
- Mobile devices may have limited font, color, and media support.
- Controls on mobile devices may be more awkward to use than on a computer.
- Provide easy access with prominent hyperlinks or a prominent search button.
- Responsive Web Design
- A more streamlined approach to design for multiple screen resolutions is to follow the W3C's One Web initiative to provide a
single resource configured for optimal display on multiple types of devices.
- Use CSS media queries as a technique for configuring a web page to display well at various screen resolutions.
- When using a paragraph tag, the paragraph will have a blank line before and after the paragraph.