-
Bild 1
-
Bild 2
-
Bild 3
Responsive Webdesign mit TYPO3
Responsive Webdesign - die neue Zukunft im Web. Nicht nur für Handys sondern für alle Mobilen Geräte. iPad, Notes, etc. Das Ziel ist es, die Barriere zu lösen. Bilder werden automatisch Skaliert, Inhalte werden automatisch angepasst zu richtigen größe im richtigen Block. Auch für Computer zuhause mehr als nur Sinnvoll. Doch wie Funktioniert Responsive Webdesign mit TYPO3? Es ist nicht so schwierig wie es aussieht. Ein paar Änderungen gehören gemacht, aber es ist machbar.
Nicht zu vergessen, es braucht die richtigen Slider und Animtationen. Diese müssen in der Regel seperat gemappt werden. Es gibt aber im Internet viel Stoff dazu!
Block1
Dies ist die erste Spalte von 3 auswählbaren. Es sind insgesamt 3 Spalten mit je 33% in TYPO3 zu finden unter 33% Spalten Layout. Der erste Block ist wie die anderen auch frei anpassbar. Ob Bilder, News, Covers etc man kann hier alles einfügen was man möchte und sie alle sind Dynamisch. Ist doch toll oder? Webdesign
Block2
Das ist nun der zweite Block. Auch dieser ist frei befüllbar, wenn man in TYPO3 das 33% Spalten Layout ausgewählt hat bekommt man nach dem Speichern einen Container, in dem sich 3 weitere befinden. Diese Container sind dann im Frontend/Ausgabe diese tollen Spalten. Einfach klasse oder? Homepageprogrammierung
Block3
Das ist nun der letzte Block. Sieht auch Dynamisch aus. Responsive Webdesign mit HTML5, das ist doch eine feine Sache. Ein Wenig Verlinken auf meine Homepage schadet natürlich nie, sind also keinesfalls Spam Links ;-) Ihr könnt das 3 Spalten Layout übrigens überall einsetzen wann Ihr wollt! Webdesigner
2 Spalten Layout
Dies ist die erste Spalte von insgesamt 2. Es wird auch wie die oberen Blöcke dynamisch Angepasst. Auswählbar ist dieses Element unter: Neues Element -> Flexibler Inhalt -> 2 Spalten 9-3 Template. Das 9 und 3 steht für die Relation der Homepage. Von insgesamt 13 Punkten braucht der erste Container 9 Punkte, die weiteren 3 braucht der kleinere Container auf der Rechten Seite (Sidebar). Auch kann es unterteilt werden in 70% und 30%.
Wie Ihr hier sehen könnt wurde ein Bild eingefügt, dieses passt sich auch automatisch an die Größe des Displays an. Probiert es einfach aus, in dem Ihr euer Browser Fenster kleiner und größer zieht. Das Bild wird dabei Automatisch neu berechnet und dargestellt. Dank HTML5 und responsive Webdesign
Das Bild kann natürlich entsprechend anders Positioniert werden. Die Überschriften können auch von euch entsprechend in der style.css geändert werden sollte dies Jemand wünschen. Das Menü ist Simple gehalten, sollte jemand ein besseres Menü haben könnt Ihr das auch ganz einfach ändern. Im Template findet man es im root Template, angesprochen wird es mit lib.nav und lib.nav2 für das Untermenü. Solltet Ihr Hilfe zu Menüs brauchen, Google ist euer aller bester Freund bei der Suche ;-) Solltet Ihr mal etwas vergeigt haben und habt keine Sicherung von dem Entsprechenden File, könnt Ihr alles hier Separat erneut Downloaden.
- Foto von A_minor (flickr.com)
Sidebar
Dies ist der zweite Teil des Contentelements. Ich nenne es mal "Sidebar". Sie wird in der Regel als Platzhalter verwendet, oder auch für eine Übersicht, Bilder, Shortnews, RSS Feeds etc. Bei TYPO3 gibt es Standardmäßig die Auswahl "Zuletzt Aktualisierte Seiten anzeigen. Das bedeutet es werden alle letzten Inhalte aufgelistet. Mit einen kleinen TYPOScript Snippet wird auch ein Inhalt dazu eingefügt. Es wirkt dadurch Modern und bekommt einen "Blogger" touch. Das TYPOScript findet man im TS-Template Ordner, es sorgt dafür das alle zuletzt Aktualisierten Inhalte angezeigt werden, mit Inhaltsvorschau und deeplinks.
Eine Demo hierzu könnt Ihr hier sehen. www.digital-designz.eu
Auswählbar unter: Menü und Sitemap -> Menütyp -> Zuletzt Aktualisierte Seiten -> Ausgewählte Seiten Auswählen.
Ihr könnt natürlich das Layout der Ausgabe entsprechend anpassen, funktioniert wunderbar per CSS. Angesprochen werden muss die Klasse <li>. Man kann der Sitemap auch eine Klasse übertragen, z.B. <li class="sitemap"> entsprechend angepasst werden muss das Snippet und TYPO3. Google ist dafür auch wieder euer Freund ;-)
Volltext
Diese Spalte nützt die Komplette Breite der Seite und ist somit das Standardelement. Auch wird diese Spalte angepasst und ist somit auch Dynamisch. Responsive Webdesign und HTML5 ist einfach Klasse!
Allgemeine Informationen:
Verwendete Extensions:
TYPO3 ist ein CMS System das viele Wege öffnet. Für Neueinsteiger Ideal, oder als Vorlage für kommende Projekte könnt Ihr dieses Template verwenden. TYPO3 ist frei und bietet einen Umfang wie kein anderes CMS. Hier ein Paar Vorteile auf einen Blick:
TYPO3 ist preiswert: es entstehen keinerlei Lizenzkosten.
TYPO3 ist flexibel: Erweiterbarkeit durch Extensions.
Mit TYPO3 sind Sie unabhängig: TYPO3 ist Open Source – damit binden Sie sich nicht an einen Hersteller.
TYPO3 ist professionell: TYPO3 unterstützt Konzepte wie einen Redaktions-Workflow, es kann über Schnittstellen an Ihr CRM-System gekoppelt werden.
Erfahrungsgemäß ist es auch sehr einfach Support und Hilfe für TYPO3 zu bekommen. Es gibt viele namhafte Agenturen die auf TYPOScript und TYPO3 Spezialisiert sind. Somit steht man nie Alleine da. Viele Informationen gibt es auch hier:
2 Spalten 6/6
Rechte Spalte
Das ist nun das 2 Spalten Layout mit den maßen 50/50. Es wird wie immer automatisch angepasst und kann frei verwendet werden für jegliche Inhalte. Als Beispiel ein Bild. Webdesign mit TYPO3
- Foto von: river61 (flickr.com)
Bewerte mein Template!
Bewertung abgeben ...
Linke Spalte
Das ist nun das 2 Spalten Layout mit den maßen 50/50. Es wird wie immer automatisch angepasst und kann frei verwendet werden für jegliche Inhalte. Als Beispiel ein Bild. Webdesign mit TYPO3
- Foto von: DomiKetu (flickr.com)