Mobil werden mit TYPO3 - los gehts!

Mobile Nutzung und responsives Design von Webseiten sind das A und O im digitalen - das soll auch TYPO3lern nicht vorenthalten bleiben! Auch wenn die Umstellung mit ein paar Hürden verknüpft ist, machen wir euch im News Beitrag Mut, einen weiteren Schritt in Richtung mobiler Nutzung zu wagen.

Eine Webseite schnell und einfach mit dem Tablet oder Smartphone checken: Mobile Nutzung und responsives Design gewinnen eine immer größere Bedeutung und werden vor allem immer wichtiger! TYPO3 ist da keine Ausnahme.

 

Alle EntwicklerInnen, die eine Webseite betreiben, wissen um die Wichtigkeit mobiler Nutzung, denn eine Website, die kompatibel mit mobilen Endgeräten ist, steigert natürlich auch ihre Sichtbarkeit, da User sie nicht platzgebunden aufrufen müssen.

 

In diesem Beitrag geben wir euch Tipps zur Gestaltung eines “mobile-friendly” Frontends eures TYPO3 und auf was ihr dabei achten solltet. Wer also seine aktuelle Webseite mit TYPO3 betreibt, der sollte sich diesen Artikel nicht entgehen lassen.

 

Where to start…

 

Wer komplett von vorne beginnt, der muss (natürlich) zuerst einmal eine neue Webseite aufsetzen. Dies kann man am einfachsten über die Bootstrap Package Extension wie im Introduction Package machen. Vorteil daran ist, dass das Frontend bereits “ mobile-friendly” ist und daher nicht mehr vieler Änderungen oder Anpassungen im Hinblick darauf bedarf.

 

Diese Tipps solltet ihr befolgen

 

Wer allerdings eine bereits existierende Webseite responsiv gestalten möchte, der muss etwas mehr Arbeit investieren. Mit einem nicht-standardisierten Template und einem eigenen TypoScript muss man ein paar Schritte befolgen, damit die Webseite nachher mobil funktioniert.

 

  1. HTML5 ist euer neuer bester Freund:

     

  2. Eure Webseite sollte mit HTML5 laufen - und das von Grund auf. Wenn euer Source Code mit beginnt, seid ihr auf jeden Fall auf der sicheren Seite! Falls eure Webseite noch mit HTML4 läuft, sei euch geraten, zu HTML 5 zu wechseln, auch wenn das einige Zeit in Anspruch nehmen wird. Wenn ihr die neueste Version des TYPO3 CMS besitzt, ist das ganze etwas einfacher: Fügt einfach folgendes in eurer TypoScript Setup ein, um mit HTML5 zu arbeiten: config.doctype = html5. Fertig!

     

  3. Plugins vermeiden

     

  4. Für das reibungslose Funktionieren eurer mobile Webseite stellen einige Plugins unnötige Störfaktoren dar! Versucht deshalb Flash als Ausweichmöglichkeit zu verwenden, aber hauptsächlich auf HTML5- und Canvas-Elemente zu bauen.

     

  5. Caching. Caching. Caching.

     

  6. Bevor ihr alles startet, solltet ihr sichergehen, dass die Webseite komplett gecached ist, damit die Geschwindigkeit nicht eingeschränkt wird. Das funktioniert aber natürlich nur für statische Seiten ohne User Interaction.

 

Nicht aufgeben!

 

In den nächsten Wochen werden wir immer wieder Beiträge rund ums responsive Frontend veröffentlichen und euch mit Tipps, Tricks, Rat und Tat zur Seite stehen, sodass hoffentlich bald all eure Seiten über mobile Endgeräte erreichbar und optisch angepasst sein werden!

 

 

Quelle: https://typo3.org/gomobile/