Introduction
There are two questions you need to answer before you start building a website: "Who's your audience?" and "What is the purpose of the site?" If you haven't answered those questions, you shouldn't even begin your site because the answers will drive the whole design.
Who's your audience?
Parents, students and staff are the main visitors to the ASD website. But we also get traffic from the media, other school districts, members of our community and people from all over the world.
We're fortunate in Anchorage to have a higher than average number of homes with computers and Internet access, but we must not assume that all of those computers are new or that they have the latest and greatest software. Others may access the Internet using special software that reads webpages or they may have difficulty using a keyboard.
"... we have to build our sites carefully with our entire audience in mind."
What this means is we have to assume a pretty low common denominator, technologically speaking. This doesn't mean we're stuck building simple sites or that we can't use the newest technology, but it does mean we have to build our sites carefully with our entire audience in mind.
What's the purpose?
One word. Information. People come to the ASD website or a school website to find something. If we can provide something beyond that, so much the better, but if people come to the site and either can't find it or can't get to it because the design has gotten in the way, then we're doing something wrong.
Long downloads and superfluous page geegaws are distracting and although we're not "competing for eyeballs" the way a commercial site has to (like the battle between Amazon and Barnes & Noble, for example), making our website difficult to use or navigate is counter-productive. The other sections on this page provide further guidance on what makes a good website.
Access
The district provides schools and teachers with space on ASD Web servers to host their sites. Principals can request access through the Help Desk at 742-4615. Teachers can use the Site Builder tool available through the District Connection. If additional space is needed outside of the templates provided in Site Builder, an FTP account can be set up through the Site Builder dashboard. Tutorials are available online and assistance can be requested through your building's technology coordinator.
Online resources
Usability
Good design isn't just an aesthetic perspective, but also includes usability. Usability in Web design focuses on functionality, effective presentation of information and efficiency. How easily can visitors interact with your website? Can they figure out where they need to go? Can they find the information they need quickly? Is there consistency across the site so they don't have to learn new navigation on each page? Did they have a good experience? Designing from the perspective of the person visiting your site will help you create a usable site. Take the time to step out of your box and look at your site through the
eyes of your
users.
"Take the time to step out of your box and look at your site through the eyes of your users."
It's not about the number of clicks
The old 3-click rule was supposed to make it easier for people to find what they needed - the thinking was if they couldn't find it in three clicks they would get frustrated and leave. But as a result of that pages were designed with too much information so they became overwhelming. We now know users will click more than three times if they're finding the information they need. It's when they get bogged down and can't find what they need that they get frustrated. Steve Krug's book, Don't Make Me Think: A Common Sense Approach to Web Usability, has great insight into how people behave online.
Writing for the web
Writing content for the Web is different than for a print publication. People are less likely to take a lot of time reading so get to the point and don't include a lot of filler. Format your page for people who scan a page: use bulleted lists, break up long passages with headings and use whitespace appropriately.
Online resources
Images and graphics
Images can enhance your site and please your visitors, but graphics and clip art are frequently overused. Minimize the use of clip art and use photographs instead to help set the tone and express ideas. Don't convert text into an image unless you have to - it makes searching a lot harder. For example, the headings on your page should all be text, not images.
Choosing the right image
Before you choose an image, ask yourself if it's relevant, interesting and appealing. Images shouldn't be used if they don't have a connection to the content. They should support the idea you're trying to express. If you're not answering yes those questions, then choose another.
"Just because you found it on Google doesn't mean you have permission to use it."
Copyright
Make sure have the right to use any images you publish on your site. Just because you found it on Google doesn't mean you have permission to use it. Always check with the site where you found the image for permission to use their images.
Online resources
|
accessibility
Accessibility is about making accommodations for people who are vision impaired or blind, people who are hearing impaired or deaf, and people with motor impairments.
"Accessibility in Web design addresses the issue of creating Websites that are accessible to all users, regardless of physical ability or the way in which they use the Internet."
Nigel Peck, SitePoint
Why it's important
As a publicly-funded institution it's our responsibility to make sure that no matter who comes looking for information, that information is available to them no matter what kind of computer or browser they use. We want people to use our website so it makes sense to make sure that anyone can.
Accessibility is good for everyone
Accessibility can also make indexing of content, searching and page maintenance easier all while having advantages for the visitors listed below:
- Mobile and smart phone users
- Low literacy and English-as-a-second language users
- Low bandwidth users
- Users with different learning styles
Degrading gracefully
Degrading means backwards compatibility, or in other words, any browser should be able to look at your page and get the information that's on it. Let's take a look at JavaScript. If you use JavaScript on your page, make sure that a browser that doesn't support it won't get left out in the cold. For example, you can use JavaScript to create an clickable image map, but you should also provide a text list of those links.
Test, test, test!
Testing can't be stressed enough. Before you publish, make sure it's going to work. At a minimum, you should check your pages on a Mac and a PC in Internet Explorer, Safari and Firefox. If you've done anything tricky, make sure it's displaying correctly.
Online resources
good design
Visitors to your site should find the design pleasing, but shouldn't be distracted from the content. They should also be able to recognize each page as belonging to the site through consistency in that design. It's not within the scope of this site to explain design principles but there are many websites where you can learn about them. The links below will help get you started.
Gray areas
Background images and colors - Anything that makes a page harder to read is bad for the site. Using photographs and complicated tiles as a background image or pattern can lower the contrast between the background and test, making it difficult to read.
Flash/Shockwave - Using these tools to provide movies or animations are fine to provide extras to your page, but don't make a users sit through a Flash intro page before they can get to your site.
Cascading Style Sheets - CSS has been enormously helpful to designers giving them more visual treatment options, but beware ... inconsistencies in how each browser displays the treatments abound. Make sure you're testing anything new in a variety of browsers.
Just don't
Animated GIFs - To you, animation can provide life to a page, but to someone who's trying to find something it can be tremendously annoying. Same goes for using the <blink> and <marquee> tags. Just don't use 'em!
Frames - There are times when frames are useful but they're few and far between and it's easy to misuse them. Just don't use 'em!
Online resources
Wrap-up
One final thought: If you create pages on a regular basis, learn something about HTML and CSS. Even is you use a WYSIWYG editor, there are going to be times that you'll want to stray from their limited creativity. Some of these editors create faulty code and if you don't know anything about HTML or CSS, you won't be able to go in and fix it. When all of the browsers and all of the editors finally adhere to one set of standards, knowing how to code by hand will not be nearly as important - but that day is not yet here.
"If you create pages on a regular basis, learn something about HTML and CSS."
Questions? Comments?
Online resources
|
