IPhone og iPad Webdesign for Dummies Cheat Sheet - dummies

Mange surfe på mobilnett gjør det på en iPhone eller iPad, så utformingen av mobile nettsteder som er målrettet mot disse enhetene, gir mening for mange webdesignere. Begynn å lage ditt webdesign for iPhone eller iPad ved å velge en designstrategi. Hvis du bestemmer deg for å designe målrettede nettsteder for iPhone og iPad, starter du med å forstå grunnleggende om webdesign som gjør et nettsted fungerer bra for iPhone- eller iPad-brukere.

Velge en strategi for mobil webdesign

Folk ser nå nettsider på alt fra små mobiltelefonskjermbilder til projektorer som lyser opp siden av en låve. Begrensningene du møter i mobilnettdesign for den lille iPhone-skjermen, kan føles som å male påskeegg i en strømpebukse. Og selv erfarne fagfolk finner å designe mobile nettsteder som ser bra ut på skjermer av alle størrelser og dimensjoner utfordrende - selv på den slanke iPhone-skjermen.

En av de mest spennende aspektene ved å lage nettsteder for iPhone, iPad og iPod touch er at de gir deg en sjanse til å tenke helt på hvordan du designer for Internett.

Design er svært subjektiv - du elsker heller rosa eller du hater det, og det er sannsynligvis ikke mye vi kan gjøre for å skifte mening. Men bortsett fra fargevalg og skriftpreferanser (som vi forlater opp til deg), er det to tilnærminger til mobilnettdesign for iPhone og iPad:

• Lag flere design for optimal visning på iPhone, iPad og iPod touch. Denne strategien gjør det mulig å få best mulig utnyttelse av skjermen, enten den er i stående eller liggende modus. Du kan også dra nytte av den større iPad-skjermen mens du stikker med en enkelkolonnekonstruksjon som fungerer best på iPhone og iPod touch. Å lage alle disse designene er selvfølgelig mer arbeidsintensiv enn å skape en webside eller mobil nettside. Hvis publikum bruker mobile enheter som iPhone og iPad for å besøke nettstedet ditt, er det imidlertid verdt arbeidet.

• Utforming av en fleksibel sidelayout som kan tilpasse seg størrelsesforskjellene til en iPhone, iPad og til og med bærbare datamaskiner og monitorene folk fortsatt har på skrivebordet. Hvis du velger denne mobile webdesignstrategien, har du ikke den fleksibiliteten som målrettede design tilbyr. Du kan levere et nettsted som tilfredsstiller dine besøkers behov, og fungerer godt på en rekke enheter ved å holde fast ved noen retningslinjer. Først må du ikke bruke Flash i webdesign fordi Flash ikke fungerer i iPhone eller iPad. Du vil også at nettstedet ditt skal fylle skjermen på en iPad i stående modus, så ikke kutte av siden på 600 piksler.I stedet må du formatere siden til 980 piksler bred med minst 980 piksler lang. Sist men ikke minst, når du tester, kan du se nettstedet ditt på enhetene som er viktigst for publikum, og sørg for at bildene lastes raskt og ser klart, uansett hva størrelsene på de besøkende skjermbildene dine er.

Optimalisering av mobilnettdesign for iPhone

Ja, iPhone-skjermen er liten, men du bør slutte å tenke på begrensninger og begynne å fokusere på de fantastiske nye mulighetene for iPhone-webdesign - for eksempel å tiltrekke et publikum av folk på Flyttet, folk som kanskje står rett utenfor din restaurant, for eksempel, mens de ser på menyen på deres iPhones og vurderer å spise der.

Når du designer et nettsted for iPhone, husk følgende nøkkelpunkter:

• Hver pixel teller. Du har ikke mye plass til å leke med, så vær sikker på ikke å kaste bort en enkelt piksel i mobilnettdesignene dine.

• Lag mobil iPhone-design med bare en kolonne med informasjon. Multikolonneoppsett passer bare ikke bra på små skjermer som iPhone-skjermen.

Når du lager et spesielt design for iPhone, må du ta med en lenke tilbake til den stasjonære versjonen av nettstedet ditt. Besøkende på mobilnettstedet ditt kan allerede være kjent med desktopversjonen og kan foretrekke å besøke den versjonen som allerede er kjent for dem, selv om de bruker en iPhone. Den mobile versjonen av Safari nettleseren har til hensikt å vise et hvilket som helst skrivebordsside, så vel som en stasjonær datamaskin gjør, og med unntak av den mindre skjermstørrelsen, kommer den til å bli tett lukket.

Slik lager du iPad-vennlig mobilnettdesign

iPad med den store vakre skjermen kan føre deg til å tro at du ikke trenger å gjøre noe spesielt i ditt mobile webdesign, men de beste webdesignteknikkene for iPad er ikke det samme som for skrivebordet.

Selv om iPad gir langt mer skjerm fast eiendom enn iPhone, skaper det fortsatt nye utfordringer for mobile webdesignere. Husk følgende når du designer mobile nettsteder til iPad:

• Design for begge retninger: Muligheten til å slå iPad fra landskap til portrettmodus endrer dramatisk skjermrommet til webdesign.

• Få mest mulig ut av HTML5 og CSS 3: Når du designer for iPad, trenger du ikke å bekymre deg for alle nettleserne som fortsatt brukes på stasjonære datamaskiner, slik at du kan dra full nytte av siste i disse webdesignteknologiene.

• Test iPad-design på en iPad: Når du lager innhold til iPad, bruker du sannsynligvis en maskin som er ganske forskjellig fra iPad. Ikke test arbeidet ditt på samme sted du utvikler det. Du må kanskje fortsatt gjøre det meste av design og koding av iPad-sidene dine mens du sitter på en stasjonær eller bærbar datamaskin, men når du er ferdig, stå opp, strekk ut og sett deg i en behagelig stol for å se hvordan nettstedet ditt ser ut og fungerer på en iPad.

Test webdesignene dine i forskjellige belysningssituasjoner. Ta iPad-en på utsiden for å se hvordan sidene dine ser i lyse sollys, og ta iPad med deg for å se hvordan mobilnettdesignet ditt ser ut når du skjuler deg i mørket under dekslene.(Ikke bare elsker du ikke å ha en lommelykt til å lese på iPad, måten vi gjorde da vi ønsket å bli sent for å lese bøker som barn?)