Eine Seite für jedes Gerät (responsive webdesign)

26. Aug 2012 | Wordpress | 1 Kommentar

In der heutigen Zeit ist es für Betreiber von Internetseiten immens wichtig nicht nur klassische Seiten zu betreiben, Nein unsere Seiten müssen auch auf einer Vielzahl von mobilen Geräten lesbar und ansprechend sein. Es ist also eine echte Herausforderung für die verschiedenen Geräte wie Flat-TV, Bildschirm, Notebook, I PAD, I Phone und alle anderen Mobile Devices (Mobile Geräte) das eigene Design so darzustellen das keiner in der Horizontalen scrollen muss. um das zu gewährleisten muss man heute ein responsive webdesign realisieren.

Was bedeutet responsive webdesign?
Responsive (engl. ansprechbar) bedeutet das die Webseite mit dem ausgebendem Gerät “spricht” und das Aussehen auf die Ausgabeauflösung anpasst. dies realisiert man mit Hilfe von Media Queries und HTML5.

Was sind Media Queries?
Media Querie ist eine neue Technik in CSS3 mit Hilfe derer man innerhalb eines CSS-Stylsheet definiert bei welcher Auflösung eines Gerätes ein und die selbe Klasse oder ID dargestellt werden soll. definiert mann nun mehrere Media Queries so kann man das Design für verschiedene Auflösungen (Gerätetypen) anders darstellen lassen.

In den folgenden Artikeln werde ich auf das Thema responsive webdesign näher eingehen und Lösungsansätze präsentieren.
Ich hatte anfangs eine gehörige Portion Respekt vor dieser Technik und glaubte Wochen lernen zu müssen um CSS3, Media Queries und HTML5 zu lernen. Doch so schwer ist es nicht, man muss nicht alles vergessen was man schon weis. Im gegenteil es ist wenig neues wenn man sicher im Umgang mit HTML Div und CSS ist dann versteht man die Unterschiede innerhalb von einer halben Stunde.

Das schwierigste dabei ist es nicht auf ein bestimmtes Gerät zu optimieren sondern in Geräteklassen zu denken und somit für alle  Geräte optimiert zu arbeiten. Bei meiner Recherche bin ich auf drei verschiedene  Geräteklassen mit sechs Auflösungsbereichen gestoßen.

 

1. Mobile devices (Smartphones):
Querformat = 320 x 480
Hochformat = 480 x 320
2. Pad devices (IPad etc.):
Querformat = 1024 x 768
Hochformat = 768 x 1024
3. Standard Website:
Querformat = 1680 x 1050
Am Ende der Artikelserie werden hoffentlich alle Fragen beantwortet sein, natürlich werde Ich das erstellte Design welches ich erstellt habe in zwei verschiedenen Varianten (HTML Grunddesign und WordPress Theme) kostenfrei zum download anbieten.
Über Ideen und konstruktive Kritik freue ich mich immer.

Kommentare zum Beitrag:

1 Kommentar

  1. Otti

    In den letzten Wochen ist so viel hier los das ich nicht weiter gekommen bin werde das Thema aber nicht aus den Augen verlieren und sicherlich noch einige Beiträge schreiben.

    Antworten

Einen Kommentar abschicken

You have to agree to the comment policy.

Lesen Sie weitere Beiträge aus meinem Blog:

Ford Focus 3 realistische Kosten 2012 – 2020

Vorstellung meines Ford Focus 3 Touring: Ich habe mir wie viele wissen ja Anfang 2016 einen Ford Focus 3 Kombi von 2012 gekauft. Jetzt nach fast zwei Jahren wollte ich mal einen Bericht zum Fahrzeug unter realistischen Bedingungen schreiben. Als Ich Ende 2015 die Enscheidung traf mir ein neues...

Benzinpreise Seit 1970

Nachdem ich in meinem letzten Beitrag das Thema Dieselpreise seit 1970 behandelt habe. möchte ich nun natürlich auch den Benzinpreis genauer betrachten. Auch wenn es für mich persönlich nicht relevant ist da wir ausschließlich Diesel-Fahrzeuge besitzen. Auch in diesem Beitrag versuche ich neutral...

Dieselpreise seit 1970

Nachdem ich mich in meinem Beitrag über die realistischen Kosten des Ford Focus von 2012 bis 2018 auch mit dem Dieselpreis beschäftigt habe. Stellte ich mir die Frage wie haben Sich eigentlich die Kraftstoffpreise in den letzten Jahrzehnten entwickelt. Um in diesem Beitrag möglichst neutral zu...
Premium Diesel

Diesel vs. Premium Diesel im Selbsttest

Nach dem ich vor kurzem einige Videos von JP performance bei Youtube gesehen habe wo JP bei der "großen blauen Tankstellenkette" zu besuch war. Die Profis dort haben einen Einblick in deren Entwicklungsabteilung und Testanlagen gegeben. Sie preisen dort die reinigende Wirkung ihres Premium Diesel...

Der Traum vom Eigenheim ein Alptraum!

Ich träume seit 10 Jahren von einem Häuschen am Stadtrand in dem ich bis zu meinem Ende in ca. 55 Jahren. (Da währe ich dann 87 Jahre alt.) Doch je mehr ich mich mit dem Thema Eigenheim und Finanzierung einer Immobilie beschäftige, desto klarer wird mir dass es ein Alptraum ist. Die einzigen die...

Geburtstagskonzert in Köln mit 85.000 Besuchern!

Wie alle die regelmäßig auf meinem Facebook-Profil vorbeischauen oder in Ihren Facebook-Neuigkeiten (Startseite)  mitbekommen haben dürften, hatte ich am Freitag den 9.11.2012 Geburtstag. Da ich meine Geburtstage eigentlich nicht mit großen Feiern zelebriere dieses Jahr jedoch ein wirklich tolles...

Eine Seite für jedes Gerät (responsive webdesign)

In der heutigen Zeit ist es für Betreiber von Internetseiten immens wichtig nicht nur klassische Seiten zu betreiben, Nein unsere Seiten müssen auch auf einer Vielzahl von mobilen Geräten lesbar und ansprechend sein. Es ist also eine echte Herausforderung für die verschiedenen Geräte wie Flat-TV,...

Facebook, Datenschutz und Benutzerprofile – Teil 5

Profilbilder, Titelbilder und Ihre unbewusste Aussage über Sie. Da wir uns über das Thema Datenschutz und Sicherheit unseres Facebookprofils mit den Einstellungen bei Facebook bereits auseinander gesetzt haben. Ich möchte aber nicht verschweigen das es bei den Facebook Profilbilder und...

Facebook, Datenschutz und Benutzerprofile – Teil 4

Datenschutzeinstellungen bei Facebook einstellen. Im 3. Teil der Serie haben wir uns mit den Einstellungen unserer Statusmeldungen beschäftigt um die von uns erstellten Daten zu schützen. Aber was ist mit unseren Profildaten die wir bei Facebook hinterlegt haben? Auch hier gibt uns Facebook die...

Facebookprofil, Datenschutz und Benutzerprofile – Teil 3

Wie sichern wir unser Facebookprofil vor fremden Augen? Das erste was ein Benutzer von Facebook Wissen sollte ist das er alle Einstellungen zum Thema Privatsphäre selber in der Hand hat. Dies bedeutet aber auch das wir als Nutzer uns immer mal wieder mit der Konfiguration von Facebook auseinander...