EDET 735 - David Barker

Lesson Plan Assignment

Title: Web Design Best Practices

Level: Adult learners with web programming experience

Time: 60 minutes

Materials: Projector, web browser, iOS device

Topic:

Introduction to best practices for effective web design.

Objectives:

At the end of the lesson learners will be able:

To list items on web pages that do not adhere to best practices.
To explain why one web page is better than another based on use of best practices.
To construct a plan to improve a web page by employing best practices.

Motivation (Warm-Up): 5 mins

Ask the class for their pet peeves when visiting web sites. Write down the items for use later. Explain that many of their pet peeves will be addressed by following best practices.

Information (Presentation): 15 - 20 mins

Provide the class a list of blogging best practices.

Do have a responsive page

Pages that are responsive allow you to determine how viewers access your content rather than letting the device choose for them. It also allows you to design in way that help small devices convey the information effectively.
Bad example: http://www.amazon.com/
Good example: https://pittsburghkids.org/

Do make the page accessible for all viewers

Pages must be accessible to increase viewership and prevent exclusion.
Bad example: http://yvettesbridalformal.p1r8.net/, http:// www.brailleplus.com/
Good example: http://www.cdc.gov/

Do use effective design (graphics serve a purpose, there is whitespace, fonts are readable, colors contrast)
- Bad design will decrease viewership and conversion rates on your website.
- Bad example: http://www.roverp6cars.com/
- Good example: http://www.squarespace.com/seven/interface
Do use a simple navigation scheme

If a view can not find the information easily and quickly they will go somewhere else.
Bad example: http://www.bluebell.com/
Good example: http://designinstruct.com/

Do not use flash

Flash is dying. It is not easily accessible and has a limited user base since Apple mobile devices can not view flash in their browsers. Use HTML5 instead.
Bad example: http://wechoosethemoon.org/
Good example: http://sailing-with-greenpeace.com/

Go through each item and provide an example showing both positive and negative results based on whether the best practice was followed.

Practice: 10 - 15 mins

Show a web page with obvious issues and have the class attempt to list concerns with the web page. Pick a page with very obvious flaws but that also with underlying flaws that will require more in depth analysis.

Have the class discuss what they would do differently?

What are the best ways to address the issues?

Application (Wrap-Up): 15 - 20 mins

Split into groups
Provide the students a list of websites
Have the groups pick a website (multiple groups can pick the same website)
The groups will list the concerns on the websites (they can list more than what is in the best practices list if they see other issues)
The groups will then detail how they would address each issue.