A maioria dos sites usando responsive design estão usando-o incorretamente, o que leva a problemas. A abordagem geral para responsive design é preguiçoso, e se você adotar essa abordagem, alguns de seus responsive sites funcionarão perfeitamente, e muitos deles não. Para aqueles que funcionam perfeitamente, provavelmente será uma questão de sorte.
O conceito de responsive o design é simples, mas sua própria simplicidade é o que leva as pessoas a cometer erros tão facilmente. Designers com anos de experiência se acostumaram a projetar para o desktop, e geralmente planejam um design com base em um desktop layout.
Desktop os layouts diferem dos layouts de tablet e mobile porque normalmente são multi-colunas, normalmente incluem grandes quantidades de espaço em branco, e tudo é apenas “grande”, por falta de uma palavra melhor. Se responsive técnicas de design são usadas, esse layout de várias colunas deve ser dividido em uma única coluna.
Se isso é tudo seu responsive design realmente faz quando é visualizado em um dispositivo móvel, você pode ter um problema. Quanto de um problema depende da sua atitude, mas bons designers se preocupam com uma boa UX. Eles se preocupam ainda mais com UX ruim. Se o seu site tem um UX ruim e você quer ser um bom designer, então você precisa corrigi-lo.
O problema de recolher um layout de várias colunas em uma única coluna é que ele não funciona em uma base proporcional. Se você tiver que encolher algo horizontalmente e não fizer nenhuma outra alteração, obviamente vai expandir verticalmente.
Despeje a água de um copo baixo e gordo em um copo alto e fino, e a água toma a forma de um copo alto e fino, enquanto o volume de água permanece exatamente o mesmo. O que os designers precisam entender é que, com um site, precisamos que o volume mude. Normalmente não é uma boa ideia mudar a forma, mas manter o conteúdo exatamente o mesmo. Alguém Tem que Ceder.
Alguém que realmente ganhou o título de designer entenderá que isso representa um problema a ser resolvido, e o que os designers realmente fazem é encontrar soluções para os problemas. Portanto, é o trabalho perfeito para você encontrar a melhor maneira de fornecer o conteúdo principal do site sem transformar a experiência do usuário em um frustrante festival de rolagem. Aqui estão algumas das coisas que vale a pena considerar ao quebrar um desktop design em um design móvel:
1. “Mobile First” é idiota
Desculpe, mas é. Todo mundo está repetindo isso, mas como conceito não é muito útil porque se você realmente projeta “primeiro móvel”, então será um pesadelo tentar escalá-lo de volta para um desktop design, a menos que você esteja mantendo um layout puramente de coluna única até o fim.
A melhor abordagem é projetar fisicamente pelo menos três (e até 11) layouts diferentes. Os mínimos que você pode considerar incluem:
- Desktop
- Paisagem Móvel
- Portrait Mobile
Se você quiser ser um pouco mais completo, considere também:
- Tablet Paisagem
- Tablet de retrato
E a lista completa, se você quer ser absolutamente completo, seria:
- Enorme Desktop
- Ordinário Desktop
- Tablet de paisagem grande
- Tablet de retrato grande
- Tablet de paisagem pequena
- Tablet Pequeno Retrato
- Grande paisagem móvel
- Grande retrato móvel
- Pequena paisagem móvel
- Pequeno retrato móvel
- Minúsculo / Wearable
Com tantas possibilidades diferentes, é óbvio por que uma abordagem preguiçosa do tipo "tamanho único" é tão tentadora, mas também é óbvio por que existem tantas maneiras de arruiná-la.
2. Domar esse rodapé alastrando de página
A desktop design inclui um daqueles enormes rodapés de página com muitos links internos? Ótimo, isso provavelmente será muito útil em um desktop. Em um celular, parece ridículo e é mais do que apenas um toque irritante. Você pode criar rodapés de página completamente diferentes para cada ponto de interrupção do dispositivo. Basta disponibilizar esses links de rodapé em uma caixa de diálogo modal e todos ganham.
3. Aceite algumas pequenas peculiaridades em dispositivos obscuros
Se um determinado dispositivo não é comum, então não é tão ruim se houver algumas peculiaridades no design que aparecem apenas quando visualizado nesse dispositivo. Quanto mais popular for um dispositivo, mais você terá que trabalhar para se livrar de quaisquer peculiaridades que apareçam nele.
4. Você pode ocultar conteúdo que não contribui para a mensagem principal
A parte mais importante de um site é a mensagem central. Sim, em alguns sites, o mais importante é a publicidade e eles existem apenas para veicular essa publicidade, mas se você tiver que escolher entre mostrar a mensagem central ou mostrar a publicidade, escolha a mensagem. É mais provável que o Google considere você como pessoa non grata se você ocultar o conteúdo principal e, em seguida, exibir um monte de anúncios. É porque esse conteúdo central é o que o Google indexou você com base, e quando esse conteúdo não é mostrado, o Google considera isso enganoso.
Além disso, coisas como imagens que são puramente decorativas ou estéticas, mas que não contribuem significativamente para a mensagem principal, são candidatas a redução ou ocultação.
Algumas pessoas propuseram que ocultar conteúdo é “punir” os usuários de dispositivos móveis, mas essa é uma noção um pouco absurda. A realidade é que você está escondendo o conteúdo porque está lá para melhorar a desktop experiência, mas não contribui suficientemente para a mensagem central do site para que seja necessário
5. Você pode usar fundos alternativos
Recentemente, recebi uma tarefa ridícula em que o proprietário do site pagou por um plano de fundo específico e queria que todo o conteúdo fosse adaptado para caber nesse plano de fundo. Os itens dos marcadores devem ter um número exato de caracteres, o número total de linhas deve ser exato e assim por diante.
Esta é definitivamente uma má prática em web design, porque você deveria nunca projetar conteúdo para caber em um layout. O layout deve sempre ser projetado para conter o conteúdo. Se por algum motivo o layout não pode conter o conteúdo, então o layout deve ser redesenhado, não o conteúdo. É bem possível usar fundos diferentes para dispositivos diferentes. Você é um designer. Use sua imaginação.
O conteúdo é o sangue vital de um site, e modificá-lo ou restringi-lo com base nas restrições de um layout é um sinal claro de amadorismo por parte do proprietário do site e de que o layout foi mal projetado no primeiro Lugar, colocar. Mantenha seus princípios, porque esse cliente vai ser um problema se você concordar.
O cliente tem sempre razão, exceto quando esse cliente é um cliente de web design. Os clientes raramente sabem o que é melhor para eles, e é importante se afirmar como um web designer que sabe entregar o resultado certo para o cliente. De outroswise você corre o risco de criar mais um site abominação.
6. Controlar manualmente a ordem de recolhimento (ou evitar referências espaciais no conteúdo)
Este é um problema complexo. A ordem de recolhimento de um site depende da ordem em que os divs são empilhados. Você precisa empilhar seus divs na ordem correta para que eles sejam recolhidos na ordem correta.
Um dos problemas que vem dos construtores de sites WYSIWYG drag-n-drop é que você normalmente não pode ditar em que ordem os divs são empilhados, e nos casos muito raros em que você pode fazer isso, seu trabalho duro é desfeito sempre você faz a menor edição, e você terá que voltar e hackear o código-fonte novamente.
Se você não controlar a ordem de recolhimento, esta imagem explica claramente o que pode dar errado. Além disso, você deve evitar fazer referências espaciais (como "na coluna à esquerda") como em um celular, o que quer que esteja à esquerda ou à direita pode ser deslocado para cima ou para baixo, mais Se você fizer o leitor achar importante o suficiente para rolar para ver, então eles terão que rolar novamente, e isso não é legal.
7. Você pode precisar de diferentes tamanhos de fonte para diferentes layouts
É fácil controlar o tamanho da fonte com CSS e você pode definir diferentes tamanhos de fonte e até diferentes faces de fonte (se elas parecerem melhores) para tamanhos específicos de exibição. Você pode encontrar o tamanho de exibição com consultas de mídia CSS e, em seguida, modificar o tamanho da fonte ou a face da fonte para valores que exibam o conteúdo com vantagem máxima no tipo de dispositivo que você está almejando.
8. É melhor usar responsive imagens
Todas as imagens devem ser responsive quando possível. Isso traz consigo que, às vezes, o detalhe de uma imagem pode ser perdido se for muito reduzido. Uma solução para esse problema é tornar a imagem clicável para que o usuário possa visualizar uma versão ampliada da imagem separada do conteúdo. A maneira normal de fazer isso é por meio de uma caixa de diálogo modal.
imagem de cabeçalho cortesia de
Mobile first significa apenas que na base de código, o CSS “padrão” é para mobile e você cria mudanças para formats de lá. Eu realmente não entendo seu primeiro ponto