Design Your Website From the Bottom Up
Most novice website builders begin by designing the start page. Instead of using this method, it would be more effective to build the site from the bottom up. The start page should serve as a user-friendly guide to the rest of the site. This is difficult to achieve if you haven’t decided where you are going to take the viewers.
Step 1: Brainstorm
Begin by brainstorming a list of all the items you would like to have in your website. This can include items that you will produce for your site, as well as links to other sites. Think about your audience and the kinds of information they will be looking for. Also consider what you already have available, and what is already available on the Internet.
Step 2: Grouping
Try to group all of your items into 2 to 4 categories, and see if you can find a name for each category. Think about dividing up your information according to the viewer (students, parents, classes, grades, etc.)
Step 3: Critique the Categories
Look at your categories with a critical eye and answer the following questions:
· Who is my audience? What are they looking for?
· What is most important to them? Will it be easy to find?
· Will they have to jump between categories to find what they need?
· Should some items be in more than one category?
· What items will stay the same? Will some items need frequent updating?
· Do the categories make sense? Do they describe what’s in them?
Step 4: Revise Your Categories
Revise the categories and items as needed. Focus on what it will be like for your audience to find what they want.
Step 5: Develop a Flowchart
Finalize the categories and the items in them, and make an organizational flowchart. This will become your roadmap for designing the site. As you develop your flowchart, you should balance the breadth and depth of the design.
Step 6: Design a Navigational Plan
Think about the navigational path that viewers will use to move around your site. Most users will begin at the start page, click to a second level page, and then perhaps down to a third level page. Many will use the browser’s back button to return to the start. However, you should also include shortcuts to allow users to go from one part of the site to another without using the back button. Again, balance is key. You need to offer enough shortcuts to other areas, but not so many that they cause confusion or clutter. It is often best to put a navigation bar at the top or bottom of every page, linking to the start page and each of the second level pages. You should also include some information that identifies the site and the designer at the bottom of every page, and remember to put a second, text only navigation bar somewhere on the page.
Step 7: Page Layout
Include the following on every page:
· Navigation links at the top and bottom of every page
· Identifying information on the site name and organization
· Page content
Also remember to clearly identify the title of the current page, and place the most important information “above the fold.” Most importantly, never make a site that is too wide (over 600 pixels). People don’t like to have to scroll from side to side.
Step 8: Don’t Forget to Keep it Simple
Most viewers want to quickly find the information they are looking for. Don’t clutter the site with unnecessary animations and scrolling banners. Every graphic you add will increase the download time. Most viewers will quickly lose interest if they have to wait for your page to appear. Load time is especially important at the top end of your site. The start page and second level pages should load very quickly.
Step 9: Finally, You Get to Make Your Homepage
Step 10: Congratulate Yourself, and Get Ready to Upload to Your Server
Remember that building and updating a website is an ongoing project. Don’t add any cute “under construction” clip art to your site. They’re always under construction.
Universal Design for Learning Guidelines
1. Representation – Use multiple means of representation
· Provide options for perception
· Provide options for language and symbols
· Provide options for comprehension
2. Expression – Use multiple means of expression
· Provide options for physical action
· Provide options for expressive skills and fluency
· Provide options for executive functions
3. Engagement – Use multiple means of engagement
· Provide options for recruiting interest
· Provide options for sustaining effort and persistence
· Provide options for self-regulation
Universal Design of Web Pages in Class Projects
The web has the potential to make information accessible to everyone. However, this potential cannot be realized unless the content is designed in a way that all Internet users can access the full range of resources. The Internet has become an essential tool for education at all levels. Students learn from web resources, and also create their own content. As students develop web pages they need to keep in mind the disabilities and challenges that some of their users may face. Accessible website design is an essential skill for all web content developers.
People use a variety of technologies to access the web. Assistive technologies exist to help people with specific disabilities.
To create resources that can be used by the widest spectrum of potential users, students should think about the broad range of characteristics their site visitors may have and design their resources to be as accessible as possible. This includes individuals with disabilities, senior citizens, English language learners, and those using outdated hardware and software.
The World Wide Web Consortium’s Web accessibility Initiative develops Web Content Accessibility Standards. The standards include guidelines grouped under four qualities of accessible websites: perceivable, operable, understandable, and robust. Many states, schools, and other organizations have adopted these guidelines. Teachers should find out if their school, district, or state has adopted these standards, and discuss them with students.
To encourage students to create websites that are easy for everyone to use, consider providing them with general guidelines that they must incorporate into their projects, and encourage them to address additional accessibility issues. Students should also remember to maintain a simple, consistent page layout throughout the site, keep backgrounds simple, and use standard html to ensure access by all browsers. They should also make link text descriptive, and include a note about accessibility.
A major barrier to blind individuals is created when text alternatives are not provided for non-text elements. Many blind individuals rely on text-to-speech software, or a refreshable braille display. Both of these require text alternatives to describe graphic content.
Video and audio are often used on websites. However, audio content is not accessible to those who cannot hear it. Also, video content may not be accessible to blind users if the message being communicated is not apparent through the presentation’s audio. Students should include captions for video content, and transcripts for audio clips. For video, they could also consider including a descriptive audio track.
Students should test their websites with a variety of web browsers. Including at least one text-based browser, or a standard browser with graphics turned off and sound muted, making sure they can still access all of the features of their websites. They can also use accessibility-testing software that will point out elements of their websites that may be inaccessible to certain users.
If students use an authoring tool, they should be required to locate and apply accessibility features included with that tool.