En titt på design for mobile enheter
Da den første iPhone ble sluppet, tok den tech verden med storm. Siden da har det vært nesten 5 år og smarttelefonmarkedet har rammet opp i popularitet, med selv Microsoft har kommet inn i konkurransen med sine Windows 7 OS og partnere. Med så mange Internett-brukere på smarttelefonen i dag, er det sunn fornuft å forvente at antall mobile nettsteder øker aggressivt.
Imidlertid er utformingen for mobilnett en helt annen operasjon med vanlig webdesign. Våre nettsteder er designet for stor skjerm, men smarttelefonens skjermstørrelse er altfor liten i forhold til det, og dermed fører til irriterende bruksproblemer. Nye design standarder og praksis er sterkt nødvendig for en bedre mobilt nettsteddesign med jevn brukeropplevelse.
I denne veiledningen vil vi se på å designe et brukervennlig nettsted for smarttelefonens mobile nettlesere. Jeg skal snakke om beste praksis og nyttig utviklerverktøy for deg å designe et bedre mobilnettsted, så la oss komme inn på det etter hopp!
Planlegger sterk brukeropplevelse
Når du bygger en mobil nettside, er det viktig å Hold brukerne oppmerksom på hele tiden, som til slutt ditt nettsted er utformet og opprettet for brukerne å nyte. Det er absolutt vanlig at brukerne forventer et mobilt nettsted for å oppføre seg på samme måte som skrivebordsmiljøet holde brukeropplevelsen vennlig bør være hovedfokus mens du bygger et vellykket mobilnettsted.
Det er mange bruksbegreper å vurdere for brukerne. Disse hensynene inkluderer skjerm størrelse, inline bilder, hyperkoblinger, skriftstørrelser, og side navigasjon. Vi har skrevet om mobil brukervennlighet design for at du skal skjære nettstedet ditt for bedre brukervennlighet. I tillegg til guiden må du alltid Hold deg oppmerksom på nye ideer for å forbedre nettstedet ditt.
Å planlegge en sterk brukeropplevelse betyr også at du burde vurdere hvordan en bruker vil samhandle med nettstedet ditt. På et skrivebord kan nettstedet ditt interagere med en mus og et tastatur, men på en smarttelefon vil brukerne være tappe, Flikking, og sveipe veien rundt nettstedet ditt. Du må sannsynligvis utforme nettstedet slik brukerne kan Få tilgang til nettstedinformasjonen enkelt med disse fysiske bevegelsene.
Hold Sider Kort & Søt
Kjøtt og poteter på et hvilket som helst nettsted er sideinnhold. Hver av dine nettsider har betydelige mengder nyttig informasjon for brukerne, for eksempel tekst, bilder eller videoer. Du vil også finne nyhetsartikler og blogginnlegg som kjører på for noen få sider, noe som kan bidra til å bryte opp tekst, men det anbefales ikke for mobile enheter som teknikken krever mer sideinnlasting, noe som betyr mer ventetid på brukerens side.
Med mindre det er absolutt nødvendig, anbefaler jeg holder innholdet på siden kort. Du bør også vurdere å gjøre det ser søtt av styling fonten til en mye større størrelse og kanskje flytte bilder til side. Med innholdet ditt på full skjerm tiltrekker det seg naturlig oppmerksomhet, for ikke å nevne at optimaliseringen faktisk gjør skanning av sidene mye enklere. Dette er også grunnen til at a enkeltkolonn layout passer regningen perfekt.
I de fleste tilfeller kommer ikke mobile nettlesere til å laste nettsidene så raskt som desktop-nettlesere, og dette kan irritere leserne dine, derfor må du optimaliser innholdet og nettstedet for lasting av høyhastighetsinnhold. Du kan heller forkort artikkelen mens du holder hele innholdet, eller bare fjern unødvendige bilder. Legg fokuset på enkelhet i stedet for skjønnhet.
Din kjernenavigasjon er livspareren for de besøkende som ønsker å flytte mellom sider. På en mobil enhet vil skjermkoblinger vises mye mindre av natur, og dermed mye vanskeligere å trykke. En viktig tweak for å løse dette problemet er å maksimere skrift og plass til navigasjonskoblingene dine, kanskje tar opp hele blokkområdet. Alternativt kan du utform navigeringslinjen for å lignes på den virkelige iPhone-applikasjonens fanefelt, som den som vises ovenfor.
Bygg mobile CSS-stiler
Nå som vi vet hvordan du optimaliserer mobilwebområdet for bedre lesbarhet og brukervennlighet, ville det være godt å snakke om CSS-stiler. Hvert CSS-stilark inneholder mange selektorer med egenskaper som gjelder skrifter, størrelser, posisjonering og skjerminnstillinger. Når det kommer til mobil, bør du være oppmerksom på hvordan blokkene dine faller på plass.
(Image Source: Smashing Magazine)
Et område for å komme i gang er å tilbakestill nettstedets wrapper bredder i prosent. Det er vanlig å bruke piksler som enhet for posisjonering, linjehøyde, skriftstørrelse og divs bredde, men når du arbeider med mobil, vil du ha sidene dine til å være væske og overgang mellom hver enhet naturlig. Innstilling av container divs til 100% bredde vil tillate innholdet til fyll lett mellom portrett / liggende modus uten å flyte over kanten.
Hvis du er en av personene som ønsker å strukturere hele oppsettet ditt, må du forsikre deg om det slå alt med en tilbakestille. Også stykker, overskrifter og navigasjonskoblinger bør alle settes til skjerm: blokk; slik at du får den lineære utskriftsstilen. Sett på plass kantene og polstringene for å fjerne oppblåsthet fra oppsettet. Unngå tabeller hvis mulig siden disse har en tendens til å gjøre buggy resultater mellom enheter.
Store bilder er også et problem mellom enheter. De fleste av nettstedene dine vil gi større enn 480px, og du kan ikke ønske at de ødelegger containeren. Det første alternativet er å sett bredden på 100% slik at bildene kan endre størrelsen på naturlig måte. Det er sikkert mulig å opprett forskjellige sett med bilder for nettstedet ditt og gjør dem annerledes basert på nettleseragenten, men ærlig talt legger dette bare til flere arbeider på din side, så prøv å bruk teknikken bare når det virkelig trengs.
Designe nettsteder for iPhone
Den mobile markedsandelen er ganske stor og delt, men Apple har fått et stort stykke kaken med iDevices. Både iPhone og iPad er mobile Internett-klare enheter med innebygd berøringsskjermfunksjonalitet. De har samme standard nettleser, Safari, og en hel rekke andre alternativer.
For iPhone-spesifikke nettsteder må du målrette skjermstørrelsen. Den faste skjermstørrelsen er satt til 320px ved 480px for eldre iPhone-modeller og 640px ved 960px for iPhone 4 og iPhone 4S.
iPhone-skjermer er begrenset til plass. Du burde ha en blokk med innhold som strekker seg ned så lenge som nødvendig. Holde elementer i en enkelt kolonne vil spare deg for hodepine og tillate en væskelayout til “Fyll ut” både portrett og liggende modus. For dette vil du sannsynligvis trenge å utvikle en annen mal og finne en måte å sjekke om din besøkende bruker en iPhone. Det lille PHP-kodestykket nedenfor skal fungere godt:
I utgangspunktet trekker logikken vår globale $ _SERVER variabel for HTTP-agenten og sjekker om ordet “iphone” vises hvor som helst. Hvis ja, så vet vi at vår besøkende bruker en iPhone og derfra kan vi sette opp litt annerledes HTML eller til og med en helt ny mal layout! Dette kan også brukes til Ta med et iPhone-spesifikt stilark, endre sidetitler, fjern bilder eller nesten alle dynamiske effekter.
Når det gjelder å servere nye stilarter, er det en enklere måte. Som nevnt tidligere er maksimal skjermstørrelse for iPhone 960px bred. Derfor kan du med nye CSS3 medieforespørsler legge til stiler direkte inn i nettstedets hovedarkiv som vil bare skjerm på iPhone. Nedenfor er et lite eksempelkode:
@media skjerm og (maksimal enhet bredde: 960px) / * iPhone css * /
Dette fungerer fordi CSS kan nå oppdage nettbaserte agenter og deres egenskaper. Maksimal skjermbredde er en av egenskapene som også kan oppdages.
Alt-i-alt mobilnettsted for iPhone-enheter er ikke så vanskelig å designe for, det er bare for mange eksempler å referere, f.eks. CSS iPhone. Hold deg selv opptatt med å studere og vær ikke redd for eksperimentere med nye teknikker i UI design.
Mobile jQuery Scripting
Flertallet av webutviklere i frontendene er kjent med jQuery-biblioteket. Det gir deg noen fantastiske stenografi for kodende effekter, animasjoner, rullegardinmenyer og en rekke andre funksjoner i nettleseren, og det blir bare mer fantastisk med kunngjøringen av jQuery Mobile. Det er Ikke anbefalt å hoppe i teknologien direkte og last inn websiden din med effekter overalt, men for testing kan den avanserte funksjonaliteten spille veldig bra.
jQuery Mobile er litt annerledes enn vanlig jQuery, da det gir deg et fullt miljø for å bygge videre på. Når du jobber med filene, er de ikke bare JavaScript, men også CSS-stiler for knapper, lenker og overgangseffekter. Du skriver fremdeles websider i HTML-kode, men jQuery Mobile-teamet har leverte mange valgfrie UI-designfunksjoner. Det er mye vi kan gjøre med dette rammeverket, men siden rammen er fortsatt i beta, la oss holde fast i enkle effekter.
En liten opplæring på DevGrow blogger gir noen flotte eksempler. Det offisielle nettstedet tilbyr også demoer for deg å prøve ut. Legg merke til at vi bruker HTML-attributtet, data-overgang å legge til animasjonseffekter med noen av de forhåndsdefinerte verdiene. Disse inkluderer slide, pop, flip, fade, etc. Sjekk ut det lille DevGrow-eksemplet for å få en smak av disse effektene.
Effektene og overgangene er ganske ryddige, og det faktum at du kan bygge et helt mobilt grensesnitt strengt med jQuery, er også et stort skritt fremover for denne plattformen, men med plattformen bare i beta, vil jeg ikke anbefale å bygge hele mobilområdet ditt med deres bibliotek, spesielt med det faktum at det er Ikke støttet av alle de store smarttelefonene ved skrivingstidspunktet (spesielt Windows Phone 7), men det vil sikkert bli bedre med tiden.
Til slutt anbefaler jeg å gjøre meg kjent med dette nye mobile rammeverket før distribuere live på ethvert prosjekt.
Nyttige utviklerverktøy
Mobilutviklere ser ikke bare på kodings- og designressurser. Det er også høy etterspørsel etter programvareverktøy og IDE, for ikke å nevne kraftige mobile rammer. Webutvikling er en vanskelig oppgave som krever ganske mye engasjement, men bruk av flere verktøy vil gjøre jobben din mye enklere.
Opera Mobile Emulator
Leter du etter en måte å sjekke hvordan mobilwebområdet ditt gjengis? Dette kan være en stor smerte hvis du ikke har en smarttelefon med Internett-tilgang. Eller du vil ikke bruke smarttelefonen til å teste siden hver gang en oppdatering blir presset på serveren din. Vel, Opera Mobile Emulator er et fantastisk stykke programvare for å teste mobilnettstedet ditt.
Emulatoren støtter seg rundt 20 mobilprofiler for eksempel Samsung Galaxy S, HTC Desire, og til og med tablett som Motorola Xoom. Det er også mulig å sette tilpasset oppløsning og piksel tetthet for intensiv testing. Best av alt, du trenger ikke å gjøre for mye konfigurasjonsarbeid, bare få få klikk, og du er god til å gå.
Nedlastingen er helt gratis, og programvaren kjører både i Mac OS X og Windows. Utviklerne er vanskelige på jobben og skaper riktige webstandarder og tilpasser mobilmotorer. Jeg anbefaler deres andre dev verktøy hvis du leter etter ekstra verktøy for å hjelpe deg underveis.
PhoneGap
Det har ikke vært mange APIer utviklet over HTML5 for å bygge solid mobile applikasjoner. Spesielt det mobile landskapet har manglet disse typer nettsteder, og det er nettopp hvorfor PhoneGap fyller nisjeet så godt. Deres plattform lar deg enkelt konstruere HTML5-baserte apper som egne applikasjoner på 6 forskjellige plattformer.
Prosessen virker ved først å komprimere koden og sende den gjennom PhoneGaps applikasjonsramme. Derfra kan appene dine nå en stor del av mobilmarkedet, inkludert Android, iOS, Windows Phone 7 og BlackBerry.
Hvis du er litt forvirret, vær ikke redd for mye. Deres støttesider gir en nøyaktig oversikt over prosessen og tilbyr lenker til nyttige ressurser. Appene som allerede er utviklet, har blitt samlet i en vakker biblioteksstilportefølje. Ta en titt på deres fulle appsamling, som du deretter kan sortere etter enheter med skjermbilder.
Aptana Studio
Aptana-nettstedet er den beste beliggenheten for å lære om utviklingsverktøyene sine. Den nyeste suite-utgivelsen, Aptana 3.0.3, har en fullt integrert IDE for webutvikling, CSS-stiler og HTML-tagging, og den beste delen: Aptana er helt gratis å laste ned! De tilbyr pakker for alle 3 store operativsystemene (inkludert Linux) som er en stor bekvemmelighet for utviklere.
Det som gjør Aptana spesielt, er hvor raskt du kan utvikle et lite webprogram og teste ut ditt design. Studio-suiten lar deg raskt utvikle og teste et webprogram som kjører over Ruby on Rails, PHP, Python, eller bare HTML / CSS, og deres kodemerkingsfunksjoner har nylig blitt forbedret til inkludere nye HTML5 og CSS3 tagbiblioteker. Det kommer også med Git-integrasjon, en innebygd terminal, kodefeil, og en håndfull av andre flotte funksjoner.
Mobile GUI-sett og ikoner
Hva ville være nettet uten freebies å ligge rundt? For webdesignere er betydningen av brukergrensesnitt høyere enn alt annet. Enkle GUIer er tøffe å komme forbi, og bare de mest kreative designerne har kommet opp med arbeidsløsninger.
Imidlertid er det mange gratis, men likevel gode ressurser tilgjengelig for webdesigneren til å teste ut. Disse GUI-kittene er for det meste designet for Adobe Photoshop eller Fireworks, hvor du kan flytte rundt elementer og eksportere dem som flate bildefiler.
Ikoner er en veldig praktisk ressurs å ha. Designere lager gratis sett og tilbyr dem på nettet oftere enn noen gang før. Et slikt nettsted Glyphish har et showcase av både gratis og pro ikoner. Disse designene er basert på et enkelt tema som skal brukes på mobilmaler og appdesign.
Vår samling av prototypemaler for mobilenheter vil være en stor hjelp for deg på reisen av nettside og applikasjonsutvikling. Du bør ikke starte kodingen før du har et sterkt grafisk grensesnitt, og disse webkitene vil komme deg i gang på riktig vei.
iOS 5 GUI-sett
iPhone UI Vector Elements
iPhone App Icon Kit
Wireframe Magnets (DIY Kit)
Android grensesnitt GUI
