Era già da un po’ di tempo che rimandavo su queste pagine l’installazione di un meccanismo di paginazione a “endless scrolling”. Quel meccanismo, per capirci, che permette raggiunto il fondo di una pagina il caricamento dinamico dei contenuti che risiederebbero nella pagina successiva. E così via all’infinito.

Due i principali dubbi che continuavo a portarmi dietro:

• La visibilità del footer
• Il tracciamento delle pageviews.

Se da un lato è comodo per utenti di scrollare all’infinito l’homepage di un blog, altrettanto non si può dire del classico “contro”. Il footer diventa così vicino e contemporaneamente così lontano, tanto da frustrare chi cerca di raggiungerlo con la forza bruta delle scrollbar. No, no.

Secondo, ma non meno importante, il corretto tracciamento delle visite conteggiate dinamicamente a ogni caricamento. Anche in questo caso non avevo intenzione di transigere su un aspetto fondamentale per conoscere in quale modo i lettori interagiscono con i miei contenuti.

Ho trovato una soluzione a entrambi.
E oggi ti spiego come ho fatto.

La soluzione che ho scelto permette dunque di:

• Attivare il caricamento di nuovi contenuti solo al click dell’utente
• Tracciare correttamente le pageviews in Google Analytics
• Ricadere sulla navigazione standard in tutte le restanti pagine

La soluzione che ho scelto parte dall’omonino progetto Infinite Scroll. Sebbene esista un plugin per WordPress, che in molti potranno sicuramente scegliere per saltare a piè pari tutti gli aspetti avanzati della vicenda, io ho preferito la corrispettiva soluzione manuale.

La logica di base

Il ragionamento è questo: lo script si basa su jQuery, quindi avrai bisogno di questo framework presente sul tuo tema nel modo che ritieni più opportuno. Puoi usare le API di Google per importare sul layout l’ultima versione in maniera semplice, oppure controllare che il tuo tema lo includa già di suo.

Lo script richiede poi quattro variabili di base: l’id del tag del contenitore dei post, l’id del singolo post, l’id del blocco di paginazione standard di WordPress e l’id del link che andrà a scatenare il caricamento infinito.

La logica è quella di identificare il blocco-genitore dove sono contenuti tutti i post, attivare un particolare link al fondo di essi e andare ad “appendere” altri post al termine del suddetto blocco-genitore.

Iniziamo?

1. Importa lo script

Per prima cosa importiamo lo script jquery.infinitescroll.js, in header o in footer a seconda di come sia scritto il nostro layout, subito dopo la rispettiva chiamata a jQuey.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="jquery.infinitescroll.js"></script>

Ricorda di far combaciare il percorso al file javascript così che venga correttamente recuperato e sia pronto all’uso. Questo esempio presuppone che il file js sia nella stessa cartella del tema che usi, ma sul tuo layout potrebbe non essere così.

2. Definisci i puntamenti

Subito sotto l’inclusione del js, ciò che dovremo fare è inserire il relativo blocco di codice in grado di attivare il plugin sui giusti ID del nostro tema. Ricordi? Quegli ID di cui ti parlavo nella logica di base.

Nel blocco che segue puoi vedere come ad ogni riga corrisponda una precisa azione. Ho commentato lo script così che ti sia più facile sostituire gli ID con quelli del tuo layout.

Posizionando questo script dopo lo script di tracciamento standard di Google Analytics questo riesce a passare la giusta variabile relativa alla pagina caricata al volo.

<script>
$(function(){

var infscrPageview = 1;

// #post è il contenitore globale di tutti i post
$('#post').infinitescroll({

	// #mostra-altri è il mio blocco di paginazione standard
	navSelector  : "#mostra-altri",

	// #mostra-altri a:first è il primo link del blocco paginazione standard
	nextSelector : "#mostra-altri a:first",

	// #post .post è il contenitore di un singolo post
	itemSelector : "#post .post",

	// Un po' di testo nel caso non ci fossero altri articoli da mostrare (improbabile)
	donetext      : "Hai raggiunto l'ultimo articolo.",

	// Un'immagine nell'attesa che i post vengano recuperati dal server
	loadingImg   : "http://francescogavello.it/wp-content/themes/blog/img/carica-post.gif",

	// Un testo da aggiungere all'immagine durante il caricamento (non ne faccio uso)
	loadingText  : "" 

}, function() {
	infscrPageview++;
	// passa la giusto tracciamento a Google Analytics
	_gaq.push(['_trackPageview', '/page/' + infscrPageview]);
});

// disabilita auto-scroll
$(window).unbind('.infscr');

// attiva il click manuale sul blocco paginazione standard
$('#mostra-altri').click(function(){
	$(document).trigger('retrieve.infscr');
	$(this).css('display','block');
	return false;
});

// se non ci sono altri post, rimuovi lo scroll infinito
$(document).ajaxError(function(e,xhr,opt){
	if (xhr.status == 404) $('#mostra-altri a').remove();
});

});
</script>

3. Prepara l’HTML

Sul mio layout hai visto come quindi utilizzi un blocco come

<div id="mostra-altri" class="stile_link	">
	<?php posts_nav_link(' | ', 'Pagina successiva', 'Carica articoli precedenti'); ?>
</div>

per paginare (solo in homepage, ricorda) gli articoli.

Lo script di cui sopra riconosce questo blocco identificato dal div “mostra-altri” e va a puntare il primo link (“a”) presente al suo interno, rendendolo il nostro magico scroll infinito. Quando lo scroll raggiunge il termine il blocco viene rimosso così che non crei problemi.

Nota anche come una semplice riga al posto giusto (vedi commenti sopra) permetta il passaggio a Google Analytics del giusto riferimento della pagina da tracciare.

E questo è …tutto.

Questa è l’idea. Un paio di script e il giusto HTML per rendere la homepage uno scroll infinito al click dell’utente. Per il momento il componente non sembra supportare la paginazione di archivi e le pagine successive alla home.

Non che fosse qualcosa che andavo ricercando, tuttavia per mantenere coerente il resto del sito potresti avere bisogno di qualcosa del genere:

<?php
	$numeroPagina = (get_query_var('paged')) ? get_query_var('paged') : 1;
	if ($numeroPagina == 1) { ?>

	<div id="mostra-altri" class="stile_link	">
		<?php posts_nav_link(' | ', 'Pagina successiva', 'Carica articoli precedenti'); ?>
	</div>

<?php } else { ?>

	<!-- Qui la normale paginazione -->

<?php } ?>

che non fa altro che mostrare il blocco utile ad attivare lo scroll infinito solo nella prima pagina, lasciando invariata la normale paginazione (qualunque essa sia, magari tramite plugin su misura) in pagina 2 e seguenti.

Sembra complicato? Non così tanto come può sembrare.

La cosa migliore che puoi fare a questo punto è dare uno sguardo alla demo del creatore dello script, su questa pagina, e trovare i rispettivi riferimenti che ti ho mostrato. Se hai seguito i miei precedenti consigli e disponi di una sandbox locale dove testare idee come questa per il tuo blog, è il momento giusto di mettersi all’opera.

Trovo che la “paginazione infinita” sia un buon modo di portare i lettori un po’ più in profondità nelle nostre pagine. Una volta compresa questa logica, il temibile muro di pagina 2 diventa tanto semplice da superare quanto un click senza reload a fondo pagina.

Un bel vantaggio.

Che ne pensi?
Hai mai fatto uso di soluzioni simili?

Quello che segue è un guest post di Federico Ginosa, giovanissimo web designer e appassionato di WordPress che oggi risponde a una domanda che ricevo spesso nella casella di posta: come si può usare qualche intelligente snippet per WordPress per dare il giusto valore ai nostri articoli e portare i lettori un po’ più in profondità nelle nostre pagine? Buona lettura!

WordPress ha cambiato il web. A tal proposito può essere utile pensare come i CMS in generale vengano utilizzati dal 14.8% dei siti presenti su internet e che il 54.4% di essi utilizza WordPress.

Non è mai saggio parlare di CMS definitivo, ma è pur vero che WordPress sta raggiungendo un alto grado di apprezzamento. Tuttavia, se un buon CMS, una buona dose di costanza e una gran passione per la nicchia che trattiamo costituiscono
il 60% del successo di un blog, l’altro 40% lo fa il template che utilizziamo. Vediamo quindi come migliorarlo.

Il vostro blog è il miglior blog per pubblicizzare il vostro blog! Come? Mi spiego meglio: Per aumentare le visualizzazione del vostro blog (e indirettamente i vostri introiti su AdSense) occorre diminuire la frequenza di rimbalzo, quel valore che indica la percentuale di visite di una sola pagina.

Questo valore può essere alto per due motivi:

• Le pagine in entrata non vengono giudicate pertinenti
• L’utente trova subito ciò che gli occorre e non si “spreca” a visualizzare altre pagine

Se pensate di far parte del primo gruppo, potreste provare a realizzare titoli più efficaci.

Se invece fate parte del secondo gruppo, allora occorre modificare il vostro tema!

Una buona idea potrebbe essere quella di far visualizzare degli articoli correlati. Per far questo esistono decine di plugin che attraverso algoritmi spaziali riescono a fornire i post più pertinenti. Confido di non essere un grande amante dei plugin in generale, ma in questo caso non riesco proprio a comprenderne l’utilità. Il più delle volte restituiscono valori sballati e non pertinenti. Personalmente io faccio invece visualizzare 5 post random della categoria corrente, con questo semplice codice:

<ul>
<?php
function categoria_loop()
{
	$category = get_the_category();
	return $category[0]->term_id;
}
query_posts('showposts=5&amp;cat=' . categoria_loop() . '&amp;orderby=rand');
?>

<?php while ( have_posts() ) : the_post(); ?>
	<li>
    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </li>
<?php endwhile; wp_reset_query();?>	

</ul>

Questa soluzione è adottata da tanti blog, ma spesso non viene sfruttata al massimo. Infatti sono tanti i casi in cui vengono buttati alla fine di ogni articolo quei 10-15 articoli correlati, scritti in cirillico, che non attirano assolutamente l’attenzione e che alla fine vengono superati assieme agli onnipresenti share links, pubblicità varie ecc… La parola d’ordine è quindi attirare l’attenzione!

Vediamo come fare:

1. Pochi ma buoni: Evitate le liste infinite di articoli correlati, fate visualizzare al massimo 5 articoli e cercate di attirare l’attenzione del lettore utilizzando magari uno stile CSS differente.
2. Thumbnail post: Potrebbe essere una buona idea anche quella di far visualizzare un anteprima dell’articolo, come in questo blog. In questo caso basta utilizzare le immagini in evidenza introdotte da WordPress 3.0. Aprite quindi il file functions.php del vostro tema ed incollate il seguente codice:

   
   add_theme_support('post-thumbnails'); //aggiungere supporto thumbnail
   add_image_size( 'nome-anteprima', x, y, true ); // x è la larghezza della vostra immagine, y l'altezza, true abilita il ridimensionamento dell'immagine
   

   Successivamente richiamate l’immagine all’interno del Loop di articoli relativi, in questo modo:

   
   <?php the_post_thumbnail( 'nome-anteprima' ); ?>
   

Una soluzione alternativa

Se i post random della categoria corrente non vi convincono pienamente o se magari utilizzate pesantemente i tag, la soluzione di Brian Cray, potrebbe fare al caso vostro:

ndFrancesco: la soluzione di Brian Cray permette di mostrare i post correlati basandosi sui tag effettivamente usati dall’articolo che viene letto, mantenendo il controllo su HTML e CSS.

<h2 id="related">Articoli Correlati</h2>
<?php
$rel_tags = get_the_tags();
foreach($rel_tags as $rel_tag)
{
	$rel_tagnames .= $rel_tag->name . ',';
}
$rel_posts = get_posts('tag=' . $rel_tagnames . '&amp;post__not_in' . $post->ID . '&amp;showposts=5');
if (count($rel_posts)) : ?>
	<ul>
	<?php foreach((array) $rel_posts as $rel_post) { ?>
		<li><a href="<?php echo $rel_post->post_name ?>"><?php echo $rel_post->post_title ?></a></li>
	<?php } ?>
	</ul>
<?php else : ?>
	<p>I can't find any related posts, sorry!</p>
<?php endif; ?>

One more link

Potete trovare due soluzioni alternative per integrare gli articoli correlati in quest’altro mio articolo.

Conclusioni

Quello di sfruttare a pieno gli articoli correlati è solo uno dei tanti modi per diminuire la frequenza di rimbalzo. Voi li avete implementati nel vostro tema? In che modo?

Altrimenti, quali altre tattiche utilizzate per attirare l’attenzione dei lettori?

foto: © -=Lexx=- – Fotolia.com

Oggi invece parliamo di iPhone.
Un oggettino estremamente controverso che nonostante le differenti opinioni a riguardo è riuscito a finire in una notevole quantità di tasche italiane, e per via delle sue innovative potenzialità a livello di browsing merita sicuramente un’analisi più approfondita.

Come possiamo dunque rendere migliori i nostri layout agli utenti iPhone?

Diciamo che sviluppare con un occhio ad iPhone è in qualche modo possibile anche senza averne acquistato uno. E’ sufficiente basarsi su Safari (in versione desktop), da qualche tempo disponibile anche per Windows e attenersi ad alcune basilari regole di buona scrittura durante la costruzione dei nostri layout (ah, gli standard).

Tuttavia, così facendo si sta solo iniziando a scalfire la superficie. La completa integrazione di Safari Mobile con le altre apps installate come Mappe o le chiamate telefoniche rendono possibili tutta una serie di interessanti ottimizzazioni che si possono sperimentare solamente “mettendoci la mani sopra”.

Lavoriamo su iPhone, e vogliamo letteralmente spremerlo al massimo.

Prima di iniziare

• Le tue dita non saranno mai precise come un mouse.
  Su iPhone si interagisce con le dita, e a meno di non fare un uso continuo dello zoom, la precisione di puntamento sarà leggermente inferiore rispetto a quanto siamo abituati a fare tramite mouse; layout ampi e spaziosi sono semplicemente l’ideale.
• Dimentica il concetto di finestra.
  Il concetto di finestra poi, lascia il tempo che trova quando la navigazione avviene una pagina alla volta, a tutto schermo e senza overlay di nessun tipo. Lo zoom tramite doppio tap su una parte del layout adatta la visuale al primo elemento blocco presente. Nessuna finestra, altro resize o scroll controllabili.
• Quando lo spazio è poco, “less is more”.
  Con una risoluzione portante di 480×320 pixel (in modalità landscape) è naturale che un contenuto a singola colonna sia il meglio che un vostro utente possa chiedere: tuttavia anche senza rivoluzionare il vostro layout in tale senso, ricordate che la chiarezza con la quale disponete i vostri contenuti verrà notata (e apprezzata) da chi altrimenti si troverebbe a scrollare continuamente a destra e sinistra.

Hey, ma Mobile Safari non se la sbrigava da solo?

Per la maggior parte è vero. Safari Mobile sarà in grado di visualizzare le vostre pagine web con l’esatta qualità della controparte desktop senza che voi dobbiate metterci mano in alcun modo.

Tuttavia come già detto la differente area di visualizzazione e i metodi che avete per interagire con essa (le vostre dita) possono richiedere qualche accorgimento aggiuntivo per agevolare la navigazione e sfruttare al massimo le caratteristiche dell’iPhone.

Un foglio di stile separato

Probabilmente già lo immaginavate. Anche in questo caso è bene prevedere un CSS separato dal resto della nostra struttura, contenente le sole regole volte a determinare la resa su Mobile Safari.

Possiamo filtrare il caricamento del nostro foglio di stile aggiuntivo riconoscendo la proprietà “max-device-width” settata a 480 pixel (la dimensione dello schermo dell’iPhone).

Inseriamo quindi nell’head del nostro documento la seguente riga, che permette a tutti gli altri device con una dimensione superiore ai 480 pixel di ignorare il caricamento del CSS dedicato all’iPhone.

<link media="only screen and (max-device-width: 480px)"
href="css_iphone.css" type="text/css" rel="stylesheet" />

Comprendere il Viewport

Mobile Safari effettua un resize automatico a partire dai 980 pixel verso i 320 pixel (modalità portrait). Consideriamola una buona base di partenza per poter ottenere la migliore resa qualitativa sull maggior parte dei siti web attualmente in circolazione (che sono dotati per l’appunto di una width massima di 980 pixel).

Questo non toglie che il vostro layout possa avere differenti dimensioni e richiedere un diverso livello di resize. Esiste a tale scopo un potente meta tag aggiuntivo: viewport in grado di indicare ad iPhone la dimensione di partenza da cui effettuare il resize.

<meta name="viewport" content="width=800" />

Nel caso il vostro layout sia leggermente più piccolo della media, un semplice accorgimento come questo può rendere i vostri testi direttamente leggibili senza bisogno di ulteriori zoom lato utente. Un bel vantaggio con poco sforzo.

Sempre tramite viewport possiamo definire il livello di zoom iniziale, tramite la proprietà “initial-scale=x.y” o bloccarla del tutto con “user-scalable = no” (ma ve lo sconsiglio).

<meta name = "viewport" content = "initial-scale = 1.0" />
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no" />

Lavorando sui dettagli potremo scoprire che agevolare uno zoom iniziale su una “area calda” del nostro layout può far risparmiare tempo prezioso ai nostri lettori e focalizzare l’attenzione su ciò che per noi è importante.

Testi

iPhone applica una sorta di ridimensionamento intelligente anche ai testi mano a mano che il livello di zoom aumenta. Ciò può portare ad effetti imprevisti nei menù di navigazione o quando ci troviamo a disporre i contenuti in spazi a dimensione fissa.

E’ possibile disattivare il ridimensionamento del testo o aumentarne la dimensione ad hoc tramite la regola “-webkit-text-size-adjust”.

-webkit-text-size-adjust: none; /* nessun ridimensionamento intelligente */
-webkit-text-size-adjust: 150%; /* ingrandisci il testo del 150% */

Integrazione con le apps

Esistono poi tutta una serie di proprietà che la versione mobile di Safari implementa per migliorare la user experience e che, per ovvi motivi, non sono implementate nella versione desktop.

Cliccare su un link ad una mappa di Google, ad esempio, porterà all’apertura dell’applicazione Mappe con il passaggio dei parametri associati. Iphone riconosce infatti i link che iniziano con “http://maps.google.com/maps” e ne dirotta l’apertura all’applicazione più consona anziché aprirne la pagina web.

Vengono anche riconosciuti i formati hCard, attivando i numeri telefonici in essi inclusi e permettendo la chiamata diretta dalla pagina web.

<div id="hcard-Francesco Gavello" class="vcard">
    <div class="fn">Francesco</div>
    <div class="tel">123-45667890</div>
</div>

O in alternativa è anche possibile passare un parametro al software telefonico tramite il classico link con tag “a”, inserendo nell’attributo href il prefisso “tel:”.
E’ da notare come link di tale costruzione possano quasi certamente generare problemi sui restanti browser, e dovrebbero essere mostrati solo tramite il foglio di stile riservato all’iPhone.

<a class="call" href="tel:123-4567890">Chiama Francesco Gavello</a>

CSS potenziati

Non vanno trascurate le potenzialità di Safari nell’implementare (come abbiamo visto in passato) le più recenti regole CSS3. Proprietà come “-webkit-border-radius”, “-webkit-border-image”, background multipli e l’utilizzo di PNG trasparenti possono finalmente venire applicati in maniera semplice e senza grattacapi.
Il paradiso del web designer, insomma

Il giusto equilibrio

Questa ovviamente è solo una parte di ciò che potete fare oggi con il vostro iPhone un pò di tempo da dedicare ottimizzazione. Le potenzialità sono moltissime e dipendono in gran parte dai risultati che volete ottenere.

Non credo tuttavia che sia una buona idea spingersi troppo oltre sino a sostituire la totalità del proprio layout con una versione “lite” dedicata alla navigazione mobile (a meno di non essere un grosso network come Digg, Facebook o eBay, ma in quel caso una apps dedicata risolve gran parte dei problemi).

La potenza di iPhone sin dall’inizio è stata quella di offrire la vera internet senza troppi compromessi. Questo è ciò che gli utenti si aspettano ed è ciò che dovremmo secondo me dargli. Voi che ne pensate?

foto: Apple

Piccoli ritocchi, eterne nuove features e cambi di direzione possono minare, se non adeguatamente controllati, la vostra salute mentale nel proporre al cliente un prodotto finale pulito e ottimizzato.

Una specie di sindrome da “quadro mai finito” vista in un ottica web 2.0

Tuttavia, anche se nulla potrete fare di fronte ad una totale rivoluzione del progetto iniziale, esistono invece delle regole di “buona scrittura” che negli anni mi hanno aiutato a mantenere il controllo sul mio codice.

Si risparmia in stress, sul serio

Oggi parliamo di fogli di stile, ma scoprirete che alcuni accorgimenti presentati di seguito valgono più o meno per qualunque progetto preveda la stesura di codice.

1. Usare i CSS

No, davvero. Usare i CSS non è più solamente un’opzione oramai da molto tempo. Se ancora lavorate impastando contenuto e presentazione e non avete mai dato uno sguardo alle meraviglie dei fogli di stile, beh, dovreste veramente farlo. Ne gioverà la vostra salute mentale quando vi sarà chiesto di modificare la grafica del footer di turno nel corporate website da duecento pagine.

Imparare a scrivere fogli di stile nella giusta maniera è il primo passo per prendere le redini del vostro progetto.

2. Ordinare (alfabeticamente) i selettori css

Quando cominciate ad avere un foglio di stile da più di 10 Kb, diventa piuttosto difficile tenere a mente le singole caratteristiche di ogni regola mano a mano che la scrivete. Alcuni riescono ad organizzare alfabeticamente i selettori in modo da poterli ritrovare a colpo d’occhio e crearsi una specie di “modello di scrittura”.

Io non arrivo a tanto, ma in tutti i nuovi progetti da circa un anno a questa parte tendo a ordinare i selettori secondo un mio preciso schema mentale (margini, padding e width prima, tutto il resto dopo). Così mi sono abituato a fare e risparmio notevole tempo nel farlo.

Una volta trovata la vostra giusta dimensione, perdersi nel proprio CSS sarà solo un brutto ricordo.

3. Commentare

Commentare è una di quelle abitudini che si fatica a prendere all’inizio pensando “ma tanto questo me lo ricordo…” e “figuriamoci se avrò mai più bisogno di metterci mano“.

Le risate arrivano quando un paio di settimane dopo non vi ricordate nulla della struttura del documento e dovete metterci mano per via del “grande problema imprevisto®”. Spargere una buona dose di commenti è letteralmente l’ancora di salvezza lavorando con i CSS.

Se state testando una nuova tecnica di controllo dei float che potenzialmente potrebbe crearvi problemi, fatevi un favore e inserite un minuscolo commento per ricordarvelo. Se avete l’impressione di scrivere del codice ridondante appuntatevi di ripulirlo in seguito. Meglio rimuovere un commento superfluo che dannarsi per ricordarsi cosa dentro a quel commento ci avreste scritto.

4. Suddividere

Il primo CSS che scrissi era un vero e proprio macello di regole una in fila all’altra senza preciso ordine logico.

Probabilmente stato facendo i primi esperimenti e devo dire che nonostante il risultato venisse ottenuto senza problemi, non si può dire tuttavia che quel CSS brillasse di pulizia, anzi.

La sensazione era quella di non avere il totale “controllo della creazione” che tanto piace a sviluppatori e designer. Sembrava insomma che le cose andassero per conto loro mentre io stessi a guardare con in mano un pacchetto di pop corn.

Raggruppare i selettori che scrivete, utilizzando i commenti per determinarne i blocchi, funziona molto bene quando dovete andare a modificare una singola porzione di layout o utilizzando il search del vostro editor per muovervi agilmente tra un migliaio di righe.

5. Visione globale e livello di dettaglio

Probabilmente il consiglio che da solo vale tutti gli altri: uno dei grandi segreti del lavorare con i CSS è che il grosso del lavoro viene fatto senza neanche aprire l’editor.

Sul serio. Ciò che faccio prima ancora di buttare giù una singola riga di codice è fermarmi a guardare il layout per un alcuni minuti. Ho sperimentato di persona che buttarsi a testa bassa senza avere la visione globale del tutto porta a infilarsi in vicoli ciechi e a codice poco ottimizzato.

Prendersi invece un momento per tracciare alcune linee mentali, smontare mentalmente il layout pezzo per pezzo e prevedere delle linee di scrittura vi farà risparmiare stress inutile.

6. Modularità

Con la facilità di applicazioni di classi e ID,  capita con i CSS di farsi prendere la mano e scrivere più regole del necessario.

La situazione più tipica è quella in cui lo stile dei link (o delle immagini, o dei paragrafi) viene ridefinito per ogni sezione in cui questi vengono a trovarsi nel nostro layout. Un grande spreco, non trovate?

La situazione ideale, nell’ottica di mantenere un grande progetto sul lungo periodo, è di realizzare del codice in grado di essere (semi)indipendente dal suo contesto e che non richieda codice HTML superfluo.

Un link nella sua scrittura ideale secondo il mio parare non dovrebbe essere qualcosa di più di:

<a href="#" title="Il mio link" class="stile_link">Il mio link</a>

in modo da poter procedere all’applicazione di uno stile generico su tutti gli elemento “a” del layout, e uno stile particolare applicato su misura tramite la classe “.stile_link”.

Test pratico.

Coders!
Quando impiegate a rivedere elementi del vostro codice senza che tutto il resto del layout se ne vada beatamente a spasso ? Avete mai impiegato tecniche di ottimizzazione come queste per risparmiare tempo prezioso sul lungo periodo?

foto: Dave-F

Se ti sei perso le puntate precedenti puoi leggere anche la prima e la seconda parte.

Colonne multiple

Stile di impaginazione preso di peso dall’ambito giornalistico, suddividere i contenuti su più colonne adiacenti può tornare molto utile in layout del tipo “magazine style” (per l’appunto) che sembrano andare tanto alla grande negli ultimi tempi.

Vediamo quindi come suddividere il testo contenuto in un contenitore in maniera totalmente automatica affidandoci ad alcune semplici regole CSS3.

Teoria

Otterremo il nostro scopo grazie ai selettori “column-count”, che definisce il numero di colonne sulle quali spezzare il contenuto

• column-count: 3;
• -moz-column-count: 3; /*  Mozilla */
• -webkit-column-count: 3; /* Webkit */

“column-gap”, che imposta lo spazio tra una colonna e l’altra

• column-gap: 20px;
• -moz-column-gap: 20px;
• -webkit-column-gap: 20px;

e “column-width” che come prevedibile va a definire la grandezza della singola colonna

• column-width: 150px;
• -moz-column-width: 150px;
• -webkit-column-width: 150x;

Come si può vedere abbiamo nuovamente a disposizione la regola “standard” CSS3 e le relative varianti per i browser attualmente in grado di supportarla: “-moz” per Mozilla (Firefox e derivati) e “-webkit” per Safari.

Pratica

Il nostro codice HTML è come al solito molto pulito ed essenziale, e anzi non richiede nessun tagging aggiuntivo. Abbiamo solamente bisogno di un contenitore e dei paragrafi al suo interno sui quali agire. Una condizione abbastanza classica, insomma.

<div class="esempio multi_colonne">
<h2>Fisso tre colonne con spaziatura 20px</h2>
<div id="colonna_tipo_1">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>

<h2>Fisso la dimensione e la spaziatura</h2>
<div id="colonna_tipo_2">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>

Nota: il “Lorem Ipsum” all’interno dei paragrafi è stato troncato per esigenze di impaginazione di questo post.

Andiamo quindi a puntare il div “colonna_tipo_1″ e impostiamo il numero delle colonne sulle quali fare fluire il testo a 3, con una spaziatura di 20 pixel ciascuna.

#colonna_tipo_1{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;

-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
}

Oppure agiamo sulla proprietà “column width” per fissare la dimensione di una colonnna, definiamo poi la spaziatura e lasciamo che il browser si occupi di come suddividere il testo.

#colonna_tipo_2{
-moz-column-width: 150px;
-webkit-column-width: 150x;
column-width: 150px;

-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
}

4. Testo ombreggiato

Un’altra tecnica decisamente immediata da applicare sul testo per risaltarne l’effetto è la proprietà text-shadow.

Teoria:

La regola in questo caso è una sola

• text-shadow: 2px 2px 5px #333

che accetta quattro parametri: nell’ordine spostamento orizzontale, spostameno verticale, sfocatura e colore dell’ombra proiettata.

Pratica:

La proprietà viene applicata in maniera molto semplice, e rende al meglio se usata in maniera “sottile” e senza abusarne.

.ombra_su_testo h2 {
text-shadow: 2px 2px 5px #333;
color: #eee;
}

Background multipli

Ecco quindi l’ultima delle proprietà di oggi, probabilmente una delle più richieste da chi utilizza i CSS in maniera “massiva” con particolare attenzione agli effetti sullo sfondo: i background multipli.

Teoria

Utilizzare i background multipli con i CSS3 è molto più semplice di quanto possa sembrare. Si tratta sostanzialmente di un’espansione delle attuali regole:

• background-image
• background-position
• background-repeat

che vanno compilate esattamente come nelle specifiche CSS2, ma alle quali è possibile “appendere”, tramite il separatore virgola “,” ulteriori background, posizioni e proprietà di ripetizione.

Vediamolo in pratica.

Pratica

Nell’esempio che vi riporto ho utilizzato due diversi background: uno per realizzare una sfumatura in alto, ripetuta sull’asse X, e una in basso a destra, non ripetuta. Il tutto con tre regole e senza l’utilizzo di contenitori annidati a supporto.

.background_multipli {
background-image: url(img/top.jpg), url(img/bottom_right.jpg);
background-position: top left, bottom right;
background-repeat: repeat-x, no-repeat;
}

L’immagine in alto “top.jpg” viene quindi posizionata “top left” e ripetuta “repeat-x”. Le altre proprietà seguono la seconda posizione, un eventuale terzo background la terza, e così via teoricamente all’infinito.

Come potete immaginare gli utilizzi di una simile tecnica sono pressochè infiniti. Attualmente solo Safari supporta i background multipli.

Scarica i file con gli esempi

Arrivati al termine della terza puntata ecco per voi a disposizione lo zip contenente i file utilizzati sino ad ora (comprensivo anche degli argomenti trattati nella prima nella seconda puntata).

• Tecniche di progressive enhancement: file di esempio

E ora via, con altri tre selettori decisamente utili e rapidi da implementare.

4. Pseudo Elementi

Parlando di aspetti prettamente tipografici, definire in maniera particolare la prima riga di un paragrafo può agevolarne la lettura ponendo l’attenzione su ciò che state scrivendo. Utilizzeremo per questo compito l’attributo “first-line“, oramai utilizzato da gran parte dei browser (escluso Internet Explorer 6).

Teoria

Nel nostro contenitore con classe “esempio” andiamo a puntare tutti i paragrafi che seguono un titolo di secondo livello e in particolare solamente la loro prima linea (first-line, appunto).

Indichiamo una variazione del font sul maiuscolo completo, una maggiore grandezza regolata sui 18 pixel e una spaziatura delle lettere a 2 pixel rispetto allo standard.

Pratica

.esempio h2 + p:first-line {
font-variant : small-caps;
font-size : 18px;
letter-spacing : 2px;
}

La resa, come si può notare dall’immagine, è di colpire immediatamente il lettore rispetto ad un anonimo blocco di testo Un piccolo dettaglio che aggiunge quel qualcosa in più.

5. Ombre

Qualche ombra ben posizionata riesce a dare un senso di maggiore profondità e in genere un feeling meno “freddo”. Solitamente gestire le ombre sui contenitori richiede l’utilizzo di contenitori vuoti e in alcuni casi molto annidati, mentre con i CSS3 il tutto viene ridotto ad una essenziale quanto potente regola.

Attualmente solo Safari e Firefox 3.1 (alpha) supportano le ombre.

Teoria

I selettori per generare ombre tramite CSS3:

• box-shadow (standard CSS3)
• -webkit-box-shadow (specifico per Webkit, con il classico attributo -webkit che abbiamo imparato a conoscere)

I parametri che accettano sono quattro, rappresentanti rispettivamente

• spostamento orizzontale
• spostamento in verticale
• sfocatura
• colore dell’ombra proiettata

Pratica

box-shadow : 5px 5px 20px #333;
-webkit-box-shadow : 5px 5px 20px #333;

I selettori presentati producono come effetto un’ombra spostata a destra e in basso di 5 pixel, che sfuma a 20 pixel di distanza con colore #333333.

.attributo_not img { display: none; /* nascondiamo di default l'immagine */ } .attributo_not img:not([border]) { /*rendiamola nuovamente visibile solo se non ha bordo*/ display: block; float: left; margin: 0 10px 10px 0; }

L’attributo “:not([border])” va a colpire tutte le immagini all’interno della classe .attributo_not che NON hanno un bordo definito. Gli utilizzi sulla base della negazione di attributi sono pressoché infiniti e trovano ottime applicazioni come miglioramento estetico per i browser che se lo possono permettere.

Progressive Enhancement: migliorare l’esperienza utente per i browser moderni

Al prossimo appuntamento!

Come anticipato, iniziamo a prendere in esame alcune delle tecniche di progressive enhancement più semplici da mettere in pratica. Vorrei ricordare prima di iniziare come questi articoli trattino di tecniche atte a migliorare esteticamente i nostri layout, e che non non vanno pertanto considerate come basi con le quali costruirne la struttura stessa. Per una lettura più approfondita vi rimando all’articolo principale della serie.

Un foglio di stile separato

Anche se molti dei selettori che verranno esplorati in seguito possono essere implementati direttamente nel nostro foglio di stile principale, questa si rivela una cattiva pratica nell’ottica di un manutenzione futura.

Ricordiamo che l’obiettivo del progressive enhancement è di fornire un miglioramento ai nostri layout partendo sempre e comunque da una solida struttura di base, struttura che deve dimostrarsi autonoma e dotata della maggiore compatiblità cross browser realizzabile. E’ su di essa che andremo a lavorare apportandovi dei migliroamenti progressivi.

Converrà perciò aggiungere al nostro foglio di stile un secondo foglio “exra” dedicato a tutti i miglioramenti che vogliamo implementare.

I vantaggi di una simile scelta sono evidenti:

• maggiore mantenibilità del codice
• eventuale possibilità di filtrare il caricamento del secondo foglio di stile da javascript

Per i browser che se lo possono permettere (in virtù di una maggiore apertura all’implementazione di futuri standard), iniziamo quindi a considerare qualche utile selettore.

1. Selettori di attributo

Questi selettori, già spesso usati nelle specifiche CSS2 (qui una traduzione), con i CSS 3 acquistano nuove caratteristiche interessanti per ampliarne l’utilità.

Teoria:

• selettore[att^="val"]: dove l’attributo del selettore inizia con il valore “val”
• selettore[att$="val"]: dove l’attributo del selettore termina con il valore “val”
• selettore[att*="val"]: dove l’attributo del selettore contiene con il valore “val”

Il principale utilizzo dei selettori di attributo è di personalizzare in maniera automatica i link a seconda della loro destinazione. Un link esterno potrà beneficiare di un’icona che richiami l’apertura di una nuova finestra, mentre un link verso un file PFD potrà beneficiare della caratteristica icona di Acrobat.

Pratica:

I selettori, nell’esempio che consideriamo, vanno applicati su classici elementi “<a>”.

<div class="esempio">
<h2>Selettori di attributo</h2>
<a href="mailto:test@test.it">Sono un link di tipo "mailto"</a>
<a href="htto://test.pdf">Punto ad un PDF</a>
<a href="http://delicious.com">Contengo la parola "delicious"</a>
</div>

Andiamo ad associare dunque l’icona tipica dei PDF ad tutti i link che terminano con il valore “.pfd”, la tipica icona della busta ai link che iniziano per “mailto:” e (ad esempio) l’icona di Delicious a tutti i link che contengono la parola “delicious”.

a[href$=".pdf"]{
background: url(img/page_white_acrobat.png) no-repeat center right;
padding: 0 20px 5px 0;
}

a[href^="mailto"]{
background: url(img/email_open.png) no-repeat center right;
padding: 0 20px 5px 0;
}

a[href*="delicious"]{
background: url(img/delicious.jpg) no-repeat center right;
padding: 0 20px 5px 0;
}

Una volta individuato il giusto obiettivo, non si fa altro che posizionare come sfondo dei link corrispondenti la giusta immaine (più una spruzzata di allineamenti e padding per una corretta resa visiva). IE 6 e precedenti, assieme a tutti gli altri brower non in grado di interpretare correttamente le regole, continuerano correttamente a visualizzare il link senza immagini.

2. Selettori adiacenti

I selettori adiacenti permettono di differenziare un selettore particolare solo se questo si trova direttamente adiacente ad un atro da noi indicato.

Teoria:
Indicando come nell’esempio a seguire “h2 + p” andiamo a puntare direttamente ogni elemento “p” che si trovi in diretta successione ad un elemento “h2″. Una delle applicazioni migliori è, come nell’esempio, nel caratterizzare in maniera più forte il primo paragrafo di una pagina, ma gli utilizzi sono moltissimi e limitati solo dalla propria abilità.

Pratica:

<div class="esempio selettori_adiacenti">
<h2>Selettori adiacenti</h2>
<p>Questo &egrave; il primo paragrafo, e come tale &egrave; speciale.</p>
<p>Lorem ipsum dolor sit amet..</p><p>Lorem ipsum dolor sit amet..</p>
</div>

.selettori_adiacenti h2 + p {
font-size: 200%;
border-bottom : 1px dotted #000;
}

Il primo paragrafo ha dimensione doppia e bordo inferiore un singolo pixel nero. Tutti gli altri paragrafi successivi al primo non subiscono modifiche. Viene generata una resa di questo tipo.

3. Bordi arrotondati

L’applicazione di bordi arrotondati all’interno dei layout inizia diversi anni fa, quando ancora si lavorava a tabelle per definire le strutture e si faceva largo uso di immagini di sfondo, celle vuote e simili. Si è negli anni arrivati a soluzioni (ottimali) che abbandonavano le tabelle in favore di (x)HTML, CSS e qualche javascript per realizzare questo semplice effetto. I “Nifty Corners Cube” di Alessandro Fulciniti sono stati (e sono ancora per me) un punto di riferimento.

Teoria:

Con gli adeguati selettori CSS3 è possibile realizzare lo stesso effetto in sole tre righe, senza ricorrere a JS esterni e potendo controllarne con facilità raggio e angolo di applicazione.

I selettori “basilari” sono:

• “border-radius” (la versione standard CSS3)
• “-moz-border-radius” per Mozilla
• “-webkit-border-radius” per Webkit
• “-o-border-radius” per Opera
• “-icab-border-radius” per iCab
• “-khtml-border-radius” per Konqueror

(lista riaggiornata grazie a Undolog)

Con questa sintassi, la proprietà “border-radius” (e relativa variante -webkit) supporta due soli parametri: nell’ordine raggio orizzontale e raggio verticale. Da notare che Firefox non seque queste specifiche e la variante -moz accetta invece i due parametri considerandoli accoppiati come angoli superiore sinistro/inferiore destro e angoli superiore destro/inferiore sinistro.

Naturalmente possono venire indicati i singoli angoli.

Per Mozilla:

• -moz-border-radius-topright (angolo alto a destra)
• -moz-border-radius-bottomright (angolo basso a destra)
• -moz-border-radius-bottomleft (angolo basso a sinistra)
• -moz-border-radius-topleft (angolo alto a sinistra)

Per Webkit:

• -webkit-border-top-right-radius (angolo alto a destra)
• -webkit-border-bottom-right-radius (angolo basso a destra)
• -webkit-border-bottom-left-radius (angolo basso a sinistra)
• -webkit-border-top-left-radius (angolo alto a sinistra)

Pratica:

Definiamo quindi un bordo sui quattro angoli di 20 pixel di raggio.

border-radius : 20px;
-moz-border-radius : 20px; /* Specifico per Mozilla */
-webkit-border-radius : 20px; /* Specifico per Webkit */

Oppure andiamo a definire singolarmente ogni angolo.

.angoli_arrotondati {
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-top-left-radius: 20px;

-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-topleft: 20px;
}

O ancora, lavoriamo sulle coppie di parametri per qualcosa di più esteso.

.angoli_arrotondati {
-webkit-border-radius: 20px 10px;
/* Raggio orizzontale 20 pixel, raggio verticale 10 pixel */

-moz-border-radius: 20px 10px;
/* Angoli superiore sinistro/inferiore destro a 20 pixel e
angoli superiore destro/inferiore sinistro a 10 pixel*/
}

Il che ci permette di lavorare selettivamente sul tipo di browser su cui vogliamo andare a lavorare.

Sperimentate!

Si conclude con queste tre regole il nostro primo articolo sulle tecniche di progressive enhancement che sono applicabili oggi, subito, per migliorare l’esperienza dei nostri utenti. Molte di queste sono rapide da implementare e veloci da “mantenere” in futuro. Possono adattarsi con rapidità ai nostri layout migliorandone il feeling con pochi accorgimenti.

Altri appuntamenti come questo arriveranno nei giorni prossimi. Se siete interessati all’argomento e avete trovato questo articolo interessante prendete in considerazione l’idea di iscrivervi al Feed RSS.

Ci vediamo nei commenti!

Lavorano contro il coder le incompatibilità tra browser, le differenti modalità di resa e i conosciuti vincoli di Internet Explorer. Tanti grattacapi che portano a sacrificare -in nome della stabilità del progetto- una dopo l’altra le caratteristiche non fondamentali, entrando in un progressivo  “livellamento” verso il basso che penalizza soprattutto gli utenti dotati dei più recenti browser.

Un panorama dove l’avanzamento della qualità dei layout e dell’uso delle reali possibilità offerte da standard CSS3 e simili è purtroppo caratterizzato dall’andamento del “browser più lento”, come nel tipico esempio del battaglione in marcia.

Eppure, qualcosa per agevolare la navigazione a chi se lo può permettere, si può realmente fare. E lo si può fare senza compromettere alcunché verso browser più vecchi e in maniera modulare.

Mantenere la propria sanità mentale e realizzare un progetto in grado di adattarsi al meglio sul mezzo in cui viene presentato ?

Si. La risposta è il Progressive Enhancement. (Hurrà! ).

Di progressive enhancement (e del suo diretto opposto, la graceful degradation) si parla oramai da discreto tempo e la realtà è che questi due termini non nascondono nulla di trascendentale.

• Progressive Enhancement: Il codice viene scritto inizialmente nella sua forma più essenziale e compatibile, aggiungendo arricchimenti progressivi (enhancements) che vengono riconosciuti ed interpretati di volta in volta solo dai browser più recenti.
• Graceful Degradation: L’esatto opposto, sino ad ora praticamente una prassi in ambito lavorativo. Prima si completa il progetto alla sua massima espressione e solo dopo lo si testa scendendo di browser in browser, in modo da valutarne una degradazione accettabile anche su device più datati.

Miglioramento progressivo e degradazione ottimale rappresentano quindi due facce della stessa medaglia, due modi di gestire il proprio progetto (il primo sin dalle fasi iniziali di sviluppo) e se ben controllate permettono di fare vincere:

• gli sviluppatori, che contengono i tempi scrivendo del codice oculato e assicurano una compatibilità modulare puntata sempre verso la resa migliore
• gli utenti, che in maniera trasparente (ergo senza muovere un dito) beneficiano della migliore soluzione disponibile per fruire dei contenuti proposti

Vorrei iniziare a parlare nei prossimi post di alcune tecniche di progressive enhancement affidabili che potete mettere in pratica sin da ora per avvalervi di tutto ciò che è un miglioramento nella user experience nei browser più moderni.

Sia che siate blogger senza esperienza nel coding avanzato dei vostri temi o che siate pane e (x)HTML a pieno ritmo, potreste scoprire come ho fatto io che con i giusti metodi si ottengono risultati notevoli per tutti.

Che ne dite ?

Un paio di letture correlate

Qualcos’altro da leggere riguardo al Progressive Enhancement e la Graceful Degradation su questi altri ottimi articoli italiani.

• Graceful degradation e progressive enhancement ottimo articolo datato ma sempre valido che evidenzia pregi e difetti dei due diversi approcci, con qualche esempio sul campo in grado di rendere bene l’idea.
• E se esistesse un solo browser ? Parlando di standard, questa settimana sul blog di HTML.it.
  Un punto di vista alternativo dal blog di HTML.it.
• Accessibilità e Usabilità: unobtrusive Javascript. Ottimo articolo di undolog.com che parlando di javascript non intrusivo affronta entrambi i temi con uno sguardo generale
• Neal Grosskopf ci parla di Hack CSS per i vari browser

Articoli della serie

Sempre su FrancescoGavello.it, gli altri post di questa serie.

• Progressive Enhancement (1): Selettori di attributo, selettori adiacenti e bordi arrotondati
• Progressive Enhancement (2): Pseudo elementi, ombre e elementi NOT
• Progressive Enhancement (3): colonne, effetti su testo e background multipli

foto: 713 Avenue

Il fatto che in un lavoro di qualità ogni pixel sia importante.

Il giusto equilibrio che si viene a creare in un layout ordinato, facile da leggere e “che si lascia ricordare” non è semplice da trovare. Vediamo spesso ottimi lavori che ci lasciano a bocca aperta e pensiamo “come diavolo si realizza quell’effetto ? E se ce l’ho davanti proprio adesso, non è che possa poi essere cosi’ difficile ! (che è poi il motivo del tanto proliferare dei tutorial sul web, ma tant’è).

Eppure, per quanto nascosta, la soluzione è più a portata di mano di quanto sembri.

Quest’oggi ecco a voi una selezione di alcuni tutorial realmente utili che a loro tempo mi hanno ispirato e “insegnato” a comprendere alcune tecniche basilari.

5 Pixel Popping Techniques

The 2 Pixel Divide, The Pixel Shadow,The Pixel Bevel, The Shadow Highlight e The Vista Effect. Cinque diversi effetti che una volta padroneggiati diventeranno un qualcosa di immediato da inserire nei vostri lavori. Se vi siete sempre chiesi come realizzare un particolare tipo di effetto a rilevo o sfumatura, e non ne conoscevate il nome, probabilmente lo troverete tra questi cinque ottimi effetti di base.

A Gradient Tutorial

I gradienti sono difficili da realizzare. Ripetiamolo. I gradienti, per quanto in effetti frutto di un paio di click su una toolbar, sono molto difficili da padroneggiare per creare un effetto credibile. L’ottimo articolo di 9rules vi insegnerà le poche info necessarie per stupire con una tecnicha così elementare.

The Power of Blending Options

Creazione di una icona attraverso gli strumenti di fusione di Photoshop. Articolo interessante nello sviscerare praticamente ogni opzione di fusione dedicandole un preciso metodo di utilizzo. Perchè non si tratta solo di “ombra esterna” al 75% nera

Layer Styles in Photoshop

Ancora su opzioni di fusione, preset e stili di livello visti da Tutorial9, con particolare riferimento ai testi.

Mysterious Lighting Effect Tutorial for Photoshop

Creare un effetto di illuminazione su fondale. Se come me avete sempre invidiato i layout di questo tipo troverete ottime info per iniziare. Scoprirete che il filtro “effetti di luce” può davvero valere uno sguardo più approfondito.

Natures Sunshine

Un’altro tema verso il quale sono sempre stato attratto è quello delle silhouette su fondali evocativi (solitamente tramonti). Simili tecniche tornano sempre utili e sono facilissime da mettere in pratica.

The 5 Essential Photoshop Reflections

Quanti tipi di riflessi esistono ?
Sbagliato( ), Tutorial9 ci insegna che ne esistono ben cinque, nati con scopi e caratteristiche ben diversi gli uno dagli altri.

Tutorial per tutti !

E’ passato davvero un bel pò di tempo da quando i tutorial sul web si limitavano alla stessa manciata di tecniche proposte senza professionalità giusto per attrarre visitatori.

Oggi abbiamo colossi come PsdTuts (e tutto il suo impressionante network alle spalle , Tutorial9, Photoshop Star e molti altri che probabilmente non conosco ma sono sicuramente degni di nota. Quali dei tanti usate ? Quali i vostri riferimenti tra la miriade di possibilità ?

E vi ricordate qual è stato il tutorial che per primo vi ha “aperto gli occhi” sulle potenzialità di Photshop ?

foto: john_a_ward

Quello che potrebbe quindi sembrare il principale (per molti unico) elemento realmente utile per curare il proprio network di relazioni professionali viene invece relegato ad elemento marginale, quasi un male necessario da affiancare al resto.

Si parla nell’articolo di portfolio stampati, di copie-campione da rilasciare a clienti interessati, di versioni statiche su PDF fino a tutto quello che riguarda la propria immagine coordinata “su carta” (biglietti da visita, cv cartacei, etc).

Io che sono sempre stato un grande sostenitore del web come punto cardine di tutto il mio “essere professionista”, mi sono sentito per un attimo smarrito. E se avesse ragione ?

Voglio dire, per il professionista creativo è normale partire dal lato web quando si prende in esame la concorrenza. E’ normale valutare principalmente ciò che vediamo attraverso lo schermo dopo una rapida ricerca su Google.

Per il cliente, forse non è così immediato.

Mi immagino clienti impacciati nel guardare in un minuscolo portatile immagini e slideshow di presunti lavori “interessanti”.  Me li immagino ad ascoltare annoiati svisceramenti di questa o quella tecnica innovativa quando magari tutto ciò di cui realmente avrebbero bisogno è di una manciata di stampe in alta qualità sulle quali riflettere a mente fredda una volta rientrati dall’incontro.

Stampe sulle quali pasticciare, scrivere appunti e indicare a pennarello questo o quell’elemento interessante da spostare più in su o più in giù.

Il mondo virtuale dunque, nel quale noi ci troviamo tanto bene, contrapposto a quello “reale”, tangible al quale il cliente molto spesso mira senza ricevere la giusta soddisfazione.

Provate a chiedervi:

• Avete mai usato qualcosa di più (o di meno) del vostro portatile durante incontri di lavoro ?
• Richiedete spesso una connessione web, o vi accontentate di presentare qualcosa di “ibrido” che si adatti a qualunque situazione ?
• Disponete di una comunicazione coordinata tra cartaceo e online ?

Ora che ci penso, l’approvazione più veloce in assoluto su uno dei miei lavori l’ho avuta presentanto delle stampe…

foto: interrupt