De kans is groot dat je hebt gezien hoe de iPhone webpagina's kan omdraaien en uitbreiden. Het kan u de hele webpagina in één oogopslag laten zien of inzoomen om de tekst waarin u geïnteresseerd bent leesbaar te maken. In zekere zin, aangezien de iPhone gebruikt Safari, zouden webdesigners niets speciaals moeten doen om een webpagina te maken die op de iPhone werkt. Maar wil je echt dat je pagina gewoon werkt - of opvalt en schittert?
Wanneer je een webpagina bouwen, moet je nadenken over wie het gaat bekijken en hoe ze het gaan bekijken. Sommige van de beste sites houden rekening met het type apparaat waarop de pagina wordt bekeken, inclusief de resolutie, kleuropties en beschikbare functies. Ze vertrouwen niet alleen op het apparaat om erachter te komen.
Algemene richtlijnen voor het bouwen van een site voor mobiele apparaten
- Test op zoveel mogelijk apparaten. Het eerste dat u moet doen, is uw site op een iPhone bekijken en zoveel mogelijk verschillende mobiele toestellen of emulators als je kunt. Hoewel je emulators voor al je tests kunt gebruiken, geven ze je echt niet hetzelfde gevoel als proberen door een website te navigeren op het kleine schermpje. U moet zoveel mogelijk op echte apparaten testen.
- Laat uw pagina's gracieus degraderen. U kunt uw pagina's schrijven voor Flash ingeschakeld, breedbeeldbrowsers, maar zorg ervoor dat de kritieke informatie zichtbaar is, zelfs op een kleine monitor die geen speciale functies aankan (zoals cookies, Ajax, Flash, JavaScript, enz.). Alles wat verder gaat dan XHTML Basic, gaat verder dan sommige mobiele telefoons. Hoewel de meeste smartphones al die dingen aankunnen, kunnen andere mobiele apparaten dat niet.
- Bouw een draadloze-specifieke pagina -- en maak het gemakkelijk te vinden. Als u een specifieke pagina gaat maken voor uw mobiele telefoon en draadloze klanten, maak deze dan beschikbaar. Een goede manier is om de link naar de draadloze pagina helemaal bovenaan uw document te plaatsen en die link vervolgens te verbergen voor niet-handheld-apparaten met behulp van het draagbare mediatype. De meeste mensen komen tenslotte naar uw startpagina, zelfs op mobiele telefoons - en als de link naar uw draadloze pagina er niet is, zullen ze vertrekken als de pagina te moeilijk is om te gebruiken.
Webpagina-indeling voor smartphones
Het eerste dat u moet onthouden bij het schrijven van pagina's voor de smartphonemarkt, is dat u geen wijzigingen hoeft aan te brengen als u dat niet wilt. Het mooie van de meeste beschikbare smartphones is dat ze Webkit-browsers gebruiken (Safari op iOS en Chrome op Android) om webpagina's weergeven, dus als uw pagina er goed uitziet in Safari of Chrome, ziet deze er op de meeste smartphones goed uit (alleen veel) kleiner). Maar er zijn dingen die u kunt doen om de browse-ervaring aangenamer te maken:
- Vergeet niet dat het scherm klein is. Smartphones condenseren al die kolommen in het kleine venster, en dit kan ze erg moeilijk maken om te lezen zonder in te zoomen. De meeste gebruikers zijn gewend aan zoomen, maar het kan vermoeiend worden. Een lange tekstkolom is gemakkelijker te lezen.
- Verdeel pagina's in kleinere stukken. Het kan moeilijk zijn om lange tekstsegmenten op een mobiele telefoon te lezen, dus als u ze op meerdere pagina's plaatst, zijn ze gemakkelijker te lezen.
Links en navigatie op iPhones
- Hoe korter de URL's, hoe beter. Als je ooit hebt geprobeerd een URL in te typen op een mobiele telefoon, weet je dat het lastig is (behalve misschien voor tieners die gewend zijn om veel sms-berichten te verzenden). Zelfs op de iPhone is het vervelend om lange URL's in te typen. Houd ze kort.
- Maar lange linktekst is gemakkelijker te tikken. Wanneer je op een pagina bent waar verschillende losse woorden zijn gekoppeld aan verschillende artikelen, allemaal naast elkaar, kan het erg moeilijk zijn om de juiste te tikken zonder in te zoomen. Veel mensen zullen het gewoon opgeven en ergens anders heen gaan. Links met 3 tot 5 woorden erin zijn gemakkelijker te klikken op de telefoon dan links van 1 woord.
- Zet je navigatie niet helemaal bovenaan het scherm. Niets is vervelender dan door schermen en schermen met links te moeten bladeren om de gewenste informatie te vinden. Als je webpagina's hebt bekeken die zijn ontworpen voor mobiele telefoons, zul je zien dat de eerste dingen die verschijnen de inhoud en de kop zijn. Daaronder is navigatie.
- Wees niet bang om je navigatie te verbergen.Navigatielinks verbergen met CSS of JavaScript en ze alleen te laten verschijnen wanneer de gebruiker daarom vraagt, is een manier om de pagina gemakkelijker te maken voor smartphonegebruikers.
Tips voor afbeeldingen op smartphones
- De afbeeldingen moeten klein zijn. Ja, Android en iPhones kunnen in- en uitzoomen op afbeeldingen, maar hoe kleiner ze zijn, zowel qua afmetingen als qua downloadtijd, hoe gelukkiger uw draadloze klanten zullen zijn. Afbeeldingen optimaliseren is altijd een goed idee, maar voor mobiele telefoonpagina's is het van cruciaal belang.
- Afbeeldingen moeten snel worden gedownload. Afbeeldingen nemen veel ruimte in beslag op webpagina's wanneer u ze vanaf een mobiel apparaat bekijkt. En hoewel ze vaak erg mooi zijn en ervoor zorgen dat de pagina's er beter uitzien als ze worden bekeken in een webbrowser op volledig scherm, zitten ze vaak in de weg op een mobiel apparaat. En wanneer een smartphonegebruiker zich op het mobiele netwerk bevindt, is het laatste waar ze voor willen betalen het downloaden van een heleboel enorme afbeeldingen of navigatiepictogrammen.
- Plaats geen grote afbeeldingen bovenaan de pagina. Net als bij navigatie kan het erg vervelend zijn om te wachten op een afbeelding die 3 tot 4 schermen nodig heeft om helemaal bovenaan de pagina te laden. En dit is heel gebruikelijk op webpagina's. De enige uitzondering hierop is als de lezer weet dat hij een afbeelding krijgt wanneer hij klikt, bijvoorbeeld in een fotogalerij.
Wat te vermijden bij het ontwerpen voor mobiel
Er zijn verschillende dingen die u moet vermijden bij het bouwen van een mobielvriendelijke pagina. Zoals hierboven vermeld, als u deze echt op uw pagina wilt hebben, dan kan dat, maar zorg ervoor dat de site zonder deze werkt.
- Flash: De meeste mobiele telefoons ondersteunen geen Flash, dus het is geen goed idee om het op uw draadloze pagina's op te nemen.
- Koekjes: Veel mobiele telefoons hebben geen ondersteuning voor cookies. iPhones hebben wel cookie-ondersteuning.
- Lijsten: Zelfs als de browser ze ondersteunt, denk dan aan de afmetingen van het scherm. Frames werken gewoon niet op mobiele apparaten - ze zijn erg moeilijk of onmogelijk te lezen.
- Tafels: Gebruik geen tabellen voor lay-out op een mobiele pagina. En probeer tafels in het algemeen te vermijden. Ze worden niet op elke mobiele telefoon ondersteund (hoewel iPhones en andere smartphones ze ondersteunen) en je kunt vreemde resultaten krijgen.
- Geneste tabellen: Als u een tabel moet gebruiken, zorg er dan voor dat u deze niet in een andere tabel nest. Deze zijn moeilijk te ondersteunen voor desktopbrowsers en zorgen er op zijn best voor dat de pagina langzamer wordt geladen.
- Absolute maatregelen: Met andere woorden, definieer de afmetingen van objecten niet in absolute maten (zoals pixels, millimeters of inches). Als u iets definieert als 100px breed, kan dat op het ene mobiele apparaat de helft van het scherm zijn en op het andere twee keer de breedte. Relatieve maten (zoals ems en percentages) werken het beste.
- Lettertypen: Ga er niet vanuit dat een van de lettertypen u gewend bent toegang te hebben, is beschikbaar op de mobiele telefoons.