ATM Digital | Artigos - A Era Mobile: Evoluindo sites e aplicações web

Blog

A Era Mobile: Evoluindo sites e aplicações web

Postado em: 20/02/2015 | Por: Vinicius Silva

Da mesma forma que a constante evolução dos dispositivos móveis vem trazendo diversas novidades para a vida dos usuários, isto também ocorre com os websites e as aplicações web. Em 2013, o número de brasileiros que acessavam a internet através do telefone celular atingiu aproximadamente 52,5 milhões, representando 31% da população do país naquele ano, segundo a Folha de São Paulo. Assim, cada dia mais as empresas estão investindo em aperfeiçoar seus sites e/ou aplicações web a fim de oferecer a melhor experiência de navegação aos seus usuários e clientes.

Com o passar dos anos, as linguagens de programação e as formas de se desenvolver para a internet também evoluíram e trouxeram novas possibilidades em especial para esse ramo, facilitando assim essa adaptação. Estamos falando dos chamados “Responsive Layouts” e “Mobile Websites”.

Mas afinal, quais as diferenças e as vantagens entre esses dois modelos?


Responsive Layout/Responsive Web Design


"Responsive layout", ou em português, layout responsivo é o modelo que permite haver apenas um único site para ser visualizado de diferentes formas, dependendo do dispositivo pelo qual for acessado. Ou seja, ele “responde” (aqui surge o termo “responsivo”) ao navegador qual estilo deve ser exibido (a partir das especificações feitas pelo desenvolvedor no código) a partir do tamanho da tela do dispositivo que lhe está acessando ou simplesmente pelo tipo de aparelho (tela ou impressora, por exemplo).

Dentre as vantagens deste modelo, algumas são facilmente notadas:



  • Facilidade de administração (visto que será um único website);

  • Unificação de links, haja vista que será utilizado o mesmo site entre plataformas, não sendo necessários redirecionamentos, nem subdomínios;

  • Custo reduzido, haja vista que será necessário apenas um website ao invés de múltiplos (diferente do modelo de “Mobile websites” que será explicado à frente).


No entanto, também existem algumas desvantagens na utilização deste modelo, onde citarei uma em especial: Usar um único website pode tornar tudo mais fácil para quem desenvolve, porém nem sempre ao usuário, haja vista que através do acesso pelo celular ele talvez não encontre de forma tão fácil o que ele procura, da forma como ele está acostumado a encontrar pelo computador.


Mobile websites


O modelo de “Mobile website” está focado no desenvolvimento de um website (ou aplicação web) específico para dispositivos móveis, ao invés de utilizar o mesmo website para todas as plataformas, como no modelo “Responsive layout”. Assim, enquanto estiver desenvolvendo-o, será necessário se preocupar somente com os dispositivos móveis. Deve-se manter em mente os tamanhos das telas dos dispositivos móveis e deve-se fazer algo leve, simples e que o usuário consiga encontrar tudo o que precisa de maneira simples. Um exemplo de "mobile website" é o do Facebook, que quando acessado via celular redireciona o usuário do site “www.facebook.com” para “m.facebook.com”, ou seja, “mobile.facebook.com” – um site específico para dispositivos mobile hospedado no subdomínio “m”, sigla para tal utilidade.

Dentre as vantagens deste modelo, podemos citar:



  • A experiência do usuário é melhorada, haja vista que o site foi desenvolvido especificamente para o seu aparelho;

  • Maior velocidade de carregamento, haja vista que ele terá um código mais simples (se comparado ao “Responsive Layout”).


As desvantagens são:



  • A dificuldade na manutenção é elevada (se comparado ao “Responsive Layout”), haja vista que serão dois websites para se atualizar;

  • Os links não serão unificados, haja vista que serão necessários subdomínios ou subpastas para hospedar o segundo website.


Exemplos


Para ver um exemplo de website que utiliza o modelo “Responsive Layout”, acesse: http://www.tutsup.com através de um computador (como na imagem da direita) e depois acesse-o novamente através de um dispositivo móvel (ex: celular; como na imagem da esquerda). Ele deverá ser exibido como abaixo:



(Clique para ampliar)


Conseguiu ver a diferença? O site “respondeu” ao tamanho da tela do dispositivo e se ajustou de forma automática, mantendo o mesmo endereço (http://www.tutsup.com).

Como já citado acima, um exemplo de “Mobile Website” é o site do Facebook. Se acessarmos pelo computador, o link se manterá como https://www.facebook.com. Ao tentarmos acessá-lo através de um dispositivo móvel, seremos redirecionados para https://m.facebook.com, o que representa que estamos indo para outro site.


Conclusão


Caso você esteja desenvolvendo um website ou aplicação em que haverá muitos acessos de dispositivos móveis, e tenha que escolher entre uma destas opções citadas acima, será de suma importância analisar pontos como tempo disponível, disponibilidade técnica, necessidades dos usuários que o acessarão, capital disponível, dentre outros. Vale lembrar que ambas as opções são escolhas válidas e que uma não desqualifica a outra. Para alguns tipos de projeto uma se sairá melhor, e para outros tipos a outra se sairá em vantagem.


Referência:


http://www1.folha.uol.com.br/tec/2014/06/1476690-numero-de-brasileiros-que-usa-a-internet-pelo-celular-mais-que-dobra-em-dois-anos-diz-pesquisa.shtml

SOBRE O AUTOR
Vinicius Silva é Desenvolvedor Web na ATM Digital, cursa Análise e Desenvolvimento de Sistemas na FATEC Indaiatuba e atua no desenvolvimento de websites e aplicações web.