Druckbare Version
Hallo,
ich möchte meine Seite mit einem responsive Layout erstellen. Gibt es zu diesem Thema Tutorials? Ich habe mich schon ins Thema eingelesen, aber weiß nicht so recht, wie ich das jetzt am Besten angehen soll. Vielleicht kann mir jemand helfen?
Vielen Dank schon mal!
Es gibt dazu soweit ich weiß keine Tutorials, was aber auch daran liegt, dass hierbei die Hauptarbeit beim Webdesigner liegt, nicht beim CMS.
Du kannst in Contao ganz normal dein CSS schreiben, Media Queries anlegen, bei Bedarf auch den HTML-Aufbau in den Templates ändern. Von der Seite steht dir das CMS in keinster Weise im Weg, sondern erlaubt einen sehr einfachen Zugriff auf alle Punkte.
Abgesehen davon wird es auf der Contao-Konferenz im Sommer einen Vortrag zum Thema geben.
// Der Vortrag ist von Marie Dietz (am 2. Tag) - Beschreibung von der Contao-Konferenz-Website:
Zitat:
Responsive Design im Web bekommt mit den neuen Möglichkeiten von CSS3 und dem Zuwachs unterschiedlicher Endgeräte (Smartphones, Tablets...) seit einiger Zeit immer mehr Aufmerksamkeit.
In der Vergangenheit wurden mobile Webseiten eher als Nischenthema gesehen, direkt auf mobile Applikationen ausgelagert oder mit diversen Baukastensystemen in ein Korsett gesteckt, welches wenig Raum für eine individuelle Gestaltung überlie.. Eine flexible Ausgabe für Geräte unterschiedlicher Hersteller und Betriebssysteme wurde dabei oft außer Acht gelassen.
Ein Umdenken in der Konzeption und die Einführung der Media Queries in CSS3 machen eine unabhängigere Ausgabe möglich. Denn statt wie bisher, die Seiten an ein bestimmtes Ausgabemedium anzupassen, können mit dem Einsatz von Media Queries Eigenschaften und Fähigkeiten wie Breite und Höhe des Browserfensters, die Bildschirmauflösung oder auch die Ausrichtung (z.B. Portrait u. Landscape) abgefragt und Inhalte entsprechend aufbereitet ausgegeben werden.
Ich möchte mit meinem Vortrag eine Einführung in das Thema Responsive Design geben, welche anderen Möglichkeiten es bisher gibt/gab und welche Vor- oder Nachteile sich daraus für das mobile, fluide Webseitendesign ergeben.
Darauf aufbauend führe ich vor, wie und mit welchen Methoden man z.B. Media Queries bei der Arbeit mit Contao einsetzen kann und was es hierbei zu beachten gibt.
Waere das Thema "Webdesign fuer mobile Geraete / responsive Webdesign" nicht eine eigene Rubrik wert - wo man auch Infos und Links sammeln koennte? Eine Art Erfahrungsaustausch. Irgendwie ist das bei mir aktuell der Bereich mit den meisten Fragezeichen und sicherlich geht es anderen auch so. Dabei bietet Contao so viele Moeglichkeiten wie Mobilcore ...
Gruesse!
Responsive Webdesign ist hautsächlich mit CSS zu lösen. Mit Media Queries werden die Bildschirmgrößen abgefragt und vom Webdesigner ein für diese Bildschirmgröße optimiertes CSS bereitgestellt.
Hier ist eine Seite, die das verständlich erklärt.
Auch dieses 1140px-CSS-Framework zeigt in den mitgelieferten CSS-Dateien, wie Media Queries anzuwenden sind.
Hallo,
im ER gibt es eine Erweiterung: [flexi_responsive_template].
Nach der Installation hast Du eine cto.-Datei unter tl-files, die Du dann über den Theme-Manager installieren kannst. Ich hab zwar bei der Installation viele Fehlermeldungen bekommen, und es ist auch nichts kommentiert, aber zum "reinschnuppern" finde ichs nicht schlecht.
Gruß Manfred.
Ich finde die Erweiterung Mobilcore genial. Mein größtes Problem ist das Testen. Sicherlich kann ich den Firefox zusammenschieben, aber durch Mobilcore muss man schon wirklich mit einem Tablet kommen. Smartphone habe ich mir endlich zugelegt - jetzt fehlt nur noch das geeignete Tablet. Wobei ein ipad 3 unnütz wäre, da das eine Breite von 1500 px hat und die Webseiten normal darstellt.
Oder gibt es irgendwo im Web Testseiten für Tablets?
Grüsse!
Grundlegend habe ich es ja verstanden und diese Erklärung hat mir zum Verständnis sehr geholfen.
Aber im Detail möchte ich eine waagerechte Navigation im Header durch Zusammenschieben des Broserfenster in eine senkrechte Navigation umwandeln mittels CSS. Aber meine CSS-Angaben für die Navigation in den Media-Query's behindern sich gegenseitig.
Dann versuchte ich es mit einer zweiten Navigation mit der ID=mobil und blendete sie beim großen Browserfenster über display {none} aus. Dann war sie nicht zu sehen, aber bei zusammengeschobenen Fenster war dann auch keine zu sehen, wenn ich die normale .mod_navigation dort auch über display {none} ausblendete.
Hat jemand eine Idee oder Lösungsansatz wie man eine horizontalen Navigation mittels media queries in eine vertikale Navigation umwandeln kann.
Vielen Dank im Voraus
Goody
Damit die Media Queries greifen, müssen sie in der Reihenfolge nach deinem normalen Navi-CSS aufgerufen werden.
Die Reihenfolge der Queries ist ebenfalls wichtig. Abfrage für den größten Bildschirm oben und dann nach unten kleiner werdend.
Alle relevanten Positionierungen wie: float, width, padding, margin, height, etc müssen in den Queries für die abgefragte Bildschirmgröße angepasst oder komplett neu definiert werden - je nach Anforderung. Dabei musst du genau die Selektoren aus der ursprünglichne Navi-CSS nehmen, die dadurch überschrieben werden - deshalb ist auch die Reihenfolge so wichtig.
Dem kann ich wirklich nur beipflichten!Zitat:
Zitat von Wian
RWD erfreut sich momentan extrem wachsender Beliebtheit bei meinen Kunden. Alle glauben allerdings, es gäbe dafür irgendeinen Knopf und zack ist die Website mobil. Habe mir gerade das Buch "Mobiles Web von Kopf bis Fuß" geholt. Das momentan einzige am Markt, das dieses Thema überhaupt vorrangig und sehr gut behandelt. Hier wird deutlich, dass - wenn man es richtig machen will - doch eine ganze Menge mehr zu beachten ist, als nur ein paar Media Queries einzubauen. Bei den meisten Websites, die ich bisher gesehen habe, bleibt z. B. der Inhalt meist identisch, nur eben anders angeordnet. Dies berücksichtigt aber nicht die z. T. erhebliche langsamere Anbindung und die geringeren Kapazitäten der mobilen Geräte. Hier müssten eigentlich andere Inhalte ausgeliefert werden. Da wird es dann schon schwierig z. B. mit Slideshows, die immer eine feste Größe erfordern. "Mobile first" wäre z. B. eine Thematik, sowie die Entwicklung wirklicher responsive Extensions für Contao, so dass z. B. Slideshows tatsächlich Bilder in unterschiedlicher Auflösung ausliefern können und die Bilder nicht einfach klein skaliert anzeigen.
Grüße
Sitting Bull
Hi Wian,
gibt es, schaumal hier http://www.responsinator.com/Zitat:
Zitat von Wian
Gruß Doro
Ich habe auch verschiedene Links gesammelt, wo »devices« simuliert werden. Es ist jedoch ein großer Unterschied ob man die Seite simuliert und mit einer Maus bedient oder ob man sie auf einem echten Tablett oder Smartphone »befummelt«.
Daher habe ich mir letzte Woche dieses Gerät hier für € 120,– bestellt:
http://www.amazon.de/gp/product/B007...=1&s=computers
Wenn man auf youtube nach Odys Next sucht, wird man auch fündig. Dort bekommt man eine gute Vorstellung wie das Gerät funktioniert.
Kann ich nur empfehlen.
Da geb ich dir absolut recht!Zitat:
Es ist jedoch ein großer Unterschied ob man die Seite simuliert und mit einer Maus bedient oder ob man sie auf einem echten Tablett oder Smartphone »befummelt«.
habe gerade bei einem Test unter dem Responsinator einen Unterschied in der Darstellung auf dem IPAD3 zu verzeichnen, das wird eindeutig anders dargestellt.
Hi, responsive webdesign ist schon eine tolle Sache. Ich habe bisher auch 2 Seiten umgesetzt und Contao ist bestens dafür geeignet. Dabei haben mir auch folgende Seiten geholfen. Der Nachteil der Geschichte ist eben das die Bilder mit der vollen Größe geladen werden und per CSS skaliert (width: 100%) wird. Deshalb passen sich die Bilder der Größe an.
Hier meine Beispielseiten:
Hier die Informationsseiten:
- http://webdesignledger.com/resources...slider-plugins (responsive slider)
- http://mobile.smashingmagazine.com/2...bile-websites/ (responsive menus))
- http://webdesignerwall.com/demo/mobile-nav/ (responsive menus)
- http://www.getskeleton.com/ (boilerplate für das responsive webdesign)
- http://cssgrid.net/ (css gridsystem)
Viele Grüße, Wandski
Hi wandski,
Beispiel 1 ist echt eine coole Seiten, gefällt mir ausgesprochen gut,
bei der zweiten sind mir zu viele unterschiedlich Grüntöne dabei. Aber die ist ja auch noch in Arbeit.
ist bei Beispiel 1 der Flexi slider im Einsatz?
ich kämpfe gerade mit den CSS dazu, mich irritiert das Höhen und Seitenverhältnis von dem Teil.
im Moment kann ich noch nichts zeigen, das ist noch alles im absoluten Rohbau. Stelle die Seite aber später gerne auch zur diskussion und ja responsive webdesign ist eine tolle Sache, aber ehrlich gesagt finde ich das auch ganz schön schwierig, was alles zu Bedenken ist, aber vielleicht wird auch das mit der Zeit leichter.
übrigens habe ich das mit den Bildgrössen inzwischen mit lazyResize gelöst, nachdem ich an dem Einbinden von adaptive-images irgendwie gescheitert war. Außerdem ist es ja auch vielleicht auch schöner mit "hausinternen" Contaomodulen zu arbeiten.
Hier der Forenbeitrag dazu.
und danke für die Links.
herzl. Gruß Doro
Hi Doro,
danke für den Hinweis und den Link zum Beitrag. Ja im 1. Beispiel (Umsetzung eines Templates von Themeforest) ist der Flexi Slider integriert. Ich habe die Bilder mit meinen Proportionen 940x375px erstellt und die Breitenangabe ist halt 100% hausintern auch in der Flexi CSS. Die Höhe nimmt er dann vom erstellten Bild und daraus resultiert das Format.
Ich habe hier auch einen sehr schönen Slider der für das responsive design geeignet ist.HTML-Code:.flexslider {width: 100%; margin: 30px 0 70px 0; padding: 0;}
.flexslider .slides > li {display: none; margin-bottom:0;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
- http://www.pixedelic.com/plugins/camera/ (Augenschmankerle)
An dem 2. Layout farblich und technisch gesehen muss noch geschraubt werden. Ist eben auch ne menge Arbeit und testen. Aber so ist es halt eben. Der Kunde, der Webdesigner und der Nutzer....
Viele Grüße, Rene
Hallo Rene,
inzwischen habe ich schon gesehen, es handelt sich hier tatsächlich um eine leicht verwechselbare Namensähnlichkeit.
Was Du hast, ist offenbar der Jedo FlexiSlider, ich habe gerade den Flexi Slider im Einsatz.
Anhang 8322
welchem ich jetzt den Vorzug gebe bin ich mir noch nicht im Klaren.
Danke für deinen CSS-Schnipsel, den teste ich jetzt mal, freu*
Grüße Doro
nachtrag: der Flexi Slider ist hier zu finden
Hallo zusammen!
Ich möchte mich hier einklinken, weil ich zum Thema responsives Layout auch zwei Fragen allerdings mehr allgemeiner Natur habe, die mir unter den Nägeln brennen. Ich hoffe es geht in Ordnung dazu keinen extra-Thread aufzumachen.
Es gibt ja bekanntlich eine Menge externer, responsiver css-Frameworks. Seit Tagen google ich auf der Suche nach Hinweisen wie man diese Frameworks HTML-technisch (!) in ein CMS und speziell in Contao einbindet. Ich habe nichts gefunden. Selbst Merz und Müller halten sich in ihren Contao-Wälzern dazu eher bedeckt.
1. Da ja der Kopf und der Fuß ebenfalls anpassungsfähig sein soll, wird man nicht um eine angepasste fe_page in Contao herumkommen. So dass es wohl nicht reicht, nur die externen Framework-Stylesheets einzubinden. Ist das richtig?
Heißt das: ich müsste den Header und den Footer in Contao sozusagen außer Kraft setzen? Kann mir jemand bitte sagen, wie man das macht?
2. Contao 3: Wie ich mit Interesse gelesen habe, bringt Version 3 ein responsives Raster mit. Ich kann nicht beurteilen wie gut/ flexibel dieses Grid ist. Vielleicht gibt es dennoch Gründe oder Vorlieben, die dafür sprechen, ein fremdes css-Framework (z.B. Skeleton) auch dort zu benutzen. Muss man dann wie bei Punkt 1 auch hier die fe_page anpassen?
Vielen Dank für eure Hinweise
Gruß
Thannhäuser
Ethan Marcotte hat seinen ALA-Artikel zu "RWD" im Mai 2010 veröffentlicht. Da ist quasi der Begriff erfunden worden. Richtig ins Rollen gekommen ist die Sache mit dem Erscheinen des ABA-Buchs "RWD" im Jahre 2011. Marcotte meint damit drei Dinge: "fluid grids", "flexible images" und "media queries".
Der Begriff hat von Anfang an für Verwirrung gesorgt. Jeffrey Zeldman hat das sehr schön ausgedrückt in seinem Blog-Artikel "RESPONSIVE DESIGN. I DON’T THINK THAT WORD MEANS WHAT YOU THINK IT MEANS." Seit Fazit ist:
Seitdem wird unter "responsive" so ziemlich alles verstanden, was nicht "festgenagelte Breite in Pixel" ist. Wenn also jemand was "responsive" machen will, sollte er erst genau überlegen, was genau er damit eigentlich meint.Zitat:
Our understanding of 'responsive design' should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user's display and the limitations or capabilities of the device.
Stimmt. Fast soviel wie Definitionen von "responsive". Und das wiederum sind fast so viele wie Facebook-User.Zitat:
Zitat von thannhäuser
Ich habe so ein bisschen das Gefühl, dass du dich von dem Vorhandensein so vieler toller Responsive-Frameworks ein bisschen kirre machen lässt. Ich habe bis jetzt noch keines gesehen, dass irgendwas könnte, was zum Beispiel YAML nicht auch könnte. Und einarbeiten muss man sich immer ;)
"Merz" ist im August 2010 erschienen. "Müller" im Oktober 2010, mit einer zweiten Auflage im November 2011. Da kann zum Einbinden von "responsive Frameworks", die zum großen Teil nach diesen Büchern entstanden sind, wirklich nicht soviel drinstehen.Zitat:
Zitat von thannhäuser
Ein CSS-Framework setzt oft eine bestimmte HTML-Struktur voraus, und wenn das nicht zufällig dieselbe ist wie in der fe_page, ja dann brauchst du eine anderes Seitentemplate.Zitat:
Zitat von thannhäuser
Warum? Darf eine "responsive Website" keinen Header oder Footer haben? Aber sei's drum: Im Seitenlayout kann man die Header oder Footer de-aktivieren.Zitat:
Zitat von thannhäuser
Einfach ausprobieren. Aber überlege dir vorher etwas genauer, was du erreichen willst ;)Zitat:
Zitat von thannhäuser
So. Das reicht für heute. "Müller" muss jetzt wieder ans Buch schreiben. Contao3. Und die Beispielsite läuft schon wie geschmiert. Auch die mobile Version. Und responsive wird das auch noch. Whatever that may mean...
Wie eh und je fundierte Auskünfte. Vielen Dank dafür, pmmueller!
Dennoch, die Frage nach der Anpassung des Contao-Seitentemplates ist noch offen. Weder auf den Websites von Gumby, Skeleton oder 960gs noch in den dazugehörenden Downloads dazu, habe ich die jeweiligen HTML-Strukturen entdeckt. Selbst wenn, ist mir nicht klar, wie das im fe_page HTML/PHP-Code anzupassen wäre. Schade, dass man dazu nirgendwo eine Anleitung finden kann.
Der erheiternde Einwand, ob eine resp. Website keinen Header und Footer haben darf, geht wohl auf meine unglückliche Formulierung zurück. Meist gehen ja die externen css-Frameworks von einem umgebenden <container> aus. (Vielleicht entspricht das dem Contao-wrapper?) Dann ließe sich, so verstehe ich das als Laie, Header und Footer nicht mit der Standard-fe_page ansprechen.
Gruß
Thannhäuser
Es gibt den #wrapper. Der liegt um header, container und footer. Du kommst mit der Standard fe-page meist ganz gut klar. Oder verstehe ich dich falsch?Zitat:
Zitat von thannhäuser
Wenn Contao tatsächlich mit den externen css-frameworks meist klar kommt – um so besser.
Dann komme ich dann einmal vom Theoretischen ins Praktische und probiere es aus.
Vielen Dank für deine Antwort.
Gruß
Thannhäuser
@thannhäuser nehme Dir doch mein erstes Beispiel. Da habe ich die fe_page gar nicht angefaßt oder brauchte es verändern. Zum tragen kommt das Skeleton CSS Framwork. Das hauseigene Framework wurde deaktiviert und die Spaltenkonfiguration wurde einspaltig gewählt. So wenn Du dann in den Quelltext schaust siehst Du vielleicht Deine Antwort auf die Fragen. Aber wie meine Vorredner schon sagten, egal welches System eine Einarbeitung ist immer von Nöten. Baue Dir doch erstmal eine Demoseite ohne CMS um den Aufbau zu verstehen.
Hier findest Du eine paar freie Template dazu: http://designmodo.com/html-responsiv...ite-templates/
Gruß Rene
PS: @pmmueller sehr erfrischender Beitrag... ;-)
ich selbst kann zu der Diskussion mit den Grids wenig fundiertes beitragen,
aber ich habe gesehen, dass wandski's erstes Beispiel offenbar mit Skeleton umgesetzt ist,
vielleicht kannst Du da mal in die CSS bzw. den Quelltext schauen.
Vielleicht kann er ja auch noch was über seine Erfahrung damit sagen,
das würde mich auch sehr interessieren.
herzl. Gruß Doro
p.s uups wandski war schneller als ich :D
@Rene: Vielen Dank für Deinen Beitrag auf meine Anfrage! Ich bin wirklich froh, dass sich noch jemand meldet.
Ich muss in dieser Sache einen Knoten im Hirn haben weil ich das nicht verstehe.
Mir ist beim Durchlesen dieses Threads sehr wohl aufgefallen, dass du das Skeleton verwendest mit dem ich auch liebäugle. Übrigens Deine Lösung, Beispiel 1, finde ich auch beeindruckend.
Du schreibst, "das hauseigene Framework wurde deaktiviert". Wir sprechen von der fe_page, ja? Im Seitenlayout kann man das aber doch nicht deaktivieren (Contao 2.11). Und, vielleicht blöde Frage, aber von irgendwoher muss ja schließlich ein HTML-Gerüst kommen? Außerdem ist das ja auch noch eine HTML-PHP-Kombi.
Gruß
Thannhäuser
Nachtrag: Die Frage für mich ist: woher nimmst du das HTML-Gerüst für z.B. Skeleton und wo schreibst du das hin (wenn nicht in eine fe_page-Kopie)?
Rene hat doch glaube ich geschrieben, dass die fe_page unverändert bleibt.
Mit CSS-Framework ist wohl der Layout-Builder gemeint. In Contao 3 RC1 kannst du im Seitenlayout superbequem alles vom Contao-CSS-Framework ausstellen und an gleicher Stelle deinen externen Stylesheets von irgendeinem Skelett oder Golden Grids Dingelbumbel einbinden.
Wenn ein CSS-Framework keine bestimmten HTML-Strukturen voraussetzt (wie z. B. das bei YAML der Fall ist), dann funktioniert das mit der Gestaltung über die Vergabe von Klassen. Darum setzt du im Seitenlayout alles auf eine Spalte und die Gestaltung machst du mit den Klassennamen bei den Artikeln oder Inhaltselementen.
Leo hat dazu einen schönen Beitrag geschrieben:
http://www.contao.org/de/news/den-la...mbinieren.html
Ist zwar nicht "responsive", aber zum Lesen und Verstehen der Prinzipien bestimmt nicht schlecht.
Na das ist doch eine Auskunft auf den Punkt gebracht!
Herzlichen Dank Peter Müller
Mit freundlichem Gruß
Thannhäuser
Durch Zufall habe ich heute, im Firefox Addon Web Developer V. 1.2.2, eine Vorschau für Responsive Layouts entdeckt!Zitat:
Mein größtes Problem ist das Testen.
Risize --> View Responsive Layouts
Steffen Winde
Danke für den Hinweis, dann braucht man nicht mehr den http://responsinator.com/
Habe diese Seite gefunden: 8 popular online apps to test the mobile version of your site: http://www.webdesignerdepot.com/2011...-of-your-site/
Ich habe gestern mit dem http://validator.w3.org/mobile/ eine Seite getestet und er hat viel gemeckert. Vorhin habe ich die gleiche Seite noch einmal getestet und komischerweise waren es weniger Fehler :(
Der Logik des mobilen w3c-validators nach, müsste jede Seite eine mobile Version haben.
Eine kleine vielleicht dumme Frage dazu: wie geht man eigentlich mit winzigen Displays mit riesiger Auflösung um?
Es gibt ja z.B. nur 11 cm hohe Disples mit hochkant bald 2000 px Auflösung, da bringt dann ja die Abfrage nach Auflösung gar nichts, weil die Seite darauf winzig erscheint.
Retina?
Gesendet von meinem SM-G935F mit Tapatalk
z.B. das SGS4
Das SGS4 meldet eine device-width von 360px, also nur ein Drittel der Pixelauflösung des Displays. Das wird nun per Meta-Tag als Breite des Viewports gesetzt.
Also ist auf dem Ding für den Browser der Viewport 360x640px. Darauf beziehen sich dann auch die ganzen Pixelangaben im CSS. Dass das Gerät eigentlich tatsächlich eine wesentlich höhere Auflösung hat, nämlich 1080x1920px, ist eine andere Geschichte und insbesondere bei Bildern interessant. Wenn du z.B. per CSS ein Bild auf 100x100px Größe festlegst, sollte die Bilddatei mindestens 300x300px groß sein, um eine möglichst scharfe Darstellung zu bekommen. Damit entspricht dann ein Bildpixel einem Bildschirmpixel, ansonsten würde das Bild praktisch aus 3x3(Bildschirm-)Pixel großen Blöcken aufgebaut, was natürlich mögliche Bildschärfe verschenkt.HTML-Code:<meta name="viewport" content="width=device-width,initial-scale=1.0">
Edit: Wahrscheinlich würden keine 3x3 Blöcke mit konstanter Farbe gerendert, sondern es würde interpoliert. 100x100 Bildpixel würden auf 300x300 Bildschirmpixel hochgerechnet, mit den selben Folgen wie auf einem "normalen" Bildschirm, ein unscharfes Bild.