Hi.
Ich bin gerade in der Konzeptphase für ein neues Webprojekt und fleissig am experiementieren und lernen.
Ich möchte auf jeden Fall "Zeitgemäße" Technologien verwenden. Also HTML5, CSS3, Flexbox. Und es soll ein Adaptive/Responsive Layout werden.
Ich möchte aber auch nicht massig Zeit/Ressourcen in die "Abwärtskompatibilität" stecken. Zunächst war ich auf dem Standpunkt, das Thema Abwärtskopatibilität komplett außen vor zu lassen und stur auf aktuellem Stand zu entwickeln. Aber ich habe in der Zielgruppe eine Analyse gemacht. (Bin bei einem ähnlichen Webprojekt wie bei dem von mir geplanten als Mod und Admit mit im Team)
Bei der Zielgruppe handelt es sich überwiegend nicht um "junge Leute" oder Technikfreaks, die oft mit der neuesten Technik unterwegs sind, sondern ehr um die Generation 30+.
Da wird auch gerne mal noch das ein oder andere etwas ältere Gerät genutzt. Teilweise sogar noch Windows XP. Aber dann nicht mit IE, sondern meißt Firefox.
Es werden aber "ältere Tablets" verwendet, iOS 6.x und Android 4.x User sehe ich durchaus noch.
Erstaunlich ist, dass der Anteil von Tablet und Smartphone Nutzung innerhalb der Zielgruppe schon bei über 40% liegt. Und das, obwohl die Seite keine Mobilvariante bzw Mobiloptimierung hat, sondern vom Layout und technisch ungefähr auf dem Stand von vor 10 Jahren ist und ein 1000px Fixed Layout genutzt wird (Gebaut für WXGA Bildschirmauflösungen). Und das passt zufällig schon für viele Mobilgeräte fast perfekt.
Nun ist es so, dass ich beim Ersten Versuch mein Layout ganz klassisch gestaltet habe.
Ich habe ein fluides "Holy Grail" Layout gebastelt (3 Spalten + Header und Footer). Allerdings ist das nicht so dolle gewesen. Und es war alles andere als gut bei extrem kleinen oder extrem großen Bildschirmauflösungen, da es sich nicht gut anpassen ließ. Entweder verbrauchten die Sidebars kostbaren Platz und für den Inhalt war kaum noch was über. Oder die Zeilen wurden extrem lang, bzw man hatte an den Seitenrändern große weiße Flächen wenn man es begrenzte.
Die nächste Sufe war dann, dass ich 2 Layouts gestaltete.
Ich habe ein Layout mit Flexbox gemacht, welches aus Header, Footer und 5 Spalten bestand. Bei großen Auflösungen konne ich die "Weißen Flächen" am Rand durch Spalte 1 und 5 mit irgendwas füllen. Bei mittleren Auflösungen rutschen Spalte 1 und 5 nach Unten über den Footer.
Für Kleine Auflösungen habe ich ein zusätzliches Layout gemacht, bei dem alles einfach untereinander angeordnet war, und ich auch auf einige Dinge verzichtete. Das Layout hatte ich auch ohne Flexbox gemacht, sondern einfach nur alle Boxen mit Width=100% versehen und den normalen Elementfluss vom Browser genutzt. Umgeschaltet wurde per Media Query.
Das abgespeckte "Mobil-Layout" lief sogar Herunter bis Firefox 3 und IE 6 problemlos, obwohl ich nicht wirklich auf Abwärtskompatibilität geachtet hatte.
Also wurde das Mobil-Layout zum Basis-Layout erkoren, und diente nicht nur als Mobillayout, sondern auch als "Kompatibilitätslayout".
Für größere Geräte und neue Browser wurde nachträglich umgeschaltet auf die andere CSS Datei. Das hatte ich mit Media Querys gemacht. Das war auch eine gute "Browserweiche", Alte Browser die keine MediaQuerys kennen, blieben einfach auf dem Basis-Layout.
Nun bin ich an einem Punkt, wo ich darüber nachdenke, das 3 / 5 Spaltenlayout komplett über den Haufen zu werfen und das Layout zu entschlacken, so dass eigentlich nur noch ein großer Inhaltsbereich und eine minimalistische Navigation da ist. Kein "Riesen Navi-Menü" mehr usw. Vieles, was sonst eigentlich im Navi-Menü wäre, kann man ja auch als Link direkt im Content verpacken.
Und dann alles, was zusätzlich angezeigt werden soll, in einzelne Kacheln verpacken, die je nach Gerät an eine passende Stelle fließen.
Ich würde also quasi das machen, was oft als Mobile-First Taktik verkauft wird.
Durch geschickte Anordnung im HTML Quelltext kann man es dann sogar so anstellen, dass, wenn kein Flexbox unterstützt wird, durch den normalen "Browser Elementfluss" trotzdem eine brauchbare Anordnung entsteht. Also Abwärtskompatibilität ohne großes Gefrickel frei Haus.
Ich habs sogar so weit geschafft, dass die Seite sogar noch unter dem Urgestein IE5 problemlos lesbar ist. (Beim Holy-Grail Layout ist das alles deutlich schwerer)
Nun stelle ich mir natürlich die Frage, ob es nicht ohnehin sinnvoll ist, bei einem neuen Webprojekt gleich von vorne herein die Mobile First Taktik zu verfolgen.
Es würde vieles sehr viel einfacher machen. Es würde eine Menge Arbeit und Aufwand sparen, da man dann automatisch vieles sehr viel simpler umsetzt, und damit einige Probleme, die bei komplexen Layouts entstehen, erst gar nicht auftreten. Und es wäre ganz nebenbei auch noch Zeitgemäß.
Was meint ihr?