Changes between Version 7 and Version 8 of Website/Responsive Design

Timestamp:

Jul 4, 2015, 1:55:36 PM (8 years ago)

Author:

sven

Comment:

--

Website/Responsive Design

@@ -23 +23 @@
 > u.ä. her, über das ich noch nachdenken muss.
 
-Diese Seite hier soll einen schnellen Einblick in die **Breakpoints** und Breiten des derzeitigen technikum29-Layouts bieten. Zum Thema [[https://de.wikipedia.org/wiki/Responsive_Webdesign|Responsive Webdesign]] siehe auch [[http://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/|Was ist Responsive Webdesign?]]. Lesenswert ist auch die Erklärung, [[http://www.mediaevent.de/css/media-query.html|was ''Breakpoints'' sind]].
+== Breakpoints ==
+Diese Seite hier soll einen schnellen Einblick in die **Breakpoints** und Breiten des derzeitigen technikum29-Layouts bieten. Zum Thema [[https://de.wikipedia.org/wiki/Responsive_Webdesign|Responsive Webdesign]] siehe auch [[http://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/|Was ist Responsive Webdesign?]]. [[http://www.mediaevent.de/css/media-query.html|Wobei es sich bei dem Begriff ''Breakpoints'' handelt]], soll hier anhand des ''mobile first''-Prinzips erläutert werden.
+
+Bei ''Mobile first'' entwickelt man alle Inhalte so, dass sie auf einem Handy gut aussehen. Dann bedient man sich oft einem Spaltensystem, um die Inhalte auf größeren Bildschirmen (etwa ganzzahligen Vielfachen der Handybreite) sinnvoll aussehen zu lassen. So werden Inhalte dann nebeneinander dargestellt:
+
+[[Image(breakpoints.png, width=100%)]]
+
+So ein Design funktioniert nur, wenn man sich an ein strenges Prinzip hält, in welcher Form Inhalte präsentiert werden. So muss es wiederverwertbare Container für bestimmte Typen, zB Bilder mit Text oder Zitaten aus Büchern geben. Ein Beispiel für solche Komponenten sind zB. die [[http://getbootstrap.com/components/|Bootstrap Components]], die sich als Baukasten für Webseitenentwicklung eignen.
 
 Da das technikum29-Layout von 2011 ("t29v6") nicht gemäß dem **mobile first**-Prinzip gemacht wurde, sondern mit der Idee einer **festen Breite** (siehe obige Mail), sind alle ''responsive''-Anpassungen von dem eigentlich Ziellayout aus zu sehen: Einem sehr breiten Bildschirm mit 1250px Breite.