Eine Website mit fester Breite mobilfreundlich gestalten

Zuletzt aktualisiert am 22. Mai 2020

Mobilfreundlich bauen. Es gab eine Zeit, als meine größte Sorge als Grafikdesigner und Webentwickler darin bestand, mein CSS in Internet Explorer zum Laufen zu bringen. Nicht nur der IE ist immer noch eine Nervensäge, jetzt müssen wir uns um zahlreiche Bildschirmgrößen und Betriebssysteme kümmern.

Es wird eine Zeit geben, in der Mobile das Desktop-Browsing überholt. Da Mobilgeräte in unserem Alltag so stark in den Vordergrund gerückt sind, gibt es Zeiten, in denen wir Webdesigner sofortige Ergebnisse benötigen. Wenn Sie einer dieser Designer oder Programmierer sind, der einfach nicht die Zeit hat, eine statische Website in ein WordPress-Thema umzuwandeln, das für Mobilgeräte geeignet ist, gibt es Hoffnung für Sie, mein Freund. Wenn es darum geht, alle Ihre Inhalte auf Mobilgeräten anzuzeigen, können Sie dies mit ein wenig CSS- und HTML-Optimierung erreichen.

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

Laut comScore entfallen weltweit mehr als die Hälfte der online verbrachten Minuten auf Mobilgeräte

Für Mobilgeräte optimierte oder responsive Websites können die Breite Ihrer Website automatisch konfigurieren, um sie an das Gerät des Betrachters anzupassen. Horizontale Bildlaufleisten sind im Responsive Design ein Tabu. Wenn Sie Ihre aktuelle Website auf einem Mobilgerät anzeigen und am unteren Rand Ihres Telefons oder Tablets eine Bildlaufleiste sehen, ist Ihre Website (oder Elemente Ihrer Website) möglicherweise nicht für Mobilgeräte optimiert. Diese horizontalen Bildlaufleisten ruinieren die Erfahrung des Benutzers und werden höchstwahrscheinlich auf die Schaltfläche „Zurück“ klicken. Die Leute sind so sehr daran gewöhnt, auf ihren Geräten vertikal zu scrollen, dass es ihnen unangenehm wird und sie die Website verlassen, wenn sie feststellen, dass sie sowohl vertikal als auch horizontal scrollen müssen, um Inhalte anzuzeigen.

Von diesem Punkt an ist alles inklusive, Design-Websites haben CSS-Klassen und IDs für alles, und ich meine alles.

Von der Kopfzeile und den Menü-Divs bis zu den <p>-Tags in der Fußzeile. Sie sollten die Größe all dieser Dinge basierend auf der Bildschirmbreite anpassen. Verschieben, Größe und Skalierung sind viel einfacher, wenn das Element über CSS angesprochen werden kann.

CSS Media Queries sind einfacher zu verwenden als Sie denken.

Als ich zum ersten Mal auf Medienanfragen aufmerksam gemacht wurde, dachte ich, es sei Teil einer Programmiersprache und nicht eine Form von CSS. Ich war von einem Gefühl der Erleichterung überwältigt, als ich herausfand, was es wirklich war, und ich benutze es seitdem für ALLE meine Webprojekte.

Medienabfragen sind im Grunde CSS-Regeln. Wenn Ihr Bildschirm diese Breite hat, wenden Sie dieses CSS nur auf diese Elemente an. Schauen Sie unten nach.

Der obige Code besagt also einfach, dass, wenn der Bildschirm des Benutzers zwischen 100 und 699 Pixel breit ist, die Hintergrundfarbe des Körpers in Blau geändert werden muss. Hier wird es entscheidend, jedes div und jede Spanne auf Ihrer Website zu kennzeichnen. Die Manipulation dieser Elemente für unterschiedliche Bildschirmbreiten wird durch das richtige Tagging einfacher.

CSS-tricks.com listet viele mobile Breiten für uns als schnelle Referenz auf.

CSS-Codebeispiel

/* ---- HTC One ---- */
/* Hoch- und Querformat */

@mediascreen

und (Gerätebreite: 360px)

und (Gerätehöhe: 640px)

und (-webkit-device-pixel-ratio: 3) {

/*****IHR CODE HIER*****/

}

Es gibt viel mehr Medienabfragecode für Galaxy-, HTC- und Apple-Telefone. Zusätzlich sind die Breiten für Ipad-, Galaxy- und Nexus-Tablet-Breiten aufgeführt. Alles, was Sie tun müssen, ist diesen Code in die CSS-Datei Ihrer Website einzugeben und die leeren CSS-Klammern mit Ihrem eigenen Code zu füllen! Fertig!

Ihre Website reagiert, aber es fühlt sich immer noch nicht richtig an

Möglicherweise stellen Sie fest, dass einige Elemente auf Ihrer Website auf Mobilgeräten ziemlich viel Platz beanspruchen, z. B. Ihr Hauptmenü. Um es responsiv zu machen, haben Sie höchstwahrscheinlich ein „float: none“ auf die <li>-Tags in Ihrem Menü angewendet. Aber jetzt nimmt das Menü oben auf Ihrer Website einen riesigen Platz ein. Sie müssen Ihr Hauptmenü mit jQuery- und CSS-Medienabfragen in ein Dropdown-Menü umwandeln. CSS-tricks.com erklärt auch, wie das geht.

Möglicherweise halten Sie auch bestimmte Elemente für unbedeutend, die sowohl auf Desktop- als auch auf Mobilgeräten zu finden sind. . Sie können sie mit CSS loswerden:

Diese Website-Anpassungen neigen dazu, Websites sehr lang zu machen, was die Benutzer dazu zwingt, viel zu scrollen. Hier werden Ankertext (für sehende Benutzer) oder Sprunglinks (für Screenreader) zu Ihren Freunden.

Ankertext ist ein anklickbarer Link, der es Benutzern ermöglicht, zu einem bestimmten Abschnitt Ihrer Webseite zu springen, ohne scrollen zu müssen. Es ist eine praktische Methode für mobilfreundliche Websites. Der folgende Code ist ein Beispiel für die Verlinkung von Ankertexten.

<a href="#skip">Klicken Sie hier, um zum Hauptinhalt zu springen</a>

<a id="skip"></a>Der Hauptinhalt beginnt hier

Überspringen-Links werden hauptsächlich für Screenreader verwendet und ermöglichen es Benutzern mit Behinderungen, sich wiederholende Webinhalte wie die Menünavigation zu umgehen oder zu überspringen und direkt zu den Informationen zu gelangen, die sie interessieren.

Wenn Skip-Links eine CSS-Regel von „display:none“ haben, wird der Link für Screenreader „unzugänglich“. Eine Möglichkeit, dies zu umgehen, besteht darin, die Links außerhalb des Bildschirms zu positionieren, damit Screenreader Ihre Links immer noch erkennen und ihnen ermöglichen, durch Ihre neue mobile Website zu springen.

So können Sie Ihre Website mit fester Breite schnell und einfach in eine für Mobilgeräte optimierte umwandeln. Vergessen Sie auch nicht, alle Ihre Bilder auf „Breite: 100 %; Höhe: automatisch.“ Alle Bilder, Divs oder Spannen, die eine festgelegte Breite in Pixeln haben, werden auf Mobilgeräten in der horizontalen Bildlaufleiste erstellt. Denken Sie also daran, sie entweder auf Prozentsätze oder unterschiedliche Breiten für die verschiedenen Geräte einzustellen, die Medienabfragen verwenden.

Es kann ein bisschen zeitaufwändig sein, aber glauben Sie mir, wenn Sie es einmal gelernt haben, werden Sie es für immer verwenden. Sie werden diese Methode auf jeder Website verwenden, die Sie jemals erstellen werden, denn selbst die neuesten responsiven WordPress- oder Joomla-Designs und -Vorlagen erfordern ein wenig Pflege, damit sie so aussehen, wie Sie es möchten. Dies gilt insbesondere angesichts des sich ständig verändernden Marktes für mobile Geräte.

-Izzak Hale, leitender Grafikdesigner