Responsive Design - mobile-freundliche Webseiten

Kategorie(n): Webseiten

Responsive Design - mobile-freundliche Webseiten

Mobile-freundliche Webseiten

Heutzutage greifen Kunden und die die es werden wollen mit immer mehr verschiedenen Endgeräten mit verschiedenen Browsern auf Ihre Webseite zu. Um dieser Anforderung gerecht zu werden gibt es verschiedene Techniken in der Webentwicklung. Wir möchten Ihnen Responsive Design als eine dieser Techniken vorstellen.

Responsive Pattern - Desktop, Tablet, Mobile, Phone

Responsive Design

Responsive Design ist eine Technik mit der über HTML5 und CSS3 die Größe des Bildschirms bzw. Browsers ausgelesen wird und mit Media-Queries die Darstellung der Webseite  beeinflusst wird. Inhalte, Elemente usw. passen sich der Größe des Browsers automatisch an.

Anwendung 

Die gängigen Formate für Endgeräte sind wie folgt:

  • Smartphones: 320px bis 480px
  • Tablets: 768px bis 1023px
  • Desktop: 1024px und größer

Responsive Design lässt sich sehr einfach über Media-Queries anwenden:

@media(min-device-width: 1024px) {
  .haupt-navigation { 
    display: block; 
  }
  .mobile-navigation { 
    display: none; 
  } 
}

@media(max-device-width: 1023px){ 
  .haupt-navigation { 
    display: none; 
  }
  .mobile-navigation { 
    display: block; 
  }
}

Im Beispiel-Code wird auf Endgeräten, die breiter als 1024px sind:

  • die Haupt-Navigation eingeblendet
  • die Mobile-Navigation ausgeblendet

die eine Breite von 0px bis 1023px haben:

  • die Haupt-Navigation ausgeblendet
  • die Mobile-Navigation eingeblendet

Vorteil

Der Pflegeaufwand ist einmalig, da im CSS-Code auf die verschiedenen Endgeräte reagiert werden kann. Die strikte Trennung zwischen Mobile- und Desktop-Version erhöht den redaktionellen und technischen Aufwand.

Suchmaschinen

Bezüglich Google werden schlecht optimierte oder mobile-unfreundliche Webseiten im Ranking schlechter dargestellt und abgestraft. Das kann zu Umsatz-Einbrüchen im Geschäft führen. 

Ist Ihre Webseite mobile-freundlich?

Kontaktieren Sie uns, falls Sie keine mobile-freundliche Webseite führen! Wir kümmern uns darum. 

Zurück zur Kategorie