Share
Het is bijna een jaar geleden dat Apple's tablet-apparaat, de iPad, werd vrijgegeven aan menigten liefhebbers van gadgets. Steve Jobs nam onlangs een zeer gewaardeerd bezoek aan San Francisco om de tweede generatie van dit apparaat te onthullen te midden van een lading Android-tablets, waaronder Motorola's Xoom en Galaxy Tab van Samsung. Deze apparaten komen in de handen van miljoenen gebruikers en zijn snel apparaten aan het worden met een groot browsepotentieel.
In een vorig artikel hier op Webdesigntuts +, bespraken we het onderwerp van de "nieuwe vouw" en hoe de golf van nieuwe apparaten (van mobiele telefoons tot tablets naar HDTV's) een gat heeft gescheurd in de notie van een enkele schermomgeving die webontwerpers kunnen gebruiken plan voor.
Op de desktop / laptop-kant van de computerindustrie (ook bekend als PC's), begonnen monitors een paar jaar geleden aanzienlijk groter te worden? en webontwerp begon dit al in 2009-2010 te weerspiegelen met grote landschapontwerpen, grootformaatafbeeldingen en rijke gestructureerde achtergronden. We kunnen deze beweging de "schaalvergroting" van webontwerp voor het grote scherm noemen.
Notitie: Voor de toepassing van dit artikel verwijzen we naar alle pc's van desktops die speciale monitoren (je weet wel, die grote kolossen die op een mensenbureau zitten) als pc's hebben. Ja, zelfs Apple-desktopcomputers worden voor de duur van dit artikel 'pc's' genoemd. Het is goed, je kunt nu ademen.
Sinds begin 2010 begon de diversiteit van schermen echter ook met een schaalverkleining werkwijze. Apparaatmakers begonnen een hele reeks nieuwe schermresoluties in de mix te gooien, de meeste kleiner. Zoals we in trending zagen toen monitors groot werden, zien we ook een vergelijkbare trend voor deze nieuwe kleinere apparaten; Als zodanig is het webontwerp aanzienlijk veranderd in die zin dat nieuwe schermformaten met nieuwe invoermethoden radicaal belangrijke spelers worden in de drijvende krachten achter trends in webdesign.
In dit artikel zullen we een aantal belangrijke veranderingen bekijken die webontwerpers hebben moeten maken om tabletcompatibiliteit te krijgen en hoe u hetzelfde kunt doen. We zullen ook enkele geweldige voorbeelden van deze "tablet" -vriendelijke sites bekijken.
Laten we een van de voor de hand liggende punten voor gebruikerservaringen uit de weg ruimen: wanneer u op een touchscreen navigeert, moet u een vinger gebruiken. Bij het navigeren op een computer kan men de precisie van een muis hebben.
Het grootste verschil in het ontwerpen van een bruikbare ervaring voor beide platforms is het aandeel. Navigatie op een tablet moet eenvoudiger en groter zijn dan op een pc? wat betekent dat ontwerpers die 'middenweg' moeten bereiken (groot genoeg zijn om gemakkelijk op een tablet te navigeren, maar niet te groot dat het er op een computer dom uitziet) of een afzonderlijke tablet-specifieke site hebben die een andere stylesheet gebruikt (en zelfs een andere layout) helemaal.
De meeste pc-gebruikers hebben een van een handvol gemeenschappelijke resoluties op monitors van rond de 15? - 24 ?. Sommige hebben veel grotere screeens, maar heel weinig hebben kleiner. De iPad, in scherp contrast, heeft een 9.7? scherm met een resolutie van 1024x768 en de meeste Android-tablets om 7 uur?.
1024px-resoluties zijn echter niet buitengewoon zeldzaam voor tablets of pc's. Het echte verschil dat we moeten opmerken is het ?elke manier is de juiste manier? houding van tabletten met ingebouwde versnellingsmeters. De iPad verwerkt deze verandering redelijk goed door ontwerpen met een vaste breedte af te schalen om de breedte van 768 px aan te passen, of, natuurlijk, de breedte-breedte opnieuw af te stemmen op de nieuwe afmetingen.
Toch heeft de gemiddelde webontwerper een uniek probleem van het niet kunnen voorspellen van de omgeving waarin iemand zijn site gaat bekijken.
De vraag is: wat is de oplossing voor dit probleem? Adaptieve ontwerpmethoden zijn de primaire oplossing omdat ontwikkelaars adaptieve CSS gebruiken om alleen te laten zien of een apparaat van een bepaald merk, browser of resolutie is.
Het probleem is dat er niet slechts één extra resolutie aan de mix is toegevoegd? Er is een overvloed aan hen. Adaptieve CSS / JavaScript-methoden werken goed voor een paar apparaten, maar het is een omslachtige methode waarvan ik betwijfel dat de meeste ontwikkelaars zouden willen gebruiken. Ik bedoel, zou je je website twintig keer vóór de lancering willen ontwerpen voor alle verschillende beschikbare apparaten? Ik weet dat ik dat niet zou doen.
Op deze manier zullen vloeiende lay-outs waarschijnlijk ook vaker voorkomen, omdat ze zich automatisch aanpassen aan nieuwe resoluties die aan hen worden gepresenteerd zonder de lastige behoefte aan meerdere stylesheets..
Zoals we eerder al zeiden, ingebouwde versnellingsmeters betekenen dat het display van een tablet geen definitieve resolutie heeft. Dankzij de veranderende resolutie met weinig moeite en de nieuwe, inertiële scrollmechanismen, is er geen definitieve vouw.
Wat is de vouw? De vouw is in feite het afkappunt tussen wat de gebruiker kan zien en wat hij niet kan voordat hij scrolt. Dit was een term die uit het idee van gevouwen krant kwam en is gebruikt in webdesign als een definitie van zichtbaarheid. Gebruikers geven judgmenet door wat ze kunnen zien en hoe snel ze het waarnemen.
Het probleem is echter dat er te veel browsers zijn om te overwegen. De onderstaande tabel werd gebruikt in het artikel van Shaun Cronin over de vouw om het brede scala aan resoluties te tonen die worden gebruikt om WebDesignTuts + te bezoeken. Zoals u ziet, zijn er meer browsers dan mogelijk om te overwegen in een normale workflow, en mobiele apparaten hebben bijgedragen aan het aantal.
Het probleem is dat de vouw adaptief is op elk apparaat terwijl het apparaat draait. Het is een zeer vergelijkbaar verhaal als het bovenstaande op vloeistof en breedte.
U hebt waarschijnlijk gehoord: Apple houdt niet van Flash. Op geen van Apple's door iOS gevoede apparaten is Adobe's Flash ingebouwd en is het ook niet mogelijk om te installeren. Dit betekent dat delen van het internet gewoon niet compatibel zijn met een iPad.
Het moet gezegd worden dat het reguliere gebruik van Flash-websites tegenwoordig ongebruikelijk is, maar website-elementen gebruiken nog steeds de standaard. Veel video op semi-populaire websites is bijvoorbeeld niet beschikbaar op de iPad. Echter, meer populaire videosites zoals YouTube integreren langzaam HTML5. Dit is de geprefereerde oplossing van Apple voor Adobe Flash. De vijfde herziening van HTML brengt een selectie nieuwe elementen die kunnen worden aangeboden als alternatieven voor kerngebruik van Flash, zoals video- en audiodistributie. En dankzij de implementatie van sites als YouTube en CNET is het duidelijk dat deze overgang plaatsvindt.
De meeste mensen schudden dit af omdat dit niet nodig is. Maar nadat het slechts een jaar in openbare handen is geweest, heeft de iPad al een groot marktaandeel voor browsen verzameld, dus het wordt bijna belangrijker dan het overwegen van IE 6-gebruikers.
?Het lijkt bijna alsof het formaat niet van belang is op tablets.?
iPad beheert de Safari-browser met webkit, in een mobiele vorm. Zoals we in het vorige gedeelte hebben besproken, is Safari voor iPad erg HTML5-compatibel, maar komt een aantal gebieden binnen. Typografie is één ding, hoewel de iPad wel SVG-weergave ondersteunt, maar niet andere tekstweergave-services ondersteunt die Adobe Flash of zelfs Cufon hebben gebruikt.
Populaire pseudoklassen kunnen niet worden gebruikt om effecten te creëren, zoals het zweven boven links vanwege het gebrek aan cursor.
De iPad breekt echter barrières tussen gebruiker en inhoud af, omdat in- en uitzoomen een stuk eenvoudiger is. Het lijkt bijna alsof het formaat niet van belang is op tablets.
Zeg vaarwel tegen webapps: Laten we een moment weggaan van het specifieke voorbeeld van de iPad. Laten we in plaats daarvan naar het grotere plaatje kijken. Er zijn honderdduizenden apps in de App Store met meer dan 65.000 iPad-specifieke. Een vergelijkbaar groeiend aantal apps is beschikbaar op de Android-markt (veel daarvan zijn copy-cat apps van de iApp-versies). Hoewel het duidelijk is dat er geen achteruitgang van websites zal zijn, is er misschien wel een achteruitgang van webgebaseerde apps in ruil voor apps die zich uitsluitend op een apparaat bevinden.
Wat betekent dit? Het betekent dat de web-app die u ooit gebruikte om naar een bepaalde website te bladeren waarschijnlijk zal verdwijnen of overbodig zal worden - in plaats daarvan zal het een echte app op uw apparaat zijn. Uw browser zal niet langer de belangrijkste manier zijn om toegang tot de informatie te krijgen.
Zeg vaarwel tegen Mouse-Centric UI: Er zal waarschijnlijk een verschuiving plaatsvinden van rechtopgaand nauwkeurig browsen naar relaxte, ongedwongen typen. Al die web-apps die de precisie van een cursor vereisen, worden vervangen door native-tegenhangers die veel soepeler op een tablet draaien. Maar voor kleinere merken is de kans groter dat ze hun web-app alleen opnieuw zullen aanpassen aan de afmetingen van een tablet.
Tablets introduceren een geheel nieuwe categorie apparaten waarmee webontwerpers rekening kunnen houden. Sommigen halen de toename van het browsen op de smartphone alleen maar in en hebben nu vijf of zes nieuwe resoluties in overweging. De browsers van deze apparaten zijn zeker iets om over na te denken en mijn voorspelling is dat binnen een jaar of twee sites geen iPad-versie zullen hebben, maar in plaats daarvan zullen we universele sites zien zoals we apps doen.
Zeg hallo tegen App-Centric UI: Ik ga niet zeggen dat de vinger de nieuwe drijvende factor in alle webdesign zal zijn, want, nou, muizen (muizen?) Gaan nergens snel heen. Zeker, in een paar generaties kunnen we allemaal websites beheersen met onze vingers, oogbollen en zelfs hersengolven? maar tot die tijd blijft de muis / cursor het primaire hulpmiddel dat de meeste mensen op websites gebruiken.
Wat ik in plaats daarvan zal zeggen, is dat websites steeds meer van hun ontwerpinvloed zullen gaan gebruiken via App-ontwerp - dit betekent grotere knoppen, grotere typografie, zinvol gebruik van hellingen en structuren en minder ingewikkelde lay-outs. Laten we zonder verder uitstel de belangrijkste elementen van effectieve tabletontwerpen bekijken:
De meeste hoofdpunten die we hier gaan bespreken, kunnen samengevat worden in één briljante uitspraak:
Als webontwerp Lego is, moet het iPad-ontwerp Duplo zijn
- Oliver Reichenstein
Als je ooit met Legos hebt gespeeld (en welke webontwerper niet ?!), is dit bericht zeker thuis. Ontwerpen voor tablets is een beetje zoals het ontwerpen van rasterpapier voor kleine kinderen die die jumbo-potloden gebruiken om foto's te maken - wat wil zeggen dat je het ding eenvoudig en GROOT wilt houden.
Klein type (en ik bedoel het itty bitty type dat we vroeger graag gebruikten in 2005) is gewoon niet leesbaar op een tablet. Natuurlijk kun je inzoomen? maar als je lijnlengte te lang is, is de tekst nog steeds behoorlijk moeilijk te lezen, tenzij je elke regel tekst gaat scrollen.
Ook kan grote tekst op tablets een uitschakeling zijn. Te grote tekst dwingt gebruikers om vaker te scrollen dan ze anders nodig zouden kunnen hebben. Het antwoord is tekst die "precies goed" is, zoals Goldilocks zou kunnen zeggen. Dit betekent echter niet alleen dat je de perfecte lettergrootte moet vinden; Het betekent het vinden van de perfecte combinatie van font-face, grootte, lijnhoogte en lijnlengte.
Ik weet zeker dat we dit in de toekomst kunnen opsplitsen in een volledig artikel - maar voorlopig zou je gids moeten zijn om een typografisch schema te maken dat gemakkelijk in het oog is en leuk om te lezen..
Dit is vanzelfsprekend, maar die kleine 16px bij 16px pictogrammen knippen het niet op een tablet wanneer de gemiddelde vinger gemakkelijk op een spatie van ongeveer 20px kan klikken. Net als het type betekent dit echter niet dat knoppen nodig zijn om bruikbaar te zijn. Goede knoppen moeten eenvoudig met een vinger kunnen worden ingedrukt, maar mogen pc-surfers er niet het gevoel van geven dat ze een Playskool-muis gebruiken.
Er was een periode in het midden van de jaren 2000, toen ontwerpers textures gingen gebruiken, gewoon omdat ze dat konden. Dat is allemaal goed en wel, maar het scoort niet echt een hoge score als het gaat om bruikbaarheid.
Dus wat zijn belangrijk texturen en verlopen? Simpel gezegd: het zijn visuele effecten die de bruikbaarheid van een site benadrukken en ondersteunen. Een knop kan bijvoorbeeld een subtiele hellingshoek hebben om het er "drukbaar" uit te laten zien. Een achtergrondstructuur kan aanvoelen als een donkere koolstofvezel om de voorgrond meer naar voren te laten komen. Dit is een ander geval waar we een volledig artikel over dit ene onderwerp zouden kunnen schrijven, maar gebruik het gezond verstand. Als een textuur of kleurverloop geen zinvolle waarde heeft, kunt u er waarschijnlijk vanaf komen.
Ik zal hier voorzichtig mee zijn, omdat "minder gecompliceerde" lay-outs niet betekenen minder kolommen, minder variatie of minder interessante rasters. Dat gezegd hebbende, als je ooit hebt geprobeerd om het WordPress-backendsysteem op een iPad te gebruiken, weet je precies waar ik het over heb. In ingewikkelde lay-outs moet een gebruiker voortdurend inzoomen op bepaalde stukjes informatie om het te kunnen lezen (laat staan om het te gebruiken).
Betere lay-outs betekent een meer doordachte benadering van uw site-ontwerp. Als uw site geen miniatuur heeft voor elk blogbericht, hoeft u niet de moeite te nemen om een afbeeldinggestuurde lay-out te forceren? en omgekeerd, als uw site veel afbeeldingen gebruikt, gebruik dan een lay-out die aan die kant van uw inhoud past, in plaats van te proberen altijd een stuk met 40 woorden naast elke afbeelding te passen.
Minder gecompliceerde lay-outs betekent het wegwerken van de onnodige metagegevens die tegenwoordig onze sites raken? in plaats van de datum, tags, categorieën, social media-pictogrammen, auteur en whateverothercrap u kunt bedenken, gewoon meer ruimte maken voor wat echt belangrijk is: uw kerninhoud!
Nu weten we wat een site geoptimaliseerd maakt voor tablets. Laten we eens kijken naar een handvol sites die dit al hebben gedaan. De onderstaande sites werken uitstekend op een iPad, of het nu gaat om gebruik in portret of landschap, of het gebruik van HTML5-elementen.
Accentsconagua