In formato webfont e .svg così potete, volendo, modificarle e condividerle (è un progetto su Github). Non sono tutte bellissime, ma tra 268 glifi qualcuno utile e carino c’è sempre e fa comodo.
Qualcuno, involontariamente, dice la verità su Bootstrap ;)
New CSS Support in Photoshop CS6 Creative Cloud Update (by Photoshop) – Disponibile solo per chi ha sottoscritto Creative Cloud. Io credo ancora che se usi Photoshop per fare webdesign, you’re doing it wrong. Ma soprattutto, nel video: perchè per una demo di una cosa così cutting edge il tizio usa una versione di Firefox per Mac vecchia di anni?!
Giravo tra siti di fornitori di webfonts, che si presentano tutti come avvocati del buon design (altrimenti non avresti interesse per i loro servizi) e notavo una cosa…
Chi parla di tipografia sul web è unicamente interessato a vendere i propri servizi o quelli di chi finanzia il sito, ignora tutto il resto. Non mi sconvolge la prima cosa, quanto la seconda :) Facile avere una tipografia curata se non ti scomodi a fare un layout responsive, o almeno adaptive.
Così Typekit (Adobe!), così Fontdeck (che resta il mio preferito, per altro è su Tumblr), così Webtype…
È la prima volta che porto a termine un tema per Tumblr. Ogni volta che ci ho provato, la voglia m’è passata per frustrazione. Output sporco dei post, limiti di controllo sul markup a causa del template engine poco fluido, lunghezza generale dell’opera…
Ci ho messo quasi un mese, partendo da zero. Per me è stato un modo di vedere fino in fondo cosa si può e cosa non si può fare con Tumblr.
Con Tumblr puoi fare tutto, velocemente e male. Ha una struttura esilissima ma compatta che ti consente di costruire un template senza frammentarlo in una miriade di file .php per ogni banalissima funzione. Wordpress ha bisogno di un file a se stante anche per generare un footer, per dire. Tumblr no, è un solo file .html, e questo rende il lavoro meravigliosamente agevole. È l’unico motivo per cui ancora ci perdo tempo, perchè infondo gestire Tumblr è divertente.
Il prezzo di questa facilità è la mancanza di un controllo granulare su tanti aspetti del tema. Ad esempio, Tumblr ha una sua specie di pagina d’errore 404 che è generata sullo schema della pagina indice e non ha una sintassi a se stante. Questo significa che ogni elemento che è previsto come parte della pagina indice, compare ob torto collo anche nella pagina d’errore. Se fate una ricerca (Tumblr supporta solo quella per tag) e non ci sono risultati, viene fuori una pagina come questa in cui restano visibili degli elementi (la navigazione) che in questo tema erano previsti come parte solo della pagina index, dove hanno senso (sui singoli post non compaiono).
E veniamo al vero punto debole di Tumblr: la mancanza di un motore di ricerca interno. Praticamente inutile la ricerca per tag, una foglia di fico. Forse Tumblr non nasce come blog engine tuttodunpezzo e quindi la funzione non era così cardinale, ma non averla lo rende il Fred Flintstone della situazione, in un mondo di Jetsons. Ho ovviato inserendo il custom search engine di Google. Soluzione funzionalmente eccellente, ma con pochissimi margini di controllo sulla grafica. Un corpo alieno.
Altra mancanza, forse meno grave, è l’assenza delle categorie. Non puoi fissare a priori un set di categorie in cui far rientrare i post, puoi solo taggarli e non è la stessa cosa. Devi ricordarti ogni volta di appiccicare un tag, e che tag, e scriverlo a mano. Io ad esempio ho messo “typo” come tag per i post ad argomento tipografico. E ogni volta non mi ricordo se era “type” che avevo messo, o “typo”, o “tipografia”. Impossibile anche fare batch editing. Insomma, una noia.
Per quanto ti sbatti e cerchi di tenerlo in ordine, un blog su Tumblr non sarà mai ben strutturato e ordinato come su Wordpress.
Per il resto… rose e fiori (non freschissimi), ma le spine rovinano overall tutta l’esperienza d’uso. Tumblr, oggi, non lo consiglierei a nessuno tranne che un 17enne hipster che vuole postare gif animate.
Ciò detto, sono abbastanza contenta del risultato. Ho detto che è completo ma è un concetto relativo :)) Per averlo del tutto responsive occorre ulteriore lavoro con media queries per riposizionare l’aside (la parte a destra) e il wrapper (il corpo centrale) sugli schermi piccoli in portrait.
Ho usato css non particolarmente spericolato e jQuery per varie cosine: Prettify, sempre made in Google, per colorare la sintassi nei blocchi di codice, uno scriptino custom per navigare da tastiera, uno per lo scrolling a top di pagina, uno per il fade in sul loading delle pagine. Per i fogli di stile, questa volta ho spezzettato il tutto in tre file separati: webfont, blocchi di codice e css generale. Avrei avuto altrimenti un file di migliaia di righe. Sicuramente potevo scremare qua e là, ma restava un mostro, soprattutto per l’encoding in base 64 del font slab che viene fuori kilometrico (e pesante). L’html è semantico dove doveva esserlo (l’elenco dei tag ad esempio è una lista) e usa i tag strutturali di HTML 5 (section, aside, article, footer, ma qualche div c’è scappato, non è vietato).
Per la tipografia mi sono regolata secondo i principi soliti della leggibilità, ma i dettami della più pura ortodossia in materia non li ho voluti rispettare, per il web a mio avviso sono troppo stretti. I blocchi di testo a grandezza massima non superano mai gli 80 caratteri (uno più, uno meno) per riga. Bringhurst dice che fino a 90 va bene, ma sul web c’è chi sostiene che dovrebbero andare da 45 a 75 con 65-66 come misura aurea. Mah, troppo stretti per me. Chi parla di queste misure non ha chiaro che il web è diverso dalla stampa e che le griglie fisse non esistono (più). Quindi, a mio avviso, occorre regolarsi su una via di mezzo ragionevole, e questo ho provato a fare.
The CSS Ratiocinator automatically refactors your CSS and generates a new stylesheet for your site. It works by examining your site’s live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the pixel.
(Fonte: onethingwell)
Full.
Tumblr, più che scriverci ci faccio inconcludente manutenzione.
Zelle: le freccette (sbadataggine) e la box con gli avatar (<ul> e <li>) che mantiene i margini corretti solo a culo, visto che lo spazio viene ricalcolato tra viewport variabile e grandezza delle immagini fissa, e non sempre restano in proporzione. Non c’è soluzione, credo. The truth is that fluid grids are broken.
PS: dopo aver visto la preview di questo post m’è passata la voglia di pubblicarlo (le box delle foto, così incomplete, quel pugno in occhio delle stringhe di codice su sfondo nero), ma lo pubblico lo stesso :))
L’ortodossia tipografica vuole che un blocco di testo, per risultare agevole da leggere, sia di una larghezza compresa tra 45 e 75 caratteri spazi inclusi (un autorevole riferimento qui). In un layout fluido, con un container che fluttua a seconda del viewport (la larghezza della finestra di un browser, o la larghezza del display tout court in un tablet o un telefono), è difficile che un blocco di testo non sfori il limite 45-75. Allargate a dismisura la finestra mentre state leggendo questo and enjoy :(
Si può usare max-width:1140px nel container (1140 è la misura più duttile e la più utilizzata nei sistemi a griglia, vedasi Cssgrid.net), ma ancora è difficile che si abbia un blocco di testo di 45-75, tranne nel caso in cui sia confinato in un div o una section all’interno del container. Ma viene fuori un mark-up ingarbugliato e brutto.
L’unica per restare nel limite di quella larghezza è adattare la grandezza del font fino a che non si raggiunga 45 di minimo o 75 di massima (l’ideale è 66, ad essere pignoli). Viene fuori del testo a prova di nonno. Può non piacere. Trent Walton è un sostenitore del testo a prova di grandi miopi. Tutto il suo blog è così. E sì, si legge una bellezza. Ma è anche molto osseo come design, 99% testuale. Inoltre non tutti i font si comportano bene a tutte le grandezze. Alcuni risultano favolosi, ma i più temo tremendi.
Ho provato a farlo io. Il font slab è un horse power ciuccio e rende benissimo, più è grande più è bello. Il sans serif, mmmh. Così così. Qui in full size (che è quello che interessa). Non so se terrei queste dimensioni…
Scrivetevelo proprio: graded fonts. È la nuova ossessione pronta ad esplodere, ora che ne ha parlato (twittato etc.) Oliver Reichestein alias iA.
La lista più completa al momento in circolazione.
By Jeffrey Zeldman.
post precedenti
pagina 1 di 2, puoi navigare da tastiera con ← e →
