Geschrieben von Christian Schnettelker

Schlagwörter: , , ,

Wer nicht mit der Zeit geht…

…geht mit der Zeit. Aus diesem Grunde habe ich vor einigen Tagen beschlossen, auch bei meiner manoftaste-Webseite neue Wege zu gehen und diese sozusagen auf ein runderneuertes Fundament zu stellen.

manoftaste.de 3.0

Die Welt des Internet hat sich in den letzten Jahren verändert, Webseiten werden heute nicht mehr ausschließlich zuhause oder im Büro am PC, sondern vermehrt auch auf mobilen Endgeräten, also Smartphones und Tablets, angeschaut.

Natürlich kann man alle bisherigen Seiten auch dort (stark verkleinert) ansehen und in diese „hineinzoomen“, die Bedienung ist dann aber oft mühsam und wenig übersichtlich.

Dies war einer der Gründe für eine vollständige Überarbeitung meiner Seite. Ich habe dabei auch einige alte Zöpfe abgeschnitten, die wesentlichen Änderungen sind:

  • das Layout wird jetzt komplett mittels CSS definiert
  • Anpassung für die heute gängigen Auflösungen („Responsive Webdesign“)
  • der Code ist in HTML5 statt HTML geschrieben, veraltete Tags entfallen

Dabei habe ich auch die Chance genutzt, das Layout weiter zu versachlichen, großzügiger und, wie ich finde, noch ansprechender zu gestalten.

Fünf Layout-Stufen

Nach einigen Überlegungen und Nachforschungen im Netz wählte ich die folgenden fünf Auflösungsstufen, die mein neues Layout unterstützen soll:

  • 320 bis 479 Pixel für Smartphones im Hochkant-Format
  • 480 bis 767 Pixel für Smartphones im Querformat oder kleine Tablets
  • 768 bis 959 Pixel für gängige Tablets
  • 960 bis 1279 Pixel für Netbooks, Notebooks oder PCs mit kleinem Monitor
  • ab 1280 Pixel für Desktop-PCs mit großem Monitor

Man könnte natürlich noch viel feiner unterscheiden, aber das würde den Rahmen sprengen, ich denke, mit dieser Auswahl decke ich 98% aller Auflösungen zufriedenstellend ab. Hier ein Beispiel, wie meine neue Seite nun auf einem Smartphone im Hochkantformat aussieht:

Responsives Layout der manoftaste.de auf einem Smartphone

Wie funktioniert das?

Die Steuerung, also die Auswahl der notwendigen Anzeigestufe, wird innerhalb der CSS-Datei realisiert. Für jede Stufe ist dabei festgelegt, was in welcher Größe angezeigt oder eben weggelassen wird.

Beispielsweise entfallen in der kleinsten Stufe für Smartphones die rechte und linke Spalte, der Kopfbereich, die Überschrift im Kopf und die Bilder innerhalb des Textes werden passend verkleinert. Vereinfacht könnte man sagen, dass auf dem Smartphone und Tablet nur die wesentlichen Inhalte angezeigt werden, während auf dem Desktop-PC alles in voller Breite zu sehen ist.

Hier ein weiteres Beispiel, meine Seite auf einem Tablet mit heute üblicher Auflösung:

Responsives Layout der manoftaste.de auf einem Tablet

Ich glaube, das Konzept ist klar geworden. Ein weiter Vorteil der neuen Technik ist, dass nun auch für besonders große Auflösungen ab 1280 Pixel sozusagen eine „Luxusausgabe“ einer Webseite vorgehalten werden kann. Bei der neuen Seite wird in dieser Stufe auf der Startseite eine große Slideshow meiner Projektreferenzen angezeigt.

Probieren Sie es aus!

Hier drei Webseiten, mit deren Hilfe Sie auch ohne Smartphone meine Seite testen können:

http://ami.responsivedesign.is/?url=http://www.manoftaste.de
http://www.responsimulator.com/?url=www.manoftaste.de
http://quirktools.com/screenfly/

Es geht auch noch einfacher, öffnen Sie meine Seite und verkleinern Sie das Browserfenster langsam in der Breite, Sie werden sehen, wie das Layout sich stufenweise anpasst.

Nachtrag vom 29.03.2013

Leider hat die Sache wie immer auch einen Haken, die für eine flexible Anzeige notwendigen CSS-Kommandos, die sogenannten „Media Queries“, werden von älteren Browsern (insbesondere Internet-Explorer vor Version 9) nicht verarbeitet und die Seiten als „Textwüste“ angezeigt.

Deshalb ist es notwendig, über eine sogenannte „Browserweiche“ ein spezielles Layout für diese Browser einzubinden:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/layoutie.css" />
<![endif]-->

Leider sind Internet-Explorer 8, 7 und auch 6 noch relativ oft im Einsatz, das Problem wird sich aber im Laufe der Zeit von selbst erledigen.

Kommentare

Kommentare

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.