iPhone & iPad Web-Design für Dummies

Die Leute sehen jetzt Web-Seiten über alles, von kleinen Handy-Bildschirme Projektoren, die die Seite einer Scheune leuchten. Die Einschränkungen, die Sie in der mobilen Web-Design für den kleinen iPhone-Bildschirm stehen kann wie Malerei Ostereier in einem Zwangsjacke fühlen. Und selbst erfahrene Profis finden mobilen Gestaltung von Websites, die auf den Bildschirmen in jeder Größe gut aussehen und Dimensionen herausfordernd - auch auf dem glatten aussehende iPhone-Bildschirm.

Einer der spannendsten Aspekte von Websites für das iPhone, iPad und iPod touch zu schaffen ist, dass sie Ihnen eine Chance bieten, um vollständig zu überdenken, wie Sie für das Internet entwickeln.

Design ist sehr subjektiv - Sie entweder lieben rosa oder man hasst es, und es ist wahrscheinlich nicht viel wir Ihre Meinung zu ändern tun können. Aber über die Farbwahl und die Schrifteinstellungen (die wir Ihnen überlassen), hier sind zwei Ansätze für mobile Web-Design für das iPhone und iPad:

  • Erstellen Sie mehrere Designs für eine optimale Darstellung auf dem iPhone, iPad und iPod touch. Diese Strategie ermöglicht es Ihnen, die bestmögliche Nutzung des Bildschirms zu machen, ob es im Hoch- oder Querformat. Sie können auch die Vorteile des größeren iPad-Bildschirm nehmen, während sie mit einer einzigen Spalte Design kleben, die am besten auf dem iPhone und iPod touch funktioniert. Erstellen all diese Entwürfe ist natürlich, arbeitsintensiver als eine Webseite oder mobile Web-Seite zu erstellen. Wenn Sie Ihr Publikum mobile Geräte wie das iPhone und iPad verwendet Ihre Website zu besuchen, jedoch ist die Arbeit der Mühe wert.

  • Entwerfen einer flexiblen Seitenlayout, die auf die Größenunterschiede von einem iPhone, iPad und sogar Laptops und Monitore Menschen immer noch halten auf ihren Schreibtischen anpassen können. Wenn Sie diese mobile Web-Design-Strategie wählen, Sie haben nicht die Flexibilität, die Designs gezielt anbieten. Sie können eine Website liefern, die die Bedürfnisse Ihrer Besucher gerecht wird und funktioniert gut auf einer Reihe von Geräten, indem auf ein paar Richtlinien kleben. Verwenden Sie zuerst die Flash nicht in das Design Ihrer Website, da kein Flash auf dem iPhone oder iPad funktioniert. Außerdem möchten Sie Ihre Website auf den Bildschirm auf einem iPad im Hochformat zu füllen, also nicht die Länge Ihrer Seite bei 600 Pixeln abgeschnitten. Stattdessen Größe der Seite auf 980 Pixel breit und mindestens 980 Pixel lang. Last but not least, wenn bei der Prüfung, Ihre Website auf den Geräten wichtigsten, um Ihr Publikum zu sehen, sicherstellen, dass die Bilder werden schnell geladen und klar aussehen, egal was die Größe Ihrer Besucher Bildschirme.

Optimieren Sie Ihre Mobile Web-Designs für das iPhone

Ja, die iPhone-Bildschirm ist klein, aber Sie sollten über Einschränkungen aufhören zu denken und beginnen auf die erstaunlichen neuen Möglichkeiten iPhone Web-Design-Angebote konzentrieren - wie zum Beispiel ein Publikum von Menschen in Bewegung anzuziehen, Menschen, die direkt vor der Gaststätte kann stehen für Beispiel, während sie sehen Ihr Menü auf ihren iPhones und prüfen, ob es zu essen.

Wenn eine Website für das iPhone entwerfen, beachten Sie die folgenden wichtigen Punkte:

  • Jedes Pixel zählt. Sie haben nicht viel Platz zum Spielen, so sicher sein, nicht ein einzelnes Pixel in Ihrem mobilen Web-Designs zu verschwenden.

  • Erstellen von mobilen iPhone-Designs mit nur einer Spalte von Informationen. Mehrspaltige Layouts passen einfach nicht gut auf kleinen Bildschirmen wie dem iPhone-Bildschirm.

Wenn Sie ein spezielles Design für das iPhone erstellen, müssen Sie einen Link zurück auf die Desktop-Version von Ihrer Website einbinden. Die Besucher Ihrer mobilen Website kann bereits vertraut sein mit der Desktop-Version und es vorziehen, kann die Version zu besuchen, die ihnen bereits vertraut ist, auch wenn sie ein iPhone verwenden. Die mobile Version des Web-Browser Safari soll auch jede Desktop-Website anzuzeigen, wie ein Desktop-Computer, und mit Ausnahme der kleineren Bildschirmgröße, kommt es verflixt nahe.

So erstellen Sie iPad Freundlich Mobile Web-Designs

Das iPad mit seinem großen schönen Bildschirm, können Sie führen Sie zu glauben, nichts tun müssen, um speziell in Ihrem mobilen Web-Design, aber die besten Web-Design-Techniken für das iPad sind nicht die gleichen wie die für den Desktop.

Obwohl das iPad weit mehr Bildschirmfläche als das iPhone bietet, schafft es immer noch neue Herausforderungen für mobile Web-Designer. Beachten Sie folgendes bei der iPad mobilen Gestaltung von Websites:

  • Entwerfen Sie für beide Richtungen: Die Möglichkeit, das iPad von Querformat auf Hochformat drehen dramatisch verändert den Platz auf dem Bildschirm für Ihre Web-Designs.

  • Machen Sie das Beste von HTML5 und CSS 3: Wenn Sie für das iPad sind die Gestaltung, Sie müssen nicht über alle Web-Browser noch auf Desktop-Computern verwendet Sorge, so können Sie alle Vorteile der neuesten in diesen Web-Design-Technologien nehmen.

  • Test-iPad-Designs auf einem iPad: Wenn Sie Inhalte für das iPad erstellen, sind Sie eine Maschine wahrscheinlich verwenden, die aus dem iPad ganz anders ist. Sie nicht an der gleichen Stelle testen Sie Ihre Arbeit Sie es entwickeln. Sie können immer noch den größten Teil der Design und Programmierung Ihres iPad-Sites zu tun haben, während auf einem Desktop oder Laptop-Computer sitzen, aber wenn Sie fertig sind, aufstehen, strecken, und in einem bequemen Stuhl, um zu sehen, wie Sie Ihre Website zu gehen sitzen sieht aus und funktioniert auf einem iPad.

Testen Sie Ihre Webseiten-Designs in verschiedenen Beleuchtungssituationen. Nehmen Sie die außerhalb iPad zu sehen, wie Ihre Seiten in hellem Sonnenlicht sehen, und bringen Sie das iPad mit dir ins Bett zu sehen, wie Ihr Handy Web-Design aussieht, wenn Sie in der Dunkelheit unter der Decke verstecken. (Nicht lieben Sie brauchen nicht nur eine Taschenlampe auf dem iPad zu lesen, die Art, wie wir damals, als wir lange aufbleiben wollten Bücher als Kinder zu lesen?)

Menü