{"id":5607,"date":"2009-03-19T09:20:51","date_gmt":"2009-03-19T07:20:51","guid":{"rendered":"https:\/\/www.dreamsworld.it\/emanuele\/?p=5607"},"modified":"2009-04-14T00:26:18","modified_gmt":"2009-04-13T22:26:18","slug":"costruire-un-tema-scelta-delle-dimensioni","status":"publish","type":"post","link":"https:\/\/www.dreamsworld.it\/emanuele\/2009-03-19\/costruire-un-tema-scelta-delle-dimensioni\/","title":{"rendered":"Costruire un tema: scelta delle dimensioni."},"content":{"rendered":"

Il secondo problema da affrontare durante la costruzione di un blog (o di un sito web in generale<\/em>) \u00e8 la fruibilit\u00e0 dei contenuti<\/strong>. Tale concetto viene definito dalla legge 04\/2004 (Legge Stanca<\/em>) come “caratteristica dei servizi di rispondere a criteri di facilit\u00e0 e semplicit\u00e0 d\u2019uso, di efficienza, di rispondenza alle esigenze dell\u2019utente<\/strong>, di gradevolezza<\/strong> e di soddisfazione nell\u2019uso del prodotto”<\/em>.<\/p>\n

Vengono introdotti dei termini chiari<\/strong> e insindacabili: rispondenza alle esigenze e gradevolezza.<\/p>\n

Il discorso si traduce, tra le tante cose, nell’ottimizzazione<\/strong> delle pagine per far fronte alle possibilit\u00e0 d’accesso<\/em> dell’utente.<\/p>\n

Uno degli aspetti fondamentali era dunque l’individuazione<\/strong> degli strumenti utilizzati per accedere al mio blog. Cellulari? Palmari? NetBook? NoteBook? Display wide-screen? L’esperienza di una visita \u00e8 decisamente correlata alla dimensione della pagina<\/strong>.<\/p>\n

Fortunatamente i browser mobile<\/em> di ultima generazione tendono a renderizzare divinamente (qui lo dico e qui lo nego) pagine grandi e interfacce come quella dell’iPhone<\/em> permettono una navigazione pi\u00f9 agevole. Questo per\u00f2 \u00e8 vero finch\u00e9 si rimane in ambito mobile<\/em>.<\/p>\n

I browser dei moderni portatili, sempre pi\u00f9 piccoli e con risoluzioni infime<\/strong> (ma su monitor da 7 pollici non si possono fare miracoli<\/em>) non godono della stessa usabilit\u00e0<\/em> dei cugini mobile<\/em>, cos\u00ec la scelta della risoluzione torna ad avere una certa importanza.<\/p>\n

Fortunatamente non andavo alla cieca<\/strong>. Non dovevo realizzare un sito da zero, senza conoscere il target d’utenza e i relativi usi e costumi.<\/p>\n

Google Analytics<\/a> (o qualsiasi altro strumento di monitoraggio degno del nome<\/em>) permette di conoscere la risoluzione del browser<\/strong> dei visitatori. Confrontando il risultato medio storico<\/em> (dal 2007 ad oggi) con quello dell’ultimo periodo (gli ultimi 3 mesi), ho notato una costante diminuzione<\/strong> degli accessi attraverso monitor con risoluzioni pari ad 800×600 (tipica dei vecchi monitor CRT da 15 pollici). Ad oggi, tale risoluzione rappresenta appena il 4,03% degli accessi totali. La risoluzione pi\u00f9 diffusa \u00e8 quella 1024×768<\/strong> (tipica dei monitor CRT da 17 pollici o degli LCD da 15 pollici) che viene utilizzata dal 39% dei visitatori. La restante porzione viene suddivisa da monitor a risoluzione maggiore.<\/p>\n

Era dunque chiaro verso quale risoluzione dovessi concentrarmi. Scorrere orizzontalmente una pagina \u00e8 qualcosa che trovo disgustoso<\/strong>.<\/p>\n

Il vecchio tema (e\u00a0 i due precenti template<\/a>) avevano una larghezza ottimizzata per risoluzioni 800×600. Personalmente non sopportavo pi\u00f9 quella larghezza<\/em>. La sentivo stretta<\/strong>.<\/p>\n

Vedevo i miei post come in una camicia che fa resistenza quando viene indossata.<\/em><\/p><\/blockquote>\n

Nulla \u00e8 ancora perso per\u00f2. Non \u00e8 detto che per ottimizzare una pagina ad una certa risoluzione vada necessariamente trascurata quella inferiore o viceversa. Esiste la possibilit\u00e0 di costruire layout fluidi in contrapposizione a quelli fissi<\/strong>.<\/p>\n

La costruzione di un layout fluido prevede la possibilit\u00e0 di allargare o restringere le aree di testo in maniera proporzionale alle dimensioni dello schermo. Pi\u00f9 tecnicamente, la differenza si ottiene utilizzando dimensioni in percentuale<\/strong> invece di fissare il numero dei pixel.<\/p>\n

div.fisso {\r\n   height;200px;\r\n   width:50px;\r\n}\r\n\r\ndiv.fluido {\r\n   height:40%;\r\n   width:20%;\r\n}<\/pre>\n
Le due classi fisso<\/em> e fluido<\/em> se associate ad un div produrranno un risultato completamente diverso. Il primo avr\u00e0 un’area pari a 10.000 pixel, il secondo dipender\u00e0 (a sommi capi<\/em>) dalla risoluzione del monitor (ripeto, a sommi capi, perch\u00e9 ci sono anche altri aspetti da considerare, primo tra tutti l’adesione o meno di un browser a certe indicazioni).<\/p>\n
Un altro metodo \u00e8 quello di sfruttare l’unit\u00e0 di misura em<\/em><\/strong> la cui base corrisponde all’altezza media di un dato carattere. Ma qui entrano in gioco i vincoli di parentela tra le varie dichiarazioni di un foglio di stile e cos\u00ec via.<\/p>\n
Un terzo metodo, infine, \u00e8 quello di creare dei fogli di stile ad hoc<\/strong> per risoluzioni\/browser particolari. Questa soluzione, che pu\u00f2 far storcere il naso ai puristi, consiste nello sfruttare delle funzioni (lato server o lato client) che individuano la risoluzione<\/strong> e indicano al browser quale foglio di stile utilizzare durante il rendering<\/em> della pagina.<\/p>\n
Insomma, tutto questo per dirvi che le dimensioni contano<\/strong> e non va progettato un sito web solamente in base alla risoluzione del proprio monitor (che magari \u00e8 bello grande e ci da l’impressione di avere metri quadri<\/em> di pagina da sfruttare…).<\/p>\n
Ad esempio, a volerla dir tutta, la dimensione del box che scorre sotto l’immagine del blog mi sembra un tantino eccessiva. \ud83d\ude42<\/p>\n
Continuiamo luned\u00ec prossimo…<\/p>\n
Emanuele<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Il secondo problema da affrontare durante la costruzione di un blog (o di un sito web in generale) \u00e8 la fruibilit\u00e0 dei contenuti. Tale concetto viene definito dalla legge 04\/2004 (Legge Stanca) come “caratteristica dei servizi di rispondere a criteri … Leggi ancora →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[4],"tags":[524,302,542,84,545,551,546,549,527,552,547,550,529,357,548,493],"class_list":["post-5607","post","type-post","status-publish","format-standard","hentry","category-internet","tag-accessibilita","tag-blog","tag-blog-design","tag-browser","tag-contenuti","tag-crt","tag-google-analytics","tag-larghezza","tag-layout","tag-lcd","tag-monitoraggio","tag-risoluzione","tag-siti-web","tag-statistiche","tag-utenti","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/5607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/comments?post=5607"}],"version-history":[{"count":0,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/5607\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/media?parent=5607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/categories?post=5607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/tags?post=5607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}