strategy for a responsive ux
TRANSCRIPT
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 experiEnce≠interface
introduction Strategy for a “responsive ux"
Strategy before everything elseThe 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
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)
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 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.
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>
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
“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. ”
mobile first Strategy for a “responsive ux"
It’s 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 it’s optimization. “Progressive enhancement” - Google it!
second basic tactic
Picture optimization.third basic tactic
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.
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.
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 CodeSemantics
Web TechnologiesAccessibility
SEOPerformanceAnimations
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 You’ll Get There”
SELLING responsive design Strategy for a “responsive ux"
Helps in the way of having strong argumentsReduces 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, 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
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.
Multimedia - Web - Mobile - Consultancy
nuno rodriguesCommunication designerSince 2002
Strategic DesignInteraction - Interface - UX - Design Thinking
