|
Designing for the Web: You may print this page if you feel the need. But we will be updating it as needed; so the online copy will always be most up-to-date.
Different browsers, operating systems, and computer hardware are just that; they are different. Each design team has their own language and menu structure (Refresh vs. Reload, Favorites vs. Bookmarks, Save as... vs. Save Page As..., Tools vs. Options). Be mindful of this when authoring. Either be generic enough that most users will be able to follow, or note the browser/OS/etc. when giving directions (e.g.: In your Firefox browser, from the File menu, select "Save Page As..."). Not everyone has the same size monitor. Not all computers have mice. And, like browsers, the different operating systems have different tools and nomenclatures. When you author, you should be prepared to test your pages using different browsers and different operating systems. On campus, we are lucky; we have both Macintosh computers and Windows machines in the labs that we can use to look at our pages. And remember that users may set their local display to override your font/sizes, some users will use text-only browsers, and some users will use screen readers to hear your content. Note that I said most users. You will not please all of the people all of the time; but this is no excuse to design only for Internet Explorer on a Windows machine. Questions? What operating system and web browser do you use/prefer? Exercise: Under what circumstances could you see yourself designing for only one browser on one platform?
Remember what the focus of your page is and who your audience is; be sure that everything on the page supports the communication of that goal to that audience. Everything else I say in this lecture is contained in this simple yet far-reaching sentence; your care for all your users, their varying skills and challenges, your use of color, links, layout, content, all of it is concerned primarily with your goal and your audience.
Exercise: Discuss these two web sites; what are their
strengths; what are their weaknesses? Questions? What medium will you use to plan your website before you begin? Will you have long pages or many pages? Will it be an image-heavy site or more text? Why?
Like everything on the page, a link should serve the goal/audience of the page. Hyperlinks provide much of the dynamism of the web. Considering that all content is linier (we only see one thing at a time); being able to jump from one resource to their next interest and, perhaps, back gives your users a freedom to personalize the way they experience your content. Consider how hypertext differs from a novel, a movie, or reading a play with footnotes.
When creating links, try to make the linked text describe the linked resource.
For portability, it is best to use relative links instead of fully justified
links.
Questions? Would it be a good idea to link every word in a block of text, so that users could easily get a definition of each, as needed?
Navigation should be driven by the content and by user need. What does that mean? Clear and consistent navigation is a must. Users don't want to hunt around on your page for the link to the information they are looking for.
Look at http://www.csusm.edu/ and note top level and secondary level inconsistencies; but also note secondary level consistency. One of the major challenges in this very content rich site is providing navigation for important elements without overwhelming users. Questions? What challenges might you face with navigation and long pages; what about with many short pages? How many links do you think is optimal for a navigation bar?
Though links are more unique to hypermedia, it was images that spurred the web to be what it is today. Just like in print-media, images add richness to web pages. And, like most things, they can be an asset or a drawback to your site. Be mindful of your users' needs when including images in your pages.
Question: What image editing software do you plan to use? Generally, we see two types of images on the web: GIFs and JPEGs (or JPGs).
Images are great! But like emphasis, if you use too many images your pages will look cluttered and it will be hard for users to differentiate what is more important. 508 compliance
Exercise: Consider an image, and think of what your ALT information for that image would be; please share this with the class. Resources:
http://www.picresize.com/
Color, like emphasis, should be used to draw users' attention to important information, and to work with images to improve your overall presentation, as it serves the goal of your page. You can change the color of the entire page background, a portion of the page (using tables and/or CSS); text, and link colors can also be changed. Here is an example of a page that has different colors. Exercise: Consider the example above. What does this tell us about the priority that is placed on global colors (for the document) vs. local colors (for table cells and individual words)? What is the order of precedence? Color should not distract a user; it should not make your pages a riot of color (unless your pages are supposed to look like a circus act). And, even when you are working on a project that should be brightly colored, color should serve your goal. http://www.ringling.com/ Generally, when I choose color, I consider the graphics I will use in the site, and pick similar colors or shades. Most authoring tools have an "eye dropper" tool, that allows you to select colors from a graphic; this allows you to sample the color of an image and to pick colors and shades that are complementary. Color, unlike graphics, is rendered mathematically; so it saves on download time. Used with graphics, it can accent without being a performance hit. Exercise: Consider http://www.csusm.edu and look for where color has been used instead of (or with) graphics. Color is dependant on the monitor your users have and its display varies based on operating system. remember to test your page(s) using different hardware and software. Web colors are expressed, in the code, in hexadecimal. Hex value is based on a color's Red-Green-Blue (RGB) value. But most authoring tools have a color pallet you can choose from. Wikipedia has a pretty good explanation of hex: http://en.wikipedia.org/wiki/Hexadecimal [but give the class a quick run down of hex, associating it with RGB values] Resources:
Questions? Will you images and color together in your site? What colors, if any will you use and why?
So far we have been talking about content that is displayed on the page. But some important information is not displayed anywhere in the <BODY> of the page. META tags are contained in the page <HEAD> section. Meaning "after" or "with", this is the data that comes with what is displayed for the users. META data is most commonly used by scripts (that expire content) and spiders (that catalogue it). Here are a few common META tags:
Other information besides META tags is contained in the <HEAD> section of the code. Here's an important one: <TITLE>Designing for the Web</TITLE> Questions?
Used to define layout and stylistic elements on a page (or pages), CSS separate content from the presentation of the content. As the name suggests there can be different, cascading layers that govern layout and style. Authors of web pages can use external style sheets that govern all content or internal style sheets that govern blocks of content (or both, with the internal trumping the external, just as we saw in the priority of color in HTML). CSS can allow the same page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on braille-based, tactile devices. Advantages of using CSS include:
Exercise: How do you imagine using CSS can help you author 508 compliant documents. I drew heavily from: http://en.wikipedia.org/wiki/Css Questions?
You've all seen web pages that were well designed and others that were poorly designed. [Discuss tables, frames, text-only versions and 508 compliance]
Exercise: Consider blinking and scrolling text; what's the difference between drawing attention and stealing the show? Content that requires a plug-in (does everyone know what I mean by "plug-in"?): You must balance having the cool content vs. sending the user off to get the needed software, install it, (often they need to) restart their browser, return to your page, to see the content (though Firefox is very good about compressing the last two steps). Exercise: Why might you type out a full URL in one of your pages (as I have above), as opposed to just linking text to the destination? Questions? What are some problematic designs that you've seen, that we did not cover? Please be prepared to share one example with the class.
Web forms allow us to take information from browsers and "do
things" with it via a script. This allows an additional level of dynamism in our
web sites and the browsers' experiences. The kind of data you want to gather will dictate the form field(s) you choose. Via the script that processes the form data-pairs, you can write the data to a file (separated, text, HTML, etc.), send it via email, write it to a database, etc. There are many scripting languages you could use to process form data, depending on the operating system you run your web server on. There are sites that have graphical user interfaces (GUIs) to
help you make forms, then they also host your form(s). Questions? Do you plan to use web-forms? If so, how will you process the form data?
RSS is a family of web feed formats used to publish frequently updated digital content, such as blogs, news feeds or podcasts. Programs known as feed readers or aggregators can check a list of feeds on behalf of a user and display any updated articles that they find. Here's an example email you might receive from a RSS enabled web forum. The result is that users that subscribe to specific feeds need not (re)visit a site and check to determine if updates have been made. Their aggregator will "push" any new content to the user, as it becomes available. I drew heavily from: http://en.wikipedia.org/wiki/RSS Exercise: What might you use an RSS feed to keep track of? Questions? Please fill out the evaluation for this course. [ Designing for the Web ] [
Front Page
2003 ] [
Dreamweaver
8
] This page
http://www.csusm.edu/garrett/electures/DesigningForTheWebSp07/index.html Last updated Wednesday, February 13, 2008 09:26:05 AM |
