IPhone & iPad Webontwerp voor Dummy's Cheat Sheet - dummies

Veel mensen die surfen op het mobiele web doen dit op een iPhone of iPad, dus het ontwerpen van mobiele websites die op deze apparaten zijn gericht, is logisch voor veel mensen. webontwerpers. Begin met het maken van uw webontwerp voor de iPhone of iPad door een ontwerpstrategie te kiezen. Als u besluit om gerichte websites voor de iPhone en iPad te ontwerpen, begin dan met het begrijpen van de basisprincipes van het webontwerp die ervoor zorgen dat een site goed werkt voor iPhone- of iPad-gebruikers.

Een strategie kiezen voor uw mobiele webontwerp

Mensen bekijken nu webpagina's over alles, van kleine schermpjes voor mobieltjes tot projectoren die aan de zijkant van een schuur branden. De beperkingen waarmee je te maken hebt in mobiel webontwerp voor het kleine iPhone-scherm, kunnen aanvoelen als het schilderen van paaseieren in een keurslijf. En zelfs ervaren professionals vinden het ontwerpen van mobiele websites die er geweldig uitzien op schermen van elke omvang en dimensie uitdagend - zelfs op het gelikte iPhone-scherm.

Een van de meest opwindende aspecten van het maken van websites voor de iPhone, iPad en iPod touch is dat ze je de kans bieden om volledig na te denken over hoe je ontwerpt voor internet.

Design is hoogst subjectief - u houdt van roze of u haat het en er is waarschijnlijk niet veel dat we kunnen doen om van gedachten te veranderen. Maar naast de kleurkeuzes en lettertypevoorkeuren (die we aan u overlaten), volgen hier twee benaderingen van mobiel webontwerp voor de iPhone en iPad:

• Creëer meerdere ontwerpen voor een optimale weergave op de iPhone, iPad en iPod touch. Met deze strategie kunt u het scherm optimaal gebruiken in staande of liggende modus. U kunt ook profiteren van het grotere iPad-scherm terwijl u vasthoudt aan een ontwerp met één kolom dat het beste werkt op de iPhone en iPod touch. Het maken van al deze ontwerpen is natuurlijk arbeidsintensiever dan het maken van een webpagina of mobiele webpagina. Als je publiek mobiele apparaten zoals de iPhone en iPad gebruikt om je website te bezoeken, is het werk de moeite waard.

• Ontwerp van een flexibele pagina-indeling die zich aan de grootteverschillen van een iPhone, iPad en zelfs laptops en de monitoren die mensen nog steeds op hun bureau bevinden, kan aanpassen. Als u deze mobiele webontwerpstrategie kiest, heeft u niet de flexibiliteit die gerichte ontwerpen bieden. U kunt een website leveren die voldoet aan de behoeften van uw bezoekers en goed werkt op een reeks apparaten door een paar richtlijnen te volgen. Ten eerste, gebruik Flash niet in uw websiteontwerp, omdat Flash niet werkt op de iPhone of iPad. Ook wilt u dat uw site in de portretmodus het scherm van een iPad vult, dus snij de lengte van uw pagina niet af met 600 pixels.Vergroot in plaats daarvan de pagina tot 980 pixels breed met minimaal 980 pixels lang. Last but not least, bekijk uw site tijdens het testen op de apparaten die het belangrijkst zijn voor uw publiek, zorg ervoor dat de afbeeldingen snel worden geladen en zien er duidelijk uit, ongeacht de grootte van de schermen van uw bezoekers.

Uw mobiele webontwerpen optimaliseren voor de iPhone

Ja, het iPhone-scherm is klein, maar u moet stoppen met nadenken over beperkingen en u richten op de geweldige nieuwe mogelijkheden die iPhone-webontwerp biedt, zoals het aantrekken van een publiek van mensen op de verhuizing, mensen die misschien net buiten je restaurant staan, terwijl ze je menu bekijken op hun iPhones en overwegen of ze daar willen eten.

Onthoud bij het ontwerpen van een website voor de iPhone de volgende belangrijke punten:

• Elke pixel telt. Je hebt niet veel ruimte om mee te spelen, dus zorg ervoor dat je geen enkele pixel verliest in je ontwerpen voor mobiel internet.

• Maak mobiele iPhone-ontwerpen met slechts één kolom met informatie. Veelkleurige lay-outs passen gewoon niet goed op kleine schermen zoals het scherm van de iPhone.

Wanneer u een speciaal ontwerp voor de iPhone maakt, vergeet dan niet om een ​​link terug te zetten naar de desktopversie van uw website. Bezoekers van uw mobiele website zijn mogelijk al bekend met de desktopversie en bezoeken misschien de versie die hen al bekend voorkomt, zelfs als ze een iPhone gebruiken. De mobiele versie van de Safari-webbrowser is erop gericht om elke desktopsite en een desktopcomputer te tonen, en met uitzondering van de kleinere schermafmetingen, komt deze verdraaid in de buurt.

Hoe u iPad-vriendelijke mobiele webontwerpen maakt

De iPad, met zijn grote, mooie scherm, kan u doen geloven dat u niets speciaals hoeft te doen in uw ontwerp voor mobiel internet, maar de beste webontwerptechnieken voor de iPad zijn niet hetzelfde als die voor de desktop.

Hoewel de iPad veel meer schermruimte biedt dan de iPhone, creëert deze nog steeds nieuwe uitdagingen voor mobiele webontwerpers. Onthoud het volgende bij het ontwerpen van mobiele websites voor de iPad:

• Ontwerp voor beide richtingen: De mogelijkheid om de iPad te veranderen van liggende naar portretmodus verandert de schermruimte voor uw webontwerpen drastisch.

• Haal het beste uit HTML5 en CSS 3: Wanneer u ontwerpt voor de iPad, hoeft u zich geen zorgen te maken over alle webbrowsers die nog steeds op desktopcomputers worden gebruikt, zodat u ten volle kunt profiteren van de nieuwste in deze webontwerptechnologieën.

• Test iPad-ontwerpen op een iPad: Wanneer u inhoud voor de iPad maakt, gebruikt u waarschijnlijk een machine die nogal verschilt van de iPad. Test je werk niet op dezelfde plek waar je het ontwikkelt. U moet misschien nog steeds het grootste deel van het ontwerp en de codering van uw iPad-sites uitvoeren terwijl u op een desktop- of laptopcomputer zit, maar wanneer u klaar bent, sta op, strek u uit en ga zitten in een comfortabele stoel om te zien hoe uw website werkt ziet eruit en werkt op een iPad.

Test de ontwerpen van uw webpagina's in verschillende lichtsituaties. Neem de iPad mee naar buiten om te kijken hoe uw pagina's er in fel zonlicht uitzien en breng de iPad mee naar bed om te zien hoe uw mobiele webontwerp eruitziet als u zich in het donker onder de omslagen verstopt.(Vind je het niet leuk om geen zaklamp op de iPad te hoeven lezen, zoals we deden toen we te laat wilden blijven om boeken als kinderen te lezen?)