Era uma vez, a cerca de uma hora de distância de onde eu moro atualmente, trabalhou um web designer que adorava suas composições de Photoshop e layouts de largura fixa. E bem, eu não quero estragar o final, mas esse designer era eu.
Então, enquanto eu estava cuidando do meu próprio negócio, a comunidade criativa baseada na web ficou furiosa com esse conceito inovador chamado “design responsivo”. Como qualquer profissional jovem, de olhos brilhantes e rabo de cavalo faria, eu investiguei. Afinal de contas, a mais nova e mais recente coisa deve ser sempre dada, pelo menos, um olhar passageiro.
O que eu descobri, no entanto, me deixou desanimado. Um mentor do mal chamado Ethan Marcotte desencadeou um plano covarde para fazer os web designers trabalharem mais! Seu livro deixou as pessoas reclamando e delirando sobre como precisávamos "considerar os usuários de dispositivos móveis" e "fazer nossos sites funcionarem em tantas plataformas quanto possível" ... os pagãos.
Claro, resisti o quanto pude. Eu lutei forte e bravamente contra essa onda de bom senso e negócios inteligentes; mas foi tudo por nada. Então, voltei a pedir desculpas: “Mas eu não tenho dispositivos móveis para testar!” E isso, caro leitor, é o ponto. Acontece que você não precisa absolutamente de um.
Com o tempo, descobri algumas diretrizes básicas que, se você se encontrar sem um telefone celular ou um tablet, o ajudarão a criar sites que tornem as coisas com bom aspecto na maioria dos navegadores móveis.
… Você está construindo algo maior do que um pequeno site de conteúdo. Grandes sites e sites baseados em aplicativos devem ser testados em plataformas móveis reais. Quero dizer, claro, você provavelmente poderia fingir, mas eu não aconselharia.
Quando você está trabalhando com variáveis desconhecidas, sua melhor opção é manter as coisas estupidamente simples. Sim, estou invocando a regra do KISS quase clichê, porque funciona.
Sem um rack cheio de smartphones e assim por diante, você precisa confiar no que outras pessoas sabem. Felizmente, muito tempo e energia foram gastos examinando os recursos dos navegadores móveis mais populares e como eles se comparam.
Descubra qual é o seu público-alvo e, em seguida, descubra que tipo de navegadores eles estão usando. Como sempre, o Google é seu amigo. Então, tudo que você precisa fazer é criar estatísticas.
Se a maior parte do seu mercado-alvo para celular usa Android / iOS de uma forma ou de outra, você está com sorte! Seus navegadores padrão (e as alternativas mais populares, como o Firefox) são modernos na maior parte. Técnicas avançadas de layout, efeitos CSS3 básicos, jQuery… tudo isso provavelmente irá renderizar razoavelmente bem.
Se o seu público-alvo usa outras plataformas, no entanto, você precisará fazer uma pesquisa mais específica sobre elas e descobrir o que elas podem ou não fazer.
Agora, o que você faz se tiver pouca ou nenhuma informação sobre seus usuários? Tente, pelo menos, descobrir onde eles estão. A maioria dos sites tem, no mínimo, uma região geral da qual a maioria de seus usuários é originária. Veja as estatísticas dessa região.
Na falta de tudo isso, projetar para o pior cenário possível.
Para tornar seu trabalho um pouco mais fácil, encontrei um site com uma comparação bastante detalhada do que os navegadores móveis mais populares suportam ou não. Confira em mobilehtml5.org .
E claro, há o sempre popular caniuse.com
Eu sei que alguns designers juram criando código personalizado específico para cada projeto, mas quando você está trabalhando cego, por assim dizer, reinventar a roda não é uma opção prática. Estruturas que já foram testadas em plataformas móveis tiram muito do trabalho de adivinhação do processo.
Suposição é ruim. Evite isso.
Agora, obviamente, eu não experimentei ou testei pessoalmente todos os frameworks, então você terá que encontrar um que faça o que você quer fazer e pesquisá-lo, comparando-o com os recursos da sua plataforma móvel pretendida. Ainda assim, existem alguns com os quais você poderia começar:
Estes são os que você provavelmente pode nomear no topo da sua cabeça. Eles são caracterizados por sua complexidade. Eles trazem sistemas de layout, elementos de interface do usuário e plug-ins jQuery juntos em um pacote poderoso.
Os mais famosos deles são Bootstrap e Fundação . Eu não vou me incomodar em compará-los aqui, então vá em frente e use o Google “Bootstrap vs. Foundation” se precisar de mais detalhes. Tudo o que você realmente precisa saber agora é que, em cada estrutura, cada componente foi extensivamente testado por uma grande base de fãs e está pronto para o uso móvel.
Estes não tentam fazer tudo por você, mas apenas dar-lhe o suficiente para começar. Isso torna a personalização de coisas um pouco mais fácil, mas a criação e / ou o estilo de elementos de interface do usuário mais complexos depende de você.
Esta categoria inclui Esqueleto , Menos estrutura 4 e assim por diante…
Esta é realmente minha categoria favorita pessoal. Eu prefiro começar com uma tela em branco e um sistema de layout pronto, o que me permite criar o tipo de site que eu quero, sem ter que sobrescrever muito CSS, ou tentar extrair partes específicas de qualquer framework.
Essas estruturas, na maior parte, não parecem se preocupar com o layout ou a estrutura da página. Eles são projetados para fornecer uma maneira fácil de adicionar elementos de interface de aplicativos sofisticados e compatíveis com dispositivos móveis (leia-se: widgets).
Eu só testei um, mas minha pesquisa diz que os três melhores (ou pelo menos os mais populares) frameworks nessa categoria são jQuery Mobile , KendoUI e Wijmo .
Acontece que a acessibilidade não é apenas para os daltônicos ou completamente cegos. Muitos dos navegadores móveis mais antigos são tão limitados em capacidades que é muito parecido com navegar com CSS e Javascript desativados.
Sua melhor aposta, nesse caso, é garantir que seu site seja utilizável nessas condições. Desligue todas essas coisas bonitas e certifique-se de que ainda seja possível que os usuários atinjam os objetivos do site sem eles.
Emuladores de dispositivos geralmente não são cem por cento precisos, mas você pode testar as coisas mais importantes, como layout e assim por diante. Bugs que eu encontrei são muitas vezes coisas menores, como fontes da web não renderização. Não se preocupe, eles devem funcionar bem no hardware real.
Mas quais emuladores você deveria estar usando?
Este funciona um pouco devagar, mas funciona como um encanto. Você tem que baixar o kit inteiro do desenvolvedor, mas vale a pena ter um programa que imita de perto não apenas o navegador padrão do Android, mas todo o sistema operacional. Além disso, você pode testar seu site em vários "dispositivos" virtuais.
Outro que funciona basicamente como anunciado. Você faz o download, escolhe seu “dispositivo” e vai.
O Firefox tem várias opções para testar seu conteúdo móvel. O primeiro é um emulador simples que imita a funcionalidade de renderização do projeto Firefox móvel da Mozilla, codinome: Fennec.
Não é muito complicado, fornecendo-lhe uma janela simples e redimensionável, por isso cabe a você definir manualmente o tamanho da tela que deseja testar.
o segunda opçao é um complemento para a versão desktop do Firefox. Apelidado de Firefox OS Simulator, ele fornece uma plataforma inteira para jogar, não apenas o navegador (muito parecido com o Android SDK).
Não consegui testar este emulador , já que requer a instalação de um SDK muito grande, e a instalação foi escutada, pelo menos para mim. Ainda assim, está aí para você testar a seu próprio critério.
Blackberry oferece um número de simuladores para BB10. Talvez seja eu, mas não tive muito sucesso em executar nenhum deles. Eu adoraria ouvir de quem consegue fazê-los funcionar.
Por último, mas certamente não menos importante, a Apple fornece um simulador de iOS grátis que pode ser usado para testar dispositivos Apple como parte do Xcode. Infelizmente, porque é parte do Xcode, é apenas para Mac.
Se você tem o orçamento (ou pode testar muito rapidamente, como o tempo livre é limitado no tempo), você não pode errar BrowserStack . Eles permitem que você teste em muitos desktops e uma enorme variedade de celulares. Não tão responsivo quanto a coisa real, eles mostrarão problemas com coisas como layout.
Navegadores móveis tendem a brincar com configurações de zoom, ou assim minha experiência tem sido. Se você quiser que seu website tenha a aparência de quando reduz a janela do navegador para tamanhos de celular, use este belo pedaço de HTML na cabeça do documento:
Deixe-me reformular isso: o minimalismo balança no celular. A estética minimalista se adapta bem a tamanhos de tela menores com menos ajustes e ajustes, economizando muito tempo. Talvez isso pareça um acéfalo para alguns de vocês, mas não posso enfatizar o suficiente.
Essa colagem de informações é apenas a ponta do iceberg, é claro, e não é páreo para realmente testar seus sites em hardware móvel real, mas deve permitir que você comece e espere que ganhe o suficiente do design para dispositivos móveis tão ricamente merecem.
Imagem em destaque / miniatura, imagem do dispositivo móvel via Shutterstock.