Responsive Layout
Gestern hat es mich dann auch mal gepackt und ich habe PatchWork3d.de responsive gemacht.
Was ist "responsive"? Ein Responsive Design / Layout ist ein Layout, dass sich an die jeweilige Bildschirmgröße des Benutzers stufenlos anpasst. Das bedeutet, dass z.B. der Inhaltsbereich immer 80% des Bildschirms ausfüllt, egal ob der Benutzer nun einen 24" Bildschirm mit einer FullHD-Auflösung verwendet oder ein Tablett mit nur 720px-Breite.
Dabei ist zu beachten:
Responsive != Adaptive.
Ein Adaptives Design ist ein Design, dass sich stufenweise an ein Anzeigegerät anpasst. d.h. es gibt bestimmte Pixelauflösungen, ab denen ein stark angepasstes Design eingeladen wird. Als Beispiel: Bei einer Breite von 480px und kleiner nimmt man an, ein Smartphone vor sich zu haben und passt den Inhalt dementsprechend an eine Touchbedienung auf einem kleinen Bildschirm an, bei 720px Breite geht man von einem Smartphone mit Touchbedienung und größerem Bildschirm aus und bei allem darüber handelt es sich um ein größeres Anzeigemedium wie ein Computerbildschirm oder ein Tablett.
Die beste Variante sind normalerweise Responsive Adaptive Designs. Diese kombinieren beide Varianten und passen sich stufenlos dem Bildschirm an, wandeln Ihr Design ab bestimmten Anzeigegrößen aber ab, da z.B. auf einem Smartphone eine Unterteilung in 3 Spalten bei einem Text keinen Sinn mehr macht. (wäre einfach zu klein)
Bis jetzt ist PatchWork3d "nur" responsive – in Zukunft werde ich aber auch noch eine Smartphone-Variante zur Verfügung stellen. Dies sehe ich aber als weniger wichtig an, da die Inhalte auf PW3d doch eher auf einem Tablett oder einem Computer genutzt werden. Wer hat schon Lust längere Texte oder Tutorials mit einem Smartphone zu machen? Würden hier z. B. Wetterinformationen zur Verfügung stehen oder Fußballergebnisse dargestellt werden, wäre dies sicher eher von hoher Priorität.
So oder so: Ich hoffe es hilft dem ein oder anderen dabei, die Seite besser neben Animation:Master zu stellen und somit den Tutorials besser folgen zu können.