Eu li várias fontes que afirmam que o primeiro design para dispositivos móveis é quase essencial, o que não posso negar que tenha benefícios óbvios, como tempos de carregamento mais rápidos para celulares que geralmente têm velocidades de download mais lentas através de 3G e 4G.

Mas e se você estiver criando um site menor com muito poucas imagens.

Eu gostaria de ouvir outras opiniões sobre esse assunto e se as pessoas pensam ou não que há exceções. Pessoalmente, prefiro projetar / codificar para desktop primeiro e diminuir a partir daí. Mas é realmente importante projetar / codificar para dispositivos móveis primeiro ou os resultados finais não são significativos o suficiente para serem incomodados em determinadas situações?

Do ponto de vista puramente de design, começar pela versão móvel primeiro faz sentido.

A parte mais difícil do processo de design é sempre a poda, nunca adicionando. Portanto, quanto menor o espaço na tela que você se permitir, mais terá que pensar no que é importante no seu design, nas informações que realmente precisa mostrar. Além disso, você se esforçará para pensar em acessibilidade também, pois o texto e outros itens serão menores.

Depois de projetar a versão "leve", você poderá adicionar coisas extras, como elementos de design, e aumentar as coisas à medida que ganha espaço. Conforme apontado pelo @Django, você nunca deve deixar de fora os recursos do design.

Para o seu site, um exemplo pode ser o menu. Você decidiu sair dos itens de menu e substituí-lo por um ícone de hambúrguer, que é o procedimento padrão. Mas se os itens de menu forem uma das coisas mais importantes da página, você não deseja ocultá-los atrás de um clique.

Nota: O vermelho no azul do seu site é muito ruim para os daltônicos, considere mudar isso.

Primeiro, o celular é uma prática recomendada - não é lei e, se você entender por que deveria usá-lo, poderá tomar uma decisão informada sobre o motivo pelo qual não deseja usá-lo em um projeto específico, e isso é bom.

Vale a pena notar que "mobile primeiro" se relaciona ao design / UX e à própria construção. Primeiro projeto Mobile não irá acelerar o seu site para os usuários, mas primeiro desenvolvimento móvel vai .

Vamos olhar para os dois.

Móvel primeiro em design

O primeiro design móvel é ajudar você a reduzir seus recursos e usabilidade ao que você precisa . O pensamento por trás disso é o seguinte: em vez de projetar a área de trabalho primeiro e depois lutar para colocar todos os recursos que você criou em uma tela ampla de 320px e manter um bom UX, comece primeiro com o celular ...

Se o UX estiver sendo desorganizado ou danificado por todos os seus recursos no celular, isso deve fazer você questionar se o usuário realmente precisa de todos eles. Você pode se livrar de alguns deles e realmente melhorar a experiência? Se sim, por que você os possui? Talvez eles não sejam essenciais, afinal, e talvez não devam estar no seu site.

A teoria é que isso ajuda a reduzir seus recursos ao que você absolutamente precisa e, em seguida, você pode escalar isso para uma bela experiência na área de trabalho.

Mobile primeiro em desenvolvimento

No primeiro desenvolvimento móvel , trata-se de escrever a versão móvel primeiro e, em seguida, abrir exceções para telas maiores. A razão pela qual isso é melhor (e mais rápido) para usuários móveis é o seguinte: você tem duas imagens para um site, uma grande para computador e outra menor para celular. Se você codificar primeiro a área de trabalho, seu CSS será mais ou menos assim:

.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');
    }
}

Isso significa que o usuário móvel realmente baixa large.jpgo arquivo antes que o CSS o desative. Isso é muito ruim.

Os dispositivos móveis têm a seguinte aparência:

.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');
    }
}

O usuário móvel nunca baixa large.jpg.

Espero que isso ajude a tornar as coisas um pouco mais claras, se você não as entendeu antes!

A origem do "primeiro celular"

A idéia de "primeiro móvel" no que diz respeito ao design responsivo vem de uma época em que os navegadores de dispositivos móveis eram muito menos capazes do que o que você encontraria em um dispositivo de desktop. Muitos deles não eram compatíveis com consultas de mídia; portanto, a idéia de criar um design sofisticado para a área de trabalho e, em seguida, aderir aos estilos usando consultas de mídia para uma janela de visualização estreita, cai de cara no chão.

A ausência de suporte para consultas de mídia é de fato a primeira consulta de mídia.

- Bryan Rieger

O celular ainda é relevante?

Apesar do fato de os navegadores de dispositivos móveis encontrarem seus colegas de área de trabalho, o "primeiro móvel" ainda é a maneira mais lógica de escrever seus estilos.

Prefiro pensar em termos de "evitar desfazer as declarações de estilo anteriores". Uma abordagem aditiva, em vez de escrever estilos e substituí-los mais tarde, quase sempre leva a uma folha de estilo mais compacta. Os estilos apropriados para a maioria dos dispositivos devem ser encontrados fora das consultas de mídia, enquanto os estilos relevantes apenas para uma viewport específica devem estar atrás de uma consulta de mídia.

Compare uma abordagem de "primeiro computador":

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

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

Para uma abordagem "móvel primeiro":

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

Os resultados são os mesmos, mas o posterior é mais compacto. Os estilos de amostra copiaram descaradamente as 7 Hábitos das consultas de mídia altamente eficazes de Brad Frost .

Existem algumas raras exceções em que "a área de trabalho primeiro" é mais apropriada do que o contrário. O mais notável deles é quando você está fazendo coisas como tabelas responsivas. As viewports mais amplas desejarão os estilos padrão para as tabelas, mas uma viewport estreita desejará substituir tudo isso para que o conteúdo possa ser empilhado verticalmente.

Não quebre suas folhas de estilo

Uma coisa que você absolutamente não deve fazer é dividir seus estilos responsivos em arquivos CSS individuais e usar o atributo media no elemento link. Isso tem a conseqüência indesejável de o UA fazer o download de todas as folhas de estilo vinculadas (ou seja, não há melhoria de velocidade para isso).

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

Portanto, o código deve ser móvel primeiro, mas e a abordagem do design?

Sou da opinião de que isso não importa. Layouts para todas as janelas relevantes para o desenho deve ser feito (este pode envolver tão poucos como 2 ou como muitos como 5 uma vez que você fator em qualquer menores pontos de interrupção que você pode precisar!), A ordem não importa no final. Muitos designers não têm disciplina para começar com um layout de área de trabalho e acham que é mais fácil começar com um layout móvel.

Se você deseja iniciar a partir de um layout de área de trabalho, evite a tentação de preencher todo esse espaço em branco glorioso com uma confusão que não aprimora o conteúdo dessa página. Você realmente precisa daquela foto 800x600 de uma mulher sorridente segurando um telefone? Ele está apenas custando dinheiro extra ao usuário móvel para fazer o download de cotão inútil, e é apenas uma distração visual para um usuário de desktop ignorar.

Testei seu site www.cosmosdesign.co.nz em diferentes tamanhos de tela e está funcionando bem em todas as telas. Com relação à sua pergunta para o primeiro design para dispositivos móveis, gostaria de dizer que sua abordagem de design deve considerar seu público-alvo, juntamente com muitos outros fatores, como imagens, conteúdo etc. Se seu público-alvo usar este site principalmente em computadores / laptops, você poderá Certamente, continue com sua abordagem, mas se for um site que será visto principalmente em telefones e guias, será necessário refletir sobre sua estratégia.

Você também pode considerar criar um site responsivo usando o Bootstrap (muitas outras opções também estão disponíveis) e também pode otimizar suas imagens para sites compatíveis com dispositivos móveis, o que também reduzirá o tempo de carregamento.

Para mim, o principal motivo para fazer o celular primeiro é evitar uma situação em que seu site para celular não faz tudo o que a versão para computador faz. Existem muitos sites nos quais tenho que solicitar a versão para desktop no meu telefone para fazer alguma coisa, porque, embora o telefone possa fazê-lo, a versão para celular não. Isso me incomoda.

Dito isso, acho que o desktop primeiro é bom, desde que você não economize mais tarde nos recursos móveis, como a maioria das empresas.

Além disso, muitas estruturas de design tornam isso bastante simples. Usei o material lite para criar um aplicativo bastante complexo para o primeiro desktop e realmente precisei mudar algumas coisas quando o revi para a versão otimizada para dispositivos móveis - a maior parte do trabalho já foi concluída.