1. Designing a Pittsfordschools.org site
Maureen C. Kempski
Summer 2018

2. Introductions Name School What do you use your website for?
Wordpress.com
Name
School
What do you use your website for?

3. At the end of today’s hands-on workshop you will have learned
ADA guidelines for responsive and accessible webpages
How to login to the new webpage
The different apps and layouts available
How to create new pages
How to modify your existing pages
How to make pages active/inactive
How to get help

4. What
Where
Why
How

5. Key objectives addressed with new website:
1) Accessibility (meets ADA requirements) 2) Navigation Improvements in response to survey 3) Device Responsive (images adjust to screen used for viewing)

6. Accessibility meets ADA requirements
Key objective #1 addressed with new website
Accessibility meets ADA requirements

7. Your page must be ada accessible

8. The details- complete guidelines – all 61
Your site must handle text scaling up to 200% without causing horizontal scrolling or content-breaking layout issues.
Your site must handle text scaling up to 200% without causing horizontal scrolling or content-breaking layout issues.
The details- complete guidelines – all 61

9. Your site should be navigable with screen reader software.
What doesn’t work with screen readers?
Colored text
Bold, italics
For a strong visual cue use an accessible alternative.
exclamation mark
question mark
Organize your pages using headings and sub-headings etc.
Use the heading styles provided by Blackboard webpages.
Your site should be navigable with screen reader software.
Try using just keyboard to tab or arrow through one of your webpages. This gives you an idea of what a screen reader will see

10. Website Non-Text Images Don’ts Do’s
Be redundant or provide same information as is included in the image
Use phrase “image of …”
Images
Do’s
Only use image if it has a purpose.
Next, add alt text that is simple, succinct
If the image is a diagram that conveys more complicated information a long description or textual format of the material is required. Ie. Caption below picture
Website Non-Text

12. Be Descriptive Descriptive Headings - organize content
Links – don’t use URL as link
Captions – if a picture needs more description
Use lists over tables

13. Site Must Be Understandable
Make text readable
Grade 8 reading level
Keep sentences short and simple
Must explain abbreviations the first time – don’t assume people know
Make pages predictable
Keep pages consistent
Keep navigation and appearance the same on the pages on your website
Ie. Our frozen title bars on Pittsford site

14. Navigation Improvements Device Responsive
Key objective#2 and 3 addressed with new website
Navigation Improvements Device Responsive
How???
With the use of layout and pages

15. Each page has a layout which contains apps
Each page has a layout which contains apps. You can change the page, the layout, or the apps.
Pages contain Apps within a Layout – some page types contain pre-determined apps and layout or you choose which apps with what layout. No worries – you can modify any page

16. Example: different types of pages/APPS
Some Commonly Used Teacher Apps
About Teacher App
Content App (can include text, images and links)
Insert image/ Type of Page - Photo gallery (CC)
Links (site shortcuts, link library, file library )
Document viewer
Calendar
Link library/ Shortcuts

17. Demo: Let’s Choose blank page and then layout

18. Now When I move apps onto layout, look for green!

19. Your turn…
Memegenerator.net

20. On any pittsfordschools.org page Sign into your site…

21. Log in URL: https://www.pittsfordschools.org
User Name = FirstName.LastName Example  = Charlie.Brown Password = Your Portal Page password. Can be reset for you now if needed. 

22. Crosscards.com
Once you are logged on Break – be back in 5 minutes, Any one who is having trouble logging in???

23. Navigate to the Training Channel
Under User Options, Click on Site Manager to begin to edit.
Click on the Change Site icon, then click on Pittsford Schools to enter the training section.
Click on the user icon you were assigned. This will open up the training site we will use to start.

24. Your task:
Choose what page you would like, with apps loaded or Blank or Content
Choose layout
Pull over apps
Add a picture
Type in text – look at tools
available in MCE editor

25. Tools available in the MCE EDITOR
Reminder: black dots…

26. Navigate to your site

27. Take a look Do you have previous pages or not?
Worldsartme.com
Take a look Do you have previous pages or not?

28. On new pages
Choose what kind of page you want and the layout you want, you can always change the layout – most versatile page is CONTENT page
Use styles and headings to show different sizes
Pictures must have alt-tags
Make your page show when you look at page?
Reminder: Black dots – help you rearrange

29. On Old pages that copied over
Observe how content was imported.
Do you like the layout of apps or need to change them?
Decide do I want to create a new page or modify my current page?
Old pages or when copying text REMEMBER to remove formatting and use Font from current webpage (not Comic Sans)
Pictures must have alt-tags
Does your page show when you look at page?
Reminder: Black dots – help you rearrange

30. Notice what pages are Active/Inactive: If a page is not showing on your website...
Is your Page Active or Inactive?
Under Actions
Click on Page Options
Make sure to uncheck Hide this page from website navigation.

31. Section Workspace: How Do I…?
Great Help!
WIll cover