Maak specifieke webontwerpen voor iPhone en iPad - dummies

Als u uw pagina's wilt optimaliseren om er op hun best uit te zien, moet u rekening houden met de schermgrootte en resolutieverschillen tussen de iPhone en de iPad. Let op het vereenvoudigde diagram dat een algemene manier illustreert waarop ontwerpers hun pagina's voor elk apparaat wijzigen: de lay-out aanpassen voor de beste pasvorm op de verschillende schermformaten.

Vereenvoudig uw ontwerpen voor het kleinere iPhone-scherm

Op de iPad, weergegeven aan de linkerkant van de figuur, ziet u voldoende ruimte voor een tweede kolom zodat de zijdelingse zijden kunnen worden uitgelijnd aan de rechterkant van het artikel. Aan de rechterkant van de figuur ziet u dat het de beste praktijk is om uw ontwerp te beperken tot één kolom op de kleinere schermen van de iPhone en iPod touch.

Als je naar de figuur kijkt en denkt: "Wacht even - de iPad bevindt zich in de liggende modus en de iPhone bevindt zich in portretmodus, en dat maakt een groot verschil," je hebt gelijk.

Bekijk dit cijfer om te zien hoe de American Airlines-site slechts één kolom gebruikt voor iPhone-ontwerp, zelfs in liggende modus, en gebruikt meerdere kolommen op de iPad, zelfs in de staande modus.

Let op op de iPhone dat het team van American Airlines niet alleen het ontwerp heeft gewijzigd, maar ook de informatie die wordt weergegeven, met de nadruk op de elementen die het meest belangrijk zijn voor een persoon in beweging, inclusief eenvoudige vluchtcontrole -ins.

Voorbeeld van meerdere ontwerpen in Dreamweaver

Zorg ervoor dat u het Dreamweaver HTML5-pakket hebt als u Adobe Dreamweaver gebruikt. Deze extensie is opgenomen in updates voor Dreamweaver CS5 en latere versies en kan worden toegevoegd als een uitbreiding op Dreamweaver-versie 3 en 4. Zoals u in dit voorbeeld kunt zien, kunt u met de HTML5-extensie eenvoudig drie verschillende versies van uw stijlpagina's bekijken. tijd door ze allemaal in een apart deel van het scherm weer te geven.

Het Dreamweaver HTML5-pakket voor Dreamweaver CS3 en CS4 is een handige manier om snel uw ontwerpen te controleren om te zien hoe verschillende CSS-stijlpagina's hierop van invloed zijn, maar het ondersteunt niet alle varianten van HTML5 en CSS 3 nog. Houd er ook rekening mee dat het beperkte "onroerend goed" in de verticale verhouding van deze voorbeelden het moeilijk maakt om ervoor te zorgen dat u de volledige ruimte gebruikt die beschikbaar is in de portretmodus.

Als u Adobe Dreamweaver wilt gebruiken om een ​​blog te bekijken die is gemaakt met WordPress, zoals de blog die in het voorbeeld wordt getoond, moet u uw computer instellen als een webserver - een proces dat niet zo moeilijk is als u zich misschien zou voorstellen. U kunt gedetailleerde instructies vinden om Dreamweaver en WordPress op uw computer te laten werken.