Ho letto diverse fonti che affermano che il primo design dei dispositivi mobili è quasi essenziale, il che non posso negare che abbia evidenti vantaggi come tempi di caricamento più rapidi per i cellulari che generalmente hanno velocità di download più basse tramite 3G e 4G.

Ma cosa succede se stai costruendo un sito Web più piccolo con pochissime immagini.

Mi piacerebbe conoscere le opinioni degli altri su questo argomento e se le persone pensano che ci siano o meno eccezioni. Personalmente preferisco progettare / codificare prima il desktop e ridimensionarlo da lì. Ma è davvero così importante progettare / codificare prima i dispositivi mobili o i risultati finali non sono abbastanza significativi da disturbare in determinate situazioni?

Da un punto di vista puramente progettuale, iniziare con la versione mobile ha senso.

La parte più difficile del processo di progettazione è sempre la potatura, senza mai aggiungere. Quindi più piccolo è lo spazio che ti permetti, più dovrai pensare a ciò che è importante nel tuo design, a quali informazioni devi davvero mostrare. Inoltre, ti costringerai a pensare anche all'accessibilità, poiché il testo e altri elementi saranno più piccoli.

Dopo aver progettato la versione 'leggera', puoi quindi procedere con l'aggiunta di elementi extra come elementi di design e allargare le cose man mano che guadagni immobili. Come sottolineato da @ Django, non dovresti mai tralasciare le caratteristiche del design.

Per il tuo sito, un esempio potrebbe essere il menu. Hai deciso di lasciare le voci del menu e sostituirlo con un'icona di hamburger, che è la procedura standard. Ma se le voci di menu sono una delle cose più importanti della pagina, non dovresti nasconderle dietro un clic.

sidenote: il rosso sul blu sul tuo sito è davvero negativo per il daltonico, ti preghiamo di considerare di cambiarlo.

Il mobile prima è la migliore pratica - non è legge e se capisci perché "dovresti" usarlo, puoi prendere una decisione informata sul perché non vuoi usarlo su un particolare progetto, e va bene.

Vale la pena notare che "mobile first" si riferisce al design / UX e alla build stessa. Il primo design mobile non accelererà il tuo sito per gli utenti, ma lo farà il primo sviluppo mobile .

Diamo un'occhiata a entrambi.

Mobile primo nel design

Il primo design per dispositivi mobili consiste nell'aiutarti a ridurre le funzionalità e l'usabilità a ciò di cui hai bisogno . Il pensiero dietro è così: piuttosto che progettare prima il desktop, e quindi lottare per mettere tutte le funzionalità che hai inventato in un display largo 320px e mantenere una buona UX, inizia prima con il cellulare ...

Se la UX viene ingombra o danneggiata da tutte le tue funzionalità sui dispositivi mobili, allora dovresti metterti in dubbio se l'utente ne ha davvero bisogno. Riesci a sbarazzartene e migliorare l'esperienza? Se è così, perché li hai? Forse non sono essenziali dopo tutto, e forse non dovrebbero essere sul tuo sito.

La teoria è che questo ti aiuta a ridurre le tue caratteristiche a ciò di cui hai assolutamente bisogno , e poi puoi ridimensionarlo in una bellissima esperienza desktop.

Mobile primo nello sviluppo

Con il primo sviluppo mobile , si tratta di scrivere prima la versione mobile e quindi di inserire eccezioni per schermi più grandi. Il motivo per cui è meglio (e più veloce) per gli utenti di dispositivi mobili è questo: hai due immagini per un sito Web, una grande per desktop e una più piccola per dispositivi mobili. Se si codifica prima il desktop, il CSS apparirà in questo modo:

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

Ciò significa che l'utente mobile scarica effettivamente large.jpgil CSS prima che lo spenga. Questo è molto brutto.

Il primo dispositivo mobile è simile al seguente:

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

L'utente mobile non scarica mai large.jpg.

Spero che questo aiuti a rendere le cose un po 'più chiare, se non le hai capite prima!

L'origine di "mobile first"

L'idea di "mobile first" per quanto riguarda Responsive Design nasce da un momento in cui i browser per dispositivi mobili erano molto meno capaci di quello che si potrebbe trovare su un dispositivo desktop. Molti di loro non supportavano affatto le media query, quindi l'idea di creare un design desktop stravagante e poi attenersi agli stili utilizzando le query multimediali per una finestra stretta si mostra piatta.

L'assenza di supporto per le media query è in effetti la prima media query.

- Bryan Rieger

Il primo dispositivo mobile è ancora rilevante?

Nonostante il fatto che i browser per dispositivi mobili abbiano raggiunto le loro controparti desktop, "mobile first" è ancora il modo più logico di scrivere i tuoi stili.

Preferisco pensare in termini di "evitare di annullare dichiarazioni di stile precedenti". Un approccio additivo, piuttosto che scrivere stili e poi sostituirli in un secondo momento, porterà quasi sempre a un foglio di stile più compatto. Gli stili appropriati per la maggior parte / tutti i dispositivi devono essere trovati al di fuori delle query multimediali, mentre gli stili che sono rilevanti solo per una finestra specifica devono essere dietro una query multimediale.

Confronta un approccio "desktop first":

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

Ad un approccio "mobile first":

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

I risultati sono gli stessi, ma il secondo è più compatto. Esempi di stili copiati senza vergogna dalle 7 abitudini di media estremamente efficaci di Brad Frost .

Ci sono alcune rare eccezioni in cui "desktop first" è più appropriato del contrario. Il più notevole di questi è quando stai facendo cose come le tabelle reattive. Le finestre più ampie vorranno gli stili predefiniti per le tabelle, ma una finestra stretta vorrà sovrascrivere tutto ciò in modo che i contenuti possano essere impilati verticalmente.

Non rompere i tuoi fogli di stile

Una cosa che non dovresti assolutamente fare è suddividere i tuoi stili di risposta in singoli file CSS e utilizzare l'attributo media sull'elemento link. Ciò ha la conseguenza indesiderabile di far scaricare UA da tutti i fogli di stile collegati (cioè non c'è alcun miglioramento della velocità per farlo).

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Quindi il codice dovrebbe essere prima mobile, ma per quanto riguarda l'approccio al design?

Sono dell'opinione che non abbia importanza. I layout per tutti i viewport rilevanti per il design devono essere eseguiti (questo potrebbe comportare un minimo di 2 o un massimo di 5 una volta che si tiene conto di eventuali punti di interruzione minori che potrebbero essere necessari!), L'ordine non importa alla fine. Molti designer non hanno la disciplina di iniziare con un layout desktop e scoprono che partire da un layout mobile è più semplice.

Se desideri iniziare da un layout desktop, devi evitare la tentazione di riempire tutto quel glorioso spazio bianco con disordine che non migliora il contenuto di quella pagina. Hai davvero bisogno di quella foto 800x600 di una donna sorridente che tiene un telefono? È solo un costo per l'utente mobile in più denaro per scaricare lanugine inutili ed è solo una distrazione visiva per un utente desktop da saltare.

Ho testato il tuo sito Web www.cosmosdesign.co.nz su schermi di dimensioni diverse e funziona perfettamente su tutti gli schermi. Per quanto riguarda la tua domanda sul primo design mobile, vorrei dire che il tuo approccio alla progettazione deve considerare il tuo pubblico di destinazione insieme a molti altri fattori come immagini, contenuti, ecc. Se il tuo pubblico di destinazione utilizzerà questo sito Web principalmente su desktop / laptop, allora puoi procedi sicuramente con il tuo approccio, ma se si tratta di un sito Web che verrà visualizzato principalmente su telefoni e schede, dovrai ripensarci alla tua strategia.

Puoi anche considerare di progettare il tuo sito Web in modo reattivo utilizzando Bootstrap (sono disponibili anche molte altre opzioni) e puoi anche ottimizzare le tue immagini per un sito ottimizzato per dispositivi mobili che ridurrà anche i tempi di caricamento.

Per me il motivo principale per fare prima il mobile è evitare una situazione in cui il tuo sito mobile non fa tutto ciò che fa la versione desktop. Ci sono tonnellate di siti Web in cui devo richiedere la versione desktop sul mio telefono per fare qualcosa perché anche se il telefono può farlo, la loro versione mobile non lo fa. Questo mi infastidisce.

Detto questo, penso che il desktop prima di tutto vada bene fintanto che non lesini più tardi le funzionalità mobili come fanno la maggior parte delle aziende.

Inoltre, molti framework di progettazione lo rendono piuttosto semplice. Ho usato material design lite per creare un'app desktop piuttosto complessa e in realtà ho dovuto cambiare solo un paio di cose quando l'ho rivista per la versione ottimizzata per dispositivi mobili - la maggior parte del lavoro era già stata eseguita.