SEO und Responsive Webdesign

HomerX · **HomerX** » 04.05.2014, 19:18 **SEO und Responsive Webdesign**

Hallo,

ich bin gerade dabei eine alte statisch aufgebaute Website, mit einer Breite von ca. 1000 Pixel, auf ein Responsive Design umzustellen. Ich möchte damit erreichen, dass man die Website auch mit anderen Geräten als dem Desktop-PC (z.B. Tablet, Smartphone, ...) gut ansehen kann.

Das Problem dabei ist jedoch, dass der Website-Content auf einem Desktop-PC (und auch auf den meisten Tablets) gut dargestellt werden kann.

Auf einem kleinen Display (z.B. bei Smartphones) lassen sich viele Inhalte jedoch nur sehr schwer unterbringen. Ich stelle mir jetzt die Frage, wie man solche Inhalte am besten behandeln sollte.

Auf der Website habe ich zum Beispiel ein horizontales Menü mit 6 Menüpunkten. Bei einer Browser-Breite von >800 Pixeln lässt sich das Menü gut darstellen. Bei <800 Pixeln passen die Menüpunkte jedoch nicht mehr alle in das Menü hinein.

Was würdet ihr hier machen ? Würdet ihr bestimmte Elemente einfach ausblenden, oder habt ihr eine bessere Idee ?

Das ganze sollte natürlich auch SEO-freundlich sein.

Vielen Dank,
MfG HomerX

multiple · **multiple** » 04.05.2014, 19:38 **SEO und Responsive Webdesign**

Ich füge die Navi bei responsive design immer unten ein als einfache Linkliste in Spalten. Das erscheint mir logischer als eine Navi oben, wenn ich davon ausgehe, dass die Inhalte interessant genug sind, um bis zum Ende gelesen zu werden. SEO-technisch ist der Inhalt vor der Navi sicher auch gut aufgehoben, obwohl ich bezweifle, dass das wirklich eine Rolle spielt.

M2 · M2 » 04.05.2014, 23:10 **SEO und Responsive Webdesign**

Mit dem unten stehendem Code kann man schon ziemlich viel optimieren. Wär das nichts? Einfach in deinem CSS definieren.

Code: Alles auswählen

@media only screen and &#40;min-width&#58;xxx px&#41; and &#40;max-width&#58; xxx px&#41; 
&#123;
   //hier kannst Du die Navigation ausblenden, in der Höhe oder Breite begrenzen oder sonst was machen....
   
&#125;

Was zum Lesen: www.mediaevent.de/css/media-query.html (hat mir ziemlich gut geholfen)

gurken · **gurken** » 05.05.2014, 10:06 **SEO und Responsive Webdesign**

da gibts auch was von Google:
https://www.google.com/think/multiscree ... esign.html

HomerX · **HomerX** » 13.05.2014, 17:52 **SEO und Responsive Webdesign**

Mit Media Queries kann man ein Responsive Webdesign ziemlich leicht umsetzen. Das Problem ist nur, dass einige ältere Versionen des Internet Explorers (z.B. Version 8.0) keine Media Queries unterstützen.

Wie habt ihr dieses Problem gelöst ?

mogli · **mogli** » 13.05.2014, 18:46 **SEO und Responsive Webdesign**

Du kannst mit respond.js die Funktion "nachrüsten" oder allen IE-Versionen kleiner als 9 einfach eine gesonderte CSS-Datei zur Verfügung stellen, die eine 960px breite Variante (oder ähnlich) deines Designs aufgreift.

HomerX · **HomerX** » 13.05.2014, 22:00 **SEO und Responsive Webdesign**

Ich habe jetzt die Datei "respond.js" in meine Website eingefügt. Jetzt funktioniert auch die Darstellung im Internet Explorer.

Ich habe jetzt nur noch das Problem, dass ich meine Website auf keinem Smartphone testen kann (habe selbst leider kein Smartphone). Gibt es ein Online-Tool das die Darstellung der Website auf einem Smartphone zeigt ?

Habe schon ein wenig im Netz gesucht, aber nicht wirklich was gefunden. Mir geht es vor allem darum, zu sehen, ob die Schrift richtig dargestellt wird.

gurken · **gurken** » 14.05.2014, 10:31 **SEO und Responsive Webdesign**

vesuch das mal hier:
https://www.opera.com/de/developer/mobile-emulator

jabbadu · **jabbadu** » 14.05.2014, 10:58 **SEO und Responsive Webdesign**

https://www.responsinator.com/
sollte auch für einen ersten überblick gut funktionieren

gurken · **gurken** » 14.05.2014, 11:28 **SEO und Responsive Webdesign**

jabbadu hat geschrieben:https://www.responsinator.com/
sollte auch für einen ersten überblick gut funktionieren

das Problem mit solchen und vielen anderen Tools, das sie lediglich die Seitengröße definieren (dann kann ich gleich die Größe beim Browser verändern), aber nicht auf die Mediaquerries Rücksicht nehmen - sozusagen den falschen Useragent verwenden.