Share
Det har vært nesten et år siden Apples nettbrett, iPad, ble utgitt til folkemengder av adoring gadget-lovers. Steve Jobs tok et mye verdsatt besøk til San Francisco nylig for å avdekke den andre generasjonen av denne enheten blant en båtlast av Android-tabletter, inkludert Motorolas Xoom og Samsungs Galaxy Tab. Disse enhetene kommer i hendene på millioner av brukere og blir raskt utstyr med stort nettlesingspotensial.
I en tidligere artikkel her på Webdesigntuts +, diskuterte vi temaet "den nye folden" og hvordan bølgen av nye enheter (fra mobiltelefoner til tabletter til HDTV) har revet et hull i begrepet et enkelt skjermmiljø som webdesignere kan plan for.
På skrivebordet / bærbarheten av datamaskinindustrien (aka, PCer) ble skjermbildene begynt å bli betydelig større noen år tilbake? og webdesign begynte å reflektere dette tilbake i 2009-2010 med store landskapsdesigner, brede formatbilder og rik teksturerte bakgrunner. Vi kan kalle denne bevegelsen "scaling up" av webdesign for den store skjermen.
Merk: I denne artikkelen skal vi referere til alle datamaskiner som har dedikerte skjermer (du vet de store behemothene som sitter på skrivebord) som PCer. Ja, selv Apple-merkede stasjonære datamaskiner vil bli kalt "PCer" i løpet av denne artikkelen. Det er ok, du kan puste nå.
Siden begynnelsen av 2010 skjønnet mangfoldet av skjermer også en skalering ned prosess. Enhets beslutningstakere begynte å kaste en mengde nye skjermoppløsninger i blandingen, de fleste av dem mindre. Som vi så med trending når skjermer ble store, ser vi også en lignende trend for disse nye mindre enhetene; Som sådan har webdesignet forandret seg betydelig ved at nye skjermstørrelser med nye inngangsmetoder radikalt blir store aktører i drivkraften bak webdesigntrender.
I denne artikkelen tar vi en titt på noen store endringer webdesignere har hatt å gjøre for å få tablettkompatibilitet og hvordan du kan gjøre det samme. Vi vil også ta en titt på noen gode eksempler på disse "nettbrettet" -vennlige nettstedene.
La oss få en av de åpenbare brukeropplevelsene peker ut: Ved navigering på en berøringsskjerm må man bruke en finger. Når du navigerer på en datamaskin, kan man ha presisjonen til en mus.
Den største forskjellen i å designe en brukbar opplevelse for enten plattformen er proporsjonal. Navigering på en nettbrett må være enklere og større enn på en PC? noe som betyr at designere må komme til den "midtre bakken" (være stor nok til å enkelt navigere på en nettbrett, men ikke for stor at det ser dumt ut på en datamaskin) eller har et eget nettbrett-dedikert nettsted som bruker et annet stilark (og enda en annen layout) helt.
De fleste PC-brukere har en håndfull vanlige oppløsninger på skjermer fra rundt 15? - 24 ?. Noen har mye større screeens, men svært få har mindre. IPad, i skarp kontrast, har en 9,7? skjermen med en oppløsning på 1024x768 og de fleste Android-tabletter kommer inn på 7?.
Imidlertid er 1024 px oppløsninger ikke ekstremt uvanlig for tabletter eller PCer. Den virkelige forskjellen som vi trenger å merke seg er ?noen måte er den riktige måten? holdning av tabletter med innebygde akselerometre. IPad håndterer denne endringen ganske pent ved å skalle ned fast bredde-design for å passe til 768px bredden, eller, selvfølgelig, justere væskebredden for å matche de nye dimensjonene.
Likevel har den gjennomsnittlige webdesigneren et unikt problem med å ikke kunne forutsi miljøet at noen skal se på nettstedet deres gjennom.
Spørsmålet er: Hva er løsningen på dette problemet? Adaptive design metoder er den primære løsningen som utviklere bruker adaptiv CSS for å bare vise om en enhet er av et bestemt merke, nettleser eller oppløsning.
Problemet er at det ikke bare er en ekstra oppløsning i blandingen? Det er en mengde av dem. Adaptive CSS / JavaScript-metoder fungerer fint for noen få enheter, men det er en tungvint metode som jeg tviler på at de fleste utviklere vil ønske å ansette. Jeg mener, vil du designe nettstedet ditt tjue ganger før lanseringen for alle de forskjellige enhetene som er tilgjengelige? Jeg vet at jeg ikke ville det.
Som sådan vil væskelayoutene trolig bli vanligere også, da de automatisk tilpasser seg nye oppløsninger som presenteres for dem uten det besværlige behovet for flere stilark.
Som vi sa før, innebygde akselerometre betyr at en tavle skjerm har ingen bestemt oppløsning. Takket være den endrede oppløsningen med liten innsats og de nye, inertielle rullemekanismene, er det ingen bestemt fold.
Hva er brettet? Fellen er i utgangspunktet avskjæringspunktet mellom hva brukeren kan se og hva han ikke kan før man ruller. Dette var et begrep hentet fra ideen om foldet avis og har blitt brukt i webdesign som en definisjon av synlighet. Brukere bestiller dommemann på hva de kan se og hvor fort de oppfatter det.
Problemet er imidlertid at det er for mange nettlesere å vurdere. Tabellen under ble brukt i Shaun Cronins artikkel på brettet for å vise det brede spekteret av oppløsninger som brukes til å besøke WebDesignTuts +. Som du kan se, er det flere nettlesere der enn mulig å vurdere i en vanlig arbeidsflyt, og mobile enheter har bidratt til nummeret.
Problemet ligger i at fellen er adaptiv på hver enhet som enheten roterer. Det er en veldig lignende historie til den ovennevnte på væske og bredde.
Du har sikkert hørt: Apple liker ikke Flash. Ingen av Apples iOS-drevne enheter har Adobe's Flash innebygd, og heller ikke mulig å installere. Dette betyr at deler av nettet bare er uforenlige med en iPad.
Det må sies at den vanlige bruken av Flash-nettsteder er uvanlig i dag, men nettstedelementer bruker fortsatt standarden. Mye video på semi-populære nettsteder, for eksempel, er ikke tilgjengelig på iPad. Men mer populære videosider som YouTube integrerer sakte HTML5. Dette er Apples foretrukne løsning for Adobe Flash. Den femte revisjonen av HTML gir et utvalg av nye elementer som kan tilbys som alternativer til kjernebruk av Flash, for eksempel video- og lydfordeling. Og takket være implementering fra nettsteder som YouTube og CNET, er det klart at denne overgangen skjer.
De fleste kan riste dette av som ikke nødvendig. Men etter at det har vært bare ett år i offentlige hender, har iPad allerede fått en stor nettlesingsmarkedsandel, så det blir nesten viktigere enn å vurdere IE 6 brukere.
?Det er nesten som om liming ikke har betydning for tabletter.?
iPad kjører webkitdrevet Safari-nettleseren, i mobilform. Som vi diskuterte i forrige avsnitt, er Safari for iPad svært HTML5-kompatibel, men faller på noen få områder. Typografi er en ting som, selv om iPad støtter SVG-gjengivelse, støtter det ikke andre tekstgjenopprettingstjenester som brukte Adobe Flash eller Cufon.
Populære pseudoklasser kan ikke brukes til å skape effekter som svever over koblinger på grunn av mangel på markør.
iPad bryter imidlertid ned barrierer mellom bruker og innhold, da zooming inn og ut er mye enklere. Det er nesten som om liming ikke har betydning for tabletter.
Si farvel til Web Apps: La oss flytte bort fra det spesifikke eksempelet på iPad for et øyeblikk. I stedet la vi se på det større bildet. Det er hundrevis av tusenvis av apper på App Store, med over 65 000 av dem som er iPad-spesifikke. Et tilsvarende økende antall apper er tilgjengelige på Android-markedet (hvorav mange er kopikatabøker fra iApp-versjonene). Selv om det er åpenbart at det ikke kommer til å være en tilbakegang av nettsteder, kan det godt være en tilbakegang web-baserte apper i bytte for apper som bare finnes på en enhet.
Hva betyr dette? Det betyr at web-app som du en gang brukte ved å bla til et bestemt nettsted, sannsynligvis kommer til å forsvinne eller bli overflødig - i stedet vil det være en faktisk app på enheten. Nettleseren din slutter å være den viktigste måten du får tilgang til informasjonen.
Si farvel til Mouse-Centric brukergrensesnitt: Det er sannsynligvis et skifte fra oppreist presisjonsbrowsing til avslappede, uformelle typer. Alle de webappene som krever presisjonen til en markør, blir erstattet av innfødte kolleger som kjører mye jevnere på en nettbrett. Men for mindre merker er det større sjanse for at de bare skal omorganisere sin webapp for å passe bedre til dimensjonene til en nettbrett.
Tabletter introduserer en helt ny kategori av enheter for webdesignere å vurdere. Noen tar bare opp med økningen i smarttelefonbrowsing, og nå har de fem eller seks nye resolusjoner å vurdere. Nettleserne til disse enhetene er absolutt noe å tenke på, og min prediksjon er at i løpet av ett år eller to, vil nettsteder ikke ha en iPad-versjon, men i stedet ser vi universelle nettsteder som vi gjør apps.
Si Hei til App-Centrisk brukergrensesnitt: Jeg kommer ikke til å si at fingeren kommer til å være den nye drivkraften i alle webdesign fordi, vel, mouses (mus?) Går ikke hvor som helst når som helst snart. Visst, i en generasjon eller to, kan vi alle kontrollere nettsteder med fingrene, øyebollene og til og med brainwaves? men til da, vil musen / markøren forbli det primære verktøyet som de fleste mennesker samhandler med nettsteder.
Hva jeg vil si i stedet er at nettsteder skal begynne å ta mer og mer av deres designpåvirkning fra App design - det betyr større knapper, større typografi, meningsfylt bruk av gradienter og teksturer, og mindre kompliserte layouter. Uten ytterligere forsinkelser, la oss se på hovedelementene i effektive tablettdesigner:
De fleste hovedpoengene vi skal ha rett ut her, kan oppsummeres i en strålende utsagn:
Hvis webdesign er Lego, må iPad-design være Duplo
- Oliver Reichenstein
Hvis du noen gang har spilt med Legos (og hvilken nettdesigner ikke har ?!), er denne meldingen sikker på å treffe hjemme. Design for tabletter er ganske som å designe gridpapir for små barn som bruker disse jumbo-pennene til å tegne bilder - det vil si at du vil holde ting enkelt og stort.
Liten type (og jeg mener den typen Bitty-typen som vi pleide å elske å bruke tilbake i 2005), er bare ikke lesbar på en nettbrett. Sikker, kan du zoome inn? men hvis du har lengre lengde, er teksten fortsatt ganske vanskelig å lese, med mindre du skal bla gjennom hver tekstlinje.
På samme måte kan stor tekst være en avslag på tabletter også. Tekst som er for stor, krever at brukerne ruller oftere enn de ellers måtte trenge. Svaret er tekst som er "akkurat" som Goldilocks kan sette det. Dette betyr ikke bare å finne den perfekte skriftstørrelsen skjønt; Det betyr å finne den perfekte kombinasjonen av font-ansikt, størrelse, linjehøyde og linjelengde.
Jeg er sikker på at vi vil kunne bryte dette ned i en fullartet artikkel i fremtiden - men for nå må din guide være å lage et typografi som er lett på øyet og morsomt å lese.
Dette sier selvsagt, men de små 16px med 16px-ikonene vil ikke kutte det på en nettbrett når den gjennomsnittlige fingeren enkelt kan klikke på et mellomrom på ca 20px. På samme måte som dette, betyr det ikke at knapper må være ginormøse for å kunne brukes. Gode knapper skal være enkle å trykke med en finger, men bør ikke få PC-surfere til å føle at de bruker en Playskool-mus heller.
Det var en periode i midten av 2000-tallet hvor designere begynte å bruke teksturer bare fordi de kunne. Det er alt bra og bra, men det gjør ikke helt en høy score når det gjelder brukervennlighet.
Så hva er gir mening teksturer og gradienter? For å si det enkelt - de er visuelle effekter som understreker og støtter brukbarheten til et nettsted. For eksempel kan en knapp ha en subtil gradient over den for å få den til å se "trykkbar". En bakgrunnsstruktur kan føles som mørk karbonfiber for å gjøre forgrunnen sprett ut mer. Dette er et annet tilfelle der vi kunne skrive en full artikkel om bare dette emnet, men bruk sunn fornuft. Hvis en tekstur eller gradient ikke gir noen meningsfylt verdi, kan du sannsynligvis bli kvitt den.
Jeg vil være forsiktig med denne, fordi "mindre kompliserte" oppsett ikke betyr mindre kolonner, mindre variasjon eller mindre interessante nett. Når det er sagt, hvis du noen gang har prøvd å bruke WordPress backend-systemet på en iPad, vet du nøyaktig hva jeg snakker om. Kompliserte oppsett krever at en bruker stadig skal zoome inn på bestemte deler av informasjonen for å kunne lese det (mye mindre bruk det).
Bedre oppsett betyr en mer gjennomtenkt tilnærming til nettstedet ditt. Hvis nettstedet ditt ikke har en miniatyrbilde for hvert blogginnlegg, ikke bry deg om å prøve å tvinge en bildedrevet layout? og omvendt, hvis nettstedet ditt bruker mange bilder, bruk et oppsett som komplimenterer den siden av innholdet ditt, i stedet for å prøve å alltid passe 40-ords utdrag ved siden av hvert bilde.
Mindre kompliserte oppsett betyr at du blir kvitt de unødvendige metadataene som har kommet for å rote opp våre nettsteder i dag? i stedet for å notere dato, koder, kategorier, sosiale medier ikoner, forfatter og hva som helst annet du kan tenke på, bare gi mer plass til det som egentlig er viktig: ditt kjerneinnhold!
Nå vet vi hva som gjør et nettsted optimert for tabletter, la oss ta en titt på en håndfull nettsteder som allerede har gjort dette. Nettstedene under hvert arbeid gjør det bra på en iPad om det er bruk i portrett eller landskap, eller bruk av HTML5-elementer.
Accentsconagua