SlideShare ist ein Scribd-Unternehmen logo
1 von 32
Downloaden Sie, um offline zu lesen
DESIGNING
RESPONSIVELY
The Role of UX and other head scratchers.
contact@akendi.com

LONDON - CAMBRIDGE - TORONTO - OTTAWA
WHAT IS RESPONSIVE
DESIGN?
A DESCRIPTION...
ONE SOURCE MULTIPLE
DEVICES
MANAGE WEB CODE
FLUID DESIGNS
AND…
NOT TOTALLY NEW
DESKTOP APPLICATION
TOOLBARS
DESKTOP APPLICATION
WORK SPACES
BUT SOMEWHAT NEW TO
THE WEB

• Desktop
• Tablet
• Mobile
RESPONSIVE
DESIGN
RATHER...
RESPONSIVE CONTENT
(IMAGES, TEXT, FONTS, GRAPHICS)
CONTENT SINGLE SOURCE
CONTENT DEVICE SPECIFIC
DEVICE CHARACTERISTICS
RESOLUTION

480x320 px

960x640 px

1920x1080 px
FONT RESOLUTION & TYPE

480x320 px

960x640 px

1920x1080 px
SIZE CONSTRAINTS
IN RESPONSIVE DESIGN?

480x320 px

960x640 px

1920x1080 px

3840x2160 px
RESPONSIVE CONTENT
• Actual content written
• Actual images chosen
• Actual font choice
RESPONSIVE AS A MAGIC
WAND
RESPONSIVE
INTERACTION
NAVIGATION

Double tab navigation

Tab navigation at
top AND bottom

Single ‘Menu’
navigation at top
RESPONSIVE LAYOUT
FUNCTION FOLLOWS FORM

Desktop layout

Tablet layout

Mobile
DEVICE DETERMINES
DESIGN
THEREFORE…
DON’T GET LOST IN THE CODE
CONVERSATIONS
IT’S STILL USER
EXPERIENCE DESIGN
RESPONSIVE IN ITSELF
DOESN’T SOLVE INFORMATION
MANAGEMENT PROBLEMS
Updates
Content creation
Archiving

Signoff

Reviews

Workflow

Governance
AND RESPONSIVE IN ITSELF
DOESN’T SOLVE
ASSET MANAGEMENT
CHALLENGES
QUESTIONS
ANYONE?

Weitere ähnliche Inhalte

Ähnlich wie Designing responsively

Computer class Software/Hardware Presentation
Computer class Software/Hardware PresentationComputer class Software/Hardware Presentation
Computer class Software/Hardware Presentationtreynolds5
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignipmindthegap
 
3D Visualization in ArcGIS Pro
3D Visualization in ArcGIS Pro3D Visualization in ArcGIS Pro
3D Visualization in ArcGIS Prothangqd
 
Design for Engineers
Design for EngineersDesign for Engineers
Design for EngineersTagged Social
 
Retro Responsive: From Fixed-Width to Flexible in 55 Minutes
Retro Responsive: From Fixed-Width to Flexible in 55 MinutesRetro Responsive: From Fixed-Width to Flexible in 55 Minutes
Retro Responsive: From Fixed-Width to Flexible in 55 MinutesRachel Chartoff
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott
 
3D Technologies RD Manchester 2010
3D Technologies RD Manchester 20103D Technologies RD Manchester 2010
3D Technologies RD Manchester 20103D Technologies R&D
 
Visualizing a New Christchurch
Visualizing a New ChristchurchVisualizing a New Christchurch
Visualizing a New ChristchurchMark Billinghurst
 
The state of front end architecture_in_2015
The state of front end architecture_in_2015The state of front end architecture_in_2015
The state of front end architecture_in_2015Aidan Foster
 
PPA Conference presentation
PPA Conference presentationPPA Conference presentation
PPA Conference presentationMichael Kowalski
 
Software Tools of Experience Design
Software Tools of Experience DesignSoftware Tools of Experience Design
Software Tools of Experience DesignDana Giuliana
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Chris Love
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinRazorfish
 
Responsive Design & CSS Frameworks
Responsive Design & CSS FrameworksResponsive Design & CSS Frameworks
Responsive Design & CSS FrameworksG C
 
Techcamp aavn-chanh pham
Techcamp aavn-chanh phamTechcamp aavn-chanh pham
Techcamp aavn-chanh phamTony Pham
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper
 

Ähnlich wie Designing responsively (20)

Computer class Software/Hardware Presentation
Computer class Software/Hardware PresentationComputer class Software/Hardware Presentation
Computer class Software/Hardware Presentation
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
 
3D Visualization in ArcGIS Pro
3D Visualization in ArcGIS Pro3D Visualization in ArcGIS Pro
3D Visualization in ArcGIS Pro
 
Design for Engineers
Design for EngineersDesign for Engineers
Design for Engineers
 
Retro Responsive: From Fixed-Width to Flexible in 55 Minutes
Retro Responsive: From Fixed-Width to Flexible in 55 MinutesRetro Responsive: From Fixed-Width to Flexible in 55 Minutes
Retro Responsive: From Fixed-Width to Flexible in 55 Minutes
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
 
3D Technologies RD Manchester 2010
3D Technologies RD Manchester 20103D Technologies RD Manchester 2010
3D Technologies RD Manchester 2010
 
Fireworks
FireworksFireworks
Fireworks
 
Visualizing a New Christchurch
Visualizing a New ChristchurchVisualizing a New Christchurch
Visualizing a New Christchurch
 
The state of front end architecture_in_2015
The state of front end architecture_in_2015The state of front end architecture_in_2015
The state of front end architecture_in_2015
 
PPA Conference presentation
PPA Conference presentationPPA Conference presentation
PPA Conference presentation
 
Software Tools of Experience Design
Software Tools of Experience DesignSoftware Tools of Experience Design
Software Tools of Experience Design
 
Tools of the Trade
Tools of the TradeTools of the Trade
Tools of the Trade
 
Crafting Experience
Crafting ExperienceCrafting Experience
Crafting Experience
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
3d internet
3d internet3d internet
3d internet
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
 
Responsive Design & CSS Frameworks
Responsive Design & CSS FrameworksResponsive Design & CSS Frameworks
Responsive Design & CSS Frameworks
 
Techcamp aavn-chanh pham
Techcamp aavn-chanh phamTechcamp aavn-chanh pham
Techcamp aavn-chanh pham
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 

Kürzlich hochgeladen

Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 

Kürzlich hochgeladen (20)

Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 

Designing responsively

Hinweis der Redaktion

  1. .
  2. Sizes are not a universal constant.Size depends upon relation (distance) to user.12 pt. font in one place is not 12 pt. font in another place. (phone is held closer to user than tablet, tablet is held closer than PC)
  3. IA is identical to what it is today.Actual content writtenActual images chosenActual font choiceYou still have to do all these things.Responsive won’t cut your time or make things easier.It starts really to play a role at the interaction design, visual design and coding levels.
  4. Responsive design isn’t a magic wand that fixes content issues in one stroke!
  5. What about the user experience?
  6. Requirements is that it needs to work on a mobile device.Sits in specific location.It makes images and content work on a specific device.
  7. Responsive design doesn’t solve information management problems. You still need to optimize by device.
  8. Too see the webinar with additional content visit http://www.akendi.com/insights/events/2013/responsive-design-webinar/