Na een korte inleiding tot JQTouch, dit filmpje die een intro geeft tot een uitstekend alternatief: Sencha Touch, een mobile javascript framework.
Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.
JQTouch
JQTouch is:
A JQuery plugin for mobile web development on the iPhone,
Android, iPod Touch, and other forward-thinking devices.
Mobile web development? Ik probeerde het even uit. Hier volgt hoe ik het heb gedaan:
Stap 1: Download JQTouch
Op jqtouch.com kun je al het nodige materiaal terugvinden om te starten met een jqtouch project.
Even een overzicht van de bestanden die je krijgt:
- Een mapje met verschillende demo’s. Bekijk deze best even om te ontdekken hoe alles in zijn werk gaat.
- Een mapje met uitbreidingen, maar dit is voor nu niet belangrijk.
- Een map jqtouch met daarin alle bestanden van de plugin zelf. CSS voor de algemene opmaak en een aantal javascript bestanden. Waaronder ook Jquery
- Tot slot ook nog een map met enkele thema’s. Er is een default thema, een apple thema en een jqt thema (android). Wij zullen dit laatste thema gebruiken.
Stap 2: leg de links
Zo, om te starten maak je gewoon een lege htmlpagina aan. Vervolgens moeten we een aantal links leggen naar de juiste bestanden:
Een link naar beide stylesheets, in de head:
Vervolgens leggen we de link naar de juiste javascript bestanden. We zorgen ook voor een initialisatie functie met enkele instellingen. De scripts plaatsen we net voor het sluiten van de </body> tag.
Stap3: Html volgens de regels van JQTouch
Wat we nu nog moeten doen is html toevoegen aan onze pagina volgens de regels van JQTouch.
JQTouch beschouwt een <section> als één volledige pagina. Aan een <section geef je een id mee. Vanop de andere pagina’s kun je door dit id gaan navigeren.
<div class=”toolbar”> Zorgt voor een toolbar in je applicatie. We voegen er een “back” knop aan toe en een helpknop. De backknop <a class=”back” href=”#”> keert automatisch terug naar de vorige pagina. De helpknop geven we het uiterlijk van een button mee en gaat naar de pagina met een “slideup” effect.
We bekomen nu als resultaat:
Let er wel op dat je alles test in een webkit browser, doordat we gekozen hebben voor het android thema. De effectjes bij de pagina overgangen werken zelfs enkel in een emulator of op het device zelf.
Om op de homepagina bijvoorbeeld menu items te zetten om te navigeren naar een andere pagina plaatsen we gewoon een lijst met menuitems in een <nav>.
de klasse “edgetoedge” zorgt voor een spreiding die het volledige scherm vult. De klasse “arrow” zet een pijltje naast de menuitems wanneer je erop klikt. De link zelf is een gewone <a> met als href het id van de gewenste sectie (pagina). In dit geval #page1 en #page2. De klasse “slideup” zorgt weer voor een overgangseffect.
We bekomen als resultaat:
Tot slot moeten we nu nog enkel drie “sections” toevoegen om de twee pagina’s aan te maken en natuurlijk ook de help pagina:
Resultaat:
Je kan dit gewoon testen in bijvoorbeeld Google Chrome. (Webkit) Maar je zult er dus geen effectjes zien. De effectjes worden enkel getoond in de emulator of op je android device.
Conclussie
Het is absoluut niet moeilijk om aan de slag te gaan met JQTouch, een JQuery plugin voor mobile web development. In geen tijd hebben we deze basisapplicatie op gestart. Het spreekt voor zich dat JQTouch nog meer mogelijkheden heeft. Nog eens een overzicht van de features.
- Native Webkit Animations
- Image Preloading
- Callback Events
- Flexible Themes
- Swipe Detection
- Extensions
Tot slot
Ik wilde u volgende Youtube filmpje van Jonathan Stark niet onthouden:
Aan de slag!
Presentatie Mobile UX
Het omvat verschillende onderdelen rond Mobile User Experience.
Hij bespreekt o.a. het verschil tussen Interaction Design en User experience.
De beperkingen van mobile toestellen komen aan bod.
Hoe gebruikt iemand een mobiel toestel?
Enkele basistips worden uitgelegd in deze presentatie. Iedereen die iets voor een touchscreen wil ontwikkelen moet zeker deze slides eens doorlopen! Een aanrader.
CSS3 Media Queries
Om eenvoudig een website voor een mobiel toestel met een kleinere schermgrootte te maken hoef je helemaal geen volledige tweede versie van je bestaande desktopversie te maken. Door enkele CSS-regels aan de code toe te voegen, die de eerdere CSS-regels zal overschrijven indien dezelfde selector werd gebruikt, kun je afhankelijk van de schermgrootte de website van layout doen veranderen.
Ik probeerde dit zelf eens uit op mijn nieuwe portfolio website. En je zal het zien: het is zeer eenvoudig.
Op mijn portfolio staat mijn naam in grote letters bovenaan. Wanneer het scherm kleiner wordt, of wanneer je gewoonweg het browservenster verkleint, verdwijnt de tekst gedeeltelijk.
Door CSS3 Media Queries te gebruiken kun je vanaf een bepaalde grootte een bepaalde CSS-regel overschrijven. De vereiste is natuurlijk dat je deze code helemaal onderaan de CSS-pagina zet. Een voorbeeld:
@media screen and (max-width:950px){
/* hier plaat je de nodige CSS. Deze worden actief wanneer de breedte van het scherm kleiner wordt dan 950px en overschrijven eventueel de bestaande CSS indien de selector al gebruikt werd*/
}
bovenstaande code geeft bij eenzelfde breedte als daarnet:
Bij een nog kleinere schermgrootte:
Met als resultaat:
Besluit:
Ik heb het hier zelf zeer eenvoudig gehouden, maar het spreekt voor zich dat je hier zeer ver in kan gaan. Je kan de volledige layout helemaal omgooien, afhankelijk van de schermgrootte. Het is niet noodzakelijk om via javascript verschillende CSS-bestanden in te laden. Alles komt in eenzelfde CSS-stylesheet te staan.
Webforms
Webforms die goed functioneren op desktops functioneren niet noodzakelijk goed op mobiele toestellen. Bij mobiele toestellen is er natuurlijk de kleinere schermresolutie, ook de manier van input is zeer verschillend. Dit wilde ik toch even verder onderzoeken. Ik vond een aantal interessante artikels terug. Hier volgt een overzicht van zaken waar je rekening mee moet houden bij het ontwerpen en ontwikkelen van een webform:
LAYOUT
- Verticale uitlijning van labels en inputelementen (label boven inputveld): zo is er meer plaats in de breedte voor de inputvelden.
- Mogelijkheid tot verbergen van optionele inputvelden. Dit om een overload aan visuele informatie op een klein scherm te verkomen.
- Veel gebruikers verkiezen te typen in de horizontale “landscape” mode. Zorg voor een aangepaste layout die beide orientaties goed ondersteunt.
- Zorg ervoor dat wanneer je een inputfield aanraakt er een fieldzoom aanwezig is. Hou er rekening mee dat ook het toetsenbord tevoorschijn komt! Zorg er dus voor dat dit toetsenbord geen belangrijke info doet verdwijnen. (zie onderstaande afbeeldingen. Links: correct gebruik. Rechts: fout gebruik, de labels worden onzichtbaar.)
De afbeeldingen komen van SmashingMagazine.com.
TECHNISCH
- Probeer te anticiperen op wat de gebruiker zal ingeven. Wanneer de gebruiker zijn land van herkomst moet opgeven is het misschien interessant om dit land automatisch te laten invullen, op basis van geolocation bijvoorbeeld.
- Beperk het aantal stappen bij het invullen van het webform. Internetverbindingen op een mobiel toestel zijn vaak trager dan op de desktop. 4 verschillende stappen op verschillende pagina’s vertragen hierdoor sterk de snelheid van invullen waardoor de gebruikers het mogelijk laten afweten. Hier moet je zeker rekening mee houden. De meeste gebruikers die een form invullen via hun mobiel toestel hebben de bedoeling om dat snel te doen.
- De meeste mobiele webbrowsers herkennen inputtypes. Er wordt dan afhankelijk van het type bijvoorbeeld een verschillend toetsenbord getoond. (type e-mail: met het “@”-tekentje, …)
- Bij andere inputcontrols zoals (native) Pop-Up Menu Controls verschilt de weergave en gebruiksvriendelijkheid van toestel tot toestel. Denk eraan om dat zeker uit te testen op verschillende toestellen.
- Tegenwoordig is er ook goede ondersteuning voor Voice Input. Hiermee kun je forms nog gemakkelijker laten invullen.
ARTIKELS (Bronnen)
- Mobile Form Design Strategies door Chui Chui Tan.
- Forms on Mobile Devices: Modern Solutions door Luke Wroblewski op Smashing Magazine
AAN DE SLAG
Vond je dit een interessant onderwerp en wil je dit graag uitproberen? Ik vond een online tutorial van Konur Unyelioglu terug die je daarbij goed kan helpen. Er wordt gebruik gemaakt van het Javascript Framework JQuery Mobile. Later in dit onderzoek ga ik het zeker nog hebben over dit framework.
Succes!
Navigatie
Hieronder volgen enkele tips om een navigatieontwerp te maken, bestemd voor een touchscreen device.
Plaats je navigatiemenu onderaan het scherm, in plaats van bovenaan of langs de zijkanten. Als de navigatie zich bovenaan bevindt is het mogelijk dat de hand van de gebruiker in de weg zit om content te zien veranderen. De navigatie aan de zijkant van het scherm plaatsen is ook niet aanbevolen want dit hangt af van de gebruiker. Is hij/zij linkshandig of rechtshandig?
Een andere mogelijkheid is om 1 enkele pagina te voorzien voor een navigatiemenu. Met eventueel een zoekfunctie.
Knoppen en links moeten groter gemaakt worden. Gebruikers willen niet graag inzoomen om op een link te klikken. Ook kun je ervoor opteren om de afstand tussen verschillende links/knoppen groter te maken, om het “fat finger syndrome” tegen te gaan. (Je klikt op de verkeerde link)
Denk eraan dat het voor een touchscreen niet nuttig is om ‘Rollovers’ te gebruiken. Rollovers zijn enkel bestemd voor een muisaanwijzer.
Geef de gebruiker feedback. Gebruikers denken onmiddellijk dat er iets verkeerd loopt wanneer ze even moeten wachten vooraleer een link reageert. Dit komt vaak voor op tragere smartphones. Geef ze daarom feedback als ze op een link hebben geklikt. Een tekstje: “Even geduld…” kan wonderen doen.
Links een voorbeeld van een mobiele website van Audi. De navigatie werd onderaan geplaatst. Rechts een voorbeeld van een mobiele website die een afzonderlijke pagina voorziet voor de navigatie. (meer voorbeelden: Mobileawesomeness)
Bronnen: webcredible.co.uk, frontend.com
Vingerbewegingen op een touchscreen
Wanneer je iets ontwerpt voor een touchscreen device is het belangrijk dat je weet welke bewegingen er tegenwoordig gemaakt kunnen/mogen worden. Een overzicht van de basis vingerbewegingen (gestures).
Een volledig overzicht: TouchGestureGuide.pdf
Platform support: lukew.com/touch
Mobile is not about making things smaller!
Usability of Mobile Websites & Applications
Vorig artikel gaf een korte intro over dit onderzoek. Het volledige verslag kan je hier terugvinden, tegen een stevig prijskaartje. Een verslag van 293 pagina’s over 8 studies in 4 verschillende landen in verband met hoe gebruikers een website gebruiken op een reeks van mobiele toestellen. Bekijk zeker eens de inhoudsopgave en ontdek dat dit misschien wel de moeite is om aan te schaffen.
Mobiele of complete website?
Vorig jaar was hét jaar van “mobile”. Steeds meer en meer mobiele websites werden ontwikkeld. Ondertussen is het alweer tijd om deze mobiele websites te verbeteren want de gebruiker verwacht steeds meer van de kwaliteit van de gebruikerservaring.
Ik vond een onderzoek terug waarbij verschillende gebruikers getest werden op het gebruik van mobiel internet. Het slaagpercentage van verschillende opdrachten (op een smartphone) op een volledige site, of op een aangepaste mobiele site was verschillend. 64% voor de mobiele website, 58% voor de complete website. De conclusie van dit onderzoek: “Ontwerp een verschillende mobiele site!”.
Hierboven de website deredactie.be. Links de mobiele versie, rechts de complete desktop versie.
Vermeld ook een link op de complete website naar de mobiele versie en omgekeerd. Zoekmachines verwijzen niet altijd naar de gewenste site, de mobiele of de complete. Zo kan de gebruiker onmiddellijk switchen tussen beide versies.
Het eerder vermelde onderzoek toonde ook aan dat datzelfde slaagpercentage tot 76% wordt opgetrokken indien gebruik gemaakt wordt van een mobiele applicatie in plaats van een mobiele website. Maar hou er rekening mee dat een mobiele app duurder kan uitvallen dan een gewone website. (Meerdere versies voor verschilllende platformen)
Bekijk het volledige artikel van Jakob Nielsen.
Jakob Nielsen, de guru of Web page usability (The New York Times)
