Responsive Web Design & Single Page Application

RESPONSIVE WEB DESIGN & SPAAlcune soluzioni che abbiamo adottato nella realizzazione del sito di Evoluzione Telematica

THE DILIGENCE

«Una community italiana di crowd-learning. Vogliamo fare in modo che le persone possano aggregarsi per apprendere o approfondire un argomento di interesse comune.»

ABOUT ME

• Developer @ Evoluzione Telematica srl

• Tech enthusiast

• Papercut survivor

collaalessandro

+AlessandroColla

http://www.evoluzionetelematica.it

http://bettercoderwannabe.blogspot.it

L’OBIETTIVO

Fruibile a partire dallo smart phone fino al pc desktop

Eye candy come se piovessero

Url che non facessero venire un eritema al nostro SEO

collaalessandro +AlessandroColla #TheDLive

COSA ABBIAMO USATO

ASP.NET MVC5 + NHibernate

jQuery

Greensock


RESPONSIVE DESIGN

Termine coniato da Ethan Marcotte (http://alistapart.com/article/responsive-web-design)

Lo scopo è creare un sito facilmente navigabile e leggibile da dispositivi eterogenei

Di norma l’approccio è mobile-first(Luke Wroblewski http://www.lukew.com/ff/entry.asp?933)

Pensare bene al layout prima di cominciare

Comporta molto tempo la realizzazione


COSA SI USA PER FARE RWD

CSS3 media query: stili diversi in base alla larghezza del viewport

Griglie flessibili: elementi con unità relative (percentuali ed EM)

Immagini flessibili: dimensioni diverse in base al layout ed ai dispositivi

Il calcolo di Marcotte: Target / Context = Result


SINGLE PAGE APPLICATION

Tutto in una pagina

Lo scopo è fornire un’esperienza d’uso più fluida

Si riduce il traffico e il tempo di caricamento


TUTTO BELLO…PASSIAMO AI PROBLEMI


AJAX E GLI URL

Non c’è più l’url completo: <a href="#su-misura" >Su misura</a>

I tasti avanti e indietro non funzionano più

Senza javascript non va neanche a spingerlo

Ciao ciao crawler


AJAX E GLI URL

https://developers.google.com/webmasters/ajax-crawling/

Diciamo al crawler di usare l'Ajax crawling scheme

www.evoluzionetelematica.it/#su-misura diventawww.evoluzionetelematica.it/#!su-misura

Il crawler elabora www.evoluzionetelematica.it?_escaped_fragment_=su-misura

Server side si deve gestire la richiesta e caricare la pagina giusta var urlFragment = Request["_escaped_fragment_"];


AJAX E GLI URL

Progressive enhancement FTW!

Termine coniato da Steve Champeon al SXSW (in Texas roba da nerd) nel 2003.

Si era tutti arenati sul graceful degradation: tutto gira sull'ultimo browser. Poi a martellate (togliendo funzioni con JS) si degradava per i vecchi browser. Il classico PITA


AJAX E GLI URL

Aaron Gustafson fa l'esempio della nocciolina M & M's(http://www.alistapart.com/articles/understandingprogressiveenhancement/)


AJAX E GLI URL

Url classico: <a href="/su-misura" >Su misura</a>

Aggancio del javascript ai tag <a>

Lato server gestisco se richiesta Ajax o meno

$("body").on('click', 'a:not([href^=http], [href^=#], [class^=tel], [class^=mailto])', function (e) { e.preventDefault(); if ($(e.currentTarget).attr('href')) $.Ajax({ url: $(this).attr('href'), success: function (data) { /* elaboro data */ } }); });

if (Request.IsAjaxRequest()) return Json(model, JsonRequestBehavior.AllowGet);return View(model);


AJAX E GLI URL

I bottoni avanti e indietro continuano a non funzionare

history.pushState to the rescue!(https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history)

collaalessandro +AlessandroColla

success: function (data) { /* gestione di data */ history.pushState(data, "Su Misura", "su-misura");}$(document).ready(function () { window.addEventListener('popstate', function (event) { /* gestione di data */ }, false);});

#TheDLive

AJAX E GLI URL

http://caniuse.com/#search=pushstate


AJAX E GLI URL

IE 8.0 è ancora la versione più usata, tra gli IE, sul nostro sito


AJAX E GLI URL

Chrome ha qualche problemino con il popState

"The problem is well-known — Chrome and Firefox treat that popstate event differently. While Firefox doesn't fire it up on the first load, Chrome does. "(http://stackoverflow.com/questions/6421769/popstate-on-pages-load-in-chrome)

"...This is behaving as designed...Firing popstate after onload is as designed...“(https://code.google.com/p/chromium/issues/detail?id=63040)


IMMAGINI FLESSIBILI

Si usano per evitare di inviare ad uno smartphone immagini di 4mb

Vanno a braccetto con le Fluid Images(http://unstoppablerobotninja.com/entry/fluid-images/)

Il difficile è sapere, lato server, quale immagine inviare.


IMMAGINI FLESSIBILI

Si usa un cookie per salvare la larghezza dello schermo e il DevicePixelxRatio

Lato server si intercettano le richieste di immagini

Si fornisce l’immagine giusta in base al valore nel cookie

Non è il silver bullet!


IMMAGINI FLESSIBILI E ASP.NET MVC

Cookie

IHttpHandler

collaalessandro +AlessandroColla

<handlers> <add name="FlexibleImagesHandlerJpg" path="*.jpg" verb="GET" type="FlexibleImages.FlexibleImagesHandler" /></handlers>

<script>document.cookie = 'screenResolution=screenWidth=' + screen.width + '&devicePixelRatio=' + window.devicePixelRatio + '; Path=/';</script>

#TheDLive

RIFERIMENTI

Designing with Progressive Enhancement (Todd Parker, Patty Toland, Scott Jehl e Maggie Costello Wachs)

Responsive Web Design(Ethan Marcotte)

Calcolo di Marcotte: http://alistapart.com/article/fluidgrids

Responsive Design Workflow(Stephen Hay)

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement(Aaron Gustafson e Jeffrey Zeldman)


GRAZIE! E PASSIAMO ALLE DOMANDE


Technology

Responsive Web Design & Single Page Application