Strategy for a Responsive UX

Strategyfor A “responsive ux”

NUNO MB RODRIGUES

responsive design!

a project with

introduction Strategy for a “responsive ux"

UX?


user experiEnce≠interface


Strategy before everything elseThe client wants the “bling bling” but…


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)


A good option :

Combine

AWESOME!


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.


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>


Structured information


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. ”


It’s easier to add to a design then to remove.basic principle


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


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.


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.


How is it supposed to behave?

strategies for pictures

Crop? Resize?

Is it really necessary?


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"


“Your Strategy Maps How You’ll Get There”


Helps in the way of having strong argumentsReduces surprises later in the project


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


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

Thank you!

Linkedin @nunorod [email protected]

https://www.linkedin.com/profile/public-profile-settings?trk=prof-edit-edit-public_profile

https://twitter.com/nunorod

mailto:[email protected]

Strategy for a Responsive UX

Business