Share
Einige Experten prognostizieren, dass mobile Geräte innerhalb von fünf Jahren zum dominierenden Medium für das Surfen im Internet werden und das Surfen auf Desktop-Computern überholen. Unabhängig von der Genauigkeit dieser Projektion ist es klar, dass das Formatieren von Websites für mobiles Betrachten zu einem festen Bestandteil von Webdesign und -entwicklung werden muss. Es gibt natürlich viele Möglichkeiten, dies zu erreichen. CSS3 bietet jedoch ein ziemlich umfangreiches Toolset für die mobile Formatierung, wobei die Browserfunktionen des Clients verwendet werden und nicht die Back-End-Vorlage.
Es gibt ein paar Punkte, über die Sie nachdenken sollten, bevor Sie mit der Gestaltung eines Layouts beginnen.
Erstens, was sollte man bei der Gestaltung von mobilen Browsern beachten? Nun, hier sind ein paar Dinge…
"Der allgemeine Punkt ist, im Voraus zu wissen, wie Ihre Website in verschiedenen Browsern aussehen wird Vor es zu sehen. "
Zweitens sollten Sie die Browserunterstützung berücksichtigen. Der sprichwörtliche "Elefant im Raum" ist natürlich IE. Gute Nachrichten aber! Wie sich herausstellt, müssen Websites nicht in jedem Browser genau gleich aussehen. Solange der Inhalt der Website nicht beeinträchtigt wird, bietet ein Browser, der CSS3 nicht verarbeiten kann, im Allgemeinen immer noch ein mehr als akzeptables Erlebnis. Der allgemeine Punkt ist, im Voraus zu wissen, wie Ihre Website in verschiedenen Browsern aussehen wird Vor es zu sehen.
Msgstr "Halten Sie die Markierung einfach und sauber."
Wir möchten nicht nur gültiges HTML erstellen, sondern auch so weit wie möglich vereinfachen. Obwohl es immer eine gute Idee war, HTML rationalisiert und frei von unnötigen DIVs zu halten, ist es mit dem zunehmenden mobilen Webbrowsen jetzt noch wichtiger. Viele der Effekte, für die 7 verschachtelte DIV-Tags erforderlich waren, können jetzt mit ein wenig CSS3 reproduziert werden.
Da dies kein HTML5-Tutorial ist, halte ich mich an XHTML strict. Aus diesem Grund kann ein Großteil der Markups hier mit Hilfe einiger HTML5-Elemente noch sauberer werden. Hier ist ein bisschen HTML für ein typisches Layout. Wir haben eine Seite mit Kopf- und Fußzeile, Inhaltsbereich und Seitenleiste.
Mein Blog
Ein Eintrag über etwas
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Fusce Lorem Elit, Suscipit Tempus Pretium Eget, Varius ut Erat. Donec lobortis ist ein Sitz von Felis Pellentesque und Egestas Sapien Iculis. Maecenas eget quam nisi. Klasse Aptent Taciti Sociosqu Ad Litora Pro Conubia Nostra Per Inceptos Himenaeos.
Mauris nunc metus, pellentesque eget porta ut, facilisis ut metus. Etiam dignissim egestas semper. Aliquam tididunt tortor non mi ultricies quis interdum quam scelerisque. Aenean risus libero, aliquam vel rhoncus sed, Elementum eu leo. Pellentesque vitae ante urna, aber Rhoncus sapien. In iaculis tristique lobortis. Nulla feugiat elit bei odio dictum dignissim. Tristique lacus nec justo porttitor egestas. Etiam vitae arcu risus bei interdum lacus. Ut dignissim, dui eu imperdiet accumsan, dui mauris hendrerit leo, fringilla mi ipsum vitae orci. Nulla libero quam, euismod eget rutrum sed, ullamcorper vitae felis. Mauris aliquam dignissim interdum. Sed sagittis blandit urna, sitzen amet pellentesque lorem egestas sed. Nam adipiscing, lorem nicht ornare volutpat, Turpis ante sagittis elite, hendrerit arcu nunc ut est. Vivamus bei arcu felis, eget porta odio.
Ein Eintrag über etwas anderes
Lebenslauf auf einen Blick lobortis tincidunt laoreet et enim. Maecenas purus magna, Gewürzmischung bei Mattis Vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque en faucibus ac. Etiam Suscipit Fringilla mi, und zeit mauris convallis sitzen amet. Phasellus eros dolor, Tempus bei Pulvinar ac, Mollis sed eros. Morbi viverra pellentesque tellus und tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus und eget felis. Donec ut malesuada lorem.
Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sitzen amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed Semper Facilisis est in luctus. Etiam et quam eine Ligula laoreet iaculis vel quis leo. Etiam et purus ist ein feudiatisches Fahrzeug. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.
Ein dritter Eintrag
Lebenslauf auf einen Blick lobortis tincidunt laoreet et enim. Maecenas purus magna, Gewürzmischung bei Mattis Vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque en faucibus ac. Etiam Suscipit Fringilla mi, und zeit mauris convallis sitzen amet. Phasellus eros dolor, Tempus bei Pulvinar ac, Mollis sed eros. Morbi viverra pellentesque tellus und tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus und eget felis. Donec ut malesuada lorem.
Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sitzen amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed Semper Facilisis est in luctus. Etiam et quam eine Ligula laoreet iaculis vel quis leo. Etiam et purus ist ein feudiatisches Fahrzeug. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.
Blog-Menü
Abonnieren
- RSS
Sozial
Kategorien
- etwas
- Nichts
- Alle Dinge
- Keine Dinge
Archiv
- Juni 2010
- Mai 2010
- April 2010
- März 2010
© Niemand im Jahr 2010
Wie Sie sehen, ist es ein recht einfaches und typisches Blog-Layout mit einigen Artikeln und einigen Menüoptionen in der Seitenleiste.
In unserem head-Element werden alle typischen Elemente wie Stylesheets, Inhaltstyp, Titel usw. eingefügt. Es gibt jedoch ein zusätzliches Element, mit dem wir mobile Browser glätten können.
Dies ist ein kleines Metadaten-Tag, das von Apple vorgeschlagen wurde, um iPhones beim Rendern einer Seite zu unterstützen. Es passt die Seite im Wesentlichen automatisch an das Ansichtsfenster an und verhindert das Zoomen. Einige andere mobile Browser unterstützen dies ebenfalls, einschließlich des nativen Browsers von Blackberry. In meinen Tests schadet das Beibehalten dieses Tags dem Desktop-Browsing überhaupt nicht. Also stecken wir es einfach in den Kopf und vergessen es.
In diesem speziellen Lernprogramm wird der oben genannte HTML-Code in zwei Layouts unterteilt. Ein Layout ist auf das mobile Surfen und eines auf das Desktop-Browsing ausgerichtet. In der Praxis wird es wahrscheinlich nützlich sein, ein solches Layout in verschiedene "Ziele" aufzuteilen. Der Einfachheit halber konzentriert sich dieses Tutorial jedoch nur auf diese beiden.
Der Zweck dieses Tutorials besteht nicht darin, über reiche Typografie oder brillantes grafisches Design zu sprechen. Daher ist die Präsentation hier sehr einfach gehalten. Wichtig ist der Denkprozess, der das Stylesheet antreibt.
Das Hauptziel dabei ist es, über die Gestaltung eines mobilen Layouts nachzudenken zuerst. Der Grund dafür ist, dass das, was Sie für ein mobiles Gerät haben, wahrscheinlich auch auf einem Desktop funktioniert. Anstatt mit einem zusammengewürfelten mobilen Layout und einem brillanten Desktop-Layout zu enden, beginnen Sie mit einem brillanten mobilen Layout und verbessern es für den Desktop. Dadurch wird auch sichergestellt, dass Ihre Website nicht an Publikum verliert, wenn die Welt mobil wird.
Dieser Ansatz ist inspiriert von Luke Wroblewski, der dieses Jahr auf der An Event Apart in Boston sprach. Im Mittelpunkt seiner Präsentation stand das Denken "Mobile First"..
Während dieses Tutorial seine Präsentation nicht als Ganzes festhält, schlug ein Stück davon mehr als der Rest (für mich). Der gegenwärtige Trend ist, dass das Design zuerst auf der Desktop-Version einer Website funktioniert, diese dann abmontiert und bei Bedarf eine mobile Website zusammenstellt. Stattdessen sollten wir zuerst mit der Entwicklung für die mobile Welt beginnen und dieses Design dann wie gewünscht für den Desktop ändern. Das Rationale ist im Wesentlichen eine fortschreitende Verbesserung. Wenn das Design auf mobilen Geräten nützlich ist, funktioniert es auch auf dem Desktop. Das Gegenteil trifft jedoch normalerweise nicht zu.
Lassen Sie uns einen Moment lang über das mobile Surfen nachdenken. Lange Bildschirme sind schwer zu bewältigen. Nehmen wir also die Einträge der Blog-Menüliste und machen sie einfacher zu handhaben.
.Seitenleiste ul border-left: solid 1px #ccc; Auffüllen: 0 0 0 5px; .sidebar ul li display: inline; Auffüllen: 0 5px 0 0px; Rahmen rechts: fest 1px #ccc;
Das sollte uns ein schönes, sauber aussehendes Menü mit einigen Pfeifen aussehenden Trennzeichen geben. Sie werden feststellen, dass ich das Menü nicht vom unteren Bildschirmrand weg bewegt habe. Menüs am unteren Rand können beim mobilen Surfen hilfreich sein. Wenn Sie darüber nachdenken, durch eine Webseite zu scrollen, müssen Sie, wenn Sie unten sind, ganz nach oben scrollen, um an eine andere Stelle zu gelangen. Das Scrollen kann je nach Gerät etwas mühsam sein. Es gibt Vor-und Nachteile dieser Methode, aber in diesem Fall denke ich, dass es gut funktioniert.
Ich möchte jedoch das RSS auf das oberste Banner verschieben, also machen wir das auch.
h3.subscribe display: none; .sidebar ul.subscribe position: absolut; oben: 25px; rechts: 10px; Grenze: keine; Farbe: #fff; .sidebar ul.subscribe li border: keine;
Abgesehen davon ist der Rest so ziemlich nur die Schriftgröße der Überschriftenelemente und die Farbe der Anker. Im Sinne dieses Tutorials habe ich der Einfachheit halber einen CSS-Reset an der Oberseite des Blattes eingefügt. Das vollständige CSS-Datenblatt finden Sie im Quellcode dieses Tutorials.
Wie Sie sehen, ist das mobile Styling nicht besonders, wenn man sich dem Design aus der Perspektive des Mobile-First nähert. Statt zu denken, "wie soll das auf meinem Bildschirm aussehen?", Denken Sie, "wie kann ich das Styling verwenden, um dies auf einem mobilen Gerät am nützlichsten zu machen."
Falls Sie es nicht erraten haben, wird diese ganze Sache durch CSS3-Medienabfragen gesteuert. Wenn Sie nicht vertraut sind, können Sie mit der Medienabfrage Deklarationen basierend auf verschiedenen Bedingungen ein- und ausblenden. Eine solche Bedingung und das Thema dieses Blattes sind die Bildschirmabmessungen.
Das vollständige CSS finden Sie in der diesem Tutorial beigefügten Quelle, aber lassen Sie uns dies für einen Moment untersuchen:
.pg Breite: 800px; Marge: 0 auto;
In diesem Fall möchten wir nicht wirklich eine Seitenbreite von 800px, wenn wir nicht sicher sind, dass das Browserfenster des Benutzers mindestens 800px breit ist. Andernfalls erhalten wir eine dieser lästigen horizontalen Bildlaufleisten.
Wir packen diese Deklaration (zusammen mit mehreren anderen) in eine Medienabfrage.
@media all und (min-width: 800px) .pg width: 800px; Marge: 0 auto;
Das liest sich ziemlich leicht, richtig? "Alle" bezieht sich auf "diesen Stil für alle Arten von Medien verwenden." Es gibt andere Dinge, die hier eingesetzt werden können, wie beispielsweise "Drucken" für Drucker, aber es gibt keine einheitliche Unterstützung. Jedenfalls wird "alles" dafür gut funktionieren.
Wir werden auch eine Menge anderer Dinge in diese Medienfrage stellen, aber das Wichtigste, an das man denken sollte, ist im Wesentlichen überschreiben vorherige Stile und fügen Sie einige neue hinzu, um das neue Layout zu erreichen. Dadurch können Browser, die keine Medienabfrage unterstützen, einfach auf das ursprüngliche Design zurückgreifen. Obwohl sie es sind optimiert Für mobile Geräte ist es nicht verkehrt, dieses Layout auf einem weniger leistungsfähigen Desktop-Browser anzuzeigen.
Zum Beispiel verschieben wir diese Seitenleiste aus dem unteren Bereich und lassen die Listen wieder wie Listen aussehen.
@media all und (min-width: 800px) .sidebar ul border: keine; Polsterung: 0; .sidebar ul li display: block; Polsterung: 0; Grenze: keine; h3.subscribe Anzeige: Block; .sidebar ul.subscribe position: statisch; oben: auto; rechts: auto; Grenze: erben; Farbe: erben; .sidebar ul.subscribe li border: erben;
Dadurch wird die Sidebar nach links verschoben (kombiniert mit einigen anderen Floats im Stylesheet) und der Subskription wird wieder dort platziert, wo er auf der Site in einer Breite von mindestens 800px angezeigt wird.
Wenn Sie also die Quelle in einem Browser öffnen und ihre Größe horizontal ändern, können Sie beobachten, wie das Layout zwischen dem Desktop-Format und dem für Mobilgeräte geeigneten Format wechselt
Sie fragen sich vielleicht, warum 800px? Gibt es etwas Magisches über eine Breite von 800px? In der Tat würde ich behaupten, dass es zu breit ist. Mit der Einführung von "Snap" in Windows 7 würde ich argumentieren, dass 600px die neue Zielbreite für eine Desktop-Website sein sollte. Auf diese Weise kann der Browser auf einem 1280px-Bildschirm nach rechts oder links "geschnappt" werden und behält trotzdem das Layout bei. Dies ist jedoch wirklich weder hier noch dort. Seien Sie sich bewusst, dass 800px nichts Besonderes ist.
Wichtig: Die Website wird als mobile Version in IE8 und darunter gestaltet. Ist das okay? Ich glaube schon. Das habe ich auch schon gemacht und bisher hat mich niemand verhaftet. In IE9 wird außerdem die Unterstützung für Medienabfragen versprochen.
Dies ist nicht der einzige Weg, dies zu erreichen. Der Zweck dieses Tutorials bestand jedoch darin, eine sehr praktische Verwendung für die Medienabfrage zu zeigen und einige Ideen für mobile Layouts zu präsentieren, die nur auf CSS basieren.
Das heißt, hier sind ein paar andere Möglichkeiten, um ein mobiles Layout zusammenzustellen…
Es gibt wahrscheinlich mehrere andere Methoden, um das mobile Surfen im Internet zu handhaben, aber oft kommt es zu einer Art Hybrid. Unabhängig davon, ob es sich um ein fließendes Layout mit bestimmten "Kick" -Punkten auf der Grundlage einer Medienabfrage oder einer Umleitung von Subdomains mit verschiedenen Vorlagen handelt, ist es wichtig, dass Sie bereits im Voraus mobile Layouts planen, damit Ihre Websites im Vergleich zum Internet immer weniger nützlich werden die nächsten 5 Jahre.
Accentsconagua