2. • Mobile-first Content Strategy
• Responsive Web Design (RWD)
• Mobile-first RWD
• Web Performance
• The Future
FOLLOW THE GOOD PATHS
3. 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
4. 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.
5. 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.
7. 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! »
8. 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
10. Mobile-first Responsive Web Design
WHAT IS IT?
It is Responsive Web Design using
small screens as a starting basis.
U D V
11. 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.
12. 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
13. 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.
14. Web Performance
BASIC WEB TECHNOLOGIES
• Vector images;
• WebP raster format;
• Responsive images;
• Web standards.
15. Web Performance / Basic Web Technologies
Vector Images
SVG IS KING!
• Light
• Dynamic
• Resolution free
16. Web Performance / Basic Web Technologies
Responsive Images
•Resolution Switching
•Art direction
17. Web Performance
BASIC METHODS & PRACTICES
• Compression and optimisation;
• Choice of framework;
• Progressive enhancement;
• Educate everyone!
• Test, test, test.
