Beste Herangehensweise für Ansicht auf Smartphones

[Quabbe]

Moin,

ich überarbeite gerade eine Website von mir. Sie ist zwar schon responsive, ich wollt aber trotzdem mal fragen, welche Herangehensweise für die mobile Ansicht am besten geeignet ist. Momentan orientiert sich meine Seite nur an der Breite des Browserfensters, also über @media only screen and (min-width) and (max-width) {}.

Ich hab mir aber sagen lassen, dass man auch gezielt Smartphones und Tablets mit der CSS-Datei ansprechen kann oder gleich eine zweite Website nur für Smartphones erstellt, auf die man dann auf entsprechenden Geräten umgeleitet wird.

Dabei stellt sich mir die Frage, wie sich das ganze auf die SEO auswirkt. Wird eine Mobil-Seite genauso gerankt und indexiert wie die große Seite? Oder bekommt man auf Smartphones beim Googlen sowieso nur die Suchergebnisse von den großen Seiten angezeigt?

Vielleicht kann ja jemand etwas Licht ins Dunkel bringen.


Gruß,
Quabbe

 

[Myhar]

Mir scheint, du hast das Grundkonzept von responsive nicht verstanden. Machst du eine Seite responsive dann hast du keine mobile Seite mehr sondern nur mehr eine Seite. Das heißt die SEO-Frage ist damit beantwortet.

Auch brauchst du kein (min-width) and (max-width) Ein max-width ist vollkommen ausreichend, bei dem nachfolgenden mediaquery überschreibst du lediglich die Werte, die du ändern willst.
Mehr unterscheidungen als min-width brauchst du eigentlich nicht (außer in ein paar Spezialfällen vielleicht, aber ich bezweifle, dass das bei dir zutrifft)

 

[afr0kalypse]

Ich würde sagen, dass die beste Herangehensweise doch eher mobile-first ist. Daher würde ich ausschließlich mit min-width arbeiten und nicht mit max-width.
Aus SEO Sicht sehe ich jetzt auch keinen konkreten Anlass, etwas extra für Mobile zu spezifizieren. Man kann natürlich bestimmte Elemente nicht anzeigen, wenn man die Seite auf Mobile betrachtet. Diese sollten dann aber unwichtig für SEO sein.

Ansonsten würde ich noch Backend-Tätigkeiten durchführen, wie z.B. das Ausliefern unterschiedlicher Bildgrößen für Mobile / Tablet / Desktop.

 

[Quabbe]

Mobile First also. Bisher bin ich immer umgekehrt vorgegangen. Aber macht natürlich Sinn! Danke euch beiden!

@ Myhar: ich hab mir angewöhnt, überflüssige aber hilfreiche Angaben wie min- und max-width zu machen. Genauso wie ich immer das Element mit angebe, wenn ich IDs und Klassen anspreche. Also div#id statt #id. Weiß auch nicht. Bin da so geeicht worden. ;-)


Gruß,
Quabbe

 

[Myhar]

Diese min und max-width angaben finde ich aber nicht hilfreich sondern überflüssig und führen meiner Meinung nach zu mehr Aufwand. In wenigen Spezialfällen mag dies sinnvoll sein, aber wieso überall? Was ist der Vorteil davon?

 

[afr0kalypse]

Korrekt @Myhar.
Im Bestfall benutzt man sein CSS im mobile-first Ansatz so, dass man Standard Deklarationen hat, die immer gültig sind. Erst wenn sich etwas an der Größe des Sichtbaren Bereichs ändert, werden Media Queries genutzt. Media Queries werden schließlich zum Überschreiben genutzt