grahamb/dashtechgoals.md

## dashtechgoals.md

      
    Raw
  

              dashtechgoals.md
            
          
    SFU Student Dashboard Technical Design Goals

A loose array of thoughts about the technical direction and goals of #teamdashboard

Accessibility-first
Modern browsers
Mobile-first
Fast

Accessibility-first

Universal access should be a first-class design goal, not an afterthought tacked on prior to launch.

[issue] We don't know squat about accessibility!
[resource] Chrome Accessibility DevTool extension
[resource] Stephanie Hobson (@stephaniehobson) - friend, local accessibility export, Mozillian. Also knows higher ed (used to sling web at BCIT).

Modern Browsers

Suggested Supported Browsers


Chrome (most recent)
Safari (Mac/iOS, most recent)
Firefox (most recent)
IE 11/Edge
IE 10?

Flexbox is supported in Chrome, Safari, FF, and Edge, and partially supported in IE 10 and 11.
Rationale

As of January 12, 2016, Microsoft ended support for old versions of IE. They only support the most current version of IE for a currently supported OS.
Given that the student dashboard is targeted primarily at students, we can extrapolate what browsers students are using based on Canvas' analytics (January 2016):


Browser
OS
Share


Chrome
Windows
36.4%


Chrome
Mac
17.57%


Safari
Mac
16.44%


Safari
iOS
6.99%


Firefox
Windows
5.61%


Chrome
Android
4.67%


Internet Explorer
Windows
2.86%


In terms of Internet Explorer:


IE Version
Share


11 (Edge)
84.22%


10
6.80%


7
5.83%


9
3.15%


8
0.01%


It's even more interesting when broken down by Windows version:


IE Version
Windows Version
Share


11
7
42.85%


11
8.1
32.28%


11
10
9.05%


10
7
4.82%


7
7
2.42%


9
7
2.35%


7
8.1
2.33%


(I didn't bother with anything < 2%)
Clearly, IE 11 is the most-used version of IE. I'm not sure if Edge is included in the IE 11 number.
Mobile First

Start with the small screen in mind, and then scale it out to larger displays.
Fast


Server-render if possible, then rehydrate on the client and let the JS take over.
Establish a performance budget.
Browser	OS	Share
Chrome	Windows	36.4%
Chrome	Mac	17.57%
Safari	Mac	16.44%
Safari	iOS	6.99%
Firefox	Windows	5.61%
Chrome	Android	4.67%
Internet Explorer	Windows	2.86%
IE Version	Windows Version	Share
11	7	42.85%
11	8.1	32.28%
11	10	9.05%
10	7	4.82%
7	7	2.42%
9	7	2.35%
7	8.1	2.33%