Personal tools
Siti web in HD (high definition): fuffa o reale possibilità?

Stanno arrivando...

Sep 17, 2013

Siti web in HD (high definition): fuffa o reale possibilità?

E' in corso una lenta e silente rivoluzione nel mondo del web o è frutto del delirio di onnipotenza di qualche genio del crimine? Gli indizi parlano chiaro...

Siti in HD nel 2013... perché no? Lo ammetto, era una cosa a cui non avevo mai pensato fino ad ora, ma il nostro tuttologo Cesare, fonte inesauribile di conoscenza, mi ha messo qualche giorno fa la pulce nell'orecchio con questa mail (riporto il thread perché è proprio così che è cominciata la mia ricerca del pixel perduto).

CesareL'antefatto

From: Cesare
Date: 2013/9/6
Subject: Siti web in HD - questa me la spiegate
To: Irene
Cc: Stefano, Massimo

Cesare:
http://www.legacycorp.ca/hd-solutions.php
Non può essere aria fritta, ma non ho capito in cosa consiste la HD-osità di un sito...

Massimo:
Mah! Suggestivo :)

Stefano:
Penso anche io che ci sia molta aria fritta.
Qualcuno però ne parla in maniera più consapevole:
http://designshack.net/articles/html/ready-or-not-here-comes-hd-web-design/

Io:
Dai, non si può credere a uno che parla di HD mettendolo sottolineato per evidenziarlo senza che sia un link (al di là dell'obbrobriosità di sito che puzza di fuffa lontano un miglio ^^).
O forse non è una sottolineatura ma un piano d'appoggio tridimensionale visto di piatto?
Mah :P

Stefano:
Sì il link segnalato da Cesare è puro fuffaware!
Se cerchi ce ne sono tanti in giro: evidentemente più di uno ci casca.
Siti web hd sarà il nuovo termine usato dai commercialoni ;-)

L'indagine   

Da dove partire se non da Google? Ok, iniziamo...

Search website HD

Mmmmmh... credo che la stringa di ricerca vada rivista.

Al secondo tentativo mi viene proposto lo stesso articolo segnalato da Stefano: “Ready or not, here comes HD Web Design” di Joshua Johnson. Il discorso si fa più interessante: la diffusione crescente di dispositivi ad alta risoluzione, primi fra tutti i "Retina" di mamma Apple, dovrebbe portarci a riconsiderare il modo di progettare (e realizzare) interfacce web.

Il movente

“Are you ready for HD web design? Do you know how your sites will look on a new generation of high resolution screens?” - J. Johnson

I 72 pixel-per-inch a cui siamo abituati vengono quindi scalzati da numeri decisamente più alti (anche se, mi sembra di capire, siamo ancora lontani da uno standard): 326 ppi per l'iPhone Retina, 264 ppi per l'iPad.

Cosa può fare il povero webdesigner per far fronte alla nuova densità (pixel density) che avanza? Aumentare la RAM del Mac (designer che usano il PC? non pervenuti...) e armarsi di sudoku per occupare i lunghi tempi di elaborazione di PSD ad alta risoluzione?

Come saggiamente suggerisce l'autore dell'articolo: “pensiamo all'impazzimento dei web developers che lottano contro i tempi di caricamento delle pagine in presenza di immagini a bassa risoluzione e immaginiamo adesso cosa succederebbe ad un sito come Pinterest se fosse pieno di immagini a 326 ppi!”.

Il colpevole...

...si sa, è sempre il maggiordomo. Il nostro fedele e servizievole iPhone, o i suoi cuginetti iPad e iPad mini sono quindi accusati di premeditazione?
Non so, c'è qualche dettaglio che mi sfugge. Possibile che sia tutto qui? Parliamo di siti in HD e tutto ruota attorno ai display Retina? Allora probabilmente il gioco non vale la candela oppure la partita durerà ancora qualche anno prima di assistere ad un capovolgimento del risultato.

iphone cat caseL'alibi

Facile: vuoi mettere il momento di puro godimento nel mostrare ai colleghi le miciosissime foto caricate sul proprio blog HD "Vibrisse e Gommini"? ;-)

La soluzione del caso

Elementare Watson. Incastriamo il colpevole con una bella media query: l'attributo device-pixel-ratio è esattamente quello di cui abbiamo bisogno. Ispirandosi al metodo indicato da Hal Gatewood, Joshua ci propone questo:

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
   div {background: url('biggerphoto.jpg');}
}

Possiamo quindi servire foto ad alta risoluzione solo se è necessario; tuttavia questo non risolve il problema di immagini embedded. Il resto è storia recente: per loghi e immagini vettoriali iniziamo ad orientarci sul formato SVG e ricorriamo al CSS puro in tutti gli altri casi (bottoni, gradienti, ombre...). La dipendenza dalla risoluzione ha i giorni contati.

conanLa chiusura del fascicolo... per ora

Fuffa o reale possibilità? La verità sta nel mezzo. E' ancora un po' prematuro parlarne e si trova ancora poca documentazione al riguardo. Ma è vero che fino a qualche anno fa anche il webdesign responsive era solo un lusso per pochi...

Filed under: , ,
comments powered by Disqus