Ora che il Web e il Mobile Web sono Uno e Bino, come costruiamo siti e servizi che funzionano bene per tutti? Detta in un altro modo, perchè mi avete portato a CodeMotion se basta e avanza usare un template Responsive per essere Mobile? ScientiaMobile presenta tre fantastici servizi, utilizzabili anche in versione gratuita, che non possono essere ignorati da chi produce siti web professionali. #PictureElement #ResponsiveImages #ResponsiveWebDesign #ImageEngine #WebPerf #MobileWeb #ImageOptimization #InGodWeTrustEveryoneElseBringData #MOVR #MobileAwareAnalytics #OggiCèilSole

1. Essential Tools for
Mobile Web
Professionals
#PictureElement #ResponsiveImages #ResponsiveWebDesign
#ImageEngine #WebPerf #MobileWeb #ImageOptimization
#InGodWeTrustEveryoneElseBringData #MOVR
#MobileAwareAnalytics
by Luca Passani
CTO @ScientiaMobile, Inc. / AD ScientiaMobile S.r.l.

2. ScientiaMobile and WURFL
WURFL, Wireless Universal Resource FiLe
FOSS Project 2001 thru 2011
Commercial in 2011 with ScientiaMobile
Headquarter: Reston Virginia
Development Centers in US, Italy and India

3. Device Detection - Device Fragmentation - Device
Diversity
Prendi slide con foto device messi ad arco dalla presentazione di Jon Arne

4. Mobile Device Detection in Action
“Give me a property name
and an HTTP Request and
I’ll tell you the property
value”
API and Device Information
Repository
Java, PHP, .NET, C/C++,
Node.js, NGINX, Apache
Cloud: Ruby, Python, Perl,..
// Create the WURFL Cloud Client
$client = new
ScientiaMobileWurflCloudClient($config);
// Detect your device
$client->detectDevice();
// Use the capabilities
if ($client->
getDeviceCapability ('ux_full_desktop')) {
echo "This is a desktop device";
} else {
echo "This is a mobile device";
}

6. Tools for Developers
WURFL.js Community Edition
Use WURFL from JavaScript
Use with Google Analytics
ImageEngine
Responsive is only part of the answer
Picture Element only brings you so far…

7. Use WURFL.js like this:
<script type="text/javascript"
src="//wurfl.io/wurfl.js">
</script>
if (WURFL.is_mobile) {
//dostuff();
}
WURFL Object looks like this:
{"is_mobile": true,
"complete_device_name":
"Nokia
Lumia 800",
"form_factor": "Smartphone"}
http://WURFL.io
WURFL.js: Device Detection Exposed to JavaScript

8. WURFL.js and Google Analytics: Mobile Reports
The web is diverse
Need to monitor the right
things
Form factor seem to be a
good place to start
Ability to target what you
measure
Bounce rate
Time spent
Conversions
User flow
Site speed

9. Placing Data in Google Analytics
/* Google Analytics' new universal tracking code */
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).pus
h(arguments)},i[r].l=1*newDate();a=s.createElement(o),m=s.getElementsByTagName(
o)[0];a.async=1;
a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-
analytics.com/analytics.js','ga');ga('create', 'UA-99999999-1, 'auto');
/* Define the custom dimensions */
ga('send', 'pageview', {
'dimension1': WURFL.complete_device_name,
'dimension2': WURFL.form_factor,
'dimension3': WURFL.is_mobile,
'dimension4': window.matchMedia("(orientation: landscape)").matches ?
‘landscape':'portrait'});

10. Define New Dimensions in GA
Define the custom dimensions:
Admin → Custom Definitions → Custom Dimensions

11. Done

12. Form Factor

14. GA Widgets

15. ImageEngine
Slide che presenta il problema e la necessita’ di dare immagini di dimensione
diversa a dispositivi e browser diversi
http://WURFL.io

16. ImageEngine
Il problema non e’ nuovo. Di
recente introdotto il supporto
per il Picture Element.
WTF!
http://WURFL.io

18. ImageEngine Lite for the People in 2 Easy Steps
1. Register at http://wurfl.io and obtain key
2. <img src="//[your-key].lite.imgeng.in/[full-url-to-your-image]">
For example:
<img src="//[your-key].lite.imgeng.in/http://wurfl.io/assets/sunsetbeach.jpg">
WURFL is there in the background detecting your device and serving the image
with the right dimension (Client-Hints are also used)

19. Full List of Parameters (1 of 2)
w: Desired width of resized picture. .../w_200/... would resize the image to 200
pixels wide.
h: Desired height of resized picture. .../h_200/... would resize the image to 200
pixels tall.
pc: This field will use WURFL to calculate the screen width and then scale the
image accordingly. .../pc_20/... would resize the image to 20% of the screen width
of the requesting device
f: Desired format of picture (jpg, gif, png, bmp, webp). If no format is provided, the
format of the original picture is used.

20. Full List of Parameters (2 of 2)
m: This setting determines how the engine will resize the images. Legal values are
box, stretch, letterbox, cropbox. .../w_100/h_200/m_box/... would fit the box defined
with w and h parameters.
box: The image is scaled to fit within the specified dimensions. Note that the image
that is returned will not necessarily be the same size as the requested dimensions, but
it will fit inside a box of those dimensions.
cropbox: The cropbox method will resample the image as small as possible while
showing no canvas.
letterbox: Same as box, except the returned image is exactly the size specified.
stretch: The stretch method will resample the image to fit the specified size by
distorting the source image.

21. ImageEngine in Action
<picture>
<source media="(min-width: 36em)"
srcset="2art_full_3050.jpg 3050w,
2art_full_2048.jpg 2048w,
2art_full_1280.jpg 1280w,
2art_full_1024.jpg 1024w,
2art_full_800.jpg 800w,
2art_full_400.jpg 400w"
sizes="50vw" />
<source
srcset="2art_crop_1860.jpg 1860w,
2art_crop_1280.jpg 1280w,
2art_crop_1024.jpg 1024w,
2art_crop_800.jpg 800w,
2art_crop_400.jpg 400w"
sizes="100vw" />
<img src="2art_crop_320.jpg" alt="art"/>
</picture>
<img src="//[key].lite.imgeng.in/http://example.com/image.jpg">
<img src=“//[key].lite.imgeng.in/w_200/http://example.com/image.jpg"
srcset="//[key].lite.imgeng.in/w_300/http://example.com/image.jpg 1.5x,
//[key].lite.imgeng.in/w_400/http://example.com/image.jpg 2x"
width=“200" alt=“Me”>

22. MOVR: The Mobile OverView Report
Do you know how many Android vs iOS vs
Windows Phone are there?
How do iOS versions break down?
How do Android versions break down?
What devices do users have in my region?
Does it make sense to support that
platform?
http://scientiamobile.com/movr