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. Strategyfor A “responsive ux”
NUNO MB RODRIGUES

2. responsive
design!
a project
with

3. introduction Strategy for a “responsive ux"
UX?

4. introduction Strategy for a “responsive ux"
user experiEnce≠interface

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?…

7. responsive
vs
adaptive

8. responsive vs adaptative Strategy for a “responsive ux"
responsive adaptive
Same content
PRO
AGAINST
It’s done automatically (adapts
toscreen)
Cost
Somewhat generic experiences
Different behaviors in different
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

11. UX
methodology

12. ux methodology Strategy for a “responsive ux"
Objectives (the why?)
Requirements
Research (users, etc)
Information arch.
(content grouping)
Html (semantic) and CSS

13. content
first

14. content first Strategy for a “responsive ux"
A content first 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 define
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…

18. mobile
first

19. mobile first Strategy for a “responsive ux"
Luke Wroblewski
“What’s the minimum amount of content and
navigation that we need to make our design useful?
From this, start to define the most minimal
configuration, and work the way back to their
maximum case. ”

20. mobile first Strategy for a “responsive ux"
It’s 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

22. The practice

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 it’s
optimization. “Progressive enhancement” - Google it!
second basic tactic
Picture optimization.
third basic tactic

24. The practice Strategy for a “responsive ux"
Desktop ≠ Mobile
research
What’s really important? What’s a “nice to have” to the user?
Come up with a set of usage scenarios to help discussions
flowing.
Eliminate your opinion. Try to get real info.

25. The practice Strategy for a “responsive ux"
Quite complex.
from information to interaction
Does it fit the screen? How to present what can’t 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"

29. selling
responsive
design

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
You’ll 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, it’s 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"
Don’t sell responsive design cheap !
…the matter of fact is that it’s 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