Responsive Design

2014-12-22

Responsive Design, Geschichte des Web-Designs, CSS-Frameworks, Material-UI und vieles mehr, und zu dem mehr kommen wir jetzt. Wir fangen mal mit Responsive Design an. Während meiner Arbeit als Web-Entwickler im Front und Backend habe ich täglich mit Design zu-tun.

Auf der Suche nach etwas bestimmten unterschieden, bin ich auf einen Blog Eintrag von blog.froont gestoßen. In dem Artikel werden die 9. Grund Prinzipien des Web-Designs erklärt. Responsive vs Adaptive Flow Relative Units vs Static Units Breakpoints Max and Min Mobile vr Desktop Webfonts Image vs Vectors nach alle den Beispielen mit den Bildern wissen Sie jetzt womit ich meine Brötchen verdiene ;) Den kompletten Artikeln zu dem Thema finden sie hier auf https://blog.froont.com/.

Geschichte

Geschichte des Web-Designs … gabs da überhaupt eine Geschichte? Ja es gab die, da ich ein Bursche der neuen Zeit bin, habe ich nichts mit Flash und kunterbunten Gifś zu-tun (nichts gegen die Oldies) an euch die in der Zeit gearbeitet haben RESPEKT UND VERNEINUNG!!! Ich lese aus alten Büchern über Flash. Ein Kollege berichtete, dass vor einigen Jahren CSS3 ähnliche Effekte noch mich Gif gemacht wurden. Aber es gibt die Geschichte und ich werdees euch ein wenig von ihr erzählen.

1990

Fangen wir mal mit dem Jahr 1989. Was gabs besonderes im Jahr 1989:

  • Phobos 2 verschwindet… man schiebt das auf ein Computer Fehler. (Der größte Fehler, der jedem bekannt ist, sitzt im Schnitt 60 cm bis 80 cm vor dem Bildschirm)
  • komische Mumie wird gefunden von unseren uhruhruhruhrruhrrrrrrr Verwandten in der Cheops-Pyramide
  • Raketen werden in den Kosmos geschossen, um von anderen Planeten Bilder zu machen (Mars und Neptun)
  • sinnvolle und sinnlose Diskussionen in Usenet
  • und das, was uns Interessiert ist, sind die “schwarzen Zeiten des Web-Designs” diese sehen ungefähr so aus

1995

Das Jahr 1995 brachte uns unser schrecken des Lebens… diese Tabellen sind leider immer noch da, ich muss jedes Mal fast kotzen, wenn ich mit den Arbeiten muss. Mir kommt jedes Mal der Gedanke, den kompletten Quellcode um zu schreiben bloß aus der Liebe zu dem nächsten Entwickler der an der gleichen Seite vielleicht Arbeiten wird. Kurz und knapp die Tabellen verfolgen uns bis heute noch. JavaScript kam auch in demselben Jahr. Pop-up-Fenster, lästige Werbung dann noch mal Pop-up-Fenster und noch mehr lästiger Werbung. 96’ist was noch schlimmeres als Gif Bilder in unser Entwicklerleben gekommen, nämlich FLASH…

1997

Oh unser geliebtes CSS es gibt von der in Zwischenzeit schon viele Varianten und Modifikation doch am schönsten bist du noch immer noch ganz du selbst und ohne den ganzen schick-Schnak. Verzeih uns, unser letzte Semikolon für eine Klasse/ID. Und vergib uns unsere Fehler. Lebe noch lang und in Frieden mir SCSS und Less und SASS…

2007

Nach langer Aufenthalt im nichts ist im Jahr 2007 stürmisch die goldenen Grid Systemme in unser Leben reingeflogen. 960 Grind uns sonst alle die es gibt…

2010

folgte Responsive Design dem Grid System, wo auch dann im gleichen Jahr Flat ins Spiel kam. Nach dem Flat kam das Material Design. Erst war es Kachelig dann Kachel mit Schatten, was für Emotion Wandel. Auch hier bedanke ich mich für einen schönen Artikel den Blog.Froont.com. CSS-Frameworks wir sind in dem jetzt Zeit angekommen und beschäftigen uns mit den CSS-Frameworks. Es gibt viele Verschiedene manche können eine Sache besser manche eine andere. Aber ihre Aufgabe ist es eine Seite mit nötiger Design und Struktur zu beliefern ohne, dass der Entwickler auch nur eine Zeile Code selbst entwickeln muss. Die Interessantesten findet man beim CodeGeekz. Nur zum Zweck der Verständigung, die Frameworks die dort aufgelistet sind, sind nicht ALLE es gibt noch viel mehr an Frameworks. CodeGeekz bietet einfach nur einen kleinen Vergleich zwischen den 15. ausgesuchten. Material-UI Kacheln mit Schatten habe ich im Vorfeld das Material-Design geschimpft.

Falls es unter euch leser gibt die gerne Podcasts hört, und euch über das Web-Design im groben und ganzen Informieren wollt empfehle ich WebDevBreak.com

Bilderquellen: