Respon­si­ve Design: Wie sieht mei­ne Web­seite auf dem Han­dy aus?

Immer häu­fi­ger nut­zen Men­schen ein Smart­phone oder ein Tablet, um im Inter­net zu sur­fen. Damit wird es immer wich­ti­ger, dass auch Ihre Web­seite sowohl am Desk­top als auch auf einem Tablet oder Smart­phone rich­tig ange­zeigt wird und gut nutz­bar ist. Web­sei­ten­de­sign, dass für min­des­tens 3 Bild­schirm­grö­ßen (Desk­top-Moni­tor, Tablet und Smart­phone) opti­miert ist, nennt sich „respon­si­ves Design“. Wie gut Ihre Web­seite am Tablet oder Smart­phone zu bedie­nen ist, fin­den Sie ganz ein­fach her­aus – mit dem Google Test für Mobil­ge­rä­te und den Ent­wick­ler­werk­zeu­gen eines Web­brow­sers. Wir zei­gen Ihnen, wie das geht!

4.8/5 – (41 votes) 

Hat Ihre Web­seite bereits ein respon­si­ves Design?

screenshot des Google Mobile-Friendly Testtools

2. Geben Sie die URL Ihrer Web­seite ein

Begin­nen Sie den Test. Dies kann eini­ge Minu­ten dauern.

3. Ergeb­nis des Tests

a. Die Sei­te ist für Mobil­ge­rä­te opti­miert – Herz­li­chen Glück­wunsch, Ihre Sei­te wird auf Mobil­ge­rä­ten bereits gut dargestellt!

screenshot des Tests einer mobil-optimierten Webseite

b. Die Sei­te ist noch nicht für Mobil­ge­rä­te optimiert

Im Fall, dass der Test grö­ße­re Schwach­stel­len in der mobi­len Dar­stel­lung fin­det, gibt er Ihnen auch Hin­wei­se dazu, wel­che Fak­to­ren ver­bes­sert wer­den soll­ten. Der Test erkennt auto­ma­tisch inkom­pa­ti­ble Plug­ins, feh­len­de oder fal­sche Fest­le­gung des Dar­stel­lungs­be­rei­ches, zu brei­te Inhal­te und zu klei­nen Text. außer­dem wird eine Ein­schät­zung abge­ge­ben, ob klick­ba­re Ele­men­te zu dicht bei­ein­an­der liegen.

screenshot des Tests einer nicht mobil-optimierten Webseite

4. Simu­la­ti­on ver­schie­de­ner Gerä­te im Webbrowser

In moder­nen Redak­ti­ons­sys­te­men erstell­te Web­seiten sind oft zumin­dest gut für die mobi­le Dar­stel­lung vor­be­rei­tet. Des­halb ist es mög­lich, dass sie den Google Test bestehen. Eine opti­ma­le Dar­stel­lung Ihrer Web­seite auf allen Gerä­te­grö­ßen wird aber kein Redak­ti­ons­sy­tem der Welt auto­ma­tisch her­stel­len kön­nen. Wir raten Ihnen in jedem Fall, die Dar­stel­lung Ihrer Web­seite auf ver­schie­de­nen Gerä­ten zu simulieren.

Ent­wick­ler­werk­zeu­ge im Webbrowser

Um die Dar­stel­lung Ihrer Web­seite auf ver­schie­de­nen Bild­schirm­grö­ßen selbst zu kon­trol­lie­ren, öff­nen sie Ihre Web­seite in einem Web­brow­ser (in unse­rem Bei­spiel Mozil­la Fire­fox). Dann öff­nen Sie die Test­um­ge­bung für ver­schie­de­ne Bild­schirm­grö­ßen in den Entwicklerwerkzeugen

  • Über das Menü: Extras – Web-Ent­wick­ler – Bild­schirm­grö­ßen testen
  • Mit der Tas­ten­kom­bi­na­ti­on Strg+Shift+M

Sie kön­nen hier ent­we­der ver­schie­de­ne bekann­te Gerä­te simu­lie­ren (im Screenhot das Sam­sung Gala­xy S9/S9+) oder die Gerä­te­brei­te und Höhe selbst einstellen.

Sie kön­nen das Fens­ter sogar mit der Maus stu­fen­los Pixel für Pixel klei­ner oder grö­ßer ziehen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. Anpas­sun­gen an der Webseite

Je nach ver­wen­de­tem Redak­ti­ons­sys­tem (und je nach Ihren Fähig­kei­ten) kön­nen Sie selbst eini­ge Anpas­sun­gen vor­neh­men, die Ihre Web­seite auf dem Smart­phone leich­ter benutz­bar und visu­ell ansprech­ba­rer machen.  An eini­gen Punk­ten wer­den Sie aber wohl nicht um Anpas­sun­gen am HTML und CSS der Web­seite her­um­kom­men. Dabei emp­feh­len wir Ihnen, einen Pro­fi „ran“ zu lassen.

Mehr Tipps & Tricks zur Suchmaschinen­optimierung für Ihre Website

Wir haben für Sie einen Kurz­über­blick über die ver­schie­de­nen Aspek­te der Suchmaschinen­optimierung mit vie­len prak­ti­schen Anlei­tun­gen zum Sel­ber­ma­chen zusammengestellt!

 

Schreibe einen Kommentar