Digirati - Onboarding application

Front end approach

by

Alessandro Santese

- assumptions

- design review/CSS architecture

- performance consideration

- accessibility consideration

- offline support

- technologies

- high level estimates

- questions

Digirati - Onboarding application

​- will work only in the latest browsers versions including IE 11

 

- 3 sets of designs for each view/page (small, medium, large)

 

- the design and content team have taken accessibility into account when designing (colours contrast) and creating copy (reading level, abbreviation, unusual words)

Digirati - Onboarding application

Assumptions

- BEM naming convention (lower specificity, components oriented)

- SMACSS architecture (a guide to build the CSS from the ground up)

- CSS media queries to allow a responsive/mobile friendly experience

- mobile first approach when building the site

- take advantage of CSS3 (box-shadow, rounded-corners)

Digirati - Onboarding application

Design review/CSS architecture

- prioritise the CSS/JS for the critical path and load the rest in a asynchronous way  (above the fold immediate interaction) 

- images will be optimised 

- JS and CSS files/modules will be concatenated and minified into one respective outputted file (http2 aims to solve this problem)

- caching on front end and back end

Digirati - Onboarding application

Performance consideration

- descriptive text for buttons and links (read more not enough)

- effective use of HTML5 semantic elements (header, footer, aside)

- aria-label and role attributes to give better information to screen readers

- HTML documents to be validated

- H1 to H6 in a sequential order  

Digirati - Onboarding application

Accessibility consideration

- localstorage

- application cache

Digirati - Onboarding application

Offline support

- HTML5, CSS3 and SASS preprocessor

- ES6 (to take advantages of the latest JS features, arrow function, modules)

- Babel to transpile ES6 (until browsers full support)

- webpack to bundle JS modules

- React.js  and JSX

- some backend/database functionality to deal with logins for different type of users

Digirati - Onboarding application

Technologies

- 1 day for design review

- 3 days of technical planning 

- 2-3 hours to set up the front end enviroment

- 1 day for header and footer

- 5 days for each view

- 1 day to write tests (combination of different tests)

- 2 days to build the quiz logic

 

- 2/3 weeks (very high level)

Digirati - Onboarding application

Estimations

Questions?

Digirati - Onboarding application

 

Thank you

 

Digirati - Onboarding application