Using css framework for responsive ui design

•Descargar como PPTX, PDF•

0 recomendaciones•805 vistas

Ambientia

Liferay Road Show 12.9.2013, Mikko Suominen, Ambientia

Tecnología Noticias y política

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

My Design Workflow
Wireframes in HTML
Paper prototyping
Make final adjustments in production environment
Fine tuning the CSS

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

Taking the Design to Liferay
Custom CSS
Liferay-theme CSS

Questions?
Mikko Suominen, Interaction Designer, Ambientia
email: mikko.suominen@ambientia.fi
twitter: @mikkomikko

Más contenido relacionado

Similar a Using css framework for responsive ui design

Analyzing bootsrap and foundation font-end frameworks : a comparative studyIJECEIAES

SharePoint Saturdays Cape Town 2012Troy Gerber

Microsoft lync server 2013 step by step for anyoneVinh Nguyen

DACHNUG50 Roadmap.pdfDNUG e.V.

Extending Microsoft Teams with SPFx webpartsAntti Koskela

Run Fast, Try Not to Break S**tMichael Schmidt

Brief introduction Fluent UI Microsoft Design SystemDomenico Monaco

Micro Frontends.pptxShanAli738907

Bootstrap4XPagesTeamstudio

Introducing Continuous Integration Using VstsMohamed Samy

SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem. Kushan Lahiru Perera

Micro FrontendsSpyros Ioakeimidis

Expanding XPages with Bootstrap Plugins for Ultimate UsabilityTeamstudio

Term 3 project pptSanju1923

Design SystemsNadal Soler

SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson

Impact Of A Cms Framework Change - Holland Open NetherlandsWilco Jansen

Browser core red bus presentation redBus India

Site Manager rocks!Gareth Saunders

Similar a Using css framework for responsive ui design (20)

Analyzing bootsrap and foundation font-end frameworks : a comparative study

SharePoint Saturdays Cape Town 2012

Microsoft lync server 2013 step by step for anyone

DACHNUG50 Roadmap.pdf

Extending Microsoft Teams with SPFx webparts

Run Fast, Try Not to Break S**t

Brief introduction Fluent UI Microsoft Design System

Micro Frontends.pptx

Bootstrap4XPages

Introducing Continuous Integration Using Vsts

SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.

Micro Frontends

Expanding XPages with Bootstrap Plugins for Ultimate Usability

Term 3 project ppt

Design Systems

SEF 2014 - Responsive Design in SharePoint 2013

Impact Of A Cms Framework Change - Holland Open Netherlands

Browser core red bus presentation

Site Manager rocks!

Más de Ambientia

Itms atlassian way-final-2017-10Ambientia

Dev ops atlassianway-final-2017-10Ambientia

Insight Asset Management for JIRA Service DeskAmbientia

APIen hallinnalla uutta liiketoimintaaAmbientia

Miten API management toimiiAmbientia

Tunnistamalla asiakaspolut tehostat asiakaspalvelusi toimintaaAmbientia

OpenShift-webinaari 31.1. / Ambientian esityksetAmbientia

ITSM & JIRA Service DeskAmbientia

Ambientia Service Design -työpaja SYTYKEAmbientia

Liferayn rooli Valtorin palveluvalikoimassaAmbientia

Digitaalinen asiakaskokemus ja palvelumuotoiluAmbientia

Liferay Audience TargetingAmbientia

Case Procountor: Zephyr test tool deploymentAmbientia

JIRA PortfolioAmbientia

Case Containerships JIRA Service DeskAmbientia

Jira 7Ambientia

Liferay Road Show Sosiaali- ja terveysministeriöAmbientia

Liferay Road Show Responsiivinen suunnitteluAmbientia

Liferay Road Show Linnunmaa LEXAmbientia

Liferay Road Show Rolf van der SteenAmbientia

Más de Ambientia (20)

Itms atlassian way-final-2017-10

Dev ops atlassianway-final-2017-10

Insight Asset Management for JIRA Service Desk

APIen hallinnalla uutta liiketoimintaa

Miten API management toimii

Tunnistamalla asiakaspolut tehostat asiakaspalvelusi toimintaa

OpenShift-webinaari 31.1. / Ambientian esitykset

ITSM & JIRA Service Desk

Ambientia Service Design -työpaja SYTYKE

Liferayn rooli Valtorin palveluvalikoimassa

Digitaalinen asiakaskokemus ja palvelumuotoilu

Liferay Audience Targeting

Case Procountor: Zephyr test tool deployment

JIRA Portfolio

Case Containerships JIRA Service Desk

Jira 7

Liferay Road Show Sosiaali- ja terveysministeriö

Liferay Road Show Responsiivinen suunnittelu

Liferay Road Show Linnunmaa LEX

Liferay Road Show Rolf van der Steen

Último

Understanding the Laravel MVC ArchitecturePixlogix Infotech

Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106

IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge

From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software

Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

Key Features Of Token Development (1).pptxLBM Solutions

How to convert PDF to text with Nanonetsnaman860154

Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard

Pigging Solutions Piggable Sweeping ElbowsPigging Solutions

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada

Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski

How to Remove Document Management Hurdles with X-Docs?XfilesPro

Pigging Solutions in Pet Food ManufacturingPigging Solutions

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada

08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls

Using css framework for responsive ui design

1. Using CSS Framework for Responsive UI Design Mikko Suominen, Interaction Designer, Ambientia

2. 1. My design workflow 2. Framework: Foundation 4 3. Making it responsive 4. From design to Liferay

3. 1. My design workflow 2. Framework: Foundation 4 3. Making it responsive 4. From design to Liferay

4. My Design Workflow Wireframes in HTML Paper prototyping Make final adjustments in production environment Fine tuning the CSS

5. Paper prototype

7. Design in HTML-editor

10. Final product in Liferay

11.

12.

13. 1. My design workflow 2. Framework: Foundation 4 3. Making it responsive 4. From design to Liferay

14. 12-column grid system

15.

16.

17. Components for rapid prototyping

18.

19. 1. My design workflow 2. Framework: Foundation 4 3. Making it responsive 4. From design to Liferay

20. Framework handles most of the responsiveness

21. Scale the browser window and see what breaks

22. Realizing the framework didn’t handle all of the responsiveness

23. After designing the custom UI for small screens

24. 1. My design workflow 2. Framework: Foundation 4 3. Making it responsive 4. From design to Liferay

25. Use the grid system for Layouts

26. Taking the Design to Liferay Custom CSS Liferay-theme CSS

27. Questions? Mikko Suominen, Interaction Designer, Ambientia email: mikko.suominen@ambientia.fi twitter: @mikkomikko

Using css framework for responsive ui design

Recomendados

Recomendados

Más contenido relacionado

Similar a Using css framework for responsive ui design

Similar a Using css framework for responsive ui design (20)

Más de Ambientia

Más de Ambientia (20)

Último

Último (20)

Using css framework for responsive ui design