Share
Vandaag ga ik enkele concrete overwegingen samenvatten die u moet maken om ervoor te zorgen dat uw webontwerp is geoptimaliseerd voor gebruik op een aanraakgevoelige tablet.
In maart schreef ik een artikel met de titel How the iPad (and Tablets) Driving New Age of Web Design. In dat artikel keek ik naar de iPad - een platform dat ik dagelijks ongeveer tien maanden lang had gebruikt - en hoe het de overwegingen van de moderne webontwerper had veranderd. Met de opkomst van tablets (of liever de opkomst van de iPad) worden touch-ingangen veel vaker gebruikt tijdens het surfen op internet. Het is een ander verhaal voor smartphones, die vaak een gespecialiseerde aanraaksite hebben.
In dat artikel heb ik gekeken naar de concepten van ontwerpen voor tablets, zoals ontwerpen voor nieuwe resoluties. Hoewel het erg op elkaar lijkt, zal dit artikel de overwegingen behandelen waar je voor moet zorgen aanraken aangedreven apparaten.
Misschien is een van de grootste overwegingen om te onthouden dat de menselijke vinger helemaal niet zo precies is als een cursor bestuurd door een muis of trackpad. Neem uw vinger en houd deze omhoog naar uw display naast uw cursor. Het is vrij duidelijk dat het soort precieze actie dat met een muis kan worden bereikt, gewoon niet mogelijk is bij gebruik van op aanraking gebaseerde ingangen.
Om deze reden hebben veel web-apps nu native iPad-tegenhangers die beter bij de precisie van een vinger passen. Je hoeft natuurlijk geen app te gaan ontwikkelen, sterker nog, als je je gebruikers dwingt een app te gebruiken, kan dat ze afwijzen. De afhaalmogelijkheid voor dit punt is om er eenvoudig voor te zorgen dat belangrijke gebieden zoals uw navigatie niet hoeven te worden ingezoomd om te worden gebruikt door gebruikers op een aanraakinterface.
Om een goede bruikbaarheid in zowel muis als aanraking te bereiken, moeten ontwerpers compromissen sluiten in het middengebied; alles moet met de menselijke vinger kunnen worden aangeraakt, maar mag er niet al te groot uitzien als het wordt bekeken met een meer traditionele muis- en pc-instellingen.
Na de lancering van beide sites op een iPad, is het duidelijk dat de site van Apple de betere navigatie heeft. Hoewel beide goed werken met een muis, is het menu van Apple duidelijk het gemakkelijkst om aan te raken, terwijl de BBC's veel meer precisie vereist. Toen ik in maart mijn artikel schreef over iPad-webdesign, schreef ik deze regel: "wat betekent dat ontwerpers die" middenweg "moeten bereiken of een aparte tablet-specifieke site hebben die een andere stylesheet (en zelfs een andere lay-out) helemaal gebruikt" . ik neem dat terug.
Tenzij uw webontwerp uitdrukkelijk een aangepaste versie vereist voor op aanrakingen gebaseerde interfaces, is het over het algemeen geen goede gewoonte om uw bezoekers te segmenteren met verschillende versies van een site. Als je meerdere versies hebt voor verschillende platforms, wordt het waarschijnlijk moeilijker om te onderhouden, maar nog belangrijker, het verbreekt de verbinding die de gebruikers maken tussen het bladeren door je site op een bureaublad en het doen op een tablet. Als het er anders uitziet, moeten ze een tweede manier van navigatie leren die niemand helpt.
Als u een iPad-specifieke versie moet maken, moet u altijd een retourroute opgeven zodat gebruikers kunnen kiezen om de volledige site te bekijken.
Bekijk uw ontwerp en bedenk wat het maakt tot wat het is. U hebt ongetwijfeld HTML en CSS gebruikt, maar heeft u Flash of een andere technologie gebruikt? De beste manier om rekening te houden met de meest uiteenlopende platforms, is het vasthouden aan standaard-klacht HTML en CSS, en vooral het vermijden van het gebruik van technologieën die browser-plug-ins of aanvullende software vereisen.
Gelukkig biedt HTML5 een geweldige set hulpprogramma's voor het maken van interactieve en media-elementen die naadloos kunnen worden gebruikt op een tablet en de belangrijkste desktopbrowsers van de huidige generatie. Ik zou controverse kunnen aanwakkeren door dit te suggereren, maar (wat webdesign betreft) proberen Flash koste wat het kost te vermijden. Niet alleen heeft het veel problemen op de desktop, het grootste deel iPad ondersteunt het niet, en dat geldt ook voor degenen die Windows Metro Metro gebruiken.
Er zijn een aantal redenen waarom u HTML5 in het algemeen zou moeten gebruiken, afgezien van het feit dat het waarschijnlijker is om direct op een tablet te werken. Media zoals audio en video werken heel goed met HTML5 en werken op verschillende platforms. Ik was verbaasd over een deel van de HTML5-dingen die ik zag toen ik aan een recente revisie deed, omdat het Flash-achtige effecten bood, maar zonder gedoe en uitsluiting van iOS.
Uiteraard moet u ervoor zorgen dat al uw code is geschreven in overeenstemming met de normen, zoals elke website, iPad-georiënteerd of anderszins.
Veel populaire services, waaronder YouTube, bieden automatisch videospelers met HTML5 aan op zowel hun eigen site als wanneer ze zijn ingesloten op anderen. In dit geval is deze video ingesloten in een blog en speelt deze naadloos af op een iPad. Natuurlijk zullen er uitzonderingen op zijn, maar over het algemeen zou je moeten zoeken naar ontwerp voor een resolutie van 1024px, zodat ze op een tablet passen. De meeste rastersystemen van de website hebben in totaal een breedte van ongeveer 960 px, dus dit zou geen groot probleem moeten zijn om te implementeren. Mocht u ervoor kiezen om dit advies te negeren, dan zal uw website waarschijnlijk verkleind worden om in de breedte van een tabletbrowser te passen, waardoor de gebruiker moet inzoomen. Dit laat veel meer zoomen in en uit en vegen. rond om dingen te vinden, wat niemand kan helpen.
De oplossing voor het probleem komt in de vorm van adaptieve CSS, die stijlen kan veranderen afhankelijk van platform, browser en resolutie. Ik heb al uitgelegd dat ik niet echt van het idee hou om een unieke iPad-gerichte versie van een website te maken, maar het eenvoudigweg aanpassen van sommige stijlen voor iPad-gebruikers zou geen probleem moeten zijn. Helaas laat het nog veel meer werk achter, maar het kan soms een eenvoudige stap zijn die grote verbeteringen aanbrengt.
Als u tegelijkertijd ontwerpen voor meerdere resoluties wilt of alleen triviale stijlen tussen platforms wilt wijzigen (zoals het wijzigen van de herkenning van links op een iPad versus een desktop), zijn er een aantal services die u kunnen helpen, waaronder Adapt.js. Bekijk ook het geweldige artikel over adaptieve lay-outs van Smashing Magazine.
iOS heeft deze vrij geweldige manier om een website naar je startpagina te markeren, dus het lijkt net een link om een app te openen. De meest eenvoudige vorm hiervan is om een klein pictogram toe te voegen dat op het startscherm wordt geplaatst wanneer het door een gebruiker wordt opgeslagen. Dit wordt bereikt met een enkele regel code:
Notitie: Met dit fragment wordt automatisch de glans in Apple-stijl toegevoegd aan uw pictogram. Uitwisselen apple-touch-pictogram voor apple-touch-icon-precomposed om die glans te verwijderen.
Er zijn een aantal andere, normaal gesproken ongebruikte metatags die op je ontwerp kunnen worden toegepast om het te verbeteren wanneer het wordt opgeslagen op het startscherm van een iPad. De onderstaande regel verbergt bijvoorbeeld het adres- en bladwijzerbalk en laat de webpagina op volledig scherm zien.
Dit zijn slechts twee van de beschikbare fragmenten, en u moet zeker de handleiding van MobileTuts + over dit onderwerp bekijken. Deze maken weinig verschil voor uw site op niet-iOS-platforms, maar kunnen de ervaring ervan op een iPad verbeteren, mocht uw app geschikt voor hen zijn?.
Met het toenemende gebruik van tablets, waarvan de meeste met een versnellingsmeter zijn ingebouwd, is er een nieuw soort vouw geïntroduceerd. Hoewel we hebben geschreven over het wegvallen van de vouw, is er een nieuwe die wordt geïntroduceerd met de toename in tablets die worden gebruikt.
Wanneer een tablet van richting verandert, kan de volledige weergave van een webpagina worden vervormd. Net als bij het aanpassen van meerdere browserresoluties, moet je er ook voor zorgen dat hun website de meerdere resoluties vertegenwoordigt die geschikt zijn voor een enkele tablet, die van de portret- en landschapsoriëntaties.
Het controlelijstitem is hier om ervoor te zorgen dat uw sleutelinformatie zichtbaar is zonder te vegen wanneer u deze in landschap bekijkt en portret. Deze kunnen radicaal verschillende snapshots van uw site bieden, dus probeer ze uit te testen in beide oriëntaties om ervoor te zorgen dat alle gebruikers van een specifieke tablet de beste weergave van uw siteontwerp en de inhoud ervan kunnen zien.
CNN's website in zowel staand als liggend in Mobile Safari. Een belangrijke stap om ervoor te zorgen dat uw site op een iPad werkt, is door uw site daadwerkelijk uit te testen via een aanraakinterface en te overwegen: hoe eenvoudig is het? Als dat nodig is, bezoek dan een Apple-winkel, duw een van de kinderen op Facebook opzij en laad je ontwerp op.
Als je geen iPad hebt, geen toegang hebt tot een winkel waarvan er een wordt getoond, maar je hebt wel een Mac, download je Xcode, open je de iPad-simulator en geef je daar een werveling om zaken als resolutie en oriëntatie uit te testen.
Xcode is een gratis download voor gebruikers van OS X Lion en biedt iPhone- en iPad-simulators waarmee je ruwweg kunt zien hoe je site in verschillende resoluties wordt weergegeven. Tablets hebben absoluut het webontwerp veranderd, betwistbaar ten goede en het wordt steeds belangrijker om ze te huisvesten wanneer we nieuwe sites ontwerpen. Een gebruiker die eerst je ontwerp op zijn iPad bezoekt, maar dan vindt dat het niet werkt, veel scrollen of een andere frustratie vereist, kan voor het leven worden afgewezen vanwege de indruk die het geeft..
Ik heb zeker veel websites bezocht op mijn iPad in de 16 maanden dat ik er een bezat, en ik experimenteerde een beetje met het werken met iPad-specifiek ontwerp (zoals in tip # 4). Volg deze zes tips en je zou moeten kiezen voor een iPad-compatibel ontwerp. Zolang het technisch werkt, niet veel hoeft te zoomen en / of scrollen en echt met een vinger kan worden gebruikt, ben je op weg om een waardevolle niche van de bladermarkt onder te brengen.
Accentsconagua