Seite Entwürfe für Quer- und Hochformatansichten

Seite Entwürfe für Quer- und Hochformatansichten - Dummies

Wenn Sie ein iPhone oder iPad einschalten, passt sich die Ausrichtung einer Webseite automatisch an. .. Der Safari-Webbrowser vergrößert (oder verkleinert) Webseiten auf den Bildschirm, ist aber nicht perfekt. Selbst wenn Safari Ihre Seiten gut an den Raum anpassen kann, leiden Ihre Entwürfe möglicherweise darunter:

  • Wenn die Seite vergrößert wird, um auf einem iPad in den Landschaftsmodus zu passen, können optimierte Bilder unscharf werden.

  • Wenn Sie die Seitengröße verringern, kann der Text nicht mehr gelesen werden.

Seit Jahren haben die meisten Menschen die Breite und Höhe von Webseiten für die am häufigsten verwendeten Computermonitore optimiert:

  • Breite: In den frühen Tagen des Internets bedeutete die Verwendung dieser Strategie, dass Sie Designs erstellten, die nicht mehr als 780 Pixel breit, so dass sie in eine Monitorauflösung von 800 x 600 Pixeln passen würden. Die meisten Benutzer wählten 780 Pixel, weil diese Einstellung für die Bildlaufleiste auf beiden Seiten des Browserfensters etwas Platz ließ.

    In den letzten Jahren haben die meisten Webdesigner die Zielgröße von 960 bis 980 Pixeln aktualisiert, da die größeren Monitore erschwinglicher und verbreiteter geworden sind. Das passt bequem auf Bildschirme mit einer Auflösung von 1024 x 768 Pixel.

  • Höhe: Obwohl sich die meisten Designer über die Breite eines für diese Bildschirmgrößen optimierten Designs einig sind (Geben oder Nehmen 10 oder 20 Pixel), wurde heftig darüber diskutiert, ob Webdesigns in die Höhe dieser Designs passen sollten. ..

    Die Theorie zur Begrenzung der Höhe von Webseiten basiert auf Studien, die darauf hindeuten, dass Benutzer nicht gerne auf einer Seite nach unten scrollen und dass Inhalte, die beim ersten Laden der Seite nicht sichtbar sind, ignoriert werden. .. Möglicherweise hat Scrollen im Laufe der Jahre einen schlechten Ruf bekommen. Es ist an der Zeit, die Vorstellung aufzugeben, dass Webdesigns nie mehr als 600 Pixel auf einer Seite ausdehnen sollten.

Diese Abbildung veranschaulicht, warum das iPad die Debatte über die Dauer einer Webseite für immer verändert hat. Hier sehen Sie einen Screenshot der ING Direct-Website, wie sie im Hochformat auf einem iPad angezeigt wird. In Fairness gegenüber den Designern von ING Direct passt sich der Standort bequem an die Grenzen eines Monitors mit einer Auflösung von 800 x 600 Pixeln an.

Durch die Beschränkung des Inhalts der Website auf den 600-Pixel-Cutoff nimmt das Design jedoch nur etwa ein Drittel des iPad-Bildschirms im Hochformat ein. Selbst im Querformat auf dem iPad nimmt das Design nicht den vertikalen Raum ein, sondern füllt das untere Viertel des Bildschirms mit der leuchtend orangenen Hintergrundfarbe.

Wenn Sie nur ein Design für eine Website erstellen möchten, ist es am besten, die Seiten mit einer Breite von 980 Pixeln zu gestalten und diese dann um mindestens 980 Pixel auf dem Bildschirm zu erweitern.Wenn Sie dies tun, passen sowohl das iPad als auch das iPhone das Design automatisch an, um den Bildschirm im Quer- und Hochformat auszufüllen, indem Sie die Größe anpassen.

Wenn Sie sich jedoch wirklich für Design interessieren und möchten, dass Ihre Seiten auf dem iPad und dem iPhone am besten aussehen, sollten Sie zwei verschiedene Designs erstellen.

Die Regeln für Cascading Style Sheets (CSS) enthalten die Möglichkeit, mehrere Stylesheets zu erstellen, um die Größe und die Funktionen der einzelnen Geräte optimal nutzen zu können. Beispielsweise können Sie Stile erstellen, die auf die Quer- oder Hochformatausrichtung des iPhones oder iPads ausgerichtet sind (wie im hier gezeigten Design).

Ebenso können Sie verschiedene Geräte mit unterschiedlichen Stylesheets ansprechen, indem Sie einen Styleset für eine Seite erstellen, wenn sie auf einem Desktop-Computer angezeigt wird, und eine andere Gruppe von Styles, wenn die Seite an einen Drucker gesendet wird.