Responsive - Media Queries

Immer mehr mobile Aufrufe von Websiten

Die Website ist fertig, oder etwa doch nicht ? Die Seite sieht auf dem Desktop richtig schön aus, aber was ist mit der mobilen Ansicht? Diese spielt eine immer größere Rolle, wird aber durch die Entwicklung am Rechner gerne vergessen, bzw. nicht vollständig bearbeitet. Muss jetzt das ganze Design nun wieder umgeschrieben werden? Zum Glück helfen uns die Media Queries aus dieser Misere.

Media Queries passen das Layout der Webseite durch festgelegte Punkte im CSS an. Man kann durchaus mehrere Weiten angeben und für jede eigene Werte bestimmen. Natürlich kann man dies auch einfach in Prozent Angaben, oder diversen Frameworks machen, jedoch haben auch diese ihr Limit, bzw. sind sie zudem auch noch umständlich. Media Queries hingegen lassen sich leicht verwalten und sind zudem recht übersichtlich gestaltet. Durch die vermehrte Nutzung von mobilen Endgeräten wird das Responsive Webdesign immer essentieller. Daher muss die Website für mehrere Auflösungen angepasst werden und vor allem wird eine nicht responsive Website durch Google mit einem schlechteren Ranking abgestraft. Bei der Planung des Designs müssen nicht die als 'normal' geltenden Auflösungen herangezogen werden. Die unterschiedlichen Geräte von Apple, Google, Huawei, etc. haben alle unterschiedliche Auflösungen. Sinnvoll ist es, zwei oder drei Weiten zu definieren, an denen das Layout umspringt. Die @media Regel sieht wie folgt aus und wird im CSS benutzt.

/* Normale CSS Regel */
.footer-list ) {
	display: block;
	padding: 30px 30px;
}


/* CSS @media Regel */
@media (max-width: 415px ) {  /* iPhone Weite */
	.footer-list ) {
		display: flex;
		padding: 30px 0px;
	}
}

@media (max-width: 768px ) {  /* IPad Weite */
	.footer-list ) {
		padding: 30px 10px;
	}
}

@media (max-width: 1024px ) {  /* IPad Pro Weite */
	.footer-list ) {
		padding: 30px 20px;
	}
}

Das Beispiel stellt die Änderungen durch die Media Regel in 3 Fällen dar. Die Werte für die Klasse footer-list sind durch die 'normale' CSS Regel festgelegt. Nimmt der Bildschirm nun eine geringere Weite an, so greifen die Media Regeln. Wird beispielsweise der Bildschirm kleiner oder wird eine Seite von dem IPad Pro aufgerufen, oder einem Gerät mit gleicher Pixelweite, greift die letzte Media Regel. Somit wird das padding überschrieben, aber nicht der display Wert. Erst bei einer maximalen Weite von 415 Pixel wird auch der display Wert auf flex geändert.
Natürlich muss nicht mit max-width gearbeitet werden.

@media (min-width: 500px ) {
	...
}

@media (min-width: 600px ) and (max-width: 900px ) {
    ...
}


Allgemein gilt :
@media [not|only Medientyp(screen|print) and] (Parameter and|or|not Parameter) {
   ...
}

Der in eckigen Klammern genannte Teil muss nicht genannt werden. Er kann als zusätzlicher Parameter genannt werden.
Die einzelnen Regeln bauen aufeinander auf, wie oben bereits genannt, sodass nicht jedes Mal jeder Wert neu angegeben werden muss.

Ursprung

Die Debatte über das dringende MUSS wurde seitens Google losgetreten. Bis vor einiger Zeit wurde für den Index die Desktopversion einer Seite genutzt, um zu bestimmen wie relevant die Seite insgesamt ist. Allerdings hat Google eingesehen das sich in den letzten Jahren die Nutzung der mobilen Endgeräte mehr als verdoppelt hat. Im ersten Halbjahr von 2018 waren die Zugriffszahlen von Handys erstmals höher als die der Dektop-Pcs :

48,5% Mobil
38,5% Desktop
13% Tablet
Statistik von conversion-junkies.de

Daher hat Google entschieden auf Dauer die Indexierung über den Smartphone Agent des Googlebots zu bestimmen. Somit ist eine mobile Seite nun ausschlaggeben und nicht mehr die Desktopvariante einer Seite. Somit wird meistens bei der Tablet Auflösung noch die Desktopvariante einer Website verwendet. Ebenso, Stand 8 Januar 2019, ist Google dabei die Umstellung nach und nach durchzuführen. Deshalb wird jede Website individuell und auf der Grundlage der Best Practices bewertet, ob sie für die Mobile First-Indexierung geeignet ist. Sollte dies der Fall sein wird die Seite umgestellt. Interessant ist dieses muss natürlich nur für Leute die SEO-technisch gut darstehen wollen.


Weitere Quellen / Informationen :
Media Query w3school
Media Query w3.org
Googles Mobile First

Autorbild
Veröffentlicht von Robin Kirch am 02.2019
Web- und Softwareentwickler, Systemadministrator und Bughunter aus Leidenschaft.
#CSS #MediaQueries #Responsive
Fandest du den Beitrag hilfreich? Dann teile ihn doch mit anderen

Aufgrund von Artikel 17 (ehemals Artikel 13) der EU ist es nicht weiter effizient die Kommentarsektion zu betreiben. Bei Fragen nutzen Sie bitte das Kontaktformular. Ich werde nach wie vor gerne Fragen beantworten.