[TYPO3-german] Einfache Erklärung zu responsive

Chris Wolff - AERTiCKET AG cwolff at aer.de
Mon Oct 6 09:47:28 CEST 2014


Hi Reinhold,
Responsive Template, passt sich an den bilddschrim/breite des browser an.
Das heist aus mehreren spalten werden bei kleineren bildschrimen nur eine spalte.
Am einfachsten kannst du das wohl erfahren z.b einfach mal die http://getbootstrap.com/ aufrufst und dann den browser zusammen schiebst.
Du wirst sehen das sich die grösse von bildern verändert unnd ab einem gewissen punkt alles zu einer spalte zusammen rutscht.

Beim Aufbau einer Responsive seite geht man in der regel genau anders herum vor (Mobile First):
Sprich du definierste erstmal ein mal css für das kleinste gerät das du unterstützen möchtest. Das heist normalerweise einspaltiges layout 
Für smatphones.

Dann definierst du "breakpoints" wenn das gerät breiter als X Pixel ist. hätte ich gerne eine zweite spalte. 
Dies wird mittels CSS media queries gemacht. Damit dein inhalt jetzt weiss in welche spalte er gehört oder ob z.b beide spalten nutzen soll.
Werden in der regel zusätzliche CSS klassen verwendet.

Ja nach anforderungen kann es reichen einen brakepoint zu haben. (smartphone desktop)
Oder viele (smartphone,smalltablet, small screen/large-tablet, medium screen, large-screen ...)

Es hängt ganz davon ab wie gut sich dein layout anpassen muss. Bzw wie komplex es ist.

Die CSS frameworks wie bootstrap oder foundation  kombinieren diesen ansatzu zu dem mit einem "grid-system". 
Also 12 oder 16 Spalten für ein layout. Dadurch ist es dann einfach möglich inhalte verschiedener breiten zu kombinieren.
Diese dinge werden ebenfalls mit css classen abgeblidet. Und zum teil gibt es auch verschachtelte grids...

Soweit erstmal die basics zu einem responsive layout.

Wenn man so etwas jetzt in typo3 abbilden will ist man gezwungen. Dem redakteur eine möglichkeit zu geben. Die spalten breiten eines jeden elementes
Zu definieren. Und das Rendering muss entsprechend angepasst werden. damit die zusätzlichen css-classen auch ausgegeben werden. das kann den redaktuer vor herausforderungen stellen.

Hier gibt es extensions für typo3 die das z.b für bootstrap schon tun.
Grundsätzlich bietet aber typo3  auch von hause aus alles nötige um das ohne extension zu machen. allerdings muss man dann viel typoscript schreiben um das Rendering 
Von css_styled_content anzupassen.


zu den verschiedenen Frameworks:
ich würde das grob in frameworks und grid-systeme einteilen.
Es gibt frameworks wie twitter bootstraß und foundation, diese enthalten neben dem grid system auch noch viele nützliche "spielereiehen"
Buttons in verschieden farben, menüs, lightboxen, accordions, slider ... und sind damit im grunde eine kompletter werkzeugkasten. 
Vorteil hier ist klar man hat bei einem framework viele komponenten die gut zusammen spielen und erprobt sind. Nachteil ist das man unter umständen viel ballast mit rum schleppt 
Den man auf der eigenen seite gar nicht verwendet.

Als alternative gibt es die Responsive "grid-syteme":
Diese versuchen sich auf die kern Aufgabe von responsive zu beschränken und einem lediglich ein "grid" anzubieten in das man seinen inhalt einpassen kann.
Diese sind meistens deutlich einfacher zu erlernen, da sie weniger umfrangreich sind. Und bringen wenig balast mit. aber das heist auch das man halt nicht von vorn herrein eine auswahl an buttons in verschiedenen grössen hat.
Oder Menüs die sich gut im responsive layout verhalten. Sondern man das CSS dafür selbst schreiben muss bzw von wo anders her holen muss.

Und natürlich verschwimmen die grenzen zwischen grid-system und frameworks auch. Das es grid-system gibt die noch ein paar extra tools anbieten und auf der anderen seite 
Sehr leichtgewichtige frameworks..


Wenn du mit responsive design starten willst. Würde ich dir empfehlen erstmal eine Pure HTML seiten deines inhaltes in Resposive webdesign zu bauen.
Und zu schauen wie sich das anfühlt. Worauf man achten muss.

Es gibt für deienn lieblingsbrowser bestimmt ein addon/extension das es einfach macht responsive webseiten zu testen (in dem sie das browser fenster auf übliche grössen resizen). 


Hier noch die kleine list an frameworks mit denen ich persönlich gute erfahrungen gemacht habe:
http://getbootstrap.com/ - twitter bootstrap (das wohl bekannteste framework)
http://foundation.zurb.com/ - foundation (ähnlich zu bootstrap, etwas besser anpassbar)
http://unsemantic.com/ - responsive grid system. Nachfolger des 960 Grid systems (welches nicht responsive war)

die liste spielgelt meine vorlieben und keines dieser frameworks habe ich in einem typo3 Projekt eingesetzt.

Gruss chris



-----Ursprüngliche Nachricht-----
Von: typo3-german-bounces at lists.typo3.org [mailto:typo3-german-bounces at lists.typo3.org] Im Auftrag von Reinhold Gräbe
Gesendet: Donnerstag, 2. Oktober 2014 18:14
An: typo3-german at lists.typo3.org
Betreff: [TYPO3-german] Einfache Erklärung zu responsive

Hallo, 

kennt jemand eine ganz einfache Erklärung zu responsive Desigen. Mir würde schon ausreichen mal den Unterschied zwischen einem resposive Tempalte un dem bisherigen statischen Template einfach, ganz einfach, zu erfahren.

Wie baut man ganz einfach Schritt für Schritt eine responsive Seite auf?


Schöne Grüße

Reinhold
_______________________________________________
TYPO3-german mailing list
TYPO3-german at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german


More information about the TYPO3-german mailing list