Index

Missouri Historical Society: Website

last edited: 2/27/18

BowserStack Testing Notes

Android

Versions:

5 - latest

Browsers:

  • Chrome
  • Firefox

Devices:

  • Google Pixel running Android 8
  • Galaxy S8 running 7
  • Galexy S7 running 6
  • Galaxy Tab running 4.10.1
  • Nexus 5 running 4.4
  • Nexus 5 running 4.4
  • MOTO X 2 GEN RUNNING 5

Notes:

Kindle

Versions:

Browsers:

Devices:

Notes:

  • Kindle fire testing will be done locally
  • Kindle Fire HD 8.9 running version 4 is not working, Styles are there but bad.
  • https://developer.amazon.com/fire-tablets

iOS

Versions:

11 - latest

Browsers:

  • Safari
  • Chrome
  • Firefox

Devices:

  • iPhone 6S running 9
  • iPad Pro 9.7 running 10.3

Notes:

Windows Phone

We don't care

Windows OS

Versions:

Windows 8 - latest

Browsers:

  • IE (10 - latest)
  • Firefox (52 - latest)
  • Chrome (58 - latest)
  • Edge (14 - latest)

Devices:

Notes:

Mac

Versions:

  • Mavericks (OSX 10.9) - latest

Browsers:

  • Safari
  • Chrome

Devices:

Notes:

Auzure Media Services Notes

  • Progressive download and streaming differences with Azure Media Services: https://blogs.msdn.microsoft.com/randomnumber/2016/03/23/progressive-download-and-streaming-differences-with-azure-media-services/
  • Azure Media Player Official Documentation: http://amp.azure.net/libs/amp/latest/docs/
  • Media Explorer for Windows: https://github.com/Azure/Azure-Media-Services-Explorer
  • Great use of backgroung video! https://windcreekmontgomery.com/
  • Tut Source url: https://bitwizards.com/Thought-Leadership/Blog/2015/October-2015/Background-video-with-Azure-Media-Services-and-Azu
  • Video Thumbnails: http://www.redbaronofazure.com/?p=2471
  • dash.js: https://github.com/Dash-Industry-Forum/dash.js/

SVG Notes

  • All most all SVGs are directly embedded in the source code, however the main exception is the main logo in site-navigation.directive.html. The logic to switch logos, was just easier when the SVG was brought in via an img tag.

Accessability Notes

Icon Labels

Most icons especially in the collection search have been converted into buttons containing an SVG. The SVG has a label briefly describing what the button does and what the icon SVG looks like. The point is to help screen reader navigate but also communicate about the website with a sited user. For visual users, I added a title attribute inside the attribute that appears on mouse hover. This title attribute must appear inside a wrapping tag. Unfortunately, I still haven't found an easy way of making these tooltips appear on keyboard focus.

ASYNC Loads

Focus is moved to the first H1 on the page when the route changes. This makes the screen reader announce the change.

Resources

Things we may visit later

  • Google map embed http://angular-ui.github.io/angular-google-maps/#!/