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-boun...@lists.typo3.org
[mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Reinhold Gräbe
Gesendet: Donnerstag, 2. Oktober 2014 18:14
An: typo3-german@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
