Using CSS Framework for Responsive UI DesignMikko Suominen, Interaction Designer, Ambientia

1. My design workflow2. Framework: Foundation 43. Making it responsive4. From design to Liferay

1. My design workflow2. Framework: Foundation 43. Making it responsive4. From design to Liferay

My Design Workflow

Wireframes in HTML

Paper prototyping

Make final adjustments in production environment

Fine tuning the CSS

Vedä kuva paikkamerkkiin tai lisää napsauttamalla kuvaketta

Paper prototype

Vedä kuva paikkamerkkiin tai lisää napsauttamalla kuvaketta

Design in HTML-editor

Vedä kuva paikkamerkkiin tai lisää napsauttamalla kuvaketta

Final product in Liferay

1. My design workflow2. Framework: Foundation 43. Making it responsive4. From design to Liferay

Vedä kuva paikkamerkkiin tai lisää napsauttamalla kuvaketta

12-column grid system

Vedä kuva paikkamerkkiin tai lisää napsauttamalla kuvaketta

Components for rapid prototyping

1. My design workflow2. Framework: Foundation 43. Making it responsive4. From design to Liferay

Vedä kuva paikkamerkkiin tai lisää napsauttamalla kuvaketta

Framework handles most of the responsiveness

Vedä kuva paikkamerkkiin tai lisää napsauttamalla kuvaketta

Scale the browser window and see what breaks

Realizing the framework didn’t handle all of the responsiveness

After designing the custom UI for small screens

1. My design workflow2. Framework: Foundation 43. Making it responsive4. From design to Liferay

Vedä kuva paikkamerkkiin tai lisää napsauttamalla kuvaketta

Use the grid system for Layouts

Taking the Design to LiferayCustom CSS

Liferay-theme CSS

Questions?

Mikko Suominen, Interaction Designer, Ambientia

email: mikko.suominen@ambientia.fi

twitter: @mikkomikko