5 coisas que você precisa saber antes de criar seu site mobile

Site Mobile

O mundo mobile vem ganhando cada vez mais espaço. É fácil perceber que é enorme a quantidade de celulares e tablets vendidos atualmente. Redes de acesso móvel à internet também são constantemente aprimoradas, possibilitando aos usuários navegar na  web a partir de qualquer lugar. Faz tempo que não é preciso estar em frente a um desktop para poder vasculhar a internet.

Marcar presença no mercado mobile é extremamente importante. Para fazer isso da maneira eficaz, separamos cinco dicas que irão te ajudar a entender melhor as características da internet móvel.

Responsive Design e Media Queries

Responsive Design é uma das grandes tendências em webdesign. Essa prática consiste no desenvolvimento de sites que sejam capazes de se adaptar às diferentes telas.

Se o seu site for ‘responsivo’, você poderá visualizá-lo sem muitos problemas tanto na tela do computador, quanto na tela do seu celular ou tablet. Para que seja possível identificar a partir de qual tela o site está sendo acessado, a linguagem Cascading Style Sheet (CSS) implementou um recurso conhecido como Media Queries.

Por meio das Media Queries o CSS descobre qual é o tamanho da tela e direciona uma determinada folha de estilos para a exibição do seu site. Se você acessar, por exemplo, o site por um laptop de 13′, o media query poderá aplicar uma folha de estilo com resolução de 1024 pixels com fontes no tamanho 12px. Agora se o acesso for feito por um tablet de 7′, ele usará uma folha de estilo de aproximadamente 500 pixels de largura com fontes 16px, por exemplo. Essas características das folhas de estilo CSS são definidas durante o desenvolvimento do site.

Com esse recurso, também é possível descobrir a orientação do dispositivo mobile, ou seja, se ele está sendo utilizado na vertical ou na horizontal. Isso ajuda a organizar elementos na página.

Não miniaturize, crie móbile

Se o design responsivo trouxe um grande avanço para a webmobile, ele também foi responsável por uma das piores práticas nesse mercado. Justamente pelo fato de que o CSS permite que o site se adapte à tela, muitos desenvolvedores acabam criando miniaturas do site original.

Isso é feito ao definir uma folha de estilos que exiba o site em uma tela menor, mantendo a mesma estrutura e organização da página. Muitas vezes, programadores e designers desenvolvem páginas para telas grandes e depois replicam versões menores dela com as Media Queries. Essa prática não é recomendada pois provoca um efeito de achatamento de informações ao usar da maneira errada o pouco espaço disponível na tela.

Ao desenvolver um site mobile, torne ele específico para esse meio. Existem inúmeras diferenças de usabilidade entre um laptop e um dispositivo móvel. É preciso levar isso em consideração ao desenvolver para mobile. Procure criar uma versão exclusiva do seu site para celulares e tablets. Você pode manter a mesma identidade visual, mas a organização das informações na tela obedece conceitos diferentes da web comum.

UX – Hot Zones dos aparelhos

Isso nos leva de encontro à questão da usabilidade, ou User Experience (UX). De um modo geral, a navegação em tablets e celulares é feita com os dedos. Portanto, ao usar o celular na posição vertical você terá somente o dedão para realizar interações na tela. Isso porque os outros dedos da mão estão ocupados segurando o aparelho. Se você utilizar o celular com as duas mãos, provavelmente o fará com o aparelho na posição horizontal. Nesse caso, os dedões das duas mãos estarão livres para interagir com a tela, conferindo mais agilidade à navegação.

A área em que o dedão alcança em cada uma das posições é chamada de Hot Zone. Se você colocar links de navegação, que exigem interação do usuário, fora dessas áreas você estará obrigando-o a interagir com os outros dedos. Isso é desconfortável e pode gerar desistência. É por esse motivo que a navegação de um site no desktop não pode ser a mesma de um site mobile. Pense muito em UX quando desenvolver seu site mobile.

Imagens de vários tamanhos

Imagine que seu site tenha um display de notícias na home. Fotos grandes e bonitas, acompanhadas de manchetes com links para as matérias. Lindo para um site desktop. No site mobile, provavelmente você veria somente um pedaço dessa foto enorme e nenhuma manchete para chegar até a matéria.

Cada tamanho de site exige um dimensionamento diferente para as imagens que o compõe. Por isso será preciso salvar várias versões de cada imagem do seu site e especificar com os Media Queries quais delas serão exibidas em quais tipos de tela.

Além disso, você pode utilizar imagens vetoriais, que se ajustam facilmente a vários tamanhos. Isso poupa um pouco do trabalho ao redimensionar dezenas, até centenas, de imagens.

Desempenho é muito importante

Desempenho é um dos pontos mais importantes em qualquer site. Contudo, quando falamos de mobile temos um agravante. Apesar das redes de 3G e 4G estarem em constante evolução, elas possuem muita latência de sinal. São poucas as pessoas que possuem conexões perfeitamente estáveis em seus mobiles.

Por isso, quanto mais leve for o seu site, melhor! Otimize o desempenho dele, utilize compressão de páginas e folhas de estilos, invista na velocidade e não faça tantas requisições ao servidor.

Esses cinco pontos o ajudarão a ponderar os gastos e os esforços no seu projeto de site mobile. Apesar de parecerem simples, são extremamente essenciais. Utilize os cinco itens tendo em mente que qualidade é um diferencial competitivo, não se esqueça disso! Investir em um site mobile com excelente usabilidade significa estar no caminho certo para obter ótimos retornos!

Fonte: LocaWeb

O que são os padrões Web ?

Padrões Web é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C.

 

É destinado a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos.

A Web em padrões:

Divisão em Camadas

O correto é fazer divisões em camadas, como mostrado na figura abaixo:

Observação: Trabalhar com Web Standards (a padronização é a criação de uma “Web universal”) não é uma questão de trocar tabelas por div’s e sim uma questão de semântica!

Framework CSS – Grid 960

Grid 960

O framework nada mais é que estruturas de códigos definidos onde um projeto de software, seja ele web ou não, pode ser criado e desenvolvido. Os frameworks podem incluir programas de suporte, bibliotecas de códigos, linguagens de scripts ou qualquer outro tipo de software para auxiliar no desenvolvimento.

Eles foram projetados para auxiliar no desenvolvimento de softwares, auxiliando designers e programadores a gastar menos tempo com desenvolvimento.

Em CSS (Folha de estilo em cascata) os frameworks geralmente são um conglomerado de arquivos CSS com coisas base para tipografia, estrutura de layout e menu. Sua utilização deve ser muito cuidadosa, pois utilizar frameworks em desenvolvimento XHTML e CSS pode não trazer a mesma produtividade do que um framework para PHP, JavaScript. É importante que o desenvolvedor saiba ler e compreender o código que ele está escrevendo.

Resumindo: os frameworks para CSS trata-se de uma biblioteca pré-configurada, cujo seu objetivo é facilitar a criação de layouts o mais próximo possível dos padrões web (W3C).

O que é o 960 Grid System ?

O 960 Grid System ou Grid 960 é um framework CSS usado para agilizar o trabalho dos desenvolvedores para web, organizando a página como uma GRID “Grade” usando dimensões com base em uma largura de 960px. Existem três opções de divisão para essa grid, que são 12, 16 e 24 colunas.

O 960 Grid busca resolver problemas relacionados à organização do layout, o que para os programadores FRONT-END geralmente é um desafio. Esse framework facilita a organização dos elementos na tela, de forma compatível com todos os navegadores modernos.

Características da divisão de colunas

• 12 Colunas: A grid é dividida em 12 colunas, com largura de 60px cada uma e com um espaçamento de 10px na direita e na esquerda de cada uma.
• 16 Colunas: A grid é dividida em 16 colunas, com largura de 40px cada uma e com um espaçamento de 10px na direita e na esquerda de cada uma.
• 24 Colunas: A grid é dividida em 24 colunas, com largura de 30px cada uma e com um espaçamento de 10px na esquerda e na direita de cada uma.

Por exemplo:

Este slideshow necessita de JavaScript.

Devemos ou não utilizar?

Vantagens sobre o uso do 960 Grid Systems

Entre as principais vantagens defendidas pelos adeptos do uso de frameworks como o 960 Grid, está no aumento de produtividade. Por possuir classes pré prontas e um esquema de colunas bem definido, fica muito fácil e rápido para o desenvolvedor de FRONT-END fazer seu trabalho.

Um outro aspecto importante é a diminuição das incompatibilidades entre os browsers (navegadores), visto que as classes fornecidas com o 960 Grid ou Grid 960 já forma criadas pensando nesses aspectos. Isso não significa que o terrível IE (Internet Explorer) não lhe causará problemas, mas sim eles serão bem menores.

Contras do uso do 960 Grid

Se você está iniciando no trabalho com CSS e ainda não possui experiência em codificação, não acho que seja indicado o uso de um framework. Aprenda tudo o que puder sobre o CSS, faça projetos, resolva problemas de incompatibilidade, e só depois disso utilize frameworks. Desta maneira a Grid 960 será um recurso para melhorar seu trabalho e não uma muleta sem a qual você não consegue codificar.

Um outro aspecto levantado por aqueles não apoiam a utilizam do uso de frameworks CSS, está no fato de que isso pode restringir o processo criativo na hora de desenvolver seu layout. Afinal de contas, você vai ver que para codificar um layout usando uma grid é necessário que o mesmo tenha sido desenvolvido dentro do modelo de colunas fornecido pela ferramenta e que o layout esteja contido dentro de uma largura de 960 pixels.

Baixando o 960 Grid

Vá até o site Grid960 e faça o download do projeto. Na pasta que você vai baixar estarão vários arquivos, mas os que nos interessam são os seguintes:

code: aqui estão os códigos que usaremos em nossos trabalhos assim como um demo que mostra o grid  960 em ação.

• sketch_sheets: aqui tem alguns modelos para imprimir e usar na construção de nossos wireframes.
• templates: modelo que será usado no photoshop ou outro programa com as colunas do framework.

Utilizando o Grid na fase de Layout

Como já explicado acima, o Grid 960 nos fornece um modelo para ser utilizado na produção de nosso layout. Sendo assim, clique em templates e abra no photoshop. Na pasta estarão três arquivos ou modelos, cada um com um número pré-definido de colunas contendo 12,15 e 24. Escolha um arquivo com o número de colunas que mais se encaixe ao seu projeto. Por exemplo: se o seu layout possui três chamadas na home, a melhor opção será o modelo com 12 colunas, visto que 12 dividido por 3 dará 4 colunas iguais para cada chamada. Já o modelo de 16 se encaixa melhor em layouts com 4 chamadas. Veja abaixo os exemplos:

Como mostrado acima, você tem total liberdade para utilizar a grid, contanto que se lembre de manter o layout dentro de 960 pixels e não coloque o início dos elementos nos espaços em branco que vemos entre as colunas que são chamados de gutters.

Outro aspecto importante que devemos citar é que ao abrir o arquivo PSD extensão do Photoshop você verá que além das colunas em vermelho, como mostradas acima, também teremos as grids do photoshop delimitando o início e o fim de cada uma das colunas.

O que fazer depois do Layout ?

Essa resposta é simples, é hora da codificação do nosso HTML e da folha de estilo o CSS. Aqui começa a parte mais interessante do uso da grid. Mas para podermos começar a utiliza-la primeiro devemos criar um link para as folhas de estilo que o Grid 960 nos fornece. Para isso, insira dentro da tag <head> do seu HTML os seguintes links:

1. <link type=”text/css” rel=”stylesheet” href=”css/reset.css”/>
2. <link type=”text/css” rel=”stylesheet” href=”css/text.css”/>
3. <link type=”text/css” rel=”stylesheet” href=”css/960.css”/>

O primeiro link chama o reset fornecido pelo grid o que nos ajuda a resetar os estilos pré definidos pelo navegador/browser. Desta maneira evitamos inconsistências entre browsers.

O segundo link chama o CSS responsável pelos estilos aplicados às fontes utilizadas no site. Isso nos ajuda a trabalhar o texto separado do resto do conteúdo e da estrutura do nosso layout. Não é obrigatório, mas costuma manter seu trabalho mais organizado.

Por fim temos o Grid que é chamado no terceiro link. Se você abrir este arquivo vai ver que ele basicamente possui várias classes que controlam o número de colunas utilizadas no nosso layout.

Entendendo as classes do Grid 960

1. contaner_12, container_16 ou container_24: aqui o container que manterá nosso trabalho dentro dos 960 pixels e que também será responsável por centralizar nosso layout no browser/navegador. Se seu site foi criado em 12 colunas utilizaremos a classe .container_12 e se foi feito em 16 o contêiner_16 e assim sucessivamente.
2. grid_1, grid_2, grid_3(…..): essas são as classes responsáveis por controlar as colunas. Sempre devemos utilizá-las dentro de div’s com classe container_xx. Segue alguns exemplos de seu uso:

topo com 12 colunas

O topo do site acima servirá como nosso exemplo. Como você pode ver ao contar as colunas, temos aqui um layout de 12 colunas. Se fosse codificar este site iria primeiramente criar uma div com a classe container_12, a fim de centralizar o conteúdo do site. Logo em seguida criaria duas div’s, sendo que a primeira para o logo que se encontra à esquerda e a segunda para os textos à direita.

A primeira div receberia a classe grid_4, visto ser este o número de colunas que o logo ocupa (na largura) e a segunda div receberia a classe grid_8, que corresponde às colunas restantes dentre as 12 que tenho para trabalhar.

Dentro da div com a classe grid_4 colocaria a imagem do logo e dentro da segunda div, os títulos de cabeçalhos e parágrafos. O mesmo raciocínio se aplicará aos demais elementos presentes neste layout.

Conclusão

Como podemos ver, esse framework pode acelerar nosso processo de produção e ajudar-nos a resolver problemas chatos de posicionamento em codificações tabeless (sem o uso de tabelas). 

Framework Twitter BootStrap

O Twitter Bootstrap é uma livre coleção de ferramentas para a criação de sites e aplicações web, sendo assim, um framework de desenvolvimento front-end (visualização direto do usúario). Ele contém HTML e CSS, modelos de design para tipografias, formulários, botões, gráficos, navegação e outros componentes de interface.

Sua Origem

O Bootstrap foi desenvolvido por Mark Otto e Jacob Thornton no Twitter como um quadro para incentivar a consistência entre as ferramentas internas. Antes dele diversas bibliotecas foram utilizadas para desenvolvimento de interface, o que levou a inconsistências e uma carga de manutenção alta. 

A primeira implantação em condições reais aconteceu durante a primeira hackweek do twitter, onde Mark Otto mostrou a alguns colegas como acelerar seu desenvolvimento de projetos com a ajuda do kit de ferramentas. Como resultado obtido dezenas de equipes mudaram para o quadro.

Lançamento como Open-Source (códigos fontes abertos)

Em agosto de 2011 o Twitter Bootstrap foi lançado como open-source, sabendo que em fevereiro de 2012, virou o projeto mais popular de desenvolvimento GitHub ( é um site de colaboração de desenvolvimento de códigos computacionais).

As características do BootStrap

O bootstrap tem o apoio relativamente completo para o HTML5 e CSS3, mas é compatível com todos os principais navegadores.

Estrutura e função

O bootstrap é modular e consiste essencialmente de uma série de folhas de estilos. A folha de estilo chamada bootstrap.less inclui componentes de estilos, sendo assim, os desenvolvedores podem usar, adaptar o próprio arquivo, selecionar os componentes que deseja utilizar em seu projeto. Os ajustes são possíveis de forma limitada através de um estilo de configuração central.

Sistema de grade e design responsivo

O bootstrap vem com 940 pixels de largura e com layout em grid que nada mais é que o fornecimento de uma grade aonde possa organizar os conteúdos de forma consistente, tendo como alternativa para que o desenvolvedor possa usar um layout de largura variável.

Entendendo a Folha de Estilos (CSS)

O bootstrap oferece um conjunto de folhas de estilo que fornecem definições básicas para todos os componentes HTML chaves, sendo assim, fornecendo aparência uniforme e moderna para a formatação de texto, tabelas e elementos de formulários.

Exemplo de Site que utilizou o framework bootstrap

exemplo de site que utilizou o bootstrap