Hi alle!
Da ich mich in letzter Zeit sehr viel mit Responsive Webdesign auseinander setzten musste und es lernen musste.
Wollte ich euch diese Technik etwas erklären und evtl. das ein oder andere Tutorial machen.
Aber erstmal will ich euch ein wenig erklären.
Was ist 'responsive'?
Bei responsive Webdesign handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung reaktionsfähiger Websites. Heißt so viel wie, dass man eine Website so programmiert, das sie auf jedem Endgerät (Smartphone, Tablet PC, kleine Bildschirme & größere Bildschirme) "gleich" angezeigt wird.
Technische Basis hierfür sind neuere Webstandards wie HTML5, CSS3 und JavaScript.
Was bringt mir diese Technik?
Viele Internetseiten programmieren ihre Seiten auf diesen Standart um, da viele Internetnutzer mit ihrem Smartphone, Tablet o.ä. ins Internet gehen.
Es ist aber jedem Internetseitenbetreiber selbst überlassen ob er sich diese Mühe macht, man muss immer dadran denken: 'Was habe ich für eine Zielgruppe?'
Habe ich z.B. einen Privat Server wie sagen wir mal Flyff, ist meine Zielgruppe relativ klar, junge Menschen. Da man mit seiner Internetseite dann höchstwahrscheinlich seinen Flyff Server präsentiert, also ein PC Spiel, kann man davon ausgehen das man kein Responsive Design benötigt.
Aber, hat man z.B. eine Seite wo man sein eigenes Netzwerk mit präsentiert, würde es mehr Sinn machen, hier auf responsive zu programmiern.
Warum? Ganz einfach, Netzwerke wie z.B. Facebook nutzen Menschen fast aller Altersklassen, seien es junge Berufsanfänger oder Rentner.
Und junge Menschen sind viel mit Smartphone, Tablet etc. unterwegs.
Die responsive Technik gibt es seit CSS3 da dort die Media Queries zugekommen sind. Man kann Media Queries in verschiedenen Arten anwenden. Media Queries sind eigentlich nichts anders als CSS Befehle, die aber nur geladen werden wenn die Auflösung des Gerätes ..px entspricht (.. = irgendein px Wert).
Es gibt unterschiedliche Arten die Media Queries anzuwenden. Ich verwende immer folgende:
Es gibt noch eine andere Methode die ich aber nicht anwende da ich es so gelernt habe wie oben beschrieben.
In die responsive.css Datei, so wie ich es immer mache, muss dann folgender Media Querie:
Alles anzeigen
Das sind Auflösungen die völlig reichen, meiner Meinung nach.
Jetzt kann man anfangen, seinen Browser z.B. auf 240px Breite zu ziehen und mit Firebug anfangen zu "Stylen".
Unten im Browser darf keine Scrollbar nach Links und Rechts sein, alles muss untereinander stehen.
So könnte man es machen!
Wenn man das alles für die Größen 240px, 320px, 480px, 600px, 768px & 980px gemacht hat, hat man ein responsive Design.
Vielleicht konnte ich mit diesem Beitrag dem ein oder anderen die responsive Webdesign Programmierung ein bisschen erklären und den Einstieg in die Programmierung leichter machen.
Gruß, sn0w!
Da ich mich in letzter Zeit sehr viel mit Responsive Webdesign auseinander setzten musste und es lernen musste.
Wollte ich euch diese Technik etwas erklären und evtl. das ein oder andere Tutorial machen.
Aber erstmal will ich euch ein wenig erklären.
Was ist 'responsive'?
Bei responsive Webdesign handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung reaktionsfähiger Websites. Heißt so viel wie, dass man eine Website so programmiert, das sie auf jedem Endgerät (Smartphone, Tablet PC, kleine Bildschirme & größere Bildschirme) "gleich" angezeigt wird.
Technische Basis hierfür sind neuere Webstandards wie HTML5, CSS3 und JavaScript.
Was bringt mir diese Technik?
Viele Internetseiten programmieren ihre Seiten auf diesen Standart um, da viele Internetnutzer mit ihrem Smartphone, Tablet o.ä. ins Internet gehen.
Es ist aber jedem Internetseitenbetreiber selbst überlassen ob er sich diese Mühe macht, man muss immer dadran denken: 'Was habe ich für eine Zielgruppe?'
Habe ich z.B. einen Privat Server wie sagen wir mal Flyff, ist meine Zielgruppe relativ klar, junge Menschen. Da man mit seiner Internetseite dann höchstwahrscheinlich seinen Flyff Server präsentiert, also ein PC Spiel, kann man davon ausgehen das man kein Responsive Design benötigt.
Aber, hat man z.B. eine Seite wo man sein eigenes Netzwerk mit präsentiert, würde es mehr Sinn machen, hier auf responsive zu programmiern.
Warum? Ganz einfach, Netzwerke wie z.B. Facebook nutzen Menschen fast aller Altersklassen, seien es junge Berufsanfänger oder Rentner.
Und junge Menschen sind viel mit Smartphone, Tablet etc. unterwegs.
Die responsive Technik gibt es seit CSS3 da dort die Media Queries zugekommen sind. Man kann Media Queries in verschiedenen Arten anwenden. Media Queries sind eigentlich nichts anders als CSS Befehle, die aber nur geladen werden wenn die Auflösung des Gerätes ..px entspricht (.. = irgendein px Wert).
Es gibt unterschiedliche Arten die Media Queries anzuwenden. Ich verwende immer folgende:
- Ich lade ein Zweite CSS Datei in mein Template (z.B. responsive.css)
- Ich wende hier die Media Queries an
Es gibt noch eine andere Methode die ich aber nicht anwende da ich es so gelernt habe wie oben beschrieben.
- Man lädt mehrere CSS Dateien für die verschiedenen Entgeräte in ein Template
In die responsive.css Datei, so wie ich es immer mache, muss dann folgender Media Querie:
Quellcode
Das sind Auflösungen die völlig reichen, meiner Meinung nach.
Jetzt kann man anfangen, seinen Browser z.B. auf 240px Breite zu ziehen und mit Firebug anfangen zu "Stylen".
Unten im Browser darf keine Scrollbar nach Links und Rechts sein, alles muss untereinander stehen.
So könnte man es machen!
Wenn man das alles für die Größen 240px, 320px, 480px, 600px, 768px & 980px gemacht hat, hat man ein responsive Design.
Vielleicht konnte ich mit diesem Beitrag dem ein oder anderen die responsive Webdesign Programmierung ein bisschen erklären und den Einstieg in die Programmierung leichter machen.
Gruß, sn0w!