Browser tech
Opdracht 2
Enquete Minor Web
Voor opdracht 2 ga ik een progressive enhanced enquete maken.
Prototype
Install
Clone de repo naar je eigen omgeving
git clone https://github.com/RobinFrugte97/Browser-Technologies-2020
Navigeer naar de repo
cd Browser-Technologies-2020
Installeer de dependencies
npm install
Run de applicatie
npm run dev
Use case
Ik wil een enquete kunnen invullen over de minor Web Development, met verschillende antwoord mogelijkheden. Als ik de enquete niet afkrijg, wil ik later weer verder gaan met waar ik ben gebleven.
Basis functionaliteit
Wanneer de gebruiker Javascript en/of CSS uit heeft staan, of om wat voor reden dan ook niet binnen krijgt, werkt de basis functionaliteit in HTML.
De vragen worden server-side opgesteld en afgeleverd met Express en EJS. Vervolgens worden de antwoorden server-side opgeslagen. Wanneer de gebruiker later verder wilt, kan er server-side worden gekeken of de gebruiker al voortgang heeft in de enquete en zoja verder gaan waar de gebruiker gebleven was.
Ook kan de gebruiker terug gaan naar de vorige vraag met de terug knop. De antwoorden van de vorige vraag worden dan weer terug gegeven aan de gebruiker, zodat de gebruiker weet wat hij/zij heeft ingevuld.
Eerste Feedback moment
Feedback vragen
1. Zou je mij feedback kunnen geven op de structuur/semantiek van mijn verschillende forms? - [Een radio form](https://github.com/RobinFrugte97/Browser-Technologies-2020/blob/master/views/questions/vraag1.ejs) - [Een textarea form](https://github.com/RobinFrugte97/Browser-Technologies-2020/blob/master/views/questions/vraag2.ejs) - [Een 'number' form](https://github.com/RobinFrugte97/Browser-Technologies-2020/blob/master/views/questions/vraag3.ejs) - [Een text form](https://github.com/RobinFrugte97/Browser-Technologies-2020/blob/master/views/gegevens.ejs) 2. Zou je mij feedback kunnen geven op de Findings/feature detections in mijn readme? Is het bijvoorbeeld nodig om voorbeelden van wanneer het niet werkt toe te voegen? Of een caniuse.com link van iets dat niet werkt op een bepaalde browser? 3. Zou je feedback kunnen geven op het prototype qua basis functies? Is er iets "obvious" voor de user experience dat ik over het hoofd zie?To-Do's
To-do lijst
- Ingevulde vragen weer ophalen als je op `Terug` klikt. [CHECK] - Required's aangeven, textarea uit de required's halen. [CHECK] - Extra input type. [CHECK] - Number naar range omzetten met JS. [CHECK] - JS form validation. [CHECK] [CSS selectors van PPK](https://quirksmode.org/css/selectors/)Functional laag/Core functionaliteit
De functional laag is de kale HTML die in verbinding staat met de Node server. De functional laag geeft alle basis functionaliteiten en niet meer. Er is geen CSS en geen client-side Javascript. De gebruiker kan de enquete volledig invullen, alleen is het geen plezier voor het oog. De antwoorden worden nogsteeds opgeslagen en de gebruiker kan nogsteeds op een ander moment verder doorgaan met de enquete. De gebruiker kan nogsteeds naar een vorige vraag navigeren, waarbij de reeds ingevulde antwoorden nogsteeds worden teruggegeven aan de gebruiker.
Usable laag
De Usabel laag bestaat uit CSS. Het is bedoeld om de gebruiker meer te geven dan kale HTML. De text is beter leesbaar dankzij css en de enquete is mobile-first opgebouwd. Er is een kleur toegevoegd, maar om wille van contrast maak ik gebruik van zwarte borders, text en buttons.
De enquete blijft prettig leesbaar doordat het formulier een maximale breedte heeft gekregen. Waar nodig is de content onder elkaar geplaatst in plaats van naast elkaar. Dit verschilt tussen mobiel en desktop.
Mobiel:
Desktop:
Pleasurable/enhanced laag
Grote radio buttons
Ik maak gebruik van extra grote labels voor de radio buttons. Dit maakt mobiel gebruikt vele male prettiger dan dat je op een klein radio buttontje moet klikken, of op het label die er niet naar uitziet om op te klikken.
Range slider
Als enhancement heb ik range sliders toegevoegd aan alle nummer inputs. Op die manier hoef je niet meer te typen en kun je simpelweg op de slider selecteren welk getal je wilt kiezen. Je hebt gelijk feedback in het nummer input veld, want die verandert mee met de slider.
Findings/Feature detection
addEventListener
Oude versies van Internet Explorer ondersteunen addEventListener niet. Dit kan opgelost worden door te checken of addEventListener bestaat en zo niet een attachEvent fallback te schrijven.
if (document.addEventListener) {
slider.addEventListener('input', function () {
nummer.value = slider.value
})
// Event 'change' voor IE.
slider.addEventListener('change', function () {
nummer.value = slider.value
})
if (nummer !== null) {
nummer.addEventListener('input', function () {
slider.value = nummer.value
})
}
} else {
slider.attachEvent("oninput", function () {
nummer.value = slider.value
})
// Event 'onchange' voor IE.
slider.attachEvent("onchange", function () {
nummer.value = slider.value
})
if (nummer !== null) {
nummer.attachEvent("oninput", function () {
slider.value = nummer.value
})
}
} Slider
Het input veld moet worden aangepast wanneer je bezig bent met het verslepen van de slider. Om dit in zowel Chrome, Firefox en Internet Explorer te laten werken heb je verschillende soorten events nodig op de slider.
Chrome en Firefox willen graag het event input hebben, terwijl Internet Explorer graag het event change wilt hebben.
Oplossing:
slider.addEventListener('input', function () {
nummer.value = slider.value
})
// Event 'change' voor IE.
slider.addEventListener('change', function () {
nummer.value = slider.value
})Ik zet meerdere eventlisteners op de slider. Zo kan Internet Explorer gebruik maken van change, terwijl Chrome en Firefox beide pakt. Het feit dat Chrome en Firefox beide pakt merk je niks van, omdat dezelfde functie in beide eventlisteners wordt uitgevoerd.
Submit
<input type="submit">kan niet buiten de bijbehorende form in Internet Explorer 11, ook als ze gelinkt zijn via eenform="". Het idee was om desubmitin de navigatie te plaatsen als zijnde een "verder" knop, naast de "terug" knop.
Het idee:
<form action="/vraag2" id="vraag1">...</form>
<nav>
<ul>
<a href="https://github.com/RobinFrugte97/Minor-web-survey/blob/master/vraag1">Terug</a>
<input form="vraag2" type="submit" value="Verder">
</ul>
</nav>Werkt niet in IE 11, dus oplossing <nav> in de <form>:
<form action="/vraag2" id="vraag1">
...
<nav>
<ul>
<a href="https://github.com/RobinFrugte97/Minor-web-survey/blob/master/vraag1">Terug</a>
<input form="vraag2" type="submit" value="Verder">
</ul>
</nav>
</form>Radio button styling
- De labels van een :checked radio input kunnen alleen gestyled worden als de label na de radio input staat, in plaats van eromheen.
Normale input & label:
<label>
Cijfer van 1 tot 10
<input type="number" name="Slack cijfer" min="1" max="10">
</label>Radio input alternatief:
<input id="vraag3" value="Leuk!" type="radio" name="vraag1">
<label for="vraag3">
Leuk!
</label>Input type number
Bij een aantal vragen in de enquete vraag ik om een nummer. Dit deed ik eerst met een input type number <input type="number">.
In het volgende Gov.uk technology blog artikel wordt beschreven dat dit een heleboel usability problemen met zich mee brengt, waaronder veel screenreader problemen.
De oplossing is om een input type text met een inputmode="numeric" en een pattern="*regex*" te gebruiken. In de regex zeggen dat alleen nummer worden geaccepteerd. In het label van de input kun je gebruikers feedforward geven over wat er in de input verwacht/geaccepteerd wordt.
Oud number input voor een cijfer 1 t/m 10:
<label>
Cijfer van 1 tot 10
<input type="number" name="Minor cijfer" min="1" max="10">
</label>Nieuw input voor een cijfer 1 t/m 10:
<label>
Cijfer van 1 tot 10
<input name="Minor cijfer" type="text" inputmode="numeric" pattern="^(?:[1-9]|0[1-9]|10)$">
</label>CSS Fallback
Display: inline-grid
Voor de desktop versie van de enquete is wat extra styling nodig. Om de inputvelden met labels nog goed leesbaar te houden bijvoorbeeld. Daarvoor maak ik gebruik van display: inline-grid. Dit is niet ondersteund in Internet Explorer.
De fix in Internet Explorer is om de labels een float: left te geven. Ik check met @supports (display: inline-grid) of display: inline-grid) gesupport wordt. Zo ja, voer de code uit die binnen de @supports staat. Zo nee, negeer deze code en houd de oude float in stand.
fieldset > label {
float: left;
}
@supports (display: inline-grid) {
fieldset {
display: inline-grid;
}
fieldset > label {
float: none;
}
}Display: flex
In mijn fieldset maak ik gebruik van Display: flex om de vragen netjes onder elkaar te zetten en ze in het midden uit te lijnen. Flex gebruik ik ook om buttons te positioneren. Wederom maak ik gebruik van @supports om te checken of de browser Display: flex ondersteunt.
@supports (display: flex) {
fieldset {
display: flex;
flex-direction: column;
float: none;
}
fieldset > label {
float: none;
}
}Test features
Getest in Chrome version 80 op Windows 10
Afbeeldingen
De site maakt geen gebruik van afbeeldingen. Er verandert niks aan de enquete.
Custom fonts
Ik maak gebruik van een custom font op de website. De kans bestaat dat om wat voor reden dan ook de font niet geladen kan worden.
Ik heb font fallbacks in mijn css:
font-family: Lato, Arial, 'Open Sans', sans-serif;Met custom fonts:
Zonder custom fonts:
JavaScript
De enquete werkt helemaal zonder Javascript, omdat Javascript alleen wordt gebruikt voor pleasurable enhancements.
De slider bij het kiezen van een cijfer zal dus niet ingeladen worden. Ook wordt de form feedback bij het gegevens scherm niet geupdatet.
Met slider:
Zonder slider:
Kleur
De kleuren in de enquete hebben een goed contrast, waardoor de site goed werkt in bijvoorbeeld zwart-wit.
Breedband internet
De enquete werkt precies hetzelfde, alleen wat trager.
Cookies
Ik maak op het moment geen gebruik van cookies in de website.
Local Storage
Ik maak geen gebruik van local storage in de website.
Muis / Trackpad
Er zijn focus-states aangebracht. Je kunt door de enquete navigeren met je toetsenbord.
Devices en browsers voor het testen
Desktop Windows 10
Chrome version 80
Primaire development browser. Werkt zoals het bedoeld is. Geheel responsive en styling is 100% perfect. De meeste bugs en styling issues zijn tijdens developement weggewerkt. Alle screenshots in de readme komen uit Chrome 80
Firefox version 59.0
Paar kleine styling onenigheden, zoals width: fit-content; dat niet werkt naar zin. Ook is de input type range anders gestylet dan in de andere browsers, omdat er andere prefixes zijn voor elke browser. De progress bar is ook iets anders gestylet weer door de prefixes.
Internet Explorer version 11
Internet explorer is qua styling iets lastiger, omdat veel dingen of niet ondersteund zijn, of anders werken dan dat je verwacht. De progress bar is niet te stylen en de range input is erg lastig te stylen. Ook in IE werkt width: fit-content; niet, dus daar zitten wat styling onenigheden in. Ik werk in IE veel met float om de content netjes onder elkaar te krijgen. Resultaat is dat de content niet in het midden staat, maar voor de rest werkt alles in IE.
Samsung Galaxy S8
Chrome
Op Chrome mobile werkt de enquete hetzelfde als Chrome desktop. De enquete is mobile-first ontworpen, dus er zijn geen verrassingen.
Conclusie
Core functionaliteit
Wanneer de gebruiker Javascript en/of CSS uit heeft staan, of om wat voor reden dan ook niet binnen krijgt, werkt de basis functionaliteit in HTML. De enquete kan ten aller tijden worden ingevuld.
De vragen worden server-side opgesteld en afgeleverd met Express en EJS. Vervolgens worden de antwoorden server-side opgeslagen. Wanneer de gebruiker later verder wilt, kan er server-side worden gekeken of de gebruiker al voortgang heeft in de enquete en zoja verder gaan waar de gebruiker gebleven was.
Ook kan de gebruiker terug gaan naar de vorige vraag met de terug knop. De antwoorden van de vorige vraag worden dan weer terug gegeven aan de gebruiker, zodat de gebruiker weet wat hij/zij heeft ingevuld.
Toegankelijkheid
Zie het feature onderzoek hierboven.
Probleemdefinitie en oplossing
Zie de feature detection/findings documentatie hierboven.
Progressive enhancement
Progressive enhancement is wanneer je vanuit de basis een website 'enhancet' met extraatjes. Je gaat stapje voor stapje door een aantal lagen heen. Eerst moet het functioneel zijn. Werkt de basis van de website helemaal en altijd? Ga dan naar de bruikbare laag. Hier maak je de website bruikbaarder, door bijvoorbeeld custom css fonts toe te voegen en de website beter bruikbaar te maken door de font size te vergroten. Daarna ga je door naar pleasurable. Deze laag bestaat uit dingen die echt extra zijn en voor een soort 'wow' factor zorgen in je website. Denk aan Javascript en CSS enhancements. De site moet werken als een van de lagen wegvalt.
Progressive Enhancement in project
Feature detection
Feature detection is wanneer je eerst kijkt of een feature ondersteund wordt in de browser of omgeving, en daarna pas de feature toepast. Ook kan je feature detection gebruiken om fallbacks te schrijven in Javascript en CSS
Feature Detection in project
Zie Feature detection/findings.