 |
| Bild @2designers.wordpress.com |
Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung von Websites, so dass diese Websites auf Eigenschaften des jeweils benutzten Endgeräts reagieren können. Der grafische Aufbau einer „responsiven“ Webseite erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie beispielsweise Navigationen, Seitenspalten und Texte. @Quelle: Wikipedia
Einfach gesagt: Das eigene Layout wird so gecodet, dass es sich auf das jeweilige Gerät bzw. auf die jeweilige Bildschirmgröße anpasst, also flexibel ist. Das ist praktisch, da die Website dann mit dem Handy, Tablet, Notebook oder PC aufgerufen werden kann und überall korrekt angezeigt wird. Codet man ein Design nur für eine bestimmte Bildschirmgröße läuft man Gefahr, dass die Website beim Besucher nicht richtig angezeigt wird.
Eine Zwischenlösung sind die sogenannten Liquid Designs. Hier werden die festen Pixelangaben in der CSS (z.B. style.css) einfach durch Prozente ersetzt. Das sieht dann zum Beispiel so aus:
/* Fixe Breite */ body {width: 1024px;
}
/* Dynamisch */
body {
width: 100%;
}Natürlich ist das keine optimale Lösung. Doch möchte man zum Beispiel nur die Header Größe oder nur ein Element anpassen ist das völlig ausreichend.
Ein besserer aber auch aufwendigerer Weg wäre, verschiedene Stylesheets für die Geräte anzulegen. Das könnte so aussehen:
Mit der Eigenschaft "device-width" könnt ihr gezieht eine bestimmte Breite bzw. somit ein bestimmtes Gerät wie zum Beispiel das iPhone 3G mit einer Auflösung von 480x320 Pixel ansprechen.
Bisher habt ihr wahrscheinlich media="screen" in eurem Code stehen. Screen steht für "Bildschirm"(Computermonitor). Eine
Natürlich ist es ziemlich viel Arbeit die eigene Website auf die Geräte anzupassen und für unsere Hobby Zwecke hier wohl eher übertrieben. Trotzdem möchte ich euch kurz zeigen, was alles möglich ist.
 |
| @total4net.de |
An dieser Stelle möchte ich die Media Queries erwähnen. Mit diesen ist es möglich, innerhalb der Stylesheets gerätespezifische Eigenschaften abzufragen. Zum Beispiel könnt ihr hiermit die Breite des Bildschirms auf dem die Website gerade angezeigt wird ermitteln. Das sieht dann so aus:
/* Code der Smartphone-Version */
@media screen and (min-width: 500px) {
/* Code für große Smartphones, kleine Tablets */
}
@media screen and (min-width: 800px) {
/* Code für Tablets */
}
Weitere Informationen zu Media Queries und wie sie funktionieren findet ihr auch auf Selfhtml.
Auf den folgenden Seiten könnt ihr euch übrigens ansehen, wie eure Website auf dem IPhone und/oder IPad aussehen:
Besucht ihr manchmal von eurem Tablet oder eurem Smartphone aus AniMa Websiten? Was fällt euch auf? Welche Websiten besucht ihr gerne auf euren Geräten?
find ich cool =D
AntwortenLöschenwäre mal eine überlegung wert?
wobei ich eigentlich nicht mit handy auf pages geh ^^"
danke für das tolle tut ^^
Ich besuche öfters Blog mit dem Handy und mit dem Tablett eigentlich alles :D Uiii es freut mich total das es dir gefällt -^.^- Dachte mit ich erwähn einfach mal -.^ :*
Löschen"Tablet" natürlich mit einem T xD
LöschenAn sich ein toller Post. Informativ und auch interessant.
AntwortenLöschenAber selbst werde ich mir wohl nicht die Mühe machen, meine Layouts für alles anzupassen. Zum Einen hab ich ja so schon immer genug Ärger mit meinen Layouts xD Zum anderen kann ich es nicht ab, wenn ich etwas code und dann nicht kontrollieren kann, ob es so richtig ist und da ich jemand bin, der weder Tablet, noch ein internetfähiges Handy hat, versuch ich es gar nicht erst.
Aber gut zu wissen, wie es im groben geht, ist es allemal^^
Dankeeee ^_^ Ich dachte mir schon, dass das für die Meisten zu viel Arbeit wäre. Ich habe meine Designs auch (noch?) nicht angepasst :D Bin auch zu faul xDD Es gibt im Internet wie im Post erwähnt Emulatoren wo du dann gucken kannst wie deine Website auf gewissen Geräten aussieht ^_^ Ein Handy oder Tablet brauchst du dafür nid :*
LöschenKann da Aris nur zustimmen. Atm hab ich kein Handy mit Internet und an Tablet bin ich eh nicht interessiert~ und kenne auch niemanden der ein Tablet hat(finden es relativ sinnlos xD). Man kann es also nicht wirklich nachprüfen.
AntwortenLöschenIch stelle mir das ganze auch recht kompliziert vor wenn man ein komplett durchgehendes Desing hat, was man dann ja auch alles anpassen müsste und uoh ... das wär mir viel zu viel Arbeit~, nur für meine Staffelpage und auch für eine GFX-Page fände ich es persönlich nicht lohnend. Ich wüsste zumindest keinen Grund eine GFX-Page mit dem Handy zu besuchen.
Für mein neues Projekt werde ich dies umsetzten, aber eher aus dem Grund weil es ein Interaktives Spiel wird~ und es da immer schön ist wenn man auch mal zwischendurch mit Handy und Co drauf zugreifen kann.
Ich habe Tablets auch immer für sinnlos gehalten: und das sind sie auch wirklich xD Es ist einfach eine rumspielerei und ganz praktisch wenn man mal unterwegs ist -^.^- Seit ich eins habe sitze ich irgendwie öfters dran als ich gedacht hab xD
LöschenAnschauen wie die eigene Website aussieht kann man auch auf online Emulatoren (wie oben erwähnt ;)), man braucht dazu also kein Handy oder Tablet -^.^-
Da hast du recht, das Ganze ist wirklich je nach Design kompliziert, vor allem wenn man viele einzelne Elemente hat. Für eine kleine Hobby Seite ist es wirklich zu viel Arbeit wobei man sich auch Fragen muss, ob eine GFX Page auf einem Handy oder Tablet laufen muss? oO Vielleicht wenn man solche Hintergründe anbietet ?_?
Ein neues Projekt? <3 <3 Ein Interaktives Spiel? <3 <3 uiii da bin ich ja gespannt *__*
Also ich finde responsive genial und nutze es...im Beruf !
AntwortenLöschenAuf meinen Privaten Seiten sehe ich den Sinn einfach nicht, sie responsive zu machen. Klar, vlt ist es bei Staffelpages sinnvoll, wenn man Abends im bett liegt und per Handy Episoden lesen möchte. Aber dafür hat man dann oben (bei meinem Handy jedenfalls) die option, den >Reader< zu drücken, der in schöner form den text dann auch wiedergibt :D
Wer aber seine Seite dennoch gerne Testen möchte, den kann ich dieses Script hier empfehlen: http://lab.maltewassermann.com/viewport-resizer/
Ihr Speichert euch das Script (wie auf der Seite beschrieben) in die Favoritenleiste, besucht eure Seite, klickt das Script in eurer Leiste und schon könnt ihr alle Viewports (also Ausgabegeräte) testen.
Die genialsten Tutorials (ich habe den kompletten Workshop von ihm durch) sind immernoch von Jonas Hellwig und auf seinen Blog Kulturbanause gibt er nicht nur super TIpps, sondern auch Tutorials (auch für "Anfänger") wie man am besten mit Responsive arbeitet.
Empfehle ich jedem, der wirklich so viel Zeit und Aufwand in sein Hobby stecken will:
http://blog.kulturbanause.de/2013/01/starre-layouts-in-flussige-layouts-umwandeln-responsive-webdesign-basics/
Wirklich cool,
AntwortenLöschenich selbst achte da immer drauf - wenn ich zum Beispiel für nen Kunden ein Webdesign erstelle oder so das diese auch für Handys gut abrufbar sind. Bei mir habe ich den Vorteil das ich da nen Plugin für habe das sofort ein extra Design aktiviert wird, wenn wer mit dem Handy auf meine Seite geht - extra für Handys gemacht und so :)
Responsive Design wird in der Szene wohl auch in Zukunft keine größere Rolle spielen. Einige Seitenbesitzer setzen ja auch immer noch auf Tabellen und Iframes für den Aufbau ihrer Designs XD Das darf natürlich jeder für sich selbst entscheiden, doch sind wir dadurch Lichtjahre von solchen Dingen wie Responsive Design entfernt ; )
AntwortenLöschenIch glaube auch, dass es nicht wirklich bei unseren Webseiten gebraucht wird. Im professionellen Bereich hingegen schon, gerade bei größeren Kunden und Firmen, die eine deutlich größere Masse ansprechen (müssen) und da wird es so langsam aber sicher ein absolutes Muss.
Desto mehr Endgeräte es gibt, desto komplizierter wird es xDDD
AntwortenLöschenIch muss ganz ehrlich sagen, dass ich nie mit dem Handy im Internet bin. Wenn verwende ich es nur für Google Maps oder das Busplan-App, ansonsten meide ich das, weil ich es hasse bei einem so kleinen Bildschirm im Internet unterwegs zu sein.
Dass es mit einem Tablet ganz nett sein kann, kann ich mir schon vorstellen - das ist immerhin etwas größer und könnte je nach Tablet von der Größe wahrscheinlich schon mit einem kleinen Bildschirm verglichen werden.
Ich würde mir das auch nie antun, verschiedene Stylesheets zu programmieren.
Worauf ich aber schon immer schaue, ist dass ich meine Layouts flexibel programmiere. Ich verwende schon lange keine tables oder iframes mehr und setzte auf reines div-coding. Und ich arbeite auch gerne mit max-width.
Damit wird mein Lay auch bei kleineren Bildschirmen ziemlich gleich angezeigt. Ich habe jetzt zwar kein Tablet und es auch nicht mit dem Handy getestet, aber alles über 500px breite müsste eigentlich gehen :)
Hab es mit verkleinertem Explorer probieren.
Mich würde es aber interessieren:
Wie groß ist denn dein Tablet und sieht man Delu da einigermaßen normal? o.o
Huhu,
AntwortenLöschenIch arbeite dafür mittlerweile mit foundations (eine Sammlung von css und js files). Das gute daran ist, dass bereits Classes vordefiniert sind, so dass man diese einfach nur noch vergeben muss. Das arbeitet mit einem gridsystem und bringt im Grunde alles mit, was man braucht, ohne dass man alles selbst definieren muss.