Using css framework for responsive ui design

•

0 gostou•805 visualizações

Ambientia

Liferay Road Show 12.9.2013, Mikko Suominen, Ambientia

Tecnologia Notícias e 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

Mais conteúdo relacionado

Semelhante 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

Semelhante 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!

Mais 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

Mais 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

So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda

Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González

Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani

Connecting the Dots for Information Discovery.pdfNeo4j

Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica

A Journey Into the Emotions of Software DevelopersNicole Novielli

Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma

The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney

Infrared simulation and processing on Nvidia platformsYoss Cohen

Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda

How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes

React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma

QCon London: Mastering long-running processes in modern architecturesBernd Ruecker

A Glance At The Java Performance ToolboxAna-Maria Mihalceanu

2024 April Patch TuesdayIvanti

MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar

Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica

React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech

Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica

Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple

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

Mais conteúdo relacionado

Semelhante a Using css framework for responsive ui design

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

Mais de Ambientia

Mais de Ambientia (20)

Último

Último (20)

Using css framework for responsive ui design