320, 768 e 1024. Questi numeri significano qualcosa per te?
No, non è il codice Da Vinci, sono le larghezze in pixel che molti designer associano alle larghezze dello schermo del cellulare, del tablet e del desktop.
Il problema che ho con questo è che il mio cellulare non ha una larghezza di 320 pixel, il mio tablet non ha una larghezza di 768 pixel e lo schermo del mio desktop non è certamente largo 1024 pixel. Ci sono centinaia di dimensioni dello schermo diverse là fuori su una varietà di dispositivi diversi e tuttavia pensiamo ancora al responsive web design come 320, 768 e 1024.
Ho visto molti siti che utilizzano questi tre punti di interruzione per i loro progetti e semplicemente creano 3 layout statici centrati nella larghezza più vicina.
Questo è meglio che avere un vecchio sito statico, solo desktop, dato che servono almeno una colonna, versione semplificata per dispositivi mobili e una versione touch-friendly per tablet, ma perché dovresti alienare tutte le altre dimensioni dello schermo non accettandole considerazione?
Certo, il design funzionerà ancora sulle altre dimensioni, ma cosa succede se hai un tablet più piccolo di 768? Otterranno l'esperienza mobile su un tablet! E quando lo si visualizza su uno schermo di un laptop più piccolo di 1024? Manderemo loro il layout del tablet e ridiamo di loro per non avere una delle 3 dimensioni dello schermo che abbiamo ritenuto degne.
Quando crei i tuoi layout reattivi, dovresti sempre mirare a impostare il maggior numero possibile di dimensioni in percentuali. Questo aiuta a garantire che i tuoi contenuti crescano e si riducano in modo uniforme attraverso le diverse dimensioni dello schermo e lo faranno in proporzione al dispositivo su cui sono visualizzati. Questo approccio assicurerà inoltre che il tuo contenuto riempia sempre il 90% (o tanto quanto tu determini) dello schermo invece del 50% dello schermo in quanto il contenuto è centrato su una dimensione dello schermo che è di alcuni pixel più piccola della successiva punto di rottura disponibile.
Quando si scelgono i punti di interruzione, è necessario prendere le decisioni in base a dove si interrompe il contenuto e non alle larghezze dello schermo del dispositivo. Invece di creare un design e quindi modificarlo per adattarlo comodamente allo schermo dell'iPad, dovresti scoprire a quale larghezza il tuo contenuto inizia a presentare difficoltà.
Tendo ad iniziare con un design ampio 1400 e lentamente rallenta il browser fino a quando un pezzo di contenuto interrompe il layout o si avvicina a farlo. Questo allora determina il mio prossimo punto di interruzione. Non importa se è a 1200, 800 o 673, se il contenuto funziona ancora allora perché cambiare il layout?
Scoprirai che ti ritroverai con strani breakpoint come 477 o 982 e potresti avere 2, 6 o 10 diversi punti di interruzione. Il punto è che il contenuto deciderà piuttosto che le dimensioni dello schermo che si desidera visualizzare.
Con la gamma di dispositivi e dimensioni dello schermo diversi che vengono rilasciati ogni mese, è impossibile determinare una serie di punti di interruzione definiti per i nostri progetti reattivi. La verità è che mentre utilizziamo una variabile come la larghezza dello schermo per determinare i nostri layout reattivi, faremo fatica a fornire un layout perfetto per ogni dimensione diversa, ma seguendo alcuni suggerimenti sopra, possiamo almeno garantire che il contenuto è sempre visualizzato nel miglior modo possibile.
Quali punti di interruzione usi di solito? Evitate completamente i breakpoint? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine a pieno carico via Shutterstock.