Facebook

Facebook

Instagram
Mein Fotoblog

 

Natur-Tagebuch Fotoblog

Meine Island-Reise

 

Island-Reise

 

Kalender 2018

 

Autorenseite bei Calvendo

 

Archive
Kategorien

Responsive Webdesign

Reaktionsfähige Internetseiten

QR-Code Natur-TagebuchIn Zeiten von Smartphone und Tablet-PCs ist Webdesign ohne das responsive (reaktionsfähige) Element kaum noch wegzudenken. Öffnet man eine Internetseite mit dem Smartphone, muß man oft feststellen, dass die Bereiche, die interessant sind, viel zu klein dargestellt werden und erst durch Zoomen vergrößert, bzw. durch Verschieben erreichbar sind.

Bei einer responsiven Website wird ein „flexibles Layout“ erstellt, bei dem allerdings nichts dem Zufall überlassen wird. Bei der Umsetzung werden bei der Seite und deren Elemente (Schrift, Bilder etc.) prozentuale Pixelwerte vergeben, dadurch passt die Seite sich automatisch dem verwendeten Ausgabedisplays an – das Design reagiert auf die vielfältigen Anforderungen der verschiedenen Geräte.

Die Abfrage, in welcher Umgebung eine Internetseite geöffnet wird (ob Smartphone, Tablet- oder Desktop-PC) funktioniert erst seit der Einführung von CSS3 und den sogenannten Media Queries. Je nach Antwort wird das Layout der Seite so modifiziert, dass es ideal zum Ausgabegerät passt.
Bei der Modifikation der Seite kommt es nicht darauf an, dass je nach Bildschirmgröße alle Inhalte lediglich geschrumpft werden, sondern das die Seite auf die verschiedenen Geräte (Devices) und deren Besonderheiten wie Hoch- oder Querformat „reagieren“, den wichtigsten Inhalt im Vordergrund behalten und den Content hierarchisch strukturieren.

 

Neues Natur-Tagebuch

NaturfotografieSchon seit langem beabsichtigte ich, meine Domain www.natur-tagebuch.de  wieder zu aktivieren, was ich nun auch gemacht habe. Bei der Seite handelt es sich um einen neuen Fotoblog, der mit einem „reaktionsfähigen“ Layout dargestellt wird. Das Template habe ich ausnahmsweise nicht selbst gebastelt. Jemand der sich schon lange mit dem Thema „responsives Webdesign“ beschäftigt ist Ellen von Elmastudio. Ihre Templates sind schick, modern und gut durchdacht.

 

Wer Lust und Zeit hat, kann sich mein „Natur-Tagebuch“ mal anschauen. Für´s Smartphone gibt es oben links den QR-Code (…siehe meinen Beitrag vom 22.Mai 2012).

iPhone 5

iPhone 5 – Klick macht groß

 
Ansicht auf dem iPhone5 mit Off-Canvas Sidebar

So sieht die Seite auf dem iPhone 5 aus. Das Template beinhaltet eine Off-Canvas-Sidebar: Das Menü verschwindet in den nicht sichtbaren Außenbereich und wird durch den Button oben rechts geöffnet und wieder geschlossen. Die eigentliche Navigation erfolgt über die Bilder, weil es ja ein Bilderblog ist (ginge natürlich auch über Text) 🙂

Übrigens: In älteren Browsern wie dem IE8 wird die Seite nicht „ganz sauber“ dargestellt, weil der IE8 und ältere Browser-Versionen Probleme mit CSS3 und HTML5 haben. Aber die Seitenansicht ist trotzdem noch akzeptabel.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.