Wir haben vor einiger Zeit die Umsetzung mobiler Webseiten mittels CSS Media Queries angeschnitten. Media Queries helfen uns dabei, Auflösungen zu identifizieren und entsprechend darauf zu reagieren. Das Entwickeln von Websites, die sich dem Betrachter und des von ihm verwendeten Geräts anpassen -> Responsive Webdesign und hier im Blog.
Heute widmen wir uns einem Framework, das uns dabei zum einen viel Arbeit abnimmt und zudem auch noch eine Reihe extra Tools bietet. Die Rede ist vom Foundation Framework. Kern des Frameworks ist sein semi-fluides 12er-Grid-Layout. In der Breite fix, passt es sich bei kleineren Auflösungen automatisch an. Hier könnt ihr das Verhalten testen. Einfach wie gewohnt die Größe des Browserfensters ändern und staunen. Schriften, Bilder und Co. werden entsprechend kleiner. Das dabei trotzdem immer vergleichsweise große Bilder geladen werden, die dann runterskaliert werden, ist nicht die feinste Art. Hier bietet es sich dann an, alternative Lösungen zu entwickeln und bspw. kleinere Versionen von Bildern vorzuhalten. Weitere nützliche Tools von Foundation:
Viele UI Elemente (Buttons, Forms, Slider, Tabs, JQuery Plugins) die immer wieder gebraucht werden, sind auch an Bord.
Ebenso nützlich sind diverse vorgefertigte Klassen. Hier mal zwei davon:
<div class="show-on-phones">Nur auf Phones sichtbar. Nicht auf Tablets oder Desktops</div><div class="hide-on-phones
Fazit
Ein taugliches Framework, das vielmehr eine Ansammlung sehr brauchbarer Tools ist. Auf Basis von Foundation hat man schnell gute Ergebnisse, die sich sowohl am Desktop als auch auf mobilen Geräten sehen lassen können. Dabei muss sich keiner um Media Queries kümmern, denn das erledigt Foundation schon für uns.