Responsive Web Design & Single Page Application

RESPONSIVE WEB DESIGN
& SPA
Alcune 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 diventa
www.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

Responsive Web Design & Single Page Application

More Related Content

Similar to Responsive Web Design & Single Page Application (20)

More from Alessandro Colla (6)

Responsive Web Design & Single Page Application