1 / 23

Designing a Pittsfordschools site

Learn about ADA guidelines for accessible webpages, new apps, and addressing common issues. Improve navigation and make pages responsive. Enhance communication with cloud solutions. Ensure pages meet ADA requirements. Follow design best practices for text, images, and layout. Understand website features like photo galleries and calendars. Keys to success: accessibility, responsive design, and user-friendly navigation.

herr
Download Presentation

Designing a Pittsfordschools site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing a Pittsfordschools.org site Maureen C. Kempski Summer2018

  2. Name • School Wordpress.com Agenda • ADA • Additional apps • Answers to some of the common issues • Work time Introductions

  3. Goals: 1. Introduce ADA guidelines for responsive and accessible webpages 2. Increase your comfort level with some new apps not covered in Beginner class and provide answers for some of the issues this year 3. How to make pages active/inactive 4. How to get help Tech Quest 8 Goals this workshop meets:Staff will utilize cloud based solution in an effective manner to communicate.

  4. Who is website for? What do you use website for? Why do we need to discuss ADA guidelines? How do we meet the guidelines and accomplish our goals with the website?

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

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

  7. Your page must be ada accessible

  8. 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 • Don’ts • Be redundant or provide same information as is included in the image • Use phrase “image of …” Website images

  9. For a strong visual cue use an accessible alternative. • exclamation mark • question mark • Only use font provided – get rid of old fonts • Organize your pages using headings and sub-headings etc. • Use the heading stylesprovided by Blackboard webpages. Website text What about Bold, Italics, Colored fonts? https://help.blackboard.com/Accessibility/Design_Accessible_Content

  10. Your site should be navigable with screen reader software. • Use descriptive links for links • URLs should not be used to click on – use descriptive text • https://www.pittsfordschools.org/Page/3529 versus MCE Websites We Use • Make pages easy to understand • 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

  11. Key objectives #2 and 3 addressed with new website Navigation ImprovementsDevice Responsive How??? With the use of layout and pages

  12. REVIEW: Each page has a layout which contains apps.You can change the page, the layout or the apps. This layout together with using correct fonts makes pages responsive

  13. I heard Photo gallery doesn’t work? What’s up with Calendars? Let’s Talk about some of the features available

  14. Don’t use Internet Explorer or Edge • Can load pictures from OneDrive • Can apply effects, rotate after loading • Easy to use Use Firefox! Photogallery does work

  15. Calendars do work but different than our old Portal Pages • Separate calendars for each class • Easy to add events • Who sees events – App Options • My summer calendar

  16. Got calendar – add assignments Create the course work for your students using the Assignment app. You can tie the assignments to a due date in the calendar for easy access for a student. Help guide: https://help.blackboard.com/Web_Community_Manager/Teacher_Editor/App_Showroom/Assignment_App

  17. Need to put in a list of links for your students or parents? • Link Library Site Shortcuts

  18. In the dialog that displays, drag your mouse over the squares to size the table and left click. Note that you can add more rows and columns to the table using right-click menu options Activate the Header Row or Header Column check boxes to include headers in the table. ADA This works To get access to add an image to your table: 1. Double click on the cell 2. Type a letter and then hit backspace to delete the letter 3. Now you can see this menu Table Tips https://www.pittsfordschools.org/Page/19949

  19. Beginning with your first page: Do you want • Different layout • Additional apps • To modify what’s there already Turn active when you like what you see. Now it’s your turn

  20. Organize Pages once you are done Pages and subpages

  21. Is your Page Active or Inactive? Under Actions Click on Page Options If a page is not showing on your website... Make sure to uncheck Hide this page from website navigation.

  22. No Worries - Section Workspace: How Do I…?

More Related