While presenting a case study I discuss: approach, best practices and future desiderata; to design and develop (whit HTML5, CSS3 and javaScript) a successful website, whose informations and layouts are tailored to be properly visualized regardless of the device screen size.
4. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
THERE WAS A TIME
WHERE WE HAD IT
ALL FIGURED OUT
mercoledì 5 giugno 13
5. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
THEN WE GOT
MOBILE DEVICES
THEY COME IN A HUGE
VARIETY OF FLAVOURS
mercoledì 5 giugno 13
6. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
AND THEY HAVEN’T
DISRUPTED ONLY THE
SCREEN SIZE
SIZE SIZE
SIZE SIZE SIZE SIZE
SIZE
SIZE
SIZE
mercoledì 5 giugno 13
7. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
NOW THE
CONTEXT
IS MUTABLE“Context refers to the physical,
digital, and social structures that
surround the point of use.”
Cennydd Bowles
mercoledì 5 giugno 13
8. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
C O N T E N T
IS CONSUMED EVERYWHERE
THEREFOR IT MUST BE
F L E X I B L E
mercoledì 5 giugno 13
10. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
YOUR SITE
CONTENT
IS IN NEED OF A
D I E T
mercoledì 5 giugno 13
11. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
PROGRESSIVE ENHANCEMENT
MINDSET IS QUITE SIMPLE: JUST
THINK FROM THE CONTENT OUT
mercoledì 5 giugno 13
12. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
GRID
ENJOY
THE FLUID
mercoledì 5 giugno 13
13. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
SET FONT-SIZE
ACCORDING TO THE
C O N T E X T
NOT THE SCREEN SIZE
mercoledì 5 giugno 13
19. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
A PICTURE IS WORTH
A THOUSAND WORDS
<picture id="pictureElement">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<!-- assume media all -->
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<!-- the following are ignored -->
<source media=" is the message " srcset="">
</picture>
<!-- W3C WORKING DRAFT – 26 FEBRUARY 2013 -->
mercoledì 5 giugno 13
20. VANGOGH CSS3 & HTML5 _ Developing cross device applications - Pisa, 31st May 2013
DESIGN FOR THE CONTEXT
LEVERAGING DEVICES API
mercoledì 5 giugno 13