Come si decidono del dimensioni di una pagina web?

Al di là dei gusti personali, del trend di mercato per quel che riguarda i CMS (Content Management System) più conosciuti come WordPress o Joomla tanto per citarne due, la cosa più giusta da fare probabilmente è quella di mettere da parte quelli che riteniamo (onestamente) poter essere nostri competitor, fare un'analisi quanto più accurata della loro presenza digital, capire il tipo di traffico che possono ricevere e quindi tentare di usare magari i loro siti web come se fossimo utenti interessati, capendo quello che non funziona e quello che invece è ben fatto, in modo da diventare prima noi stessi consapevoli di ciò che arriva agli occhi di chi fa "il nostro lavoro".


Certo non è detto che i tentativi possano "workare" e non è detto che i nostri (presunti) competitor siano aggiornati dal punto di vista digitale e che le loro immagini online siano perfette o performanti, ma di sicuro nella lista che facciamo, "quello preparato" probabilmente lo troviamo e se dobbiamo partire da zero con un nuovo sito web o stiamo pensanso di rifare il nostro, due spunti in più non possono che aiutare.

PERCHÉ FARE CERTE ANALISI ►

Fatta l'analisi, ragioniamo sul layout

Probabilmente, anche allargando lo spettro delle nostre ricerche ci siamo resi conto che c'è stata una forte tendenza a sistemare layout web su modelli full-screen e con un tutto il contenuto (sia grafico che testuale) disposto in modo da voler riempire davvero ogni spazio possibile, dando una sensazione di opulenza al progetto anche se magari poi all'interno di carne al fuoco ce n'è poca. Molto di questo dipende da una forte scalata della tecnologia di largo consumo, che ha visto in brevi periodi l'ascesa di risoluzioni video esagerate, dispositivi mobile di ogni prezzo e qualità o anche monitor per desktop/laptop dalle prestazioni favolose, specie per andare dietro al settore gaming ed e-sports che sembra non conoscere confini.

Questo allargamento delle possibilità d'offerta, ha preso alla sprovvista sia i CMS più comuni che si sono in ogni caso adeguati velocemente nel proporre temi precotti sulle nuove linee di mercato, sia gli sviluppatori e i web designer meno avveduti (sono molti) che nel giro di poco hanno dovuto adeguarsi e adeguare anche i lavori pregressi per essere meglio fruiti con i nuovi dispositivi.

Boxed o Widescreen? | Alessandro Pacilli, Web Designer Roma

Meglio boxed o widescreen?

  • Un layout boxed fornisce uno spazio più ridotto per la sistemazione dei contenuti ma non è sempre un male poiché se sappiamo che non saranno troppo sviluppati lo spazio da gestire sarà minore.
  • Un layout boxed può avere di base un'impronta più "giornalistica" o da news blog e può offrire all'occorrenza spazi pubblicitari nelle sezioni del body al di fuori della gabbia relativa ai contenuti.
  • Un layout boxed non è fluido, ma deve sempre essere predisposto per essere responsive e doversi adattare alle risoluzioni inferiori a quella con cui è progettato.
  • Un layout widescreen è fantastico per grandi contenuti visivi (e non solo), offrendo un quantitativo di spazio maggiore al precedente ed anche una sensazione di maggiore "grandezza" del brand che rappresenta.
  • Un layout widescreen accoglie in modo migliore eventuali sidebar, footer widget e anche slider nelle pagine, potendoli gestire senza presentare il contenuto in maniera troppo costretta.
  • Un Layout widescreen è fluido e deve adattarsi prima a tutte le risoluzioni desktop inferiori a quelle per cui è nativo, dopo di cui deve sempre essere responsive per avere migliore leggibilità dai device mobili.
DIMENSIONI DELLA PAGINA PER IL LAYOUT ►

Pagine grandi è sinonimo di problemi grandi?

No, non sempre almeno. Basta prendere alcune precauzioni. Una pagina con un layout grande (quindi probabilmente widescreen) può presentare problemi di esposizione dei contenuti a risoluzioni maggiori di quelle che usa la media nazionale, quindi ad esempio su monitor che solitamente vengono usati su sistemi desktop/laptop Apple da chi si occupa principalmente di design e off-line, sui monitor di chi gioca online con un equipaggiamento all'avanguardia della tecnica e via dicendo. Il fatto però che possa essere un particolare (e stretto) tipo di pubblico, quindi che può non rispecchiare la maggioranza degli utenti papapibili, non vuol dire che si possa ignorare la cosa e non si debba correre ai ripari, specialmente perché con l'avanzare della tecnologia, determinate feature saranno presto disponibili per tutti, probabilmente anche con abbattimento dei costi in virtù di miglioramenti ulteriori. Il tutto in una spirale che prima o poi, per più volte, coinvolgerà tutti gli addetti del settore.

Come le sistemiamo le dimensioni delle pagine per queste risoluzioni? Possiamo ad esempio, se non abbiamo a disposizione un video con risoluzione adatta per capire in prima persona cosa accade, rifarci all'inspector del browser che usiamo. Tasto destro nella pagina o su un elemeno, e relativamente al browser cerchiamo ispeziona, analizza elemento o simili. Nelle modalità di "visualizzazione flessibile" o della "toggle device toolbar" (attivabili ricercando l'iconcina di un monitor responsive nel pannello che abbiamo davanti), ci sarà la possibilità di visualizzare quella pagina per le risoluzioni mobile più in uso ed anche per quelle flessibili o responsive, potendo scegliere anche una risoluzione a mano. In questo modo, seppure con una certa approssimazione dovuta allo user-agent con cui guardiamo il tutto ed anche alla nostra scheda video, potremo almeno avere idea di cosa accade al nostro progetto.

CHIACCHIERIAMO? ►

Lavorare adeguatamente sulle dimensioni di una pagina web

Uno dei modi principali è saper lavorare su quelli che si chiamano breakpoint, ossia i punti di rottura dove il nostro progetto va spostato, adattato e rimodellato in base alla risoluzione del dispositivo che lo visualizza. Principalmente però, diciamo che lavorare di base su un layout fluido, senza misure statiche (pixel) ma magari relative (rem) o percentuali è una buona partenza.


A tutti piacciono le cose super-precise, i filini perfettamente allineati, i font sempre messi come diciamo noi e via dicendo, ma dobbiamo anche dire che lavorare strettamente al pixel, specie se abbiamo la possibilità di iniziare un progetto da zero, può essere più faticoso e snervante. Non mi piace in certi casi il concetto di giusto o sbagliato perché spesso di compromessi con il lavoro di web designer bisogna affrontarne tanti, e questo è proprio uno di quei momenti in cui poter riflettere un attimino.

Pixel SI o Pixel NO? la risposta pessima è ahimè, NI. Dipende infatti, dipende da tante cose. Dipende ad esempio dal fatto che mettiamo mano su un progetto precotto e magari tutto sviluppato in pixel oppure no. Dipende da come si presta il layout se non è il nostro anche se magari è fatto tutto con le misure relative. Dipende dagli interventi che ci vengono chiesti ed anche dal budget che si ha a disposizione per sviluppare tutto. Inutile stare qui a fare i paladini della giustizia se poi alla fine bisogna accettare dei compromessi, no? In linea di massima comunque, lavorare da subito su layout fluidi, in percentuale e con misure relative per la tipografia ad esempio, aiuta e non di poco. Il solo fatto di poter avere a disposizione del testo che si adatta in modo proporzionale al suo contenitore e che segue bene in linea gerarchica le indicazioni direttamente dall'elemento padre è comodo, rapido, veloce e ci permette di non impazzire magari per ricalcolare tutto nei vari breakpoint con le media query, per sistemare cose realizzate con misure in pixel.

Molte pagine però sono fatte tutte con un layout in pixel

Si, certo. A quel punto, la cosa più facile che possiamo fare se è un progetto complesso o se è già fin troppo avanti nello sviluppo, è impazzire con le media query e calcolare al meglio che possiamo tutte le grandezze degli elementi che non ci vanno bene o che "responsivano" in modo sbagliato, cercando di selezionare degli intervalli di misure in cui poter agire il più possibile per ogni oggetto che ne ha bisogno.

Non trovo che sia pessimo, trovo solo che sia complesso e richieda un quantitativo di pazienza immorale per venire a capo di layout elaborati, ma che sia fattibile e presupponga una visione a lungo termine del progetto, poiché al variare delle risoluzioni medie usate nei vari dispositivi, ragionando in pixel e senza provare a sistemare fin da subito le cose anticipando un po' i tempi, non è facile.

Dimensioni di una pagina web: Le misure esatte?

Possiamo dire che probabilmente, ad oggi la grande maggioranza dei layout, ha dei breakpoint per un aspetto boxed intorno ai 900 pixel, nello specifico per molti siamo a 959. Per quel che riguarda invece il widescreen le criticità arrivano nei pressi dei 1200, ed i breakpoint gestiti li abbiamo attorno ai 1199. Senza stare troppo tergiversare però, possiamo dire che per tutti i dispositivi mobili di largo consumo, se parliamo di schermi grandi (PAD - senza stare a pensare alla marca) nei modelli più basci hanno le risoluzioni dei vecchi monitor di una decina di anni fa o più, quindi 1024x768, mentre per quelli di fascia alta andiamo a 1366x1024.

Questo vuol dire che, a meno di ragionare su laptop molto molto indietro di tecnolgia, con risoluzioni a 1280 pixel o meno, attualmente, la maggior parte delle visualizzazioni desktop iniziano a 1400 pixel o più, mentre prima stiamo avendo a che fare quasi sicuramente con dispositivi mobili. La risoluzione massima più utilizzata è senza dubbio al momento quella di 1920x1080 pixel, mentre al di sopra, arrivano solo particolari configurazioni come quelle Apple, per gaming o per chi voglia davvero investire del denaro sonante. Al di sopra dei 1920 quindi, possiamo parlare di media query per gestire chi rischia di vedere tutto "troppo piccolo" o anche un po' disassato rispetto alla grandissima maggioranza degli utenti. Anche in questo caso però, pur lavorando con layout fluidi e misure in percentuale, bisognerebbe adeguare e non poco le dimensioni delle pagine web.

 

Puoi insegnarmi a sistemare le dimensioni di una pagina web?

Si, certo. Per tutoring, corsi o altro che possa servire ho un costo orario fisso indipendentemente dalla materia di studio, quindi dopo una prima consulenza preparerò un piano di avanzamento con una stima delle ore complessive delle docenze e saprai fin dal principio dove andremo a parare, perché alla fine, la parte del conquibus ha il suo peso e non possiamo evitare di parlarne.

 

Costo orario

DOCENZE
Progetto personale tailor made

90
per ora

Lezioni teoriche alternate a ore di pura pratica su un progetto reale, con ovviamente dispense, appunti vari, suggerimenti e disponibilità a chiarimenti via mail ogni volta che ce n'è bisogno.

Richiedimi un contatto

Mi basta avere qualche dato per capire cosa ti interessa fare insieme a me. Mandami la richiesta e ti ri-contatto io nel giro di un paio d'ore, oppure scrivimi direttamente su alessandro@skylark.team.

  • Progettazione da zero per un lavoro cucito appositamente su di te e la tua attività.
  • Restyling per rinverdire il sito web e affinare ulteriormente il messaggio verso il tuo target di clientela.
  • Creazione E-Commerce per un progetto pienamente gestibile e che produca del reddito in modo costante e calibrato.
  • Progetto SEO-Oriented per farti trovare più facilmente dai potenziali clienti interessati alla nicchia di mercato più interessante per te.
  • Realizzazione contenuti per scoprire e coinvolgere nicchie di mercato a cui magari non avevi ancora teso la mano.
Accetto il trattamento sui Cookie e le condizioni della Privacy Policy

Alcuni progetti realizzati

Qualche video esplicativo riguardante dei progetti realizzati. Parliamo di piccoli teaser che mostrano la navigazione su mobile di 4 trai progetti su misura che ho personalmente creato. Sotto ad ognuno, il link per aprire il sito in tutta la sua interezza.