Wenn Sie mobile Plattformen in der Vergangenheit ignoriert haben, kann es einschüchternd sein, endlich den Sprung zu machen und das mobile Surfen auf Ihren vorhandenen Websites zu unterstützen. Es gibt so viel zu lernen, eine Million Techniken zur Auswahl und eine unbegrenzte Menge an Arbeit, die Sie möglicherweise in bestehende Projekte stecken könnten.
Eine Frage, die Designer und Websitebetreiber immer wissen möchten: Wie kann ich schnell mobile Unterstützung hinzufügen? Manchmal haben Sie nicht das Budget, um bei Null anzufangen, und möchten dennoch ein bisschen mobile Güte. Heute gehe ich Ihnen durch fünf Dinge, die Sie tun können, um Ihre Website mobiler zu gestalten.
Dieser Artikel ist Teil unserer Serie "Blick über das Desktop-Design hinaus", die Sie in Partnerschaft mit Heart Internet VPS erhalten haben.
Verwenden Sie ein flüssiges Layout
Fluid Layouts gibt es schon seit Jahren. Lange bevor responsive Design, wie wir es heute kennen, kam, haben mehrere Webdesigner und Entwickler diese Technik als Lösung für das Problem mehrerer Ansichtsfenstergrößen betrachtet.
Das Erstellen von flüssigen Layouts ist ziemlich einfach. Sie müssen lediglich statische Breiten zugunsten der prozentualen Breiten in Ihrem CSS reduzieren. Anstelle einer Spalte mit einer angegebenen Breite von 350 Pixeln können Sie sie also auf 30% setzen. Diese Breiteneinstellung berücksichtigt automatisch die Größe des Ansichtsfensters und legt die Breite auf 30% dieser Gesamtmenge fest. Wenn Ihr Browserfenster also 900 Pixel breit ist, beträgt die Breite der Spalte 270 Pixel.
Wie schaffen Sie das in freier Wildbahn? Der Trick besteht darin, die erforderliche Mathematik zu verstehen. Sie wissen, dass Sie mit 100% beginnen. Wenn Sie also sagen, ein fünfspaltiges Layout, können Sie versucht sein, jede Spalte auf 20% Breite (20 * 5 = 100) einzustellen. Dies würde jedoch dazu führen, dass Ihre Spalten die gesamte verfügbare Breite ausfüllen, ohne dass dazwischen ein Abstand vorhanden ist. In der Regel sollten Sie einige Ränder hinzufügen, die etwas von dieser Breite verbrauchen.
Was Sie tun müssen, ist herauszufinden, wie viel Rand Sie auf jede Spalte anwenden möchten. Multiplizieren Sie dann die Anzahl der Spalten, um den Gesamtrand zu ermitteln. Zum Schluss teilen Sie die Spalten in das, was übrig bleibt. Normalerweise habe ich bei Instacalc etwas eingerichtet, um alle Zahlen für mich herauszufinden.
Hier können Sie sehen, dass ich ein 5-Spalten-Layout mit 4% Rändern für jede Spalte eingerichtet habe (zwei links, zwei rechts). Klicken Sie auf das Bild oben, um zu diesem Rechner zu gelangen, wo Sie diese Zahlen selbst anpassen können. Sobald diese beiden Werte eingegeben sind, ist der Rest für uns herausgefunden.
Margen von vier Prozent mal fünf Spalten entsprechen zwanzig Prozent unserer Breite für die Ränder, achtzig Prozent verbleiben für Spalten. Achtzig Prozent Breite geteilt durch fünf Spalten entspricht einer Breite von sechzehn Prozent pro Spalte.
Unabhängig von der Größe des Browserfensters werden diese Proportionen beibehalten.
Mach es mit Sass
Wenn Sie eine Möglichkeit haben möchten, dies in Ihrem CSS einfach einzurichten, können Sie Sass verwenden, um die gesamte Mathematik für Sie herauszufinden. Hier ist ein Mixin, der alle notwendigen Operationen ausführt. Sie übergeben einfach die Anzahl der Spalten und den Rand für jede Spalte.
Um dieses Mixin zu implementieren, verwenden Sie eine include-Anweisung, gefolgt vom Namen des Mixins und den eben genannten Parametern. Hier ein Beispiel, bei dem automatisch vier Spalten mit einer Marge von 4% pro Spalte verteilt werden.
Das kompilierte CSS gibt für jede Spalte eine Breite von 21% mit einem Rand von 2% auf der linken und rechten Seite an. Dies zeigt wirklich den Nutzen von Präprozessoren wie Sass und LESS.
Verwenden Sie ein Framework
Wenn Sie beim Erstellen Ihres eigenen flüssigen Layouts vorsichtig sind, stehen zahlreiche CSS-Frameworks zur Verfügung, die die ganze Arbeit für Sie erledigen. Sehen Sie sich die folgenden Optionen an, von denen sich einige sogar um Medienanfragen kümmern.
- Das 1140px-CSS-Rastersystem
- Fluid 960.gs
- Tiny Fluid Grid
- NegativeGrid
- Goldenes Rastersystem
- Grundlinienraster
Werfen Sie eine Einzelspalten-Medienabfrage
Heutzutage empfehle ich für mobile freundliche Websites, vollständig zu reagieren. Auf diese Weise können Sie ein einzelnes Design erstellen, das sich an verschiedene Ansichtsfenster anpasst und sich somit auf fast jedem Gerät gut darstellt. Diese Lösung ist elegant und einfacher zu implementieren, als Sie vielleicht denken.
Davon abgesehen, werden Sie immer noch mit mehreren Herausforderungen konfrontiert, wenn Sie ein vollständig ansprechendes Design versuchen. Sie müssen sich mit einer völlig neuen Sichtweise des Webdesigns auseinandersetzen und Ihre Website an mehreren Haltepunkten optimieren.
In der realen Welt haben Sie möglicherweise nicht immer die Zeit und das Budget, um sich auf eine vollständige, reaktionsschnelle Überholung zu konzentrieren. Vielleicht planen Sie sogar langfristig ein brandneues responsives Design, aber Sie möchten Ihrer aktuellen Website zumindest einen schnellen Schub verleihen, damit sie in kleineren Ansichtsfenstern besser aussieht.
Eine Lösung besteht darin, eine einzelne Medienabfrage bereitzustellen, die im Wesentlichen eine Breite von 100% für Ihre Spalten und Container bedeutet. Verkleinern Sie die Größe Ihres Browserfensters und finden Sie den Punkt, an dem Ihr Design nicht mehr sehr nützlich ist, und fügen Sie einige grundlegende Stile hinzu, um es zu korrigieren:
Wie ich es hier getan habe, müssen Sie wahrscheinlich noch ein paar andere Einstellungen vornehmen und die Spaltenbreite auf 100% setzen, um sicherzustellen, dass alles mit diesem neuen Layout gut aussieht.Wenn Sie diese Technik verwenden, wird Ihr Standardlayout für größere Bildschirme bereitgestellt und wird in eine einzelne Spalte umgewandelt, wenn der Darstellungsbereich zu klein wird, um das ursprüngliche Design (700px in unserem obigen Beispiel) aufzunehmen.
Ich habe diese Technik kürzlich in einem vorherigen Artikel mit dem folgenden einfachen Layout demonstriert. Hier ist das Design in großer Größe:
Bei kleineren Geräten kümmern wir uns nicht um jede Menge Änderungen, sondern verwenden einfach den obigen Code-Snippet, um eine einzige Inhaltsspalte zu erstellen.
Fügen Sie die Apple Touch-Symbole hinzu
Dies ist ein bisschen iOS-zentriert, aber es schadet nie, wenn möglich an individuelle Plattformen anzupassen. Dies erfordert einen minimalen Aufwand und macht Ihre Website anfälliger für die Aufbewahrung auf dem Startbildschirm eines iPhone / iPad-Benutzers (besonders nützlich für Web-Apps).
Mit Safari unter iOS können Benutzer eine Seite nicht nur mit einem Lesezeichen versehen, sondern auch neben allen anderen Symbolen im Startbildschirm platzieren. Um sicherzustellen, dass das Symbol, das Safari erfasst, richtig formatiert ist, erstellen Sie am besten ein eigenes Symbol.
Wie werden die Icons implementiert?
Derzeit gibt es drei verschiedene Bildschirme für Apple-Geräte: iPad, iPhone 4 und andere ältere iPhones. Die passenden Größen für diese sind 57px-Quadrat für alte iPhones, 72px-Quadrat für iPads (Version eins und zwei) und 114px-Quadrat für iPhone 4 und neuer. Bedenken Sie, dass das iPad 3 wahrscheinlich ein 144px-Quadrat-Symbol benötigt, wenn die Gerüchte über die Verdopplung der Auflösung sich als zutreffend erweisen.
Hier ist der Code, den Sie in den Head-Abschnitt Ihrer HTML-Datei einfügen müssen.
Sie können Ihrer Web-App mit einer sehr ähnlichen Methode einen Startbildschirm hinzufügen. Weitere Informationen finden Sie in der offiziellen Dokumentation.
Spezialeffekte
Wir haben bereits die Größen für jedes Bild überarbeitet, aber es gibt noch mehr zu beachten. Jedes Symbol, das Sie erstellen, sollte ein Quadrat mit harten Ecken mit einem Winkel von neunzig Grad sein und keine Transparenz oder Schatten enthalten. Das iPhone wird die Ecken automatisch auf den entsprechenden Radius abrunden und den Standardglanzeffekt anwenden.
Spitze: Hinzufügen? Vorzusammengesetzt? auf den Dateinamen, um den Glanzeffekt zu überspringen. Beispiel: apple-touch-icon-precomposed.png.
Passen Sie auf Ihre Schwebeflüge auf
Dies ist ein ziemlich allgemeiner Ratschlag, aber es ist etwas, was ich Anfängern immer empfehlen sollte, bei der Gestaltung mobiler Websites zu berücksichtigen. Beim Desktop-Webdesign neige ich dazu, Schwebeflüge ziemlich ausführlich zu verwenden und gehe gelegentlich über einfache visuelle Hinweise hinaus und benutze sie tatsächlich, um ein funktionales Ereignis auszulösen.
Überlegen Sie, wie diese Veranstaltung auf mobile Touchscreen-Plattformen übertragen wird. Plötzlich gibt es keinen Schwebeflug. Sie tippen entweder auf ein Element oder nicht, es gibt keine dazwischen, wie bei einer Maus. Bedeutet dies, dass Sie keine hoverbasierten Funktionen verwenden sollten? Überhaupt nicht, stellen Sie sicher, dass Ihre Website auf einem mobilen Gerät einwandfrei funktioniert.
Dies erfordert nicht immer viel Arbeit. Letztendlich möchte ich Sie dazu ermutigen, wo immer möglich Tests durchzuführen, um wirklich ein Gefühl dafür zu bekommen, wie Ihre Website funktionieren wird. Zum Beispiel habe ich kürzlich ein Tutorial zur Erstellung eines erweiterten Navigationsmenüs veröffentlicht, das bei Schwebeflug geöffnet wird. Ich dachte instinktiv, dass das Menü auf einem iOS-Gerät unbrauchbar wäre, da es kein Hover-Ereignis gibt. Es stellt sich jedoch heraus, dass das iPhone und das iPad es automatisch in ein Touch-Ereignis übersetzen, wodurch das Menü voll funktionsfähig bleibt.
Verlassen Sie sich niemals darauf, da Ihre Schwebeflugzeuge möglicherweise nicht immer auf mobile Plattformen übertragen werden. Wenn dies nicht der Fall ist, versuchen Sie, eine angepasste Medienabfrage oder ein nur für JavaScript bestimmtes Handy anzubieten, um dies zu kompensieren.
Verwenden Sie Mobile Friendly Technology
Das mobile Web stellte Designer und Entwickler vor eine Reihe von Kompatibilitätsproblemen. Am wichtigsten ist, dass iOS die Unterstützung von Flash einfach ablehnt, aber damit nicht aufhört. Das Web ist voll von proprietären Plugins wie Microsoft Silverlight, die auf einigen mobilen Plattformen ebenfalls nicht installiert werden können.
Um dies zu berücksichtigen, stellen Sie sicher, dass Ihre Website nicht von diesen Technologien abhängt, um zu funktionieren. In diesem Fall müssen Sie eine spezielle mobile Version bereitstellen, um dies zu kompensieren. Zum Beispiel verwendet YouTube (früher eine reine Flash-Site) einen speziellen HTML5-Videoplayer, der auf mobilen Plattformen hervorragend funktioniert.
Nutzen Sie auch die vorgefertigten Bibliotheken, mit denen Sie mühelos Unterstützung für mehrere mobile Plattformen hinzufügen können. Ein Beispiel, das JavaScript-Fans lieben, ist jQuery Mobile, ein auf HTML5 basierendes Toolkit, das auf jQuery und der jQuery-Benutzeroberfläche basiert.
Fazit
Offensichtlich ist diese Liste keinesfalls vollständig, sondern dient lediglich dazu, Ihnen den Einstieg in die Welt der Websites zu ermöglichen, die auf jeder Plattform gut aussehen und funktionieren. Wenn Sie sich wirklich mit diesen fünf Techniken befasst haben, verspreche ich Ihnen, dass Sie sich beim Umgang mit dem mobilen Webdesign besser fühlen werden und in kürzester Zeit voll reaktionsschnelle, plattformübergreifende Designs entwickeln werden.
Hinterlassen Sie einen Kommentar und teilen Sie uns mit, wie Sie diese Liste ändern würden. Wenn ich Sie nach fünf schnellen und einfachen Möglichkeiten fragen würde, um eine Website mobiler zu gestalten, welchen Rat würden Sie geben?