Personal tools

images

Oct 06, 2015

Mappe immagine facili facili integrate in TinyMCE

Filed Under:

Il tag map in ambiente e web è sempre meno utilizzato. Ci sono però casi in cui è una soluzione facile e veloce alla rappresentazione grafica di un'informazione.

Ci sono diversi casi in cui mi trovo a valutare con un cliente come poter introdurre delle mappe immagine in un sito; solitamente si tratta di mappe vere e proprie in cui il fruitore del sito deve poter trovare velocemente informazioni inerenti le parti rappresentate nella mappa.

read more

Dec 03, 2014

Tipografia o arte? Il font si trasforma in design e scultura!

I LOVE TYPOGRAPHY

Tipografia o arte? Il font si trasforma in design e scultura!

Filed Under:

Per gli appassionati del font design ecco 10 esempi di tipografia utilizzata in ambiti diversi da quello convenzionale. Scopriamo insieme un altro modo di vedere i font.

Il font, ovvero il tipo di carattere usato, è fondamentale per caratterizzare il design della pagina. In alcuni casi la creatività spinta al massimo trasforma il font design in opere d'arte. Ecco i 10 esempi più caratteristici dei tanti proposti in rete.

An obvious bus stop

Bus

Scultura "An obvious bus stop" realizzata a Baltimora dalla "Madrid-based artist collective Mmmm". Il design friendly di questa fermata è in contrasto con una city industriale e sicuramente rende meno noioso il dover aspettare il bus ogni mattina. La lettera B può proteggere le persone dalle intemperie, e la curva della S invita passeggeri di sdraiarsi mentre aspettano.

read more

Sep 03, 2014

Responsive web design... ma non dimentichiamoci del logo!

Responsive logo design

Responsive web design... ma non dimentichiamoci del logo!

Filed Under:

Sfruttiamo davvero tutto il potenziale del responsive web design per i loghi? Come risulterebbero quelli dei brand più famosi, se fossero responsive?

Nei siti web responsive l’aspetto dell’header, del menu di navigazione o dei contenuti cambia in base alle dimensioni dello schermo. Tuttavia, si tende a non modificare i loghi: semplicemente si riducono o si espandono per adattarsi allo schermo.

A volte manca uno studio vero e proprio sull’aspetto responsive del logo, che definisca come debba essere il logo in base alle diverse dimensioni del dispositivo. Eppure il logo è il simbolo più potente del marchio di un brand.

Come dicevo, semplicemente ridurre o ampliare un logo secondo il suo contesto non è sempre la soluzione migliore.

Potrebbe essere necessario aggiungere dettagli nel logo man mano che la capacità del dispositivo aumenta o, al contrario, rendere minimale il suo aspetto se le dimensioni della finestra diminuiscono.  

Un ottimo esempio ci viene fornito da un progetto di studio di Joe Harrison sulla creazione di loghi responsive per i grandi marchi.

Questo progetto mostra come loghi delle marche più popolari possono essere efficacemente riprodotti in maniera responsive. Se aprite la pagina e ridimensionate il browser vedrete i loghi che si aggiornano dinamicamente in base alle dimensioni dello schermo. Via via che le dimensioni del browser si riducono, ognuno di questi loghi passa attraverso una sequenza di breakpoint e, ad ogni breakpoint, il logo viene modificato, rimanendo però fedele al marchio originario.

Loghi - FullscreenLoghi - TabletLoghi - Mobile

read more

Sep 17, 2013

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

Stanno arrivando...

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

Filed Under:

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

read more

Jul 13, 2012

HTML5 responsive images: una soluzione semplice con jQuery Picture e tag Figure

Un'immagine diversa per ogni dispositivo attraverso un plugin

HTML5 responsive images: una soluzione semplice con jQuery Picture e tag Figure

jQuery Picture va a braccetto con il tag Figure e permette di gestire efficacemente immagini e altri contenuti multimediali

Non sono certo la prima che parla di responsive images, recentemente è un argomento molto quotato. Questo perché le soluzioni proposte per servire la giusta immagine a seconda del device, delle dimensioni delle schermo o della larghezza di banda disponibile sono molteplici.

Ho deciso di dire la mia, perché da poco ho provato il plugin jQuery Picture e l'ho trovato molto semplice e veloce da integrare.

jQuery Picture serve ad inserire nel proprio layout un supporto alle immagini responsive.

Funziona con:

  • l'HTML5 <figure> tag;

  • il nuovo candidato <picture> tag.

Vi anticipo subito che non mi dilungherò sull'utilizzo del plugin con il tag <picture>: per ora è ancora una proposta e non si tratta di un codice HTML valido. Preferisco parlare di <figure>, che è già parte dello standard.

 

read more