9 Artikel Responsive Webdesign

Abschlussprüfung Mediengestalter Winter 2015/2016, Konzeption und Gestaltung: U5: Mobile Navigationselemente (Alle Fachrichtungen)

By Maryana (WMF) (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

Theme der Mediengestalter Abschlussprüfung – Mobile Navigationselemente. Was könprnte alles bei diesem extrem umfangreichen Thema drankommen? Welche „mobilen Navigationselemente“ gibt es? Wo liegen die jeweiligen Vor- und Nachteile? Wo liegen überhaupt die Unterschiede zwischen einer klassischen Desktop-Navigation und welche Anforderungen gibt es an eine mobile Navigation? Gibt es eine bestmögliche Lösung für beide Einsatzbereiche? Dies versucht…

Abschlussprüfung Mediengestalter Sommer 2015, Medienproduktion, Gestaltung und Technik (Digital): U10: Media Query

Media Query

Dieser Artikel behandelt alle relevanten Informationen zum Themengebiet „U10: Media Query“ aus der Abschlussprüfung Sommer 2015 für Mediengestalter.

Mockup / Prototype / Entwurf erstellen – MGDP Digital Praktische AP Winter 2013 / 2014

Style Tiles für Photoshop

Aufgabenteil a.) der Abschlussprüfung Winter 2013/2014 für Mediengestalter Digital und Print, Fachrichtung Digital sieht die Entwicklung eines Entwurfs einer responsiven Website einschließlich Navigationskonzepts für die drei Viewports 480px, 768px und 1280px Breite vor.  Die Bewertung für die Gestaltung hat hierbei den Faktor 25, ist also entsprechend hoch angesetzt. In meinem persönlichen Workflow ist nicht vorgesehen,…

Bootsnipp.com – Hilfreiche Bootstrap Ressourcen

Bootsnipp Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework

Eine weitere sehr hilfreiche Website im Bootstrap Universe ist Bootsnipp. Dabei ist Bootsnipp im Prinzip nichts anderes als eine „einfache Liste“ mit Bootstrap Beispielcodes. Neben zahlreichen Codeschnipseln für unterschiedliche Bootstrap-Versionen, unter anderem auch nach Tags sortiert,  bietet die Site außerdem einen interessanten Formular-Builder und einen Button-Generator.

Rapid Bootstrap-Prototyping mit LayoutIt!

LayoutIt! Bootstrap Rapid Prototyper

Als wenn es mithilfe von Bootstrap nicht ohnehin schnell genug möglich wäre, einen funktionalen Prototypen zu erstellen, der mit relativ wenig Aufwand nach der Präsentation beim Kunden auch schnell in eine finale Version übersetzt werden kann, gibt es nun auch einen Dienst namens LayoutIt!, mithilfe dessen das ganze auch noch direkt im Browser möglich wird.…

Mediengestalter Abschlussprüfung Winter 2013/2014, Medienproduktion, Gestaltung und Technik (Digital): U10: CSS Sprites

Was sind „CSS-Sprites“ und welchen Vorteil bieten Sie? Dies und wie man selbst CSS-Sprites anlegen kann, beleuchtet dieser unnötig lange Artikel bis ins Detail! Zu dem Thema hat sich auch eine interessante Diskussion im Netz ergeben, die ich mit folgendem Beispiel vermutlich beenden kann.

Mediengestalter Abschlussprüfung Winter 2013/2014, Konzeption und Gestaltung, Alle Fachrichtungen: U5: Mobiles Webdesign

„Mobiles Webdesign“ ist in aller Munde – nun auch bei der aktuellen IHK-Abschlussprüfung. Zeit einige Kernkriterien, Paradigmen und Mythen etwas näher zu beleuchten. Hinweis: Der vorliegende Artikel ist bisher nur ein Entwurf und wird bis zur Prüfung entsprechend ergänzt. Das Thema ist einfach zu breit angelegt, um es „auf die Schnelle“ abzuhaken.

Vorgefertigte Bootstrap-Framework Schnipsel

Bootstrap - CSS, Responsive HTML, Javascript Framework

Habe mich die Tage im Sinne der Prüfungsvorbereitung (und eines kommerziellen Projektes in Verbindung mit Contao) stark mit Bootstrap auseinandergesetzt. Kurzer Hinweis: Sollte in der Prüfung angegeben sein, dass ihr „vorgefertigte Skripte“ mitbringen könnt, so gilt das natürlich auch für komplette CSS/JS/HTML-Frameworks. Zumindest im Rahmen der Kölner IHK. Nichts spricht also gegen Bootstrap, JQuery und…