Realizzare un sito Web a larghezza fissa Mobile Friendly

Ultimo aggiornamento il 22 maggio 2020

Costruire Mobile Friendly. C'è stato un tempo in cui la mia più grande preoccupazione come grafico e sviluppatore web era fare la mia funzione CSS in Internet Explorer. Non solo IE è ancora una seccatura, ora dobbiamo preoccuparci di numerose dimensioni dello schermo e sistemi operativi.

Ci sarà un momento in cui il cellulare supererà la navigazione desktop. Poiché i dispositivi mobili sono diventati così importanti nella nostra vita quotidiana, ci sono momenti in cui noi web designer abbiamo bisogno di risultati immediati. Se sei uno di quei designer o programmatori che semplicemente non ha il tempo di convertire un sito Web statico in un tema WordPress, uno che sia ottimizzato per i dispositivi mobili, c'è speranza per te amico mio. Quando si tratta di visualizzare tutti i tuoi contenuti su dispositivi mobili, puoi farlo con una piccola ottimizzazione CSS e HTML.

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

A livello globale, i dispositivi mobili rappresentano più della metà dei minuti trascorsi online, secondo comScore

I siti Web ottimizzati per dispositivi mobili o reattivi hanno la possibilità di configurare automaticamente la larghezza del tuo sito Web, per adattarsi al dispositivo dell'utente. Le barre di scorrimento orizzontali sono un must nel design reattivo. Se visualizzi il tuo sito web attuale su un dispositivo mobile e vedi una barra di scorrimento nella parte inferiore del tuo telefono o tablet, è probabile che il tuo sito web (o elementi del tuo sito) non sia mobile friendly. Queste barre di scorrimento orizzontali rovinano l'esperienza dell'utente e molto probabilmente faranno clic sul pulsante Indietro. Le persone sono così abituate a scorrere verticalmente sui propri dispositivi, tanto che quando gli utenti si trovano a dover scorrere sia verticalmente che orizzontalmente per visualizzare i contenuti, si sentono a disagio e abbandonano il sito.

Da questo momento in poi è tutto compreso, i siti Web di design hanno classi CSS e ID per tutto, e intendo tutto.

Dall'intestazione e dal menu div ai tag <p> nel piè di pagina. Ti consigliamo di regolare le dimensioni di tutte queste cose in base alla larghezza dello schermo. Lo spostamento, il dimensionamento e il ridimensionamento sono molto più semplici quando l'elemento può essere mirato tramite CSS.

Le CSS Media Query sono più facili da usare di quanto pensi.

La prima volta che le media query sono state portate alla mia attenzione, ho pensato che facesse parte di un linguaggio di programmazione e non una forma di CSS. Sono stato sopraffatto da un senso di sollievo, quando ho scoperto cosa fosse veramente, e da allora lo uso in TUTTI i miei progetti web.

Le media query sono fondamentalmente regole CSS. Se il tuo schermo ha questa larghezza, applica questo CSS solo a questi elementi. Dai un'occhiata qui sotto.

Quindi il codice sopra dice semplicemente che se lo schermo dell'utente è largo tra 100 px e 699 px, cambia il colore di sfondo del corpo in blu. È qui che l'etichettatura di ogni div e span del tuo sito diventa cruciale. La manipolazione di questi elementi per diverse larghezze dello schermo diventa più facile con un'etichettatura adeguata.

Css-tricks.com elenca molte larghezze mobili per noi come riferimento rapido.

Esempio di codice CSS

/* ———– HTC One ———– */
/* Ritratto e Paesaggio */

@schermo multimediale

e (larghezza del dispositivo: 360px)

e (altezza del dispositivo: 640px)

e (-webkit-device-pixel-ratio: 3) {

/*****QUI IL TUO CODICE*****/

}

C'è molto più codice di query multimediale per telefoni Galaxy, HTC e Apple. Inoltre, sono elencate le larghezze per le larghezze dei tablet Ipad, Galaxy e Nexus. Tutto quello che devi fare è inserire questo codice nel file CSS del tuo sito e compilare le parentesi CSS vuote con il tuo codice! Fatto!

Il tuo sito è reattivo, ma non sembra ancora del tutto corretto

Potresti iniziare a notare che alcuni elementi del tuo sito occupano molto spazio sui dispositivi mobili, come il menu principale. Nel renderlo reattivo, molto probabilmente hai applicato un "float: nessuno" sui tag <li> nel tuo menu. Ma ora il menu sta occupando un'enorme fetta di proprietà nella parte superiore del tuo sito. Dovrai convertire il tuo menu principale in un menu a discesa con jQuery e media query CSS. Css-tricks.com spiega anche come farlo.

Potresti anche considerare insignificanti alcuni elementi, che possono essere trovati sia su desktop che su dispositivi mobili. . Puoi sbarazzartene usando CSS:

Queste modifiche del sito hanno la tendenza a rendere gli utenti dei siti Web davvero lunghi e convincenti a scorrere molto. È qui che il testo di ancoraggio (per gli utenti vedenti) o i collegamenti saltati (per i lettori di schermo) diventano tuoi amici.

Anchor text è un collegamento cliccabile che consente agli utenti di saltare a una determinata sezione della tua pagina web, senza dover scorrere. È un metodo pratico per i siti ottimizzati per dispositivi mobili. Il codice seguente è un esempio di collegamento di anchor text.

<a href="#skip">Fai clic qui per passare al contenuto principale</a>

<a id="skip"></a>Il contenuto principale inizia qui

Ignora collegamenti vengono utilizzati principalmente per i lettori di schermo e consentono agli utenti con disabilità di ignorare o ignorare contenuti Web ripetitivi, come la navigazione nei menu, e ottenere direttamente le informazioni che li interessano.

Se salta i collegamenti hanno una regola CSS di "display:none", i lettori di schermo il collegamento diventa "inaccessibile". Quindi, un modo per aggirare questo problema è posizionare i collegamenti fuori dallo schermo, in modo che gli screen reader possano ancora riconoscere i tuoi collegamenti e consentire loro di saltare il tuo nuovo sito mobile.

Quindi, questo è il modo semplice e veloce per convertire il tuo sito Web a larghezza fissa in uno ottimizzato per dispositivi mobili. Inoltre, non dimenticare di impostare tutte le tue immagini su “width: 100%; altezza: auto.” Qualsiasi immagine, div o span che ha una larghezza impostata in pixel, verrà creata sulla barra di scorrimento orizzontale sui dispositivi mobili, quindi ricorda di impostarli su percentuali o larghezze diverse per i vari dispositivi utilizzando le query multimediali.

Può richiedere un po' di tempo, ma fidati di me, una volta che lo impari, lo userai per sempre. Utilizzerai questo metodo su tutti i siti web che farai, perché anche i più recenti temi e modelli reattivi di WordPress o Joomla richiedono un po' di ritocco per farli apparire come desideri. Ciò è particolarmente vero, con il mercato in continua evoluzione dei dispositivi mobili.

-Izzak Hale, grafico senior