Um olhar sobre o design para dispositivos móveis
Quando o primeiro iPhone foi lançado, levou o mundo da tecnologia pela tempestade. Desde então, foram quase 5 anos e o mercado de smartphones cresceu em popularidade, com até mesmo a Microsoft entrando na competição com seu sistema operacional Windows 7 e parceiros. Com tantos usuários da Internet em seus smartphones hoje em dia, é senso comum esperar que o número de sites móveis aumente agressivamente.
No entanto, projetar para a web móvel é uma operação completamente diferente com o design da web comum. Nossos sites são projetados para telas enormes, mas o tamanho da tela do smartphone é muito pequeno comparado a isso, o que leva a problemas de usabilidade irritantes.. Novos padrões e práticas de design são muito necessários para um melhor design de site para dispositivos móveis com uma experiência de usuário tranquila.
Neste guia, procuraremos criar um site fácil de usar para os navegadores móveis do smartphone. Eu estarei falando sobre as melhores práticas e a ferramenta útil do desenvolvedor para você projetar um melhor site para dispositivos móveis, então vamos entrar depois do salto!
Planejando uma forte experiência do usuário
Quando você cria um site para celular, é importante mantenha seus usuários em mente em todos os momentos, em última análise, o seu site está sendo projetado e criado para os usuários desfrutarem. É certamente comum que os usuários esperem que um site para dispositivos móveis se comporte de maneira semelhante ao ambiente de área de trabalho. mantendo a experiência do usuário amigável deve ser seu foco principal ao criar um site para celular bem-sucedido.
Existem muitos conceitos de usabilidade a serem considerados para seus usuários. Estas considerações incluem tamanho da tela, imagens inline, hiperlinks, tamanhos de fonte, e navegação de páginas. Escrevemos sobre o design de usabilidade em dispositivos móveis para você esculpir seu site para melhor usabilidade. Além do guia, você precisa sempre mantenha-se alerta para novas ideias para melhorar seu site.
Planejar uma experiência de usuário forte também significa que você deve considere como um usuário estará interagindo com seu website. Em um desktop, seu website pode interagir com um mouse e um teclado, mas em um smartphone os usuários serão batendo, sacudindo, e passando seu caminho em torno de seu site. Você provavelmente precisa projetar o site da maneira que os usuários podem acesse as informações do site facilmente com esses movimentos físicos.
Mantenha as páginas curtas e doces
A carne e batatas de qualquer site é o Conteúdo da página. Cada uma das suas páginas da web detém quantidades significativas de informações úteis para seus usuários, como texto, fotos ou vídeos. Você também encontrará artigos de notícias e postagens de blog que são executados em algumas páginas, o que pode ajudar a dividir o texto, mas não é recomendado para dispositivos móveis como a técnica. requer mais carregamento de página, o que significa mais tempo de espera no lado do usuário.
A menos que seja absolutamente necessário, recomendo mantendo o conteúdo da sua página curto. Você também deve considerar fazer com que pareça doce estilizando a fonte para um tamanho muito maior e talvez afastando as imagens. Com o seu conteúdo em exibição completa, naturalmente atrai atenção, para não mencionar que a otimização realmente torna a digitalização das páginas muito mais simples. Esta é também a razão pela qual layout de coluna única cabe perfeitamente.
Na maioria dos casos, os navegadores móveis não carregam as páginas da web tão rapidamente quanto os navegadores de desktop e isso pode incomodar seus leitores. É por isso que você precisa otimizar o conteúdo e o site para carregamento de conteúdo de alta velocidade. Você também pode encurtar o artigo, mantendo todo o conteúdo, ou simplesmente remova imagens desnecessárias. Coloque seu foco na simplicidade em vez de beleza.
Sua principal navegação é o salva-vidas dos visitantes que querem se mover entre as páginas. Em um dispositivo móvel, os links da tela parecerão muito menores por natureza, portanto, muito mais difícil de tocar. Um ajuste essencial para resolver esta questão é maximize a fonte e o espaço para seus links de navegação, talvez ocupando toda a área do bloco. Alternativamente, você pode projetar a barra de navegação para ser semelhante à barra de abas do aplicativo real do iPhone, como o mostrado acima.
Construindo Estilos CSS Móveis
Agora que sabemos como otimizar o website para dispositivos móveis para melhor legibilidade e usabilidade, seria bom falar sobre os estilos CSS. Cada folha de estilo CSS contém muitos seletores com propriedades relacionadas a fontes, tamanhos, posicionamento e configurações de exibição. Quando se trata de celular, você deve prestar atenção como seus blocos se encaixam.
(Fonte da imagem: Smashing Magazine)
Uma área para começar é redefinir as larguras do wrapper do seu site em porcentagem. É comum usar pixels como unidade de posicionamento, altura da linha, tamanho da fonte e largura da div, mas quando se lida com celular, você quer que suas páginas sejam fluido e transição entre cada dispositivo naturalmente. Definir divs de contêiner para 100% de largura permitirá que o conteúdo seja preencha facilmente entre o modo retrato / paisagem sem passar pela borda.
Se você é uma das pessoas que querem reestruturar todo o layout, certifique-se de bateu tudo com um restabelecer. Além disso parágrafos, cabeçalhos e links de navegação devem ser todos display: bloco; então você tem aquele sentimento de estilo de impressão linear. Reposicione as margens e o preenchimento para remover o inchaço do layout. Evite mesas se possível, uma vez que estes tendem a renderizar erros entre dispositivos.
Imagens grandes também são um incômodo entre dispositivos. A maioria das imagens do seu site será renderizada com mais de 480 pixels e talvez você não queira que elas quebrem o contêiner. A primeira opção é defina sua largura em 100% para que as imagens possam redimensionar naturalmente. Certamente é possível crie diferentes conjuntos de imagens para o seu site e processá-los de forma diferente com base no agente do navegador, mas honestamente isso apenas adiciona mais trabalhos do seu lado, então tente use a técnica somente quando for realmente necessário.
Criando sites para o iPhone
A quota de mercado móvel é bastante grande e dividida, mas a Apple tem uma grande fatia do bolo com seus iDevices. Tanto o iPhone quanto o iPad são dispositivos móveis prontos para Internet com funcionalidade de tela de toque integrada. Eles apresentam o mesmo navegador da Web padrão, o Safari, e uma série de outras opções.
Para sites específicos do iPhone, você precisará segmentar o tamanho da tela. O tamanho da tela fixa está definido como 320 px por 480 px para modelos mais antigos do iPhone e 640 px por 960 px para iPhone 4 e iPhone 4S.
As telas do iPhone estão limitadas ao espaço. Você devia ter um bloco de conteúdo que se estende por quanto tempo for necessário. Mantendo elementos em uma única coluna você vai economizar dores de cabeça e permitir um layout fluido para “preencher” modos retrato e paisagem. Para isso, você provavelmente precisará desenvolver outro modelo e encontrar uma maneira de verificar se o visitante está usando um iPhone. O pequeno snippet PHP abaixo deve funcionar bem:
Basicamente, a lógica puxa nosso mundo $ _SERVER variável para o agente HTTP e verifica se a palavra “Iphone” aparece em qualquer lugar. Se sim, então sabemos que o nosso visitante está usando um iPhone e, a partir daí, podemos colocar HTML ligeiramente diferente ou até mesmo um layout de modelo totalmente novo! Isso também poderia ser usado para incluir uma folha de estilo específica do iPhone, alterar os títulos das páginas, remover imagens ou quase todos os efeitos dinâmicos.
Quando se trata de servir novos estilos, há um caminho mais fácil. Como mencionado anteriormente, o tamanho máximo da tela para o iPhone é de 960 pixels de largura. Portanto, com novas consultas de mídia CSS3, você pode adicionar estilos diretamente na folha de estilo principal do seu site só exibir no iPhone. Abaixo está um pequeno código de exemplo:
@media screen e (max-device-width: 960px) / * iPhone css * /
Isso funciona porque CSS agora pode detectar agentes de navegação e suas propriedades. A largura máxima da tela é uma das propriedades que também podem ser detectadas.
Não é muito difícil projetar o website para dispositivos móveis para dispositivos iPhone, há muitos exemplos para se referir, por exemplo, iPhone em CSS. Mantenha-se ocupado estudando e não tenha medo de experimentar novas técnicas no design da interface do usuário.
JQuery Scripting Móvel
Maioria dos desenvolvedores web front-end estão familiarizados com a biblioteca jQuery. Ele oferece uma abreviação fantástica para efeitos de codificação, animações, menus suspensos e uma série de outras funcionalidades no navegador, e fica ainda mais impressionante com o anúncio do jQuery Mobile. Isto é Não é recomendado pular diretamente na tecnologia e carregar o seu site com efeitos em todos os lugares, mas para fins de teste a funcionalidade avançada pode jogar muito bem.
O jQuery Mobile é um pouco diferente do jQuery regular, pois oferece um ambiente completo para você construir. Quando você trabalha com seus arquivos, eles não são apenas JavaScript, mas também estilos CSS para botões, links e efeitos de transição. Você ainda está escrevendo páginas da Web em código HTML, mas a equipe do jQuery Mobile Forneceu muitos recursos de design de interface do usuário opcionais. Há muita coisa que podemos fazer com essa estrutura, mas desde o framework ainda está em beta, vamos nos ater a efeitos simples.
Um pequeno tutorial no blog do DevGrow fornece alguns exemplos impressionantes. O site oficial também oferece demonstrações para você experimentar. Observe que estamos usando o atributo HTML, transição de dados para adicionar efeitos de animação com qualquer um dos valores predefinidos. Estes incluem slide, pop, flip, fade, etc. Confira o pequeno exemplo de DevGrow para ter um gostinho desses efeitos.
Os efeitos e transições são bem legais, e o fato de você poder construir uma interface móvel inteira estritamente com jQuery também é um grande passo para essa plataforma, mas com a plataforma apenas em beta eu não recomendaria construir todo o seu site móvel com sua biblioteca, especialmente com o fato de que é não suportado por todos os principais smartphones no momento da escrita (particularmente o Windows Phone 7), mas certamente ficará melhor com o tempo.
Por fim, recomendo familiarizar-se com este novo framework móvel antes implantando ao vivo em qualquer projeto.
Ferramentas úteis para desenvolvedores
Os desenvolvedores de dispositivos móveis não estão apenas procurando recursos de codificação e design. Há também uma alta demanda por ferramentas de software e IDEs, sem mencionar os poderosos frameworks móveis. O desenvolvimento da Web é uma tarefa difícil, que exige muita dedicação, mas o uso de ferramentas adicionais facilitará muito o seu trabalho..
Emulador Opera Mobile
Procurando uma maneira de verificar como o site para celular está sendo processado? Isso pode ser um grande problema se você não tiver um smartphone com acesso à Internet. Ou você simplesmente não deseja usar seu smartphone para testar o site toda vez que uma atualização é enviada ao seu servidor. Bem, o Opera Mobile Emulator é um fantástico software para testar seu site para celular.
O emulador suporta cerca de 20 perfis móveis como o Samsung Galaxy S, o HTC Desire e até tablets como o Motorola Xoom. Também é possível definir resolução personalizada e densidade de pixels para fins de teste intensivo. O melhor de tudo, você não precisa fazer muito trabalho de configuração, basta fazer alguns cliques e você está pronto para ir.
O download é totalmente gratuito e o software é executado no ambiente Mac OS X e Windows. Seus desenvolvedores trabalham arduamente para criar padrões adequados da web e aprimorar seu mecanismo de renderização móvel. Eu recomendo suas outras ferramentas de desenvolvimento se você está procurando ferramentas extras para ajudá-lo ao longo do caminho.
PhoneGap
Não houve muitas APIs desenvolvidas em HTML5 para criar aplicativos móveis sólidos. Notavelmente, o cenário móvel tem faltado esses tipos de sites, e é exatamente por isso que o PhoneGap preenche o nicho tão bem. Sua plataforma permite que você facilmente Construa aplicativos baseados em HTML5 como aplicativos nativos em 6 plataformas diferentes.
O processo funciona primeiro compactando seu código e passando-o pela estrutura de aplicativo do PhoneGap. A partir daí, seus aplicativos podem alcançar uma grande parte do mercado de dispositivos móveis, incluindo Android, iOS, Windows Phone 7 e BlackBerry.
Se você está um pouco confuso, não se preocupe muito. Suas páginas de suporte descrevem claramente o processo e oferecem links para recursos úteis. Os aplicativos que já foram desenvolvidos foram compilados em um belo portfólio de estilo de biblioteca. Confira a coleção de aplicativos completa, que você pode classificar por dispositivos com capturas de tela.
Estúdio Aptana
O site do Aptana é o melhor local para aprender sobre suas ferramentas de desenvolvimento. A versão mais recente do pacote, Aptana 3.0.3, possui um IDE totalmente integrado para desenvolvimento web, estilos CSS e aninhamento de tags HTML, e a melhor parte: Aptana é completamente livre baixar! Eles oferecem pacotes para todos os 3 principais sistemas operacionais (incluindo o Linux), o que é uma grande conveniência para os desenvolvedores.
O que torna o Aptana especial é a rapidez com que você pode desenvolver um pequeno aplicativo da Web e testar seu design. A suíte de estúdio permite que você Desenvolver e testar rapidamente um aplicativo da Web executando Ruby on Rails, PHP, Python ou simplesmente HTML / CSS, e seus recursos de realce de código foram aprimorados recentemente para incluir novas bibliotecas de tags HTML5 e CSS3. Ele também vem com integração Git, um terminal embutido, depurador de código e um punhado de outros recursos interessantes..
Kits e ícones de GUI para celular
Qual seria a web sem brindes por aí? Para os web designers, a importância da interface do usuário está acima de tudo. Simples GUIs são difíceis de encontrar e apenas os designers mais criativos criaram soluções de trabalho.
No entanto, existem muitos recursos gratuitos, mas de qualidade, disponíveis para o seu web designer testar. Esses kits de GUI são projetados principalmente para o Adobe Photoshop ou Fireworks, onde você pode mover elementos e exportá-los como arquivos de imagem simples..
Os ícones são um recurso muito útil para se ter. Os designers estão criando conjuntos gratuitos e oferecendo-os on-line com mais frequência do que nunca. Um desses sites Glyphish tem uma vitrine de ícones gratuitos e profissionais. Esses designs são baseados em um único tema a ser usado em modelos de dispositivos móveis e designs de aplicativos.
Nossa coleção de modelos de prototipagem de dispositivos móveis será uma grande ajuda para você ao longo da jornada de desenvolvimento de sites e aplicativos. Você não deve iniciar a codificação até ter uma interface gráfica forte e esses kits da Web iniciarão o caminho certo.
Kit GUI do iOS 5
Elementos do vetor da interface do usuário do iPhone
Kit de ícone de aplicativo para iPhone
Ímãs de wireframe (kit de bricolage)
Interface gráfica do Android
