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

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

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 http://bit.ly/basicmsw

What Where Why How

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)

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

Your page must be ada accessible

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. http://www.w3.org/TR/WCAG/#text-equiv The details- complete guidelines – all 61

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 https://help.blackboard.com/Accessibility/Design_Accessible_Content

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

Be Descriptive Descriptive Headings - organize content Links – don’t use URL as link Captions – if a picture needs more description Use lists over tables https://webaim.org/techniques/tables/data https://help.blackboard.com/Accessibility/Design_Accessible_Content

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 https://help.blackboard.com/Web_Community_Manager/Teacher_Editor/Set_Up_Pages/Editing_Best_Practices/Accessible_Content

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

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

Example: different types of pages/APPS https://sw00000004.schoolwires.net/domain/39 https://www.pittsfordschools.org/Domain/1065 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 https://help.blackboard.com/Web_Community_Manager/Teacher_Editor/App_Showroom

Demo: Let’s Choose blank page and then layout

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

Your turn… Memegenerator.net

On any pittsfordschools.org page Sign into your site…

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. 

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

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.

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

Tools available in the MCE EDITOR Reminder: black dots…

Navigate to your site

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

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

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

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.

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