際際滷

際際滷Share a Scribd company logo

Strategy for a Responsive UX

Nuno MB Rodrigues
Nuno MB Rodrigues

An introduction to strategies to apply when your looking to implement or work for a Responsive Web/UX project. Useful for Designers and Business Managers alike.

1 of 36
Downloaded 10 times
Strategyfor A responsive ux NUNO MB RODRIGUES
responsive design! a project with
introduction Strategy for a responsive ux" UX?
introduction Strategy for a responsive ux" user experiEnceinterface
introduction Strategy for a responsive ux" Strategy before everything else The client wants the bling bling but
introduction Strategy for a responsive ux" responsive design is really, really hard. It takes time and planning The truth?
responsive vs adaptive
responsive vs adaptative Strategy for a responsive ux" responsive adaptive Same content PRO AGAINST Its done automatically (adapts toscreen) Cost Somewhat generic experiences Di鍖erent behaviors in di鍖erent mediums Loading times PRO AGAINST Speed Designed for sensation ( gestos mobile friendly ) Portability to native apps Content Nightmare (CMS, etc) Too many versions Transformation to native (can compromise code)
responsive vs adaptative Strategy for a responsive ux" A good option : Combine AWESOME!
responsive vs adaptative Strategy for a responsive ux" responsive % em
UX methodology
ux methodology Strategy for a responsive ux" Objectives (the why?) Requirements Research (users, etc) Information arch. (content grouping) Html (semantic) and CSS
content first
content first Strategy for a responsive ux" A content 鍖rst approach teaches us that visual design should be based on real content. Only with real content can we decide how best to present it to users.
content first Strategy for a responsive ux" Semantic HTML is about picking the right HTML element to describe a given piece of information, rather than using HTML to de鍖ne the way the information should look. Semantic HTML <DIV> ?. <article>
content first Strategy for a responsive ux" Structured information
content first Strategy for a responsive ux" We are creating structures and planning for the next step
mobile first
mobile first Strategy for a responsive ux" Luke Wroblewski Whats the minimum amount of content and navigation that we need to make our design useful? From this, start to de鍖ne the most minimal con鍖guration, and work the way back to their maximum case.
mobile first Strategy for a responsive ux" Its easier to add to a design then to remove. basic principle
mobile first Strategy for a responsive ux" Designing for mobile is full of particularities
The practice
The practice Strategy for a responsive ux" Look out for break points in the page width. Wireframing helps. first basic tactic Keep loading times short. TWatch out for CSS and its optimization. Progressive enhancement - Google it! second basic tactic Picture optimization. third basic tactic
The practice Strategy for a responsive ux" Desktop Mobile research Whats really important? Whats a nice to have to the user? Come up with a set of usage scenarios to help discussions 鍖owing. Eliminate your opinion. Try to get real info.
The practice Strategy for a responsive ux" Quite complex. from information to interaction Does it 鍖t the screen? How to present what cant be seen? Interaction helps to understand hierarchy and navigation, eg: modals, animations, accordions, etc.
The practice Strategy for a responsive ux" How is it supposed to behave? strategies for pictures Crop? Resize? Is it really necessary?
The practice Strategy for a responsive ux" criteria for contests Clean Code Semantics Web Technologies Accessibility SEO Performance Animations Responsive Design
the practice Strategy for a responsive ux"
selling responsive design
Yes Design is a business SELLING responsive design Strategy for a responsive ux"
SELLING responsive design Strategy for a responsive ux" Your Strategy Maps How Youll Get There
SELLING responsive design Strategy for a responsive ux" Helps in the way of having strong arguments Reduces surprises later in the project
SELLING responsive design Strategy for a responsive ux" Saying yes requires change: When selling Responsive Design to the upper management, its easy for the reach of this methodology to go unnoticed. In editorial processes The approach to interaction and visuals The way we think of users
SELLING responsive design Strategy for a responsive ux" Dont sell responsive design cheap ! the matter of fact is that its saving the client money.
Multimedia - Web - Mobile - Consultancy nuno rodrigues Communication designer Since 2002 Strategic Design Interaction - Interface - UX - Design Thinking
Thank you! Linkedin @nunorod hello@nunorod.com

More Related Content

Strategy for a Responsive UX

  • 1. Strategyfor A responsive ux NUNO MB RODRIGUES
  • 3. introduction Strategy for a responsive ux" UX?
  • 4. introduction Strategy for a responsive ux" user experiEnceinterface
  • 5. introduction Strategy for a responsive ux" Strategy before everything else The client wants the bling bling but
  • 6. introduction Strategy for a responsive ux" responsive design is really, really hard. It takes time and planning The truth?
  • 8. responsive vs adaptative Strategy for a responsive ux" responsive adaptive Same content PRO AGAINST Its done automatically (adapts toscreen) Cost Somewhat generic experiences Di鍖erent behaviors in di鍖erent mediums Loading times PRO AGAINST Speed Designed for sensation ( gestos mobile friendly ) Portability to native apps Content Nightmare (CMS, etc) Too many versions Transformation to native (can compromise code)
  • 9. responsive vs adaptative Strategy for a responsive ux" A good option : Combine AWESOME!
  • 10. responsive vs adaptative Strategy for a responsive ux" responsive % em
  • 12. ux methodology Strategy for a responsive ux" Objectives (the why?) Requirements Research (users, etc) Information arch. (content grouping) Html (semantic) and CSS
  • 14. content first Strategy for a responsive ux" A content 鍖rst approach teaches us that visual design should be based on real content. Only with real content can we decide how best to present it to users.
  • 15. content first Strategy for a responsive ux" Semantic HTML is about picking the right HTML element to describe a given piece of information, rather than using HTML to de鍖ne the way the information should look. Semantic HTML <DIV> ?. <article>
  • 16. content first Strategy for a responsive ux" Structured information
  • 17. content first Strategy for a responsive ux" We are creating structures and planning for the next step
  • 19. mobile first Strategy for a responsive ux" Luke Wroblewski Whats the minimum amount of content and navigation that we need to make our design useful? From this, start to de鍖ne the most minimal con鍖guration, and work the way back to their maximum case.
  • 20. mobile first Strategy for a responsive ux" Its easier to add to a design then to remove. basic principle
  • 21. mobile first Strategy for a responsive ux" Designing for mobile is full of particularities
  • 23. The practice Strategy for a responsive ux" Look out for break points in the page width. Wireframing helps. first basic tactic Keep loading times short. TWatch out for CSS and its optimization. Progressive enhancement - Google it! second basic tactic Picture optimization. third basic tactic
  • 24. The practice Strategy for a responsive ux" Desktop Mobile research Whats really important? Whats a nice to have to the user? Come up with a set of usage scenarios to help discussions 鍖owing. Eliminate your opinion. Try to get real info.
  • 25. The practice Strategy for a responsive ux" Quite complex. from information to interaction Does it 鍖t the screen? How to present what cant be seen? Interaction helps to understand hierarchy and navigation, eg: modals, animations, accordions, etc.
  • 26. The practice Strategy for a responsive ux" How is it supposed to behave? strategies for pictures Crop? Resize? Is it really necessary?
  • 27. The practice Strategy for a responsive ux" criteria for contests Clean Code Semantics Web Technologies Accessibility SEO Performance Animations Responsive Design
  • 28. the practice Strategy for a responsive ux"
  • 30. Yes Design is a business SELLING responsive design Strategy for a responsive ux"
  • 31. SELLING responsive design Strategy for a responsive ux" Your Strategy Maps How Youll Get There
  • 32. SELLING responsive design Strategy for a responsive ux" Helps in the way of having strong arguments Reduces surprises later in the project
  • 33. SELLING responsive design Strategy for a responsive ux" Saying yes requires change: When selling Responsive Design to the upper management, its easy for the reach of this methodology to go unnoticed. In editorial processes The approach to interaction and visuals The way we think of users
  • 34. SELLING responsive design Strategy for a responsive ux" Dont sell responsive design cheap ! the matter of fact is that its saving the client money.
  • 35. Multimedia - Web - Mobile - Consultancy nuno rodrigues Communication designer Since 2002 Strategic Design Interaction - Interface - UX - Design Thinking
  • 36. Thank you! Linkedin @nunorod hello@nunorod.com