Using css framework for responsive ui design
Upcoming SlideShare
Loading in...5
×
 

Using css framework for responsive ui design

on

  • 571 views

Liferay Road Show 12.9.2013, Mikko Suominen, Ambientia

Liferay Road Show 12.9.2013, Mikko Suominen, Ambientia

Statistics

Views

Total Views
571
Views on SlideShare
571
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Using css framework for responsive ui design Using css framework for responsive ui design Presentation Transcript

  • Using CSS Framework for Responsive UI Design Mikko Suominen, Interaction Designer, Ambientia
  • 1. My design workflow 2. Framework: Foundation 4 3. Making it responsive 4. From design to Liferay
  • 1. My design workflow 2. Framework: Foundation 4 3. Making it responsive 4. From design to Liferay
  • My Design Workflow Wireframes in HTML Paper prototyping Make final adjustments in production environment Fine tuning the CSS
  • Paper prototype
  • Design in HTML-editor
  • Final product in Liferay
  • 1. My design workflow 2. Framework: Foundation 4 3. Making it responsive 4. From design to Liferay
  • 12-column grid system
  • Components for rapid prototyping
  • 1. My design workflow 2. Framework: Foundation 4 3. Making it responsive 4. From design to Liferay
  • Framework handles most of the responsiveness
  • 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 workflow 2. Framework: Foundation 4 3. Making it responsive 4. From design to Liferay
  • Use the grid system for Layouts
  • Taking the Design to Liferay Custom CSS Liferay-theme CSS
  • Questions? Mikko Suominen, Interaction Designer, Ambientia email: mikko.suominen@ambientia.fi twitter: @mikkomikko