What is the most important factor to consider when choosing a design for a website?
The sites purpose
What two Questions should you ask to determine the purpose of the website?
What's the purpose of the site; how will it be used?
What will keep the audience coming back?
What are some steps you can take to help you choose a design for your website?
Evaluate sites that you find interesting
Look at websites and find interesting designs.
Look at the front "splash" page.
Observe the structure of the site.
Try to determine the purpose of the site.
What is an advantage and disadvantage of an Animated gif?
Can draw attention to a topic.
Can be annoying if over-used.
What is a transparent gif and what makes them useful?
Shows just the shape of the graphic and not the rectangular background of the image.
What graphic file type would best suit the following images?
banner + text = gif
photograph of person = jpg
Why would you want to use and interlaced gif or progressive jpg?
When you need to use a large image that would take a long time to load.
What is the most common image format and why?
Gifs, because most sites use flat color images to create menus, logos, and text.
What are several general guidelines for web graphics?
Keep images small. Keep them under 40k. |
Consider interlaced or progressive formats.
Images are not just eye candy. Some of the best stories are told with images.
Why is it important to use the right images?
Knowing will help you make your images smaller, and it has a direct impact on image quality.
How can you optimize a graphic?
Reduce the number of colors as much as you can.
Crop your images as much as possible.
Use the right file type for the image.
Use <img> tag and scale the graphics by width and height. (This embeds the image so the browser doesn't have to determine its size and create a placeholder.
ex. <img src="image.gif" height="200" width="250" alt="text message">
Slice large images and load each piece into a table to help speed-up load time.
Be aware that browsers cache images.
What are two advantages of slicing up larger images into sections?
You can rely on the browsers cache to reduce page load time, and you can swap sections of the image for "rollover" effects without having to load the entire graphic for each event.
What are 5 fundamental color concepts?
hue, tint, shade, saturation, value
Hue A hue is any of the color you would find on the color wheel, and is the starting point for the color decision.
Tint A tint is created by adding white to a hue.
Shade Add black to a hue and you have a shade. A shade is also referred to as a tone.
Saturation Saturation is the intensity of a particular hue to the black space.
Value The Value of the hue describes how light or dark the color will be.
Why is it important to learn the fundamentals of color?
There might be a tendency to use your own personal favorite colors, or use colors that don't work well together. Knowing the fundamentals of color can go a long way towards making better choices.
What questions can you ask yourself about your choices in color?
Do the colors effectively highlight areas that deserve focus?
Do the colors provide a "path" for the eye to follow?
Is there enough contrast between background and foreground colors?
Are there clear distinctions between headings and related content?
What are the 16 predefined colors that display exactly the same on all browsers and platforms?
(aqua, black, blue, silver, gray, white, maroon, red, purple, fuchsia, teal, green, lime, olive, yellow and navy.
What is the 216 Color browser safe palette?
Browser safe colors in the hexadecimal palette are those colors that are represented by combinations of the following six values: 00,33,66, 99, CC and FF.
6 colors for each
value = 6 x 6 x 6 = 216 color safe colors.
What are three ways you can specify color on the web?
Color names, hexadecimal values, RGB values
What are four ways that color can influence a readers perception of content?
Users eye can be drawn into content.
Create separation from different areas of content.
Make text more readable.
Provides emphasis for "important content"
Is it a good idea to avoid using deprecated tags?
If I use deprecated tags will my pages break?
No, not in today’s browsers but in the future.
What does it mean to separate style and structure, and why is it important?
Means to define the presentation of structural elements outside the code as often as possible. This is done with CSS.
What are several common design and content problems?
Tiling background images, blackbackgrounds with white text, background music, browser buttons (markers), animated gifs, page hit counters.
Why is it important to develop your own style guide?
A style guide provides a tool in which to create consistent, effective websites.
Why is it important to determine your target audience?
Because your target audience will have a significant impact on the design content choices you make.
Why is it important to do on-going research?
So you can determine trends and utilize services that help to capture them. User trends will help you decide which technology, approaches, and design concepts you want to pursue or avoid.
Should every site use a metaphorical design?
No, a site metaphor is not necessarily for every site. You might determine that your design is best achieved without a contextual theme of any kind and rely instead on the organization’s brand identification.
Why is it important to outline and storboard your site?
Outlining will help you establish priorities for your content, and begin to reveal the information structure you will eventually build.
Storyboarding helps you determine what will be required in the project the content involved on each page and the site’s general navigational sequence and structure.
What are two advantages to drafting a site flowchart?
Flowcharts help to reveal the logical structure of your site and arrange content sections. You can also create and outline site map based on your finalized flow chart.
What are some advantages to routinely validating your code?
You can quickly verify your code to ensure there are no nesting errors, missing quotes and tag delimiters, and even spelling errors. You can also use validation to help establish your own HTML style guide. Many validators let you set coding preferences to test against.
What is page weight?
Describes the total file size for a given page, including all graphics, text, and scripts.
List at least two ways you can control the width of your text blocks.
You can use tables in your page layout to hold your text to a specified width, and you can use the width property of CSS, which might involve some browser compatibility issues.
Regarding CSS, how will you define what’s safe to use?
It’s fairly safe to use any CSS styles that don’t impact the position of other elements on a page, or styles that break down gracefully and merely enhance an existing design that works in most browsers.
What are three advantages to using CSS to control typography instead of HTML tags and attributes?
All the 4.x and later browsers support the most important typographical styles of CSS.
The HTML tags and attributes that influence type are deprecated in HTML 4.0 in favor of style sheets.
You will separate style from structure, which makes for cleaner, more efficient pages.
The styles are far easier to modify at a later date. If you use <font> tags, you will have to manually strip them all out or use a program to do it for you. Either way, it's more work.
Why is it a good idea to end every font property with a generic family name?
If a user's system does not include a specific font that you have declared, the generic font will be used, which ensures that all users will see the document with at least a closely matching font face.