Tornando um site de largura fixa compatível com dispositivos móveis

Última atualização em 22 de maio de 2020

Construindo Mobile Friendly. Houve um tempo em que minha maior preocupação como designer gráfico e desenvolvedor web era fazer meu CSS funcionar no Internet Explorer. Não só o IE ainda é uma dor na parte traseira, agora temos que nos preocupar com vários tamanhos de tela e sistemas operacionais.

Haverá um momento em que o celular ultrapassará a navegação na área de trabalho. Desde que o mobile se tornou tão proeminente em nossas vidas cotidianas, há momentos em que nós web designers precisamos de resultados imediatos. Se você é um daqueles designers ou programadores que simplesmente não tem tempo para converter um site estático em um tema WordPress, um que seja compatível com dispositivos móveis, há esperança para você, meu amigo. Quando se trata de visualizar todo o seu conteúdo em dispositivos móveis, você pode fazer isso com um pouco de otimização de CSS e HTML.

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

Globalmente, os dispositivos móveis respondem por mais da metade dos minutos gastos online, de acordo com a comScore

Sites compatíveis com dispositivos móveis ou responsivos têm a capacidade de configurar a largura do seu site automaticamente, para se adequar ao dispositivo do visualizador. Barras de rolagem horizontais são um não-não em design responsivo. Se você visualizar seu site atual em um dispositivo móvel e vir uma barra de rolagem na parte inferior de seu telefone ou tablet, é provável que seu site (ou elementos de seu site) não seja compatível com dispositivos móveis. Essas barras de rolagem horizontais arruínam a experiência do usuário e provavelmente clicarão no botão voltar. As pessoas estão tão acostumadas a rolar verticalmente em seus dispositivos que, quando os usuários precisam rolar vertical e horizontalmente para visualizar o conteúdo, ficam desconfortáveis ​​e saem do site.

É tudo incluído a partir deste ponto daqui para frente, sites de design têm classes CSS e IDs para tudo, e quero dizer tudo.

Do cabeçalho e div do menu às tags <p> no rodapé. Você vai querer ajustar o tamanho de todas essas coisas com base na largura da tela. Mover, dimensionar e dimensionar são muito mais fáceis quando o elemento pode ser direcionado via CSS.

As consultas de mídia CSS são mais fáceis de usar do que você pensa.

A primeira vez que as consultas de mídia foram trazidas à minha atenção, pensei que era parte de uma linguagem de programação, e não uma forma de CSS. Fui tomado por uma sensação de alívio, quando descobri o que realmente era, e tenho usado desde então em TODOS os meus projetos na web.

As consultas de mídia são basicamente regras CSS. Se sua tela tiver essa largura, aplique esse CSS apenas a esses elementos. Dê uma olhada abaixo.

Portanto, o código acima está simplesmente dizendo que, se a tela do usuário tiver entre 100px e 699px de largura, altere a cor de fundo do corpo para azul. É aqui que rotular cada div e span em seu site se torna crucial. A manipulação desses elementos para diferentes larguras de tela se torna mais fácil com a marcação adequada.

Css-tricks.com lista muitas larguras móveis para nós como uma referência rápida.

Amostra de código CSS

/* ———– HTC One ———– */
/* Retrato e Paisagem */

@media tela

e (largura do dispositivo: 360px)

e (altura do dispositivo: 640px)

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

/***** SEU CÓDIGO AQUI *****/

}

Há muito mais código de consulta de mídia para telefones Galaxy, HTC e Apple. Além disso, as larguras das larguras dos tablets Ipad, Galaxy e Nexus estão listadas. Tudo o que você precisa fazer é inserir esse código no arquivo CSS do seu site e preencher os colchetes CSS em branco com seu próprio código! Feito!

Seu site é responsivo, mas ainda não parece certo

Você pode começar a perceber que alguns elementos do seu site ocupam bastante espaço em dispositivos móveis, como seu menu principal. Ao torná-lo responsivo, você provavelmente aplicou um “float: none” nas tags <li> do seu menu. Mas agora o menu está ocupando uma grande parte do espaço no topo do seu site. Você precisará converter seu menu principal em um menu suspenso com consultas de mídia jQuery e CSS. CSS-tricks.com também explica como fazer isso.

Você também pode considerar certos elementos como insignificantes, que podem ser encontrados em dispositivos desktop e móveis. . Você pode se livrar deles usando CSS:

Esses ajustes no site tendem a tornar os sites muito longos, obrigando os usuários a rolar muito. É aqui que o texto âncora (para usuários com visão) ou links para pular (para leitores de tela) se tornam seus amigos.

O texto âncora é um link clicável que permite aos usuários pular para uma determinada seção da sua página da web, sem precisar rolar. É um método útil para sites compatíveis com dispositivos móveis. O código abaixo é um exemplo de link de texto âncora.

<a href="#skip">Clique aqui para pular para o conteúdo principal</a>

<a id=”skip”></a>O conteúdo principal começa aqui

Skip Links são usados ​​principalmente para leitores de tela e permitem que usuários com deficiências ignorem ou pulem conteúdo repetitivo da web, como navegação de menu, e acessem diretamente as informações que lhes interessam.

Se os links ignorados tiverem uma regra CSS de “display:none”, os leitores de tela o link se tornará “inacessível”. Portanto, uma maneira de contornar isso é posicionar os links fora da tela, dessa forma os leitores de tela ainda podem reconhecer seus links e permitir que eles pulem pelo seu novo site para dispositivos móveis.

Portanto, essa é a maneira rápida e fácil de converter seu site de largura fixa em um site compatível com dispositivos móveis. Além disso, não se esqueça de definir todas as suas imagens para “width: 100%; altura: automático.” Quaisquer imagens, divs ou extensões que tenham uma largura definida em pixels, serão criadas na barra de rolagem horizontal em dispositivos móveis, portanto, lembre-se de defini-las para porcentagens ou larguras diferentes para os vários dispositivos usando consultas de mídia.

Pode ser um pouco demorado, mas confie em mim, uma vez que você aprender, você vai usá-lo para sempre. Você usará esse método em todos os sites que fizer, porque mesmo os mais novos temas e modelos responsivos do WordPress ou Joomla exigem um pouco de manipulação para que tenham a aparência que você deseja. Isso é especialmente verdade, com o mercado em constante mudança para dispositivos móveis.

-Izzak Hale, designer gráfico sênior