Come sappiamo, le specifiche CSS3 hanno implementato nuove unità di misura, tra queste vi sono alcune non proprio conosciute relative alla dimensione della finestra, si tratta di: vw, vh e vmin. Il supporto per ora è previsto su Chrome 20 (ancora in fase beta) e parzialmente su internet explorer 9.

Sicuramente ti starai chiedendo l’utilità visto lo scarso supporto da parte dei browser. Beh è vero, questo tipo di operazione risulta più conveniente effettuarla con javascript ma comunque sono da apprezzare queste nuove tecniche di progettazione da parte degli sviluppatori css, con la speranza di poterle usare al più presto e senza preoccupazioni.

Come funziona

h1 {
  font-size:2.0vw;
}
h2 {
  font-size:3.0vh;
}
p {
  font-size:2.0vmin;
}

Capirne il  funzionamento risulta molto semplice, nel mio caso il valore di 2.0vw rappresenta il 2% della larghezza della finestra. Stesso concetto per vh, ma in altezza. L’unita vmin invece si rifersice alla larghezza/altezza più bassa, ad esempio se ho una risoluzione di 1024×768, 2.0vmin rappresenta il 2% di 768px.

Il risultato finale è ovviamente scomodo su smartphone, il font risulterebbe davvero piccolo. Infatti per questo tipo di dispositivo conviene utilizzare i media-query.

Conclusioni

Girando in rete alla ricerca di informazioni, sono riuscito a trovare l’articolo di Chris Coyier: Viewport Sized Typography che fa delle considerazioni molto interessanti sull’argomento, con tanto di demo e video nel caso qualcuno non possa testarlo data la problematica crossbrowser.

Se hai sperimentato queste nuove unità di misura o vuoi condividere un tuo parere, scrivi pure nei commenti o sulla nostra fanpage ;)

Pochi giorni fa, leggendo tra i miei feed rss, sono arrivato a questo sito: baconforme.com.
Bacon, è un plug-in jquery che permette di modellare il testo secondo diverse forme: curva, obliqua e ondulata. Perfetto per allineare un intero testo intorno ad un’immagine trasparente. Vediamo come funziona:

Codice html

Innanzitutto ho allegato i file che servono al funzionamento del plug-in:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="bacon.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="bacon.jquery.css" />

Fatto questo, di seguito ho impostato due div contenitori (shoe e bag) per due esempi differenti: con curva e modo obliquo.

<div class="shoe">
    <p class="baconMe">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets.</p>
    <img src="shoe.png" alt="shoes" />
</div>

<div class="bag">
    <p class="baconLine">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions.</p>
    <img src="bag.png" alt="bag" />
</div>

Allineare il testo

Successivamente ho incollato il codice javascript che serve a modellare il testo attraverso dei parametri.

Il primo pezzo di codice si riferisce al paragrafo con classe baconMe, impostando i valori delle x ed y riusciamo a spostare il testo e formare delle curve che seguono le forme dell’immagine.

La seconda parte del codice javscript è per il paragrafo con classe baconLine, settando il valore del parametro step riusciamo a dare un angolo di inclinazione che segue l’immagine in modo obliquo.

<script type="text/javascript">
$(document).ready(function() {
  $(".baconMe").bacon({
          'type' : 'bezier',
          'c1' : { x : -160,      y : 0  },
          'c2' : { x : -140,      y : 70 },
          'c3' : { x : 350,       y : 140 },
          'c4' : { x : -400,      y : 210 },
		   'align':'right'
      }
  );

  $(".baconLine").bacon({
          'type'   : 'line',
          'step'   : 2,
          'align'  : 'right'
      }
  );
});
</script>

Come hai potuto notare far funzionare il plug-in non è complicato e può tornarci molto utile per progettare qualcosa di nuovo.

Se conosci altri plug-in simili e vuoi condividerli, scrivi pure nei commenti o sulla nostra fanpage

Color Scheme Designer 3

Questo tool si presenta con la classica ruota dei colori rosso, giallo e blu dove è possibile scegliere una scala cromatica secondo una tipologia di schema: mono, complementari, triadici, a quadrato, analoghi e split complementari, impostarne luminosità e saturazione.

Con pochi click hai una palette di colori subito da provare, puoi esportarla in html+css, xml, txt, palette per photoshop e gimp.

Adobe Kuler

La sezione “create” di adobe kuler si presenta similmente a quella di Color Scheme Designer 3, in base alla tipologia di schema puoi creare diverse combinazioni di colore.

A differenza di questo, Kuler è in grado generare una tavolozza di colore in base ad un’immagine caricata sul sito, questo è un vero punto di forza. Un altro a favore è sicuramente la community, registrandoti al sito hai la possibilità di salvare le tue tavolozze, condividerle con gli altri utenti che potranno sfogliarle e votarle.

Colour Lovers

Se per te la community di Kuler è troppo ristretta, il sito COLOURlovers è sicuramente più soddisfacente. Nasce come un tool generatore di colori, ma nel corso del tempo è diventato un vero e proprio portale di condivisione di materiale tra gli utenti. Consente di condividere singoli colori, palette, patterns e forme.

Color Stream

Color Stream è un app per iphone molto simile ad adobe kuler e color scheme designer. Permette di creare tavolozze di colore partendo da zero oppure estraendola da una fotografia del tuo iphone. Un’applicazione molto concisa e senza complicazioni di utilizzo, da fare invidia al mondo del robottino verde che spero al più presto possa usufruirne di una versione compatibile.

Pictaculous

Cosa fare quando si trova inspirazione mentre sei in giro per il mondo? semplice, c’è pictaculous. Pictaculous è un progetto gratuito di MailChimp Labs che fornisce palette di colori in base alle immagini che gli inviate per posta elettronica. Semplice, scatta l’immagine con il tuo smartphone ed inviala a colors@mailchimp.com.

Riceverai entro pochi minuti una tavolozza di cinque colori, una serie di schemi colore suggeriti da kuler e colourlovers, e infine una tavolozza di colori adobe in formato .aco.

Oltre a questa soluzione puoi caricare direttamente l’immagine dal tuo computer sul sito pictaculous.com.

Colour Contrast Check

Molto utile anche questo tool che prende in esame il contrasto tra i colori del testo e dello sfondo. Per verificare il contrasto basta inserire i valori del colore di primo piano e del colore di sfondo nelle pagine del sito, scoprirai se le combinazioni sono valide e non superano i requisiti imposti dal web.

Se conosci altri tool utili nella gestione dei colori e vuoi condividerli, scrivi pure nei commenti o sulla nostra fanpage

Qualche considerazione sulla carta

Già ti sento esclamare… ma nel 2012 ancora parli di stampa e @media print? Posso in parte darti ragione, Il web e il digitale dominano ormai incontrastati nello scenario moderno, ma c’è chi ancora, come me, che crede che un buon CSS dedicato alla stampa possa rendere migliore la navigazione di un utente, che per svariati e differenti motivi deve assolutamente stampare un articolo trovato su un sito web. Io stesso maledico quando devo stamparmi un testo da web, e nell’anteprima di stampa mi viene mostrato, il menu, la sidebar, le pubblicità, i colori, le icone, il footer con elementi flottanti annessi e connessi e quant’altro possa dar fastidio e rendere difficoltosa una successiva lettura su carta.

Basta veramente poco per realizzarlo; vediamo insieme tutti gli aspetti da considerare per ottenere un buon risultato.

3 metodi per associare un foglio di stile specifico

Ci sono sostanzialmente 3 metodi per associare un foglio di stile per un media specifico.

Primo Metodo

Il primo tramite la regola @import ma internet Explorer 6 non la interpreta correttamente, ignorandola del tutto:

@import "print.css" print;

Secondo Metodo

Il secondo metodo, tramite la sintassi @media, consente all’interno di un unico CSS di raggruppare le regole in base al tipo di media, e non sono altro che la versione “primordiale” dei MediaQueries CSS3. Segue un piccolo esempio:

body{  /*Per tutti i tipi di media*/
    margin:0;
    padding:0
}

@media screen{  /*Regola dedicata alla visualizzazione su monitor*/
    body{
        margin:10px;
        padding:10px;
    }
}

@media print{  /*Regola dedicata alla visualizzazione su carta*/
    body{
        margin:10px;
        padding:10px;
    }
}

Terzo Metodo

Il terzo e ultimo metodo, quello che risulta essere il più efficace è quello di linkare differenti CSS nell’head della pagina, differenziandoli tramite l’attributo media del tag link o style, ed ecco un esempio:

<link rel="stylesheets" type="text/css" href="print.css" media="print" />
<!-- OPPURE -->
<style type="text/css" media="print">
    /* Regole CSS dedicate alla stampa */
</style>

Come strutturare un foglio di stile per la stampa

Le regole da tenere da conto non sono tantissime e ne difficili da ricordare. Vediamo nel concreto cosa ho realizzato per il blog; resta sottointeso che i nomi degli elementi sui quali andrò ad agire saranno sicuramente differenti ma questo dipenderà unicamente dal vostro markup.

La base del nostro Foglio

Per prima cosa assicurati di impostare testo nero su sfondo bianco. Non badare a fronzoli inutili come la grafica o i colori. La maggior parte degli utenti stamperà in bianco e nero ma soprattutto vorrà consumare la minor quantità di inchiostro possibile. Per sicurezza utilizza !important per overraidare successive regole. Inoltre abbandonate l’utilizzo dei pixel (unità di misura d’eccellenza per il @media screen ma non per la stampa, dove regnano incontrastati i punti e il valore 12 risulterà ottimale per la lettura dei testi, cosi come l’utilizzo di font serif agevolerà la lettura su carta; affidiamoci quindi al buon vecchio Times New Roman per ottenere un risultato coi fiocchi.

body {
    background: white!important;
    font-size: 12pt!important;
    color: black!important;
    font-family: “Times New Roman”, Times, serif!important;
}

I link

Ora che la base è ok, passiamo ai link; anche in questo caso rigorosamente di colore nero, se volete in grassetto e sottolineati per differenziarli dal normale testo. Per dare un senso alla presenza di link (che su carta per ovvi motivi non sono cliccabili ), possiamo affiacare loro, tra parentesi, il percorso di destinazione attraverso la pseudo-classe :after illustrata in questo articolo.

#content_box a:link, #content_box a:visited {
    background: none repeat scroll 0 0 transparent;
    color: black;
    font-weight: bold;
    text-decoration: underline;
}
#content_box a[href^="/"]:after {
    content: " (http://www.laboratoriocss.it" attr(href) ") ";
    font-size: 70%;
}

Nascondiamo tutto! …o quasi.

Cerca di individuare la parte che reputi sia la più importante. Nel caso di LaboratorioCSS, la parte piu importante (di una pagina di dettaglio) è proprio l’articolo stesso. Senza altri indugi, tramite la regola “display:none;” rendi invisibili tutti quegli elementi di contorno al contenuto che credi sia quello principale della pagina in oggetto. Tra i piu importanti, la navigazione, l’header, la sidebar, il footer, i commenti; per le immagini invece è doveroso fare una considerazione sulla loro natura. Credo sia giusto farle stampare solo se apportano un reale beneficio alla lettura; in questo, l’unica immagine che ho deciso di eliminare è quella di testata in quanto serv solo a decorare e nulla di più!

#nav, #header, #sidebar-border, #footer, .read-more, .post-edit-link, .gotocomments, .wp-pagenavi, #demo_download, #sdac_related_posts, .wp-about-author-containter-around, #comments-div, #respond, #sharebar, #sharebarx, #addcomment, .post-info-category, .alignnone.size-full {
	display:none!important;
}

Cosa resta?

Per tutti gli elementi rimanenti ricorda di azzerare i margini e padding, di togliere evenutuali posizionamenti assoluti, immagini di sfondo e float e infine di impostare la larghezza degli elementi su auto cosi che occupino tutta la larghezza a loro disposizione.

#content, .post, #content div, .syntaxhighlighter .no-wrap .line .content {
    background: none repeat scroll 0 0 transparent;
    float: none !important;
    padding: 0;
    margin:0;
    width: auto;
    position:static!important;
    white-space: normal !important;
}

/*Con queste regole rendo di colore nero
le linee di codice stampate tramite il plugin Syntaxhighlighter*/
.post .syntaxhighlighter .keyword, .post .syntaxhighlighter .value, .post .entry code{color:black!important;}

Il Page-break

Il page-break, ovvero l’interruzione di pagina, è una regola CSS che ti consente di inserire un interruzione di pagina prima o dopo del selettore specificato. E’ uno strumento molto preciso ma anche molto pericoloso se usato male, potresti trovarti con intere pagine vuote. A questo link è presente la documentazione ufficiale. Come possiamo leggere, le proprietà conivolte sono 3 (page-break-after / page-break-before / page-break-inside) ma solo le prime due sono supportate, mentre la terza è supportata solo dal browser Opera.

Conclusioni

Come già ti ho detto all’inizio ogni sito o blog ha i suoi riferimenti ed elementi da dover nascondere od eliminare. Questo che ti ho illustrato riguarda il mio blog, ma i ragionamenti che stanno alla base sono applicabili a qualsiasi sito web. Rendere più accessibile un sito web significa anche renderlo fruibile sui diversi media, compreso il @media print.

Se invece vuoi renderti la vita più facile puoi anche affidarti a qualche tool online che faccia il lavoro sporco. Ho trovato questo servizio che credo possa fare al caso tuo, provalo, ha delle interessanti funzionalità! Puoi utilizzarlo direttamente online oppure inserire il pulsante sulla pagina web che intendi rendere accessibile per la stampa.

Ti fornisco inoltre il link al quale puoi trovare il CSS che abbiamo analizzato insieme nell’articolo, sperando di aver fatto cosa gradita, ti ricordo che puoi trovarci e discutere di tutto ciò che vuoi anche sulla nostra fan page ufficiale!

Un saluto e alla prossima.

Se hai poca esperienza in merito clicca qui per avere una panoramica completa sull’argomento. Ho letto su HTML.it un articolo pubblicato ieri, che illustra 2 nuove tecniche di Image Replacement.

Le due nuove tecniche

Nell’articolo in questione vengono illustrate le due tecniche con le relative porzioni di codice. L’articolo si conclude chiedendo ai lettori di testare sui vari browser il loro corretto funzionamento. Reputo l’image replacement una tecnica che sta alla base della costruzione e del montaggio dei template. Scopiamo insieme se queste due nuove tecniche sono all’altezza anche dei browser più obsoleti come IE6 e IE7.

Jeffrey Zeldman

La tecnica in questione, illustrata sul suo blog ufficiale, viene presentata come una nuova ed elegante tecnica che va a migliorare l’attuale e diffusissima P.I.R. – Phark Image Replacement che utilizza il text-indent negativo per nascondere il testo. (text-indent:-99999px;).

La nuova tecnica invece abbandona il text-indent negativo che a quanto pare creava non pochi problemi in termini di performance a causa del grande riquadro che veniva creato, a favore di uno positivo che spinge il testo quanto basta per fuoriuscire dal nostro elemento, il white-space impostato su nowrap impedisce al testo di cadere a capo e infine l’overflow hidden, nasconde tutto ciò che si trova al di fuori del nostro elemento, per l’appunto la parte testuale.

.hide-text {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

Nicolas Gallagher

Una shorthand porta a zero i valori di line-height e di font-size, mentre la lettera “a”, ci spiega Gallagher, funge da font-family. Il validatore CSS non riteneva valido l’uso di 0/0 come unico valore nella proprietà font, e dato che tutti i browser lo accettano, questo sembrerebbe essere solo un errore nel validatore. Utilizzando invece la sintassi “font: 0px / 0 a” la validazione c’è ma nel codice viene riportata questa “a”. Con Il text shadow impostato su none siamo certi che qualsiasi valore ereditato venga eliminato dal testo. Infine il color transparent è necessario per tutti i browser che non riescono a renderizzre il font-size a zero.

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Risultati dei test

Abbiamo condotto dei test su 3 tipi di elementi e per ognuno abbiamo testato entrambe le tecniche su Internet Explorer dalla versione 6 alla 9.

• Elemento di Tipo Blocco -> Titolo H2
• Elemento di tipo blocco trasformato in inline-block -> Paragrafo

I test che abbiamo condotto con la tecnica illustrata da Zeldman hanno portato ad un esito positivo per gli elementi in questione su Internet Explorer 8 e 9. Con le versioni 6 e 7, la tecnica illustrata da Zeldman su questi tipi di elementi non riscontra difetti se non uno strano comportamento, nel caso ci sia una background-image, che porta la stessa a fuoriuscire dal contenitore e a scomparire nel caso venga impostato il background-position su center oppure right!!!

Per quanto riguarda invece il metodo di Gallagher, il testo sulle versioni 6 e 7 ha dei problemi. Viene visualizzata una piccolissima riga di testo su IE6 in entrambi gli elementi mentre su IE7, nel caso in cui venga aggiunto un paddding, il testo anche se piccolissimo viene anche in questo caso mostrato su entrambi gli elementi.

Lascio a voi gli altri esperimenti, miraccomando! Alcuni bug ci sono sopratutto con le vecchie versioni di Internet Explorer. Fammi sapere cosa ne pensi ma soprattutto se intenderai utilizzare una di queste nuove tecniche nei tuoi progetti!

Sono passati circa 20 anni dalla prima pagina web, anni in cui l’utente è diventato sempre più esigente nell’uso di internet. E’ affamato di informazioni contenenti video e immagini, fruibili da smartphone, tablet e via dicendo. Oggi carichiamo intere pagine attraverso la banda larga e con supporti hardware/software migliori di un tempo. Costruiamo siti web interattivi, pieni di effetti, grazie a nuovi linguaggi come html5 e jquery.

Tutto questo ricade sulle prestazioni e su noi sviluppatori. Sì perchè oggi le prestazioni sono fondamentali e non riguardano solo l’hardware e il software, ma anche la struttura delle pagine, il design e le reti.

Vediamo qualche consiglio per velocizzare i nostri siti web:

1. Ripulisci il codice

Per prima cosa devi snellire il codice, ripulirlo di tutti quei tag html inutili. Spesso comporta rifare parte del sito, ma è necessario, la “divite” influisce sulle prestazioni.

Assicurati di includere i css in file esterni, cosi che possano essere memorizzati nella cache del browser. Quindi evita di inserire stili inline.

Un altro accorgimento da fare sui css è quello di evitare spazi vuoti, se non sei a tuo agio scrivendo codice su una sola riga esistono dei programmi che lo fanno per te, tipo MinifyCss e Procssor. Infine riesamina tutte le classi e gli id, mi è capitato personalmente che in progetti abbastanza complessi alcune non erano più necessarie per via delle modifiche apportate successivamente.

2. Scegli un buon host

Controlla quali linguaggi di scripting usa l’host (php, perl, python ecc.), se vi sono installate vecchie versioni il tuo sito ne risentirà.

E’ consigliabile avere un host geograficamente vicino al pubblico del sito, per un sito che ha un target di clienti in china di certo non è consigliabile aruba. Se sei pignolo sui tempi di latenza puoi prendere in considerazione una CDN per la distribuzione di file come immagini e script.

3. Ottimizza le immagini

Vedere un sito che carica immagini in modo “scattoso” è il miglior modo per allontanare l’utente. Occupati personalmente del ritaglio e del ridimensionamento delle immagini, purtroppo la scalatura automatica lato server non tiene conto dell’ottimizzazione. Infine ottimizzale usando i metodi di compressione disponibili in rete come Smush.it.

Considera gli sprite css per loghi, icone e bottoni. In questo modo le immagini sono presenti su un unico file e vi sarà un’unica richiesta al server, invece di tante frazionate che causeranno dei piccoli ritardi.

4. Inserisci prima i css e poi i javascript

Inserisci prima i fogli di stile, che sono necessari per la visualizzazione del sito. Le librerie javascript, che spesso sono di grandi dimensioni, conviene tenerle per ultimo in modo da consentire al sito di essere rapidamente caricato.

5. Evita dove possibile le fonti esterne

Includere i box social come “ultimi tweet”, “Mi piace” di Facebook, canale youtube e pulsanti di condivisione risulta molto utile per gli utenti ma poco performanti nella comunicazione tra server e servizi. Questo richiede molto tempo e lascia in attesa i vostri utenti. Evita quelli non necessari.

6. Limita le chiamate al Database

Avere un sistema user-friendly è l’obiettivo della maggior parte dei CMS, ma effettuano un eccessico lavoro dinamico anche per cose più semplici come il caricamento di favicon ed immagini. Se conosci il percorso puoi sostituire le chiamate al database con le chiamate effettive, così da ridurne il carico.

7. Testa la velocità del sito

Per analizzare le prestazioni del tuo sito puoi ricorrere e varie soluzioni disponibili in rete:

WebPageTest: con questo strumento puoi testare la velocità delle tue pagine ed intervenrie dove necessario.

Http Archive: su httparchive.org sono disponibili le statistiche prestazionali di oltre 170.000 siti internet. È utile per farti un’idea di come gira il web.

Pagespeed: oltre al plug-in firefox per firebug, page speed è disponibile online. Mostra come migliorare le prestazioni del tuo sito in ordine di priorità.

Spero di non aver dimenticato nulla. Se hai altre soluzioni per ottimizzare un sito web e vuoi condividerle scrivi pure nei commenti o sulla nostra pagina di facebook. Alla prossima!

Sitonline

Tutto è cominciato nel febbraio del 2011 quando, trasferitomi a Milano, ho cominciato questa nuova avventura in Sitonline, azienda del gruppo Banzai, realtà industriale attiva nel mercato Internet e focalizzata sui settori eCommerce, Media, e Web Design ed è proprio nel settore eCommerce che si collora Sitonline Srl che con i suoi oltre 435.000 siti creati, si pone sul mercato come leader nella creazione e gestione di siti professionali direttamente online senza necessità di installare software aggiuntivo. La nostra mission? Rendere accessibile a chiunque avere un sito web e comunicare con esso abbattendo barriere tecnologiche, di complessità d´uso ed economiche.

Sitonline ti consente di creare, in 5 minuti, un sito web, pronto per ospitare contenuti testuali, immagini e quant’altro possa essere utile per aumentare la visibilità della tua azienda o della tua attività e in ogni momento puoi cambiare con un semplice clic il template grafico senza perdere il contenuti inseriti fino a quel momento.

l’interfaccia

Da qui si parte nella creazione di un sito web con sitonline, inserisci giusto un paio di dati e al resto pensiamo noi! Dopo una breve attesa ti trovi catapultato nel pannello di gestione del tuo sito. Ecco alcuni screenshot fatti da me che illustrato alcune funzionalità della piattaforma!

Modifica HTML, impostazioni sito mobile, scelta dei template in tempo reale e molte altre funzionalità vanno a completare il CMS Sitonline. Fino adesso vi ho semplicemente illustrato di cosa è capace (solo in parte) Sitonline, vediamo adesso invece cosa accade realmente dietro le migliaia di righe di codice che rendono concreto tutto questo.

Un team di persone vere

Questo mio articolo vuole solo esternare la mia passione che giorno dopo giorno riverso nel prodotto e in questa azienda, azienda costituita da collaboratori di altissimo livello tecnico, come il responsabile dell’area design Massimo Mastromarino, o come il responsabile area TECH Manuel Kanah fino ad arrivare all’amministratore delegato Marco Bottarelli; ma è soprattutto un’azienda formata da persone e amici, con cui ho stretto forti legami anche extra lavoro.

Sitonline crea sinergia tra coloro che vi lavorano, ma sopratutto crea quel legame unico che rende l’ambiente di lavoro, un posto ideale dove poter riversare la propria creatività, sia nel codice che nella grafica… Dietro ogni sito web creato con Sitonline, ci sono persone vere che giorno dopo giorno lavorano seriamente e professionalmente al fine di migliorare sempre piu questa già ottima piattaforma.

Considerazioni finali

Posso capire lo scetticismo di molti di voi (tecnici del settore) che forse possono non condividere in pieno tutto quanto detto fin’ora. L’artigiano del web, che costruisce siti su misura, non deve sentirsi “oscurato” dal meccanismo che sta alla base del CMS. Con sitonline, un utente con alcuna capacità tecnica, puo fare davvero molto, in maniera semplice ottendendo un risultato allo stesso tempo professionale e di alta qualità; ma anche l’utente più “sgamato” con conoscenze HTML/CSS può tranquillamente modificare completamente lo scheletro del sito, personalizzandolo nell’aspetto. Laddove però quello stesso cliente desideri ottenere un risultato altamente personalizzato, è li che entra in gioco il webdesigner o il developer o la webagency che con ago e filo cuce il sito su misura del cliente, personalizzandolo in ogni suo aspetto, sia tecnico (inteso come funzionalità) che grafico.

La butto li, hai mai pensato di realizzare un sito web per un tuo cliente, senza dover realizzare ogni volta tutto da capo ma appoggiandoti ad una piattaforma CMS? Ti verrà subito in mente wordpress o joomla… mai pensato invece di diventare rivenditore Sitonline? Spero di aver conquistato la tua curiosità! Per qualsiasi dubbio o altro, come al solito hai a disposizione la bacheca di facebook o i commenti qui di seguito. Alla prossima!!!

CODICE HTML

<div id="wrapper">
    <div class="content_1">
        <span>
            <div class="info">
                <p><strong>Work 1</strong><br />
               		progettato nel 2008<br />
                	<i>xhtml + css</i>
                </p>
            </div>
            <img src="work_1.jpg" alt="cliente 1" />
        </span>
    </div>
</div>

Il mio scopo è stato quello di ottenere un insieme di immagini affiancate, dove al passaggio del mouse compare un box colorato con delle informazioni. Il codice sopra riportato è composto da:

div wrapper - per racchiudere tutte le foto.

div content_1 – contenitore della singola foto.

span – secondo contenitore della foto, essenziale per l’animazione.

div info – contenitore delle informazioni del lavoro.

img – thumbnail del lavoro.

CODICE CSS

#wrapper{width:410px; margin:50px auto; position:relative;}
.content_1{width:200px; height:200px; float:left; position:relative; z-index:2; margin:0 10px 10px 0}
.info{width:200px; height:200px; position:absolute; top:0px; left:0px;}
img{display:block;}
.content_1 .info{background:#1897b8;}

span{
transition:all 0.4s ease-out;

-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;

position:relative;
z-index:1;
}

span:hover{
transform:translate(200px, 0px);
transition:all 0.5s ease;

-moz-transform:translate(200px, 0px); -webkit-transform:translate(200px, 0px); -o-transform:translate(200px, 0px); -ms-transform:translate(200px, 0px);

-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease;
}

La prima parte del codice css crea un gioco di sovrapposizioni tra i vari elementi html (wrapper, content_1, info ed img).

Il tag span, a rollover viene spostato (con la proprietà translate) di 200px trascinando con se il box delle info, perchè settato in posizione assoluta.

Il tempo e la modalità di movimento sono dati dalla proprietà transition, nel mio caso ho impostato 0.5 secondi per compiere l’animazione più il valore ease per un movimento “dolce”.

Spero sia stato di tuo gradimento e, lavoro permettendo, nei prossimi giorni cercherò di rendere il tutto crossbrowser.

Introduzione

Questo articolo si propone come approfondimento di una precedente guida scritta da Antonio sul possibile binomio Email e CSS. Il sito web, www.campaignmonitor.com, linkato precedente articolo, risulta essere un ottima risorsa online per mantenere aggiornate le proprie conoscenze in materia di email in html. In particolare in questa pagina vengono descritte, in inglese, le linee guida che dovrebbero essere seguite per creare newsletter compatibili con i piu importanti client e webmail esistenti tutt’oggi; mentre a questo link, un ottima tabella per controllare velocemente la compaibilità delle proprietà CSS.

Client di posta e webmail

Voglio elencarti i piu importanti divisi tra desktop, web e mobile da tenere sott’occhio quando si realizza una newsletter. Tra questi ho evidenziato in grassetto, quelli che secondo me andrebbero considerati con un occhio di riguardo , perchè più utilizzati e famosi.
Desktop: Outlook ’07 – Outlook ’03 – Windows Mail – Apple Mail – Entourage 2004 – Entourage 2008 – Notes 6 and 7- Lotus Notes 8.5 – AOL Desktop 10 – Thunderbird 2
Web: Yahoo! Mail – Yahoo! Classic – Hotmail – Gmail – MySpace – AOL Web – MobileMe
Mobile: iPhone mail – Android Email – Android Gmail – Palm Pre (WebOS) – Palm Treo (Win Mobile 6.5) – Palm Treo (Palm Garnet OS) – Blackberry

Linee guida per il design delle newsletter

Questo che segue è una traduzione in italiano dell’articolo presente su campaign monitor, con l’aggiunta di altri tip & trick suggeritimi da alcuni colleghi.

Informazioni generiche:
[A] Nell’oggetto della mail evitare parole o frasi che possano portare ad essere intercettati come SPAM. Evitare quindi parole legate lamondo delle scommesse o farmaci.
[B] Scrivere sempre il testo in formato ASCII
[C] Evitare di inserire il DOCTYPE, perchè viene inserito in automatico dalla piattaforma.
[D] Evitare l’inserimento di commenti html all’interno del codice.

1) Usare le tabelle per il layout
[A] E’ conveniente utilizzare sempre le tabelle per strutturare i layout in quanto client come gmail o outlook 2007 hanno uno scarso supporto per i float, margini e padding a differenza delle tabelle nidificate che sono ampiamente supportate. I layout inoltre non dovrebbero avere una larghezza maggiore di 600px.
[B] Quando utilizzi contemporaneamente table width, td width, td padding e css style padding, avrai notevoli differenze di visualizzazione tra i diversi client. Il modo più affidabile per impostare la larghezza della tabella è quello di impostare una width per ogni cella, non per la tabella stessa. Mai dare per scontato che se non si specifica una larghezza della cella il client di posta elettronica lo farà per te. Non lo farà! Evitare inoltre di utilizzare larghezze in percentuale. I client come Outlook 2007 non le rispettano, soprattutto per le tabelle nidificate. Se si desidera aggiungere del padding per ogni cella, utilizzare l’attributo cellpadding della tabella o CSS padding per ogni cella, ma mai combinare le due cose.
[C] Le tabelle nidificate sono di gran lunga più affidabili che impostare i margini e i padding sinistro e destro per le celle. Se riesci ad ottenere lo stesso effetto con le tabelle nidificate, questa sarà la miglior soluzione per combattere i bug dei client di posta.
[D] E’ preferibile evitare il background-color e le background-image per il body. L’alternativa è quella di inserire una tabella 100% che copra interamente la superficie del client e attribuire ad essa eventuali colori o immagini di sfondo.
[E] Evitare di inserire nel markup spazi bianchi tra le celle, alcuni client inseriscono padding addizionale, spaccando il template inspiegabilmente.

2) CSS e formattazione dei testi
Molti designer, per paura che i client non rispondano correttamente all’utilizzo delle proprietà css inerenti al testo, utilizzano ancora il tag font. Basta guardare questa tabella per sfatare ogni dubbio sull’incompatibilità della maggior parte delle proprietà css inerenti al testo.
[A] Ricordati sempre di spostare il CSS in linea! Gmail è il colpevole. La buona notizia è che questo procedimento può essere completamente automatizzato grazie ad un ottimo servizio online offerto da Premailer, che sposterà tutti i CSS in linea con il clic. Vi consiglio di lasciare questo step alla fine del tuo processo di compilazione in modo da poter lavorare con più comodità in un file css esterno oppure nel tag style nell’head.
[B] Un certo numero di client di posta rifiutano le notazioni abbreviate per la proprietà font. Conviene sempre dichiarare ogni singola proprietà (font-size; color; font-style …). L’utilizzo di @font-face è sconsigliato, i risultati non sono dei migliori, così, purtroppo, i font web-safe nelle email risultano essere ancora lo standard da preferire. Infine quando setti il colore in esadecimale non utilizzare la notazione abbreviata (#000), ma sempre quella estesa (#000000).
[C] L’approccio migliore per creare spaziature verticali per i paragrafi è quello di impostare il margine in linea con i CSS per ogni paragrafo della tua e-mail. Ti ricordo ancora una volta, che conviene inserire un unica referenza in testa al documento durante il processo di creazione della tua e-mail, quindi solo alla fine utilizzare Premailer per portarlo in linea in ogni paragrafo. Se però avete esigenze molto particolari di design e il vostro template deve essere preciso al pixel, sconsiglio di utilizzare i paragrafi e di inserire il testo direttamente nelle celle e settare la formattazione del testo direttamente inline nella cella, oppure utilizzare il tag FONT con i relativi attributi.
[D] Alcuni client di posta sovrascriveranno i colori dei link con i loro valori predefiniti. E’ possibile evitare questo comportamento seguendo questi due accorgimenti. In primo luogo, impostare un colore inline per ogni link. Quindi, aggiungere uno span ulteriore all’interno del link e risettare inline lo stesso colore. Ricordarsi inoltre di settare sempre il font-size degli stessi.
[E]Evitare di inserire nel corpo del link l’indirizzo URL, ma solo un testo rappresentativo del link stesso. Controllare inoltre che negli URL non siano presenti caratteri del tipo /index.php&lang=1, in quanto potrebbero essere tramutati in automatico dai client in

/index.php&lang=1.

3) Le immagini nelle email html
[A] La cosa più importante da ricordare a proposito delle immagini nelle e-mail è che per molti utenti, non saranno visibili a causa delle impostazioni predefinite. Ti consiglio quindi di limitare al minimo l’utilizzo delle immagini ma soprattutto di evitare che la mancanza delle stesse possa precludere porzioni importanti di testo. Quando inserite nel layout cerca sempre di fornire un link assoluto, i client non interpretano quelli relativi.
[B] Le immagini utilizzate come spacer-image non sono considerate come una tecnica affidabile. La maggior parte dei client di posta sostituiscono le immagini con un segnaposto vuoto delle stesse dimensioni. Altri “strecciano” l’immagine . La caratteristica “x” rossa al posto dell’immagine è attiva di default nella maggior parte dei client di posta elettronica. Fissa sempre le larghezze di celle sia in presenza di immagini che non, per garantire la giusta formattazione delle stesse.
[C] Se si dimentica di impostare le dimensioni per le immagini, un certo numero di client di posta settano automaticamente la dimensione delle stesse quando vengono bloccate dal programma, spaccando così il layout. Inoltre, assicurarsi che tutte le immagini siano correttamente ridimensionate prima di aggiungerle alla tua email. Alcuni client e-mail ignoreranno le dimensioni specificate nel codice e si baseranno sulle reali dimensioni dell’immagine.
[D] Lotus Notes 6 e 7 non supportano immagini in formato PNG a 8-bit o 24 bit. Utilizzare sempre il formato GIF o JPG per tutte le immagini.
[E] Outlook 2007 non ha il supporto per le immagini di sfondo per il body. Se si desidera utilizzare un’immagine di sfondo nella progettazione, fornire sempre un colore di sfondo così che il client di posta elettronica può ripiegare su di esso. Questo stratagemma risolve il problema delle immagini bloccate (quando compare la X rossa) e il problema del background per Outlook2007.
[F] Ormai tutti sono dell’opinione che i client di posta hanno distrutto la possibilità di creare una e-mail in HTML semanticamente corretta e accessibile. Il testo alternativo (alt), come risaputo, è molto importante, soprattutto per le immagini che risultano bloccate. Anche in presenza di immagini bloccate, molti client di posta visualizzano il testo alternativo fornito. Ricorda solo che alcuni client di posta come Outlook 2007, Hotmail e Apple Mail non supportano il testo alt quando le immagini sono bloccate.
[G] Per qualche inspiegabile ragione, Windows Live Hotmail aggiunge alcuni pixel di padding supplementare sotto le immagini. Una soluzione è di impostare la proprietà display in questo modo. img {display: block;} Questo rimuove il padding in Hotmail.
[H] Sia Outlook 2007 che le versioni più vecchie di Notes non offrono alcun sostegno per la proprietà float. Per compensare la mancanza del float, utilizza l’attributo align del tag img. Se noti un comportamento anomalo delle immagini in Yahoo! mail aggiungi align=”top”, spesso può risolvere tali anomalie.

4) I video nelle email
Il supporto al video è stato per lungo tempo relegato all’utilizzo delle uniche gif animate. Anche se i nuovi tag html5 hanno mostrato alcuni risultati promettenti. I video in HTML5 funzionano in molti client di posta al momento, tra cui Apple Mail, Entourage 2008, MobileMe e su iPhone. Il vero vantaggio di questo approccio è che se il video non è supportato, è possibile fornire una GIF animata o un’immagine cliccabile che collega al video nel browser.

5) Che dire lato mobile?
L’avvento del mobile ha contribuito a creare più confusione di quanta già non ce ne fosse. Seguendo alcune regole base sarai in grado di garantire un risultato decente anche per coloro che leggono la newsletter da smartphone.
[A] La larghezza standard di 600px per un layout di una newsletter non ha creato grossi problemi neanche con l’introduzione del mobile in quanto la larghezza massima disponibile oscilla dai 320 fino ai 360px. Riferendosi ad un massimo di 600 pixel di larghezza, viene garantito che il layout della newsletter e quindi i suoi contenuti siano tranquillamente leggibili nel momento in cui viene effettuato il ridimensionamento da parte dello smartphone.
[B] I client di posta elettronica che utilizzano WebKit (come iPhone, Pre e Android) sono in grado di regolare automaticamente la dimensione dei caratteri per migliorare la leggibilità. Tutto questo fa più male che bene al tuo layout. Si può sempre disattivare questa caratteristica con la seguente regola CSS: -webkit-text-size-adjust: none;

Piccolo consiglio

Come i browser anche le webmail hanno le loro incoerenze CSS iniziali. Dato che non è possibile inserire un reset a monte, un buon metodo per uniformare il più possibile il layout ed eliminare le incoerenze è quello di entrare nelle webmail più importanti e analizzare con firebug in fase di testing la nostra mail. Eventuali margini colori o padding in più che tendono a rompere il nostro layout potranno essere facilmente (nel più delle volte) sovrascritti dal nostro CSS inline.

Alcuni link utili

Per concludere eccovi alcuni link utili da consultare inerenti all’argomento per prendere ispirazioni per le tue newsletter.

1. Esempi di Newlsetter Grafiche
2. Template grafici da scaricare già pronti con psd e html
3. HTML di partenza per disegnare una email :: Segnalato da Stefano Bagnara

Conclusioni

Tanti problemi, codice sporco e ridondante, tabelle a GO-GO, utilizzo di immagini per il layout, tecniche anni ’90 che tornano alla ribalta… ma vuoi mettere la soddisfazione di riuscire ad inviare una mail accattivante e di impatto a tutti i tuoi clienti? … ma In questo caos diffuso, c’è un gruppo di persone che dicono NO! Loro sono quelli che portano avanti gli standard, anche nelle email. Su questo sito puoi restare aggiornato sui continui sviluppi dei client e delle webmail. Un saluto e al prossimo articolo!

Scarichiamo 320&up

La prima cosa da fare è scaricare il framework a questo indirizzo: http://www.stuffandnonsense.co.uk/projects/320andup. Lo zip contiene due versioni del framework: con un unico foglio di stile e con più css (per le varie risoluzioni). Noi useremo la versione con un unico css, che puoi scaricare direttamente da qui.

Il pacchetto contiene diversi file, i fogli di stile si trovano nella cartella css, le immagini nella cartella img e i file javascript in quella js. Quello che ci occorre è lo style.css ed index.html

index.html

Il file è popolato da diverse inclusioni di script, ma noi ci soffermiamo sulla parte centrale, ovvero quella composta dalla struttura dove poi andranno situati i contenuti del documento html:

<header role="banner"></header>

<div class="content clearfix">
    <div role="main" class="content-main"></div>
    <div role="complementary" class="content-complementary"></div>
</div>

<footer role="contentinfo" class="clearfix"></footer>

Come puoi notare non c’è nulla di complicato, abbiamo la classica struttura di una pagina a due colonne: Testata + Contenitore Generale (che racchiude le due colonne) + Footer

style.css

Nel foglio di stile sono elencati tutti i selettori con le rispettive proprietà, che servono ad impostare il documento in uno stato di default, che ovviamente andremo a modificare dove necessario. La parte importante è situata in basso al documento, dove iniziano i media query, qui andremo ad aggiungere gli stili per le diverse risoluzioni:

@media only screen and (min-width: 480px){}
@media only screen and (min-width: 600px){}
@media only screen and (min-width: 768px){}
@media only screen and (min-width: 992px){}
@media only screen and (min-width: 1382px){}

esempio

Inseriamo dei contenuti alla pagina html, bastano dei semplici paragrafi e qualche immagine.
Successivamente interveniamo sul css per fare in modo che raggiunta una particolare risoluzione, nel nostro caso la 768px, la colonna .content-complementary risulti visibile (a basse risoluzioni è settata a display:none) e flottante sulla destra:

ecco il codice css associato:

@media only screen and (min-width: 768px){
    .content-main{width:60%;float:left;}
    .content-complementary{width:35%; float:right; margin-left:5%; display:block;}
}

Nella demo in basso potrai sicuramente godere a pieno l’esempio, basta ridimensionare la finestra del browser e vedrai l’effetto dei media query. Per concludere posso sicuramente dirti che il framework è ben organizzato, puoi gestire diverse risoluzioni come la 480, 600, 768, 992 e 1382px; poi soprattutto hai una struttura html e css già preimpostata, insomma può essere di grande aiuto per chi deve sviluppare siti in poco tempo per diversi dispositivi. Prendi un pò di confidenza con il framework e fammi sapere che ne pensi