The Paths to the
MULTI-DEVICE
WEB

• Mobile-first Content Strategy
• Responsive Web Design (RWD)
• Mobile-first RWD
• Web Performance
• The Future
FOLLOW THE GOOD PATHS

Mobile-first Content Strategy
WHAT IS IT?
It is the content strategy that allows
you to perfectly define content and
tasks fitted for small screens, and
which can be easily enhanced for big
screens.
E

Mobile-first Content Strategy
WHY TO DO IT?
It allows you to:
• Focus on the essential;
• Create a clean hierarchy;
• Clear project goals and priorities;
• Structure content for maximum
flexibility and reuse.

Mobile-first Content Strategy
HOW TO DO IT?
• Start by writing content;
• Define the user’s « journey »;
• Think about feedbacks;
• Define VOICE, TONE and AUDIENCE;
• Define the core message.

Mobile-first Content Strategy
BY WHICH MEANS?
• Content Inventory;
• Tasks Inventory;
• Logical maps/Schemes;
• Specifications.

Mobile-first Content Strategy
WHAT TO AVOID?
« Don’t make assumptions
about what the user wants to
do, simply because she has a
smaller screen! »

Responsive Web Design
WHAT IS IT?
It is a combination of web technologies
that allows you to perfectly optimize
the layout and the presentation of your
content, no matter which web device
you’re using.
U D V

Responsive Web Design
HOW TO DO IT?
• Liquid pages;
• Flexible Images;
• Media queries.

Mobile-first Responsive Web Design
WHAT IS IT?
It is Responsive Web Design using
small screens as a starting basis.
U D V

Mobile-first Responsive Web Design
WHY TO DO THIS?
• Adaptation to bigger screens are easier;
• Follows the « Progressive Enhancement »
approach;
• Gives a baseline mobile experience.

Web Performance
WHAT IS IT?
It is the combinations of web
technologies, methods and front-
development practices that allows
to give the user a good
experience, no matter which web
device she uses.
E U D V

Web Performance
SOME DATA
• 47% of users expects the page to load in less
than 2 seconds;
• 57% of users will abandon your site if loading
time takes more than 3 seconds.

Web Performance
BASIC WEB TECHNOLOGIES
• Vector images;
• WebP raster format;
• Responsive images;
• Web standards.

Web Performance / Basic Web Technologies
Vector Images
SVG IS KING!
• Light
• Dynamic
• Resolution free

Web Performance / Basic Web Technologies
Responsive Images
•Resolution Switching
•Art direction

Web Performance
BASIC METHODS & PRACTICES
• Compression and optimisation;
• Choice of framework;
• Progressive enhancement;
• Educate everyone!
• Test, test, test.

REAL
PERFOMANCE
x
PERCEIVED
PERFOMANCE

« How we load assets
matters as much as
how many assets we
have to load. »

Web Performance
PERCIEVED PERFORMANCE
TECHNIQUES
• Asynchronous requests for Js and
CSS
• Inline Coding

Web Performance
PERCIEVED PERFORMANCE TESTS
• WEBPAGETEST.ORG: test loading
time
• TODOMVC.COM: data about mv*
frameworks

THE FUTURE!
PROGRESSIVE WEB APPS
“A Progressive Web App uses
modern web capabilities to
deliver an app-like user
experience.”
- Addy Osmani

THE FUTURE!
PROGRESSIVE WEB APPS
• Push notifications
• Offline caching
• First-class icon on homescreen
• Fullscreen display
• Splash screen
• Switch