paths to the multi-device web
TRANSCRIPT
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 assumptionsabout 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 lessthan 2 seconds;
• 57% of users will abandon your site if loadingtime 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
xPERCEIVED
PERFOMANCE
« How we load assetsmatters 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 loadingtime
• 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
