A indústria evoluiu em muitos aspectos, mas uma determinada área tem afetado a forma como construímos websites em maior medida do que qualquer outro. O aumento na Web dispositivos móveis habilitados forjou uma subcultura de visitantes que exige a adaptação dos nossos websites para satisfazer as suas necessidades. Enquanto o design móvel é ainda na sua infância (e pesquisa primária pouco sobre as tendências móveis existe), precisamos observar como esse elemento agora crítica da nossa indústria está evoluindo, e os padrões que existem a partir de esforços de desenvolvimento atual. O objetivo deste artigo é mostrar a variedade de métodos em que alguns dos sites mais populares de hoje fornecem um interativo e (espero) experiências úteis móvel para seus usuários finais. Há uma abundância de grandes nomes que foram analisados, tais como Facebook e Amazon, e você verá a abundância de gráficos útil para inspirar-nos. Com estatísticas e algumas revelações muito interessantes sobre a diversidade do design moderno, pode ser animado sobre o futuro do design Web móvel!
Figura 1: design móvel tornou-se um componente essencial de um site, sucesso compatíveis. Smashing Magazine tem uma versão móvel , também.
Dos sites que são medidos e contabilizados no âmbito do estudo, não só examinou a forma como esses sites lidar com dispositivos móveis e como os visitantes são servidos uma experiência móvel, mas também se tivessem não-Web características, tais como aplicativos móveis, que podem desempenhar um papel útil no processo. Além disso, algumas das convenções layout, opções de design, os níveis de codificação, e alguns recursos úteis específicas para websites móveis, foram medidos (para a sua existência, o seu nível de conformidade, bem como o método se comprometem).
Nota: Embora um grande esforço tem sido posto em fazer este estudo tão preciso quanto possível, o número de variáveis a ser considerada pode resultar em anomalias. Fatores, tais como websites, sem experiência móvel foram contabilizados (como tem preconceito, na medida do possível, durante o estudo).
Figura 2: O gráfico acima explica o processo deste estudo comprometeu-se a revelar os seus resultados
Quanto à metodologia para este estudo, o protocolo começa selecionando um grupo independente de sites (terceirizados) e variáveis para testar contra-muitos dos quais nunca tinham sido analisados em uma escala tão (ou em tal profundidade) anteriormente. A aprovação para os quais variáveis foram incluídas tiveram que atender a certos critérios: em primeiro lugar, os resultados tinham que ser interessante (e poderia afetar a forma como a situação do projeto móvel é visto), e também teve de ser estatisticamente significativa (que não queremos para o Estado óbvio).
Nota: Algumas variáveis foram descartados da análise final devido a uma falta de conclusivos, os resultados úteis. Um exemplo disso é o suporte para orientação (modos retrato e paisagem), como resultado de como os browsers lidam com o layout, isso se tornou um não-problema, vendo 100% suporte nativo.
Figura 3: O Google AdPlanner top 1000 sites lista é o recurso utilizado para o estudo imparcial da
Figura 4: Abundância de variáveis foram consideradas para lhe dar alguns resultados informativo para aprender
Figura 5: Emuladores foram usados para expandir o número de dispositivos físicos incluídos
Figura 6: A proporção de redirecionamentos automática contra websites desktop com suporte móvel opcional
Figura 7: A distribuição de sites que implementou um projeto móvel no subdomínio WWW
Figura 8: Como mobile-friendly websites tratados usuários de PC desktop tentando acessar o site para celular
Figura 9: Enquanto . Amazon Web site mobi móvel permanece amigável, o principal m.amazon.com redireciona os usuários de PC para o site original.
Enquanto o número de websites que empregava um script para detectar e redirecionar os visitantes para uma experiência móvel não foi tão alto quanto se poderia esperar (como muitos acreditam que o site móvel deve vir em primeiro lugar para aumentar o tempo de carregamento), uma tendência interessante, onde ocorreu todos, mas um website (answers.com) empregando uma versão móvel da experiência (no subdomínio WWW) forçou o redirecionamento de usuários de PC de volta para a visualização do desktop, sem permitir a entrada para acessar a edição móvel (se quisessem).
Figura 10: A distribuição de subdomínios móveis TLD, incluindo o nível de popularidade de extensão
Figura 11: O número de sites que não ofereceu nenhuma experiência móvel otimizada de qualquer forma
Figura 12: Um gráfico mostrando o número de subdomínios apoiado por site (em média)
Figura 13: Os níveis dos quais WAP ou WML dispositivos habilitados são apoiados ou oferecidos o acesso
Figura 14: A porcentagem de sites que redirecionam o usuário para um móvel separado TLD
Figura 15: PayPal faz uso de um site para celular que usa o m., móveis e mobi TLD domínios.
Curiosamente, enquanto muitos sites oferecidos algum tipo de experiência móvel e alguns redirecionado ao visitante, o uso de extensões. Mobi foi muito menor do que o esperado. Além disso, uma tendência incomum fez-se aparente. Ao contrário de sites de outras nações móveis, os asiáticos tenderam em direção ao uso "3G" em detrimento de "m" ou "mobile" (como o usado em outro lugar). Vale a pena mencionar, ainda, que apenas os dispositivos da Apple tiveram a sorte de receber um site dedicado usando o "toque" ou "i" subdomínio.
Figura 16: O número de sites que tinham telefone celular, aplicativos específicos (para qualquer plataforma)
Figura 17: A porcentagem de sites com um aplicativo móvel, mas sem um site mobile-friendly
Figura 18: The Internet Movie Database tem um site para celular e um iPhone app para melhorar ainda mais a experiência móvel
Embora não seja surpreendente que muitos dos 100 melhores sites tinha uma app móvel, devido à popularidade eo uso generalizado de seus serviços, o que se tornou aparente e bastante interessante é que alguns dos sites listados que não tem um celular-friendly website (em qualquer forma) ainda tinha um app. Esta tendência particular parece indicar que a transição em direção a um conjunto móvel-friendly de serviços, é baixo para o aumento da demanda por aplicativos (que ao contrário de sites para celular, não tem retorno para a função por diante).
Figura 19: A mais alta, média e vezes a mais baixa carga, calculada a partir de uma uncached "inicialização a frio."
Figura 20: A porcentagem de sites que exigem mais de 10 segundos o tempo de carregamento em uma conexão Wi-Fi
Figura 21: A porcentagem de sites que exigem menos de 3 segundos o tempo de carregamento em uma conexão Wi-Fi
Figura 22: YouTube teve um dos tempos de carregamento mais rápido para qualquer site mobile-oriented
Enquanto o cache irá produzir os tempos de carregamento substancialmente mais rápida, os resultados foram bastante conclusivas de que o tempo de carregamento de cada website foi bastante uniformemente distribuído, com apenas um pequeno número de sites com o tempo de carregamento de mais de 5 segundos (muitas vezes em tais casos, foi o resultado de lenta resposta do servidor, ao invés do conteúdo físico sendo transferidos). Como visitantes, obviamente, não querem esperar por longos períodos de tempo para obter os seus dados, um tempo de carregamento rápido e eficaz tornou-se crítica para o processo de design.
Figura 23: A mais alta, média e baixa arquivo (e bem) o tamanho calculado com o cache desligado
Figura 24: A percentagem de websites com um tamanho de ativo total uncached de mais de 100KB
Figura 25: A percentagem de websites com um tamanho de ativo total uncached de menos de 25KB
Figura 26: Softonic tinha o maior tamanho de arquivo de qualquer site móvel - um resultado bastante surpreendente!
Os resultados deste teste são bastante interessantes. Enquanto muitos sites (especialmente aqueles focados WAP para dispositivos menos capazes) precisou de menos de 25KB para funcionar, o que parece ser um número aceitável de nível tão grande de sites supostamente fornecer uma experiência móvel necessários mais de 100KB, alguns até tão alto quanto 0,5 MB! Mais interessante é a coincidência que a porcentagem de sites que possuem tamanhos de ativos de menos de 25 KB, combinados (exatamente) o percentual que exigem mais de 100KB.
Figura 27: A distribuição de Doctypes site para celular, com base em versões de idiomas e perfis
Figura 28: A porcentagem de sites usando um perfil móvel específico em detrimento de perfis de desktop
Figura 29: A porcentagem de sites que suportam uma experiência WML XHTML e cheio
Figura 30: website iPhone Dailymotion é amigável foi um dos poucos HTML5 alavancando
Os resultados mostram conclusivamente que XHTML é atualmente mais popular do HTML (ou HTML5). Isso poderia ser até falta de HTML de um perfil móvel (utilizado na maioria dos casos), embora possa ser notado que muitos smartphones suportados HTML e XHTML. Além disso, a disseminação do uso do perfil móvel versus ambiente de trabalho era bastante similar. Isso questiona a necessidade de perfis móveis, se a especificações completas são suportadas. Além disso, o site Facebook é o iPhone-friendly foi a única que não apresentou nenhuma Doctype em tudo!
Figura 31: Distribuição de validação site (no caso do CSS, as propriedades de propriedade foram ignorados)
Figura 32: A percentagem de top 100 sites com uma página inicial que valida contra a DTD escolhido
Figura 33: O site MySpace não era incomum, em que seu código fonte não validar .
Porque este checkpoint focado apenas na primeira página de mobile-friendly websites, os resultados não são tão completos quanto poderiam ser. Eles fazem sim fornecer uma boa indicação quanto ao atendimento que está sendo dado a experiências móveis. Infelizmente, os resultados parecem correlacionar-se com a pesquisa Zeldman em que a esmagadora maioria não cumpriu os padrões para o DTD que eles escolheram para se conformar também. Isto parece reforçar o fato de que o design é mais importante para os designers, que otimizações ou qualidade.
Figura 34: A porcentagem de sites usando estilo inline incorporados ao invés de arquivos externos
Figura 35: A porcentagem de sites externos usando CSS2.1 ou CSS3 dentro de seus projetos
Figura 36: A porcentagem de sites usando JavaScript jQuery externo ou dentro de seus projetos
Figura 37: Wikipedia faz uso da biblioteca jQuery no seu site para celular orientada .
Enquanto você teria pensado que a maioria dos sites que romper imediatamente o estilo eo comportamento de suas páginas para dispositivos móveis, a fim de melhorar o desempenho, um número moderado dos sites tinha todos os seus códigos diretamente ligada na página. Além disso, apenas um número raro de os sites para celular aproveitou o framework jQuery, e um número igualmente pequeno feito uso de consultas CSS3 mídia para redimensionar dinamicamente o layout. Os números para CSS3 uso foram, previsivelmente, similar ao uso do HTML5.
Figura 38: A distribuição mostrando os tipos de letra utilizado na pilha fonte primária
Figura 39: O percentual de projetos móveis sem pilha font declarado (usando padrões)
Figura 40: Um gráfico mostrando o número de fontes declaradas dentro de uma família, por site
Figura 41: m.naver.com foi um pouco mais aventureiro com os não-Websafe uso typeface
Os resultados são bastante surpreendentes. Em todos os casos onde uma família de fontes foi declarado, a categoria de tipos utilizada foi sempre sans serif (para ambos os títulos eo corpo do texto). Em nenhuma instância fez serif ou outra classificação se acostumar, e em alguns casos, nenhuma família foi declarado font em tudo (o que poderia ser devido a inconsistências em fontes disponíveis para tais dispositivos). Além disso, o número de ocasiões em que não foram construídas pilhas font-resultando no uso de padrões do sistema só foi bastante significativo.
Figura 42: Exibindo o número de cores usadas no primeiro ou segundo plano das posições
Figura 43: A distribuição dos sites usando um primeiro plano preto ou fundo branco nas posições
Figura 44: A porcentagem de sites para celular usando um fundo gradiente dentro de um cabeçalho
Figura 45: 56.com utilização de uma vasta gama de cores e contrastes dentro é títulos
Como você pode ter de esperar, a maioria dos sites exibidos na lista fez uso de preto ou branco como as cores primárias (em certos casos, tons de cinza foram usados). Esta é a razão como um método para manter a alta taxa de contraste em dispositivos de tela pequena, a fim de aumentar a legibilidade do conteúdo. Outra tendência foi descoberto o uso preferencial de gradientes dentro do fundo das posições para dar-lhes uma camada adicional de textura, em vez de usar cores sólidas ou um tamanho de texto maior.
Figura 46: Exibindo o número de cores usadas no primeiro ou segundo plano de conteúdo do corpo
Figura 47: A porcentagem de sites usando um primeiro plano em preto sobre um fundo branco no conteúdo do corpo
Figura 48: eBay usa uma relação de contraste com painéis em preto e branco para o corpo do texto, como a maioria dos websites
Dentro do conjunto de resultados anteriores para as rubricas, preto e branco mostrou-se dominante dentro do texto, a fim de manter um nível de contraste visível. Este conjunto de resultados, como se poderia esperar, segue a mesma tendência e usa menos cores adicionais na paleta. Enquanto os contrastes de cores só foram construídas a partir de uma amostra de primeira página de cada site (e, então, confrontados uns contra os outros para a comparação), os resultados mostram claramente que uma abordagem sensível à visibilidade texto foi mantido.
Figura 49: O número de sites que exigem o visitante fazer o login antes de acessar páginas
Figura 50: Facebook requer que você autenticação antes de acessar o site
Embora seja compreensível que alguns sites não exigem que os usuários se autenticarem-e isso significa que o número de registrados "logins forçada" será drasticamente reduzido os resultados deste teste são bastante chocantes. Enquanto ele deve ser considerado uma má prática de exigir logins em um site sem qualquer descrição do serviço estar presente (para celular somente o tráfego), uma série de sites populares que estavam contidos na lista de top 100 resultados positivos para fazer isso, como eles não tinha informações do site útil!
Figura 51: Um gráfico de as convenções de nomenclatura usada em várias ligações para um link site completo
Figura 52: A porcentagem de sites que não têm uma ligação retornando para o site completo
Figura 53: Daum.net permite aceder ao site completo clicando no botão "Versão PC" link
Nos resultados, alguns sites que oferecem versões móveis de seus serviços utilizados palavras comuns em suas ligações para indicar retornando para o site principal, como "site completo" ou mesmo "versão desktop." Nesses casos, não há preferência comum pode ser encontrado até mesmo embora o uso se espalhou de forma bastante equilibrada. O que é bastante surpreendente, porém, é que muitos que força redirecionado visitantes para o site móvel, recusou-se a ligação ou para permitir o acesso do site completo. Este, por sua vez limitada a capacidade de visitantes móvel para acessar alguns serviços.
Figura 54: A distribuição de websites fazer uso de texto, ícone, ou estilos com base em imagens de navegação
Figura 55: A porcentagem de navegação ícones e baseado em imagem contra texto convencional
Figura 56: A porcentagem de sites que empregam o uso de menus (ou conteúdo on demand)
Figura 57: site móvel da HP pede um menu para determinar o seu país de origem
Os resultados deste teste foram bastante conclusivos nesse site a cada simples (como você pode imaginar) tinha ligações âncora de texto padrão, embora alguns menus foram formados de texto simples. Além disso, as opções de imagem baseada em menus eram muito populares e foram realmente utilizados mais frequentemente do que baseado em ícones de navegação-que, para dispositivos que dependem de ícones que representam aplicações ou serviços, foi uma grande surpresa. Menus especiais também viu alguma popularidade, especialmente quando usado com mecanismos de conteúdo on-demand de rolagem.
Figura 58: O número de sites usando um número pequeno, médio ou grande de links na primeira página
Figura 59: A porcentagem de sites usando um grande número de links como resultado de uma convenção de menu
Figura 60: 2345.com tem uma infinidade de links dentro de sua página inicial, mas é que realmente uma coisa boa?
Ao testar os sites, os resultados foram categorizados com base no número de ligações que existiam na primeira página de um site (estes eram rotuladas como pequeno, médio ou grande de acordo com a relação de link). Para conhecer os sites que está sendo medido, os resultados indicaram que poucas ligações eram visíveis em um site móvel do que na variante de desktop (mesmo quando layouts complexos foram usados). Isto parece seguir as convenções, em que um espaço de visualização reduzida deverá deter menos informação para evitar a rolagem desnecessários, e para reduzir a complexidade.
Figura 61: O número de sites usando um número pequeno, médio ou grande de imagens na primeira página
Figura 62: A porcentagem de sites usando um grande número de imagens resultantes do ícone de navegação
Figura 63: A porcentagem de sites usando um grande número de imagens resultantes de uma imagem de navegação
Figura 64: Russian Mail.ru utiliza ícones e imagens para destacar o uso link específico dentro da página
Como você pode imaginar, em sites para celular os resultados backup muitas suposições que os sites móveis terão não só menos imagens na página, mas terá imagens mais pequenas apresentadas na tela (para combinar com o tipo de experiência disponíveis em telas pequenas). Este, por sua vez ajudou a reduzir o tamanho do arquivo em testes anteriores (eo índice de velocidade). O que torna este resultado particularmente interessante é que os sites (como o Flickr ), que orientada em torno das imagens, também seguiu essa tendência reducionista.
Figura 65: Um gráfico com o tamanho médio de um site da região clique no link (pequeno, médio ou grande)
Figura 66: A porcentagem de sites com um grande número de links, imagens e clique em grandes regiões
Figura 67: Flickr usa links de imagem para fornecer uma taxa de clique mais visíveis, para facilitar a usabilidade
Os resultados deste teste em particular foram uniformemente distribuídos, mostrando um bom número de sites usando de grande e médio porte links que garantiu a navegação pode ser realizada sem ocorrer um acidente. Enquanto esta tendência foi especialmente presente em mais sites de imagem orientada (como muitas vezes ligando ocorreu em miniaturas de imagens), houve também uma tendência interessante no qual asiática ou sites russos foram mais propensos a ter regiões menores clique (menos caracteres em palavras também reduziu a clique em região ainda mais).
Figura 68: Distribuição dos elementos horizontal (colunas ou células da tabela) dentro da viewport
Figura 69: Distribuição dos segmentos painel vertical (posições ou regras separadas) por página
Figura 70: A mais alta, média e baixa gama de blocos, tanto na coluna e distribuição do painel
Figura 71: O site Zol faz uso de blocos visíveis, o que de conteúdo separado por rubrica
Curiosamente, enquanto a maioria dos sites não tinha nenhum painéis horizontais (incluindo as células da tabela, links de navegação e outros side-by-side elementos), uma série de sites desafiou a convenção e teve lugar entre dois e oito pontos de referência dentro de uma única linha sobre viewport. Esta separação visual também foi apoiado pela forma como uma série de sites tiveram um intervalo vertical, que dividiu o conteúdo em seções separadas. Legibilidade sites mais móvel "foi aumentada devido à organização desse conteúdo.
Figura 72: A porcentagem de sites para celular usando a navegação com painéis sobre a rolagem convencionais
Figura 73: A percentagem de estouro de rolagem com base em preferência a um efeito de rolagem de página inteira
Figura 74: Yahoo divide seu conteúdo em diversos painéis que podem ser ativados sob demanda
Os resultados desse teste mostram uma falta generalizada de painéis em geral (que é representante da falta de "florescer" scripting na maioria dos sites para celular). Isso pode ter sido em parte devido à natureza dos sites em estudo (websites carteira ou showcase são mais propensos a ter mecanismos de painéis). O que é interessante, porém, é que para aumentar a simplicidade dos desenhos (como nenhum dos locais utilizados texto overflow), que também manteve um layout líquido para reduzir a complexidade de rolagem necessário.
Figura 75: Diferentes sites seguirá tendências diferentes, mas eles ainda têm semelhanças comparativas
Para garantir que os resultados não foram simplesmente um resultado do top 100 viés popularidade websites próprios, um acréscimo de 10 sites foram pesquisados também (os resultados não foram registrados como era um exercício de conformidade), a fim de ver a precisão do 100 maiores descobertas. Dentro destes eram uma mistura de diferentes tipos de site, mas a esmagadora maioria dos sites seguido práticas similares, ou fez alterações que logicamente faz sentido sob o cenário de uso. Portanto, as tendências parecem aplicar de forma consistente.
Nota: Além dos acima, vale a pena afirmar que alguns dos sites dentro do top 100 anúncios eram ou subdomínios, ou versões internacionais de um site que já foi mencionado. Enquanto isto pode ser um problema para repetir convenções, os resultados variaram bastante para qualificar a sua inclusão.
Figura 76: Alguns sites realmente gerar os seus layouts móvel usando ferramentas automatizadas como Mobify
Figura 77: designers profissionais, tais como Simon Collison pode usar CSS3 consultas de mídia para explicar tamanhos de display
Figura 78: Estudos adicionais poderiam ser realizadas em nichos específicos, como sites de jornais.
Como um número crescente de dispositivos portáteis aparecer (com renderizadores diferentes e tamanhos viewport), a forma como concebemos está sendo afetado por frameworks como jQuery, o avanço de padrões como HTML5 e CSS3, e as aplicações como estão a ser gradualmente puxado para a nuvem . Embora este estudo mostra que as tendências rudimentares existem para projetos móveis (como layouts única coluna), será interessante nos próximos anos como conta designers mais para o público em expansão móvel.
O que é isso de qualquer maneira?
Para determinar algumas das melhores práticas e tendências comuns dentro do campo cada vez maior de Web design móveis, foi realizado um estudo para analisar como sites populares lidar com fatores importantes relacionados com a arquitetura da informação e implementações de design do design de móveis. Uma vez que esta poderia ter coberto todo o número de variáveis, é importante afirmar que este estudo não vai responder a cada uma de suas perguntas, mas espero que isso pode ajudá-lo a aprender algumas coisas!
Figura 1: design móvel tornou-se um componente essencial de um site, sucesso compatíveis. Smashing Magazine tem uma versão móvel , também.
Dos sites que são medidos e contabilizados no âmbito do estudo, não só examinou a forma como esses sites lidar com dispositivos móveis e como os visitantes são servidos uma experiência móvel, mas também se tivessem não-Web características, tais como aplicativos móveis, que podem desempenhar um papel útil no processo. Além disso, algumas das convenções layout, opções de design, os níveis de codificação, e alguns recursos úteis específicas para websites móveis, foram medidos (para a sua existência, o seu nível de conformidade, bem como o método se comprometem).
Nota: Embora um grande esforço tem sido posto em fazer este estudo tão preciso quanto possível, o número de variáveis a ser considerada pode resultar em anomalias. Fatores, tais como websites, sem experiência móvel foram contabilizados (como tem preconceito, na medida do possível, durante o estudo).
Examinando as Variáveis
Antes de apresentar os resultados deste estudo, é importante para explicar algumas das variáveis e metodologia que entrou em cena para explicar como a pesquisa e os resultados foram formadas. Usando essas informações você pode esperamos reconhecer as limitações deste estudo particular, e se você realmente sentir aventureiro, talvez você poderia expandir sobre o assunto e realizar algumas de suas próprias pesquisas para ver como os resultados se aplicam em diferentes situações. Poderia fazer uma leitura interessante!Figura 2: O gráfico acima explica o processo deste estudo comprometeu-se a revelar os seus resultados
Quanto à metodologia para este estudo, o protocolo começa selecionando um grupo independente de sites (terceirizados) e variáveis para testar contra-muitos dos quais nunca tinham sido analisados em uma escala tão (ou em tal profundidade) anteriormente. A aprovação para os quais variáveis foram incluídas tiveram que atender a certos critérios: em primeiro lugar, os resultados tinham que ser interessante (e poderia afetar a forma como a situação do projeto móvel é visto), e também teve de ser estatisticamente significativa (que não queremos para o Estado óbvio).
Nota: Algumas variáveis foram descartados da análise final devido a uma falta de conclusivos, os resultados úteis. Um exemplo disso é o suporte para orientação (modos retrato e paisagem), como resultado de como os browsers lidam com o layout, isso se tornou um não-problema, vendo 100% suporte nativo.
Protocolo para Seleção de Sites
Escolher um grupo de sites para analisar, é claro, uma parte crítica do processo. Para eliminar o potencial de viés ou para focar em um nicho, foi decidido que o top 100 sites representados através de lista do Google AdPlanner seria um candidato adequado. Enquanto a lista de 1000 sites e realizada o estudo poderia ser facilmente expandida, usamos a inicial de 100 websites para receber uma boa amostra e para fornecer a variedade suficiente para os resultados de referência. Este nível é usado como qualificador para resultados estatisticamente significativos. Figura 3: O Google AdPlanner top 1000 sites lista é o recurso utilizado para o estudo imparcial da
Variáveis (por categoria)
Os resultados deste estudo não seria nada sem as suas variáveis. Ao decidir o que testar contra, o foco tornou-se duplo: como a experiência móvel é ativado, e como que funciona a experiência. Como os visitantes são direcionados para uma experiência móvel tornou-se digno de atenção, devido ao número crescente de implementações que existem. Em segundo lugar, foi vital para testar essas páginas para garantir que eles representaram para a velocidade, largura de banda, tamanho da tela, telas sensíveis ao toque, e outras práticas recomendadas.Figura 4: Abundância de variáveis foram consideradas para lhe dar alguns resultados informativo para aprender
Margens para erro
Como acontece com qualquer estudo, há sempre uma possibilidade de erro ou viés para ocorrer. Para evitar que muitos destes problemas quanto possível, não só os websites de forma independente origem, mas todos os testes foi realizada em uma máquina desktop, vários dispositivos handheld, e uma série de emuladores (isso ocorreu em cada site). Seguindo esta prática reforçou os resultados (evitando números errados), e os testes foi verificada em duas datas distintas para garantir que a experiência resultou de práticas consistentes.Figura 5: Emuladores foram usados para expandir o número de dispositivos físicos incluídos
E Nossa pesquisa diz ... os Resultados
Agora que todos os princípios (a forma como o estudo foi realizado) foram explicados, está na hora de descer para as coisas realmente interessantes - os resultados! Você deve estar preparado para a abundância de quadros e gráficos, e alguns dos resultados podem ser realmente surpreendente. Nós dividido cada tipo de resultado em sua própria subseção e forneceram várias maneiras os resultados podem ser interpretados, por isso espero que as conclusões deste estudo será bastante evidente. Sem mais delongas, vamos ao que interessa!Método de Acesso
Dentro deste teste foi importante para determinar se uma experiência móvel foi feito aparente para um usuário imediatamente. Quando um usuário visita um site pró-ativa que eles querem ser informados de que seu dispositivo seja suportado, ou que o site regular de carga. Neste teste não só analisou se um redirecionamento ou detecção do dispositivo ocorreu, mas também se a experiência móvel foi fornecido no site padrão (ao invés de um subdomínio), e se um PC regular poderia mudar para a versão móvel também.Figura 6: A proporção de redirecionamentos automática contra websites desktop com suporte móvel opcional
Figura 7: A distribuição de sites que implementou um projeto móvel no subdomínio WWW
Figura 8: Como mobile-friendly websites tratados usuários de PC desktop tentando acessar o site para celular
Figura 9: Enquanto . Amazon Web site mobi móvel permanece amigável, o principal m.amazon.com redireciona os usuários de PC para o site original.
Enquanto o número de websites que empregava um script para detectar e redirecionar os visitantes para uma experiência móvel não foi tão alto quanto se poderia esperar (como muitos acreditam que o site móvel deve vir em primeiro lugar para aumentar o tempo de carregamento), uma tendência interessante, onde ocorreu todos, mas um website (answers.com) empregando uma versão móvel da experiência (no subdomínio WWW) forçou o redirecionamento de usuários de PC de volta para a visualização do desktop, sem permitir a entrada para acessar a edição móvel (se quisessem).
Uso móvel TLD
Este segundo teste teve como objetivo determinar o uso de convenções TLD em design de móveis. A fim de manter o alcance dos resultados tão rigorosas quanto possível, apenas subdomínios (como m.) e do. Mobi TLD foram considerados (juntamente com websites dedicados móvel). Como tal caminhos, o diretório do domínio WWW como "/ mobile /" não foram considerados. As possíveis implicações deste resultado pode mostrar a popularidade para o. Mobi TLD, e tendências que possam existir no uso de subdomínios em sites móveis.Figura 10: A distribuição de subdomínios móveis TLD, incluindo o nível de popularidade de extensão
Figura 11: O número de sites que não ofereceu nenhuma experiência móvel otimizada de qualquer forma
Figura 12: Um gráfico mostrando o número de subdomínios apoiado por site (em média)
Figura 13: Os níveis dos quais WAP ou WML dispositivos habilitados são apoiados ou oferecidos o acesso
Figura 14: A porcentagem de sites que redirecionam o usuário para um móvel separado TLD
Figura 15: PayPal faz uso de um site para celular que usa o m., móveis e mobi TLD domínios.
Curiosamente, enquanto muitos sites oferecidos algum tipo de experiência móvel e alguns redirecionado ao visitante, o uso de extensões. Mobi foi muito menor do que o esperado. Além disso, uma tendência incomum fez-se aparente. Ao contrário de sites de outras nações móveis, os asiáticos tenderam em direção ao uso "3G" em detrimento de "m" ou "mobile" (como o usado em outro lugar). Vale a pena mencionar, ainda, que apenas os dispositivos da Apple tiveram a sorte de receber um site dedicado usando o "toque" ou "i" subdomínio.
Telefone móvel Apps
Embora este teste não foi tanto sobre o tipo de código prestados em navegadores, pareceu prudente determinar quantos sites pesquisados na lista fornecida uma aplicação móvel para dispositivos como iDevices, Android ou Blackberry. Os resultados deste teste basta olhar para a presença de um aplicativo móvel, a plataforma em si não é levado em conta. Com tantos aplicativos com conectividade Web, os resultados deste teste realmente empurrar as barreiras de acesso em encontrar como móveis-friendly de um site é.Figura 16: O número de sites que tinham telefone celular, aplicativos específicos (para qualquer plataforma)
Figura 17: A porcentagem de sites com um aplicativo móvel, mas sem um site mobile-friendly
Figura 18: The Internet Movie Database tem um site para celular e um iPhone app para melhorar ainda mais a experiência móvel
Embora não seja surpreendente que muitos dos 100 melhores sites tinha uma app móvel, devido à popularidade eo uso generalizado de seus serviços, o que se tornou aparente e bastante interessante é que alguns dos sites listados que não tem um celular-friendly website (em qualquer forma) ainda tinha um app. Esta tendência particular parece indicar que a transição em direção a um conjunto móvel-friendly de serviços, é baixo para o aumento da demanda por aplicativos (que ao contrário de sites para celular, não tem retorno para a função por diante).
Tempo de carregamento médio
No próximo teste, sentimos que era importante para medir o tempo de carregamento de cada site para ver como móveis consideração as experiências para as restrições de largura de banda e velocidades temperamental do usuário da Web média. Para os fins deste estudo, cada uma das vezes foram registrados através de uma conexão Wi-Fi (não um fluxo 3G ou Edge devido a algum uso emulador, para garantir resultados equilibrados) e foram feitas usando um formato uncached, portanto, o tempo de carregamento seria preciso incluir os recursos externos.Figura 19: A mais alta, média e vezes a mais baixa carga, calculada a partir de uma uncached "inicialização a frio."
Figura 20: A porcentagem de sites que exigem mais de 10 segundos o tempo de carregamento em uma conexão Wi-Fi
Figura 21: A porcentagem de sites que exigem menos de 3 segundos o tempo de carregamento em uma conexão Wi-Fi
Figura 22: YouTube teve um dos tempos de carregamento mais rápido para qualquer site mobile-oriented
Enquanto o cache irá produzir os tempos de carregamento substancialmente mais rápida, os resultados foram bastante conclusivas de que o tempo de carregamento de cada website foi bastante uniformemente distribuído, com apenas um pequeno número de sites com o tempo de carregamento de mais de 5 segundos (muitas vezes em tais casos, foi o resultado de lenta resposta do servidor, ao invés do conteúdo físico sendo transferidos). Como visitantes, obviamente, não querem esperar por longos períodos de tempo para obter os seus dados, um tempo de carregamento rápido e eficaz tornou-se crítica para o processo de design.
Tamanho casa de Ativos Página
Junto com o tempo que levou para carregar uma página, em igual medida tornou-se imediatamente óbvio que o tamanho dos arquivos e quaisquer recursos externos carregados devem ser medidos. Internet móvel com muitos planos de serviços ter tampado e navegação internacionais potencialmente se tornar proibitivamente caro (pelo megabyte), parecia justo para determinar como cada site foi otimizado e se a quantidade de dados carregados uncached era tão pequeno, ou grande, como um regular área de trabalho orientada website.Figura 23: A mais alta, média e baixa arquivo (e bem) o tamanho calculado com o cache desligado
Figura 24: A percentagem de websites com um tamanho de ativo total uncached de mais de 100KB
Figura 25: A percentagem de websites com um tamanho de ativo total uncached de menos de 25KB
Figura 26: Softonic tinha o maior tamanho de arquivo de qualquer site móvel - um resultado bastante surpreendente!
Os resultados deste teste são bastante interessantes. Enquanto muitos sites (especialmente aqueles focados WAP para dispositivos menos capazes) precisou de menos de 25KB para funcionar, o que parece ser um número aceitável de nível tão grande de sites supostamente fornecer uma experiência móvel necessários mais de 100KB, alguns até tão alto quanto 0,5 MB! Mais interessante é a coincidência que a porcentagem de sites que possuem tamanhos de ativos de menos de 25 KB, combinados (exatamente) o percentual que exigem mais de 100KB.
Declarações Doctype
Ao produzir um site, uma das perguntas iniciais nos perguntamos é, o idioma ou versão de que a linguagem que melhor atenderá às necessidades de nossos conteúdos. Os debates sobre HTML vs XHTML foram infinitas, e como muitas variantes para celular (os perfis móveis para XHTML e WML), ficou claro que as estatísticas relacionadas com os tipos de DTD mais utilizado pode ser benéfica para os leitores. Este teste, portanto, examinou o Doctype de primeira página para ver se algum padrão de uso de existir.Figura 27: A distribuição de Doctypes site para celular, com base em versões de idiomas e perfis
Figura 28: A porcentagem de sites usando um perfil móvel específico em detrimento de perfis de desktop
Figura 29: A porcentagem de sites que suportam uma experiência WML XHTML e cheio
Figura 30: website iPhone Dailymotion é amigável foi um dos poucos HTML5 alavancando
Os resultados mostram conclusivamente que XHTML é atualmente mais popular do HTML (ou HTML5). Isso poderia ser até falta de HTML de um perfil móvel (utilizado na maioria dos casos), embora possa ser notado que muitos smartphones suportados HTML e XHTML. Além disso, a disseminação do uso do perfil móvel versus ambiente de trabalho era bastante similar. Isso questiona a necessidade de perfis móveis, se a especificações completas são suportadas. Além disso, o site Facebook é o iPhone-friendly foi a única que não apresentou nenhuma Doctype em tudo!
Validação de código
Com a Web semântica e da necessidade de nossa indústria para manter os padrões, este teste seguiu um estudo anterior por Jeffrey Zeldman em que um grande número de websites foram colocados através de um simples "passar ou falhar" teste contra a validação. Enquanto a pesquisa Zeldman centrou-se na parte superior Alexa 100, este pedaço de curso utilizado um conjunto diferente de dados. Enquanto padrões não são o estar-todo e extremidade-todo de design, este teste foi incluído para fornecer comparações adicionais quanto à conformidade palco para a semântica estavam.Figura 31: Distribuição de validação site (no caso do CSS, as propriedades de propriedade foram ignorados)
Figura 32: A percentagem de top 100 sites com uma página inicial que valida contra a DTD escolhido
Figura 33: O site MySpace não era incomum, em que seu código fonte não validar .
Porque este checkpoint focado apenas na primeira página de mobile-friendly websites, os resultados não são tão completos quanto poderiam ser. Eles fazem sim fornecer uma boa indicação quanto ao atendimento que está sendo dado a experiências móveis. Infelizmente, os resultados parecem correlacionar-se com a pesquisa Zeldman em que a esmagadora maioria não cumpriu os padrões para o DTD que eles escolheram para se conformar também. Isto parece reforçar o fato de que o design é mais importante para os designers, que otimizações ou qualidade.
Separação de código
O próximo teste que foi realizado ligações muito fortemente em alguns dos que foram anteriormente realizados. A separação da estrutura, estilo e comportamento tem sido mostrado para ter benefícios na redução tamanhos de arquivos (devido à codificação evitando repetir, e às vantagens cache). Parecia, portanto, direito de ver não só se fez sites de estilo separada sua ou de comportamento, mas também se aproveitou CSS3 ou jQuery no projeto móvel para fornecer um comportamento mais dinâmico dentro do layout do site.Figura 34: A porcentagem de sites usando estilo inline incorporados ao invés de arquivos externos
Figura 35: A porcentagem de sites externos usando CSS2.1 ou CSS3 dentro de seus projetos
Figura 36: A porcentagem de sites usando JavaScript jQuery externo ou dentro de seus projetos
Figura 37: Wikipedia faz uso da biblioteca jQuery no seu site para celular orientada .
Enquanto você teria pensado que a maioria dos sites que romper imediatamente o estilo eo comportamento de suas páginas para dispositivos móveis, a fim de melhorar o desempenho, um número moderado dos sites tinha todos os seus códigos diretamente ligada na página. Além disso, apenas um número raro de os sites para celular aproveitou o framework jQuery, e um número igualmente pequeno feito uso de consultas CSS3 mídia para redimensionar dinamicamente o layout. Os números para CSS3 uso foram, previsivelmente, similar ao uso do HTML5.
Tipos de Família da fonte
Tipografia é um elemento essencial da Web, e de como a informação é visualizada. Este teste em particular foi criado não só para ver quais fontes Websafe estão sendo implementadas na Web, mas para ver o que famílias de fontes estão sendo usados. Além disso, os sites que contam com o padrão typefaces, por não prestar uma pilha de letra (ou que tem uma pilha com vários tipos de letras), seria notado. Os elementos para que este teste foi criado não só com base em títulos, mas em todos os tipos de conteúdo na página.Figura 38: A distribuição mostrando os tipos de letra utilizado na pilha fonte primária
Figura 39: O percentual de projetos móveis sem pilha font declarado (usando padrões)
Figura 40: Um gráfico mostrando o número de fontes declaradas dentro de uma família, por site
Figura 41: m.naver.com foi um pouco mais aventureiro com os não-Websafe uso typeface
Os resultados são bastante surpreendentes. Em todos os casos onde uma família de fontes foi declarado, a categoria de tipos utilizada foi sempre sans serif (para ambos os títulos eo corpo do texto). Em nenhuma instância fez serif ou outra classificação se acostumar, e em alguns casos, nenhuma família foi declarado font em tudo (o que poderia ser devido a inconsistências em fontes disponíveis para tais dispositivos). Além disso, o número de ocasiões em que não foram construídas pilhas font-resultando no uso de padrões do sistema só foi bastante significativo.
Contrastes título
Desde a evolução do celular, a capacidade de ter telas coloridas com tanta profundidade e clareza como um PC desktop (usando gráficos de alta definição) aumentou a capacidade para nos dar a nossos títulos e conteúdo as cores do arco-íris, tanto no primeiro plano e em segundo plano. Este teste foi adicionado ao estudo, a fim de ver se quaisquer tendências existiu, o intervalo ao qual a cor é usada no interior das posições, e para determinar se sites para celular fez uso de efeitos de fundo, como cores degradê.Figura 42: Exibindo o número de cores usadas no primeiro ou segundo plano das posições
Figura 43: A distribuição dos sites usando um primeiro plano preto ou fundo branco nas posições
Figura 44: A porcentagem de sites para celular usando um fundo gradiente dentro de um cabeçalho
Figura 45: 56.com utilização de uma vasta gama de cores e contrastes dentro é títulos
Como você pode ter de esperar, a maioria dos sites exibidos na lista fez uso de preto ou branco como as cores primárias (em certos casos, tons de cinza foram usados). Esta é a razão como um método para manter a alta taxa de contraste em dispositivos de tela pequena, a fim de aumentar a legibilidade do conteúdo. Outra tendência foi descoberto o uso preferencial de gradientes dentro do fundo das posições para dar-lhes uma camada adicional de textura, em vez de usar cores sólidas ou um tamanho de texto maior.
Conteúdo corpo Contrastes
A capacidade de mostrar cor em nossos projetos é fundamental para como nós sutilmente influenciar nossos visitantes. Continuando a partir do teste anterior destinados a títulos, desta vez envolveu o exame das cores usadas no título elementos não-nível e determinar quais as cores que eles usaram. Como este tem um grande impacto dentro de acessibilidade e do escopo geral do projeto, uma mistura de novos conhecimentos visível e variantes de fundo foram registradas (embora, como com o teste anterior, os resultados foram limitados para a página inicial).Figura 46: Exibindo o número de cores usadas no primeiro ou segundo plano de conteúdo do corpo
Figura 47: A porcentagem de sites usando um primeiro plano em preto sobre um fundo branco no conteúdo do corpo
Figura 48: eBay usa uma relação de contraste com painéis em preto e branco para o corpo do texto, como a maioria dos websites
Dentro do conjunto de resultados anteriores para as rubricas, preto e branco mostrou-se dominante dentro do texto, a fim de manter um nível de contraste visível. Este conjunto de resultados, como se poderia esperar, segue a mesma tendência e usa menos cores adicionais na paleta. Enquanto os contrastes de cores só foram construídas a partir de uma amostra de primeira página de cada site (e, então, confrontados uns contra os outros para a comparação), os resultados mostram claramente que uma abordagem sensível à visibilidade texto foi mantido.
Autenticação Necessária
Muitos lugares exigem visitantes para login antes de pleno acesso a um serviço é concedido. Na maioria dos sites desktop, um monte de informação é fornecida sem que o usuário precisar ser registrado (explicando características ou detalhes de contato). No entanto, uma tendência interessante pareciam existir em que os usuários móveis eram esperados ter uma conta e saber o que fez o serviço, como se o site para celular eram simplesmente uma característica do bônus do serviço (assim, apenas oferecendo um formulário de login). O objetivo deste teste foi para ver se este era o caso.Figura 49: O número de sites que exigem o visitante fazer o login antes de acessar páginas
Figura 50: Facebook requer que você autenticação antes de acessar o site
Embora seja compreensível que alguns sites não exigem que os usuários se autenticarem-e isso significa que o número de registrados "logins forçada" será drasticamente reduzido os resultados deste teste são bastante chocantes. Enquanto ele deve ser considerado uma má prática de exigir logins em um site sem qualquer descrição do serviço estar presente (para celular somente o tráfego), uma série de sites populares que estavam contidos na lista de top 100 resultados positivos para fazer isso, como eles não tinha informações do site útil!
Retornando a um site completo
O próximo teste dependia inteiramente da capacidade do site para celular de seguir requisitos comuns e devolver o visitante de volta para um site não-otimizados, mediante solicitação. Embora a experiência de um site móvel será o suficiente para alguns, é importante perceber que algumas pessoas podem não ajustar bem a nova interface do usuário ou um pode solicitar funcionalidades que só existe no site principal, e oferecendo um mecanismo de retorno vale a pena. O teste também teve como objetivo descobrir as convenções de nomenclatura usada para representar este link (se houver).Figura 51: Um gráfico de as convenções de nomenclatura usada em várias ligações para um link site completo
Figura 52: A porcentagem de sites que não têm uma ligação retornando para o site completo
Figura 53: Daum.net permite aceder ao site completo clicando no botão "Versão PC" link
Nos resultados, alguns sites que oferecem versões móveis de seus serviços utilizados palavras comuns em suas ligações para indicar retornando para o site principal, como "site completo" ou mesmo "versão desktop." Nesses casos, não há preferência comum pode ser encontrado até mesmo embora o uso se espalhou de forma bastante equilibrada. O que é bastante surpreendente, porém, é que muitos que força redirecionado visitantes para o site móvel, recusou-se a ligação ou para permitir o acesso do site completo. Este, por sua vez limitada a capacidade de visitantes móvel para acessar alguns serviços.
Convenções de navegação
Este teste foi focado sobre o que poderia ser considerado um dos elementos mais importantes de um website. Um esquema de navegação bem sucedida pode ser a diferença entre uma interface fácil de usar, e um website complexo e potencialmente utilizáveis. Ao efectuar este teste, quatro tipos de convenções de navegação foram conferidos para ver se eles estavam sendo usados na home page (a maioria dos sites utilizados mais de uma): links de texto, baseado em ícones de navegação, links de imagens e menus especiais (tais como dropdowns ou painéis).Figura 54: A distribuição de websites fazer uso de texto, ícone, ou estilos com base em imagens de navegação
Figura 55: A porcentagem de navegação ícones e baseado em imagem contra texto convencional
Figura 56: A porcentagem de sites que empregam o uso de menus (ou conteúdo on demand)
Figura 57: site móvel da HP pede um menu para determinar o seu país de origem
Os resultados deste teste foram bastante conclusivos nesse site a cada simples (como você pode imaginar) tinha ligações âncora de texto padrão, embora alguns menus foram formados de texto simples. Além disso, as opções de imagem baseada em menus eram muito populares e foram realmente utilizados mais frequentemente do que baseado em ícones de navegação-que, para dispositivos que dependem de ícones que representam aplicações ou serviços, foi uma grande surpresa. Menus especiais também viu alguma popularidade, especialmente quando usado com mecanismos de conteúdo on-demand de rolagem.
Início Relação Link de Página
Ter uma quantidade relativamente pequena de espaço pode ser um problema real em dispositivos móveis e, portanto, o potencial para confusão quanto às opções de navegação, e quantas ligações são fornecidas, pode, potencialmente, aumentar a dificuldade para os usuários a conhecer a extensão do local onde suas escolhas irão chumbo. Se um site tem muitos links (ou muito poucos), a escolha pode rapidamente sobrecarregar sentido de um usuário de perspectiva. Como tal, parecia valer a pena para ver quantas opções foram fornecidos na forma de links em uma única página.Figura 58: O número de sites usando um número pequeno, médio ou grande de links na primeira página
Figura 59: A porcentagem de sites usando um grande número de links como resultado de uma convenção de menu
Figura 60: 2345.com tem uma infinidade de links dentro de sua página inicial, mas é que realmente uma coisa boa?
Ao testar os sites, os resultados foram categorizados com base no número de ligações que existiam na primeira página de um site (estes eram rotuladas como pequeno, médio ou grande de acordo com a relação de link). Para conhecer os sites que está sendo medido, os resultados indicaram que poucas ligações eram visíveis em um site móvel do que na variante de desktop (mesmo quando layouts complexos foram usados). Isto parece seguir as convenções, em que um espaço de visualização reduzida deverá deter menos informação para evitar a rolagem desnecessários, e para reduzir a complexidade.
Proporção da imagem de ouro
Imagens em um site móvel pode ser um assunto complicado, uma vez que estes dispositivos muitas vezes exigem mais largura de banda do que qualquer outra coisa e, portanto, pode reduzir o tempo de carregamento. Dentro deste teste, a tendência do uso de pequenas, médias e grandes como uma representação do número de imagens na página foram utilizadas, semelhante ao teste de link. Focado principalmente na página inicial, o montante necessário para se enquadram em cada categoria foi reduzida como a maioria dos websites, naturalmente manter ligações mais texto do que imagens (por página, em média).Figura 61: O número de sites usando um número pequeno, médio ou grande de imagens na primeira página
Figura 62: A porcentagem de sites usando um grande número de imagens resultantes do ícone de navegação
Figura 63: A porcentagem de sites usando um grande número de imagens resultantes de uma imagem de navegação
Figura 64: Russian Mail.ru utiliza ícones e imagens para destacar o uso link específico dentro da página
Como você pode imaginar, em sites para celular os resultados backup muitas suposições que os sites móveis terão não só menos imagens na página, mas terá imagens mais pequenas apresentadas na tela (para combinar com o tipo de experiência disponíveis em telas pequenas). Este, por sua vez ajudou a reduzir o tamanho do arquivo em testes anteriores (eo índice de velocidade). O que torna este resultado particularmente interessante é que os sites (como o Flickr ), que orientada em torno das imagens, também seguiu essa tendência reducionista.
Região Clique no link
O objetivo deste teste foi ir além da mera presença de links (com fotos e links) e para examinar como os grandes da região, clique na verdade, estava na página. Com dispositivos móveis e telas pequenas apoio sensibilidade ao toque, há uma necessidade de manter as regiões ligação clique em tão grande quanto possível para garantir a acessibilidade e usabilidade de tais dispositivos (para ajudar com grandes dedos imprecisos). A escala utilizada seguiu pequenas, médias ou grandes, e focado sobre o tamanho clique no link em comparação com outros elementos na página.Figura 65: Um gráfico com o tamanho médio de um site da região clique no link (pequeno, médio ou grande)
Figura 66: A porcentagem de sites com um grande número de links, imagens e clique em grandes regiões
Figura 67: Flickr usa links de imagem para fornecer uma taxa de clique mais visíveis, para facilitar a usabilidade
Os resultados deste teste em particular foram uniformemente distribuídos, mostrando um bom número de sites usando de grande e médio porte links que garantiu a navegação pode ser realizada sem ocorrer um acidente. Enquanto esta tendência foi especialmente presente em mais sites de imagem orientada (como muitas vezes ligando ocorreu em miniaturas de imagens), houve também uma tendência interessante no qual asiática ou sites russos foram mais propensos a ter regiões menores clique (menos caracteres em palavras também reduziu a clique em região ainda mais).
Colocação Ratios bloco
O próximo teste olhou para o layout visual da página e examinou a forma como o projeto foi dividido em blocos físicos ou visuais de informação. Vale a pena afirmar que todos os sites medidos utilizado um layout de coluna única, mas que a maneira em que as ligações e segmentos de conteúdo são divididos pode dar a indicação visual de separação, que valeu a pena examinar mais. Como websites móveis exigem rolagem muito mais do que websites desktop, a separação de blocos torna-se mais críticas para a identidade visual.Figura 68: Distribuição dos elementos horizontal (colunas ou células da tabela) dentro da viewport
Figura 69: Distribuição dos segmentos painel vertical (posições ou regras separadas) por página
Figura 70: A mais alta, média e baixa gama de blocos, tanto na coluna e distribuição do painel
Figura 71: O site Zol faz uso de blocos visíveis, o que de conteúdo separado por rubrica
Curiosamente, enquanto a maioria dos sites não tinha nenhum painéis horizontais (incluindo as células da tabela, links de navegação e outros side-by-side elementos), uma série de sites desafiou a convenção e teve lugar entre dois e oito pontos de referência dentro de uma única linha sobre viewport. Esta separação visual também foi apoiado pela forma como uma série de sites tiveram um intervalo vertical, que dividiu o conteúdo em seções separadas. Legibilidade sites mais móvel "foi aumentada devido à organização desse conteúdo.
Experiência de rolagem
O teste final foi incluído como uma representação de como a rolagem é experiente dentro do site móvel. As variáveis analisadas incluíram o número de dedos necessários para iniciar um rolo (como quando rola o conteúdo usando um estouro, dois dedos, em vez de uma são necessárias), e se a janela floresce apoiou a fantasia de jQuery, JavaScript, ou CSS3 no fornecimento de painéis de rolagem , onde painéis de conteúdo iria rodar em intervalos específicos, ou seções poderiam ser roladas pelo pedido.Figura 72: A porcentagem de sites para celular usando a navegação com painéis sobre a rolagem convencionais
Figura 73: A percentagem de estouro de rolagem com base em preferência a um efeito de rolagem de página inteira
Figura 74: Yahoo divide seu conteúdo em diversos painéis que podem ser ativados sob demanda
Os resultados desse teste mostram uma falta generalizada de painéis em geral (que é representante da falta de "florescer" scripting na maioria dos sites para celular). Isso pode ter sido em parte devido à natureza dos sites em estudo (websites carteira ou showcase são mais propensos a ter mecanismos de painéis). O que é interessante, porém, é que para aumentar a simplicidade dos desenhos (como nenhum dos locais utilizados texto overflow), que também manteve um layout líquido para reduzir a complexidade de rolagem necessário.
Indo além do básico
Enquanto a amostra utilizada se constitui um vasto leque de presenças na Web, é importante notar que diferentes nichos podem produzir diferentes níveis de resultados. Por exemplo, um estudo sobre as mesmas variáveis sobre sites que atuam principalmente como portfolio de um designer (como indicado nos resultados) irá, obviamente, conta para as necessidades de uso diferentes, e, portanto, a experiência pode variar. Dito isso, as tendências que os sites empregam fazer carregam uma semelhança de muitos outros (e, portanto, pode ser considerado como confiável).Figura 75: Diferentes sites seguirá tendências diferentes, mas eles ainda têm semelhanças comparativas
Para garantir que os resultados não foram simplesmente um resultado do top 100 viés popularidade websites próprios, um acréscimo de 10 sites foram pesquisados também (os resultados não foram registrados como era um exercício de conformidade), a fim de ver a precisão do 100 maiores descobertas. Dentro destes eram uma mistura de diferentes tipos de site, mas a esmagadora maioria dos sites seguido práticas similares, ou fez alterações que logicamente faz sentido sob o cenário de uso. Portanto, as tendências parecem aplicar de forma consistente.
Nota: Além dos acima, vale a pena afirmar que alguns dos sites dentro do top 100 anúncios eram ou subdomínios, ou versões internacionais de um site que já foi mencionado. Enquanto isto pode ser um problema para repetir convenções, os resultados variaram bastante para qualificar a sua inclusão.
Fatores comuns at Play
Os fatores comuns que foram amplamente implementados incluiu a tendência de usar scripts para redirecionar os usuários móveis-friendly, de preferência a dar aos visitantes uma escolha (que é interessante, pois constitui uma faca de dois gumes em termos de usabilidade). Além disso, a tendência de subdomínios também seguiram um padrão bem trilhado, a fim de ser reconhecido facilmente por usuários finais. Um exemplo final, que mostra os fatores comuns, é a questão lamentável que alguns de código dos sites 'validado! Figura 76: Alguns sites realmente gerar os seus layouts móvel usando ferramentas automatizadas como Mobify
Modelos para outros gêneros
Expandir este estudo através de uma coorte de diferentes tipos de website podem ter variadas diferenças quanto à forma como as tendências são implementadas. Exemplos incluem o aumento do uso de CSS3 e "floresce" em sites de portfolio, um número reduzido de aplicativos móveis em sites de pequenas empresas, e aumento na quantidade de autenticação necessária se o estudo fosse aplicado principalmente para redes sociais. Além disso, se um site é mais conteúdo focado (como Smashing Magazine), um aumento no tamanho do arquivo vai ser um efeito colateral óbvio. Figura 77: designers profissionais, tais como Simon Collison pode usar CSS3 consultas de mídia para explicar tamanhos de display
Melhorias potenciais
Tomar este estudo para a frente, melhorias poderiam ser feitas. Enquanto os sites foram testados utilizando uma gama de dispositivos móveis reais incluindo um Apple iPhone4, um dispositivo Blackberry, um dispositivo Nokia, utilizando um telefone WinMo, e um par de telefones usando o Android, um maior nível de compatibilidade pode ser estabelecida se um aumento do número de dispositivos foram utilizados (excluindo emuladores). Além disso, uma maior gama de websites podem impulsionar a exactidão dos resultados (como se todos os 1.000 sites foram testados). Figura 78: Estudos adicionais poderiam ser realizadas em nichos específicos, como sites de jornais.
O Futuro do Design Móveis
Tão interessantes como estes resultados são, esperamos que eles vão inspirar você não apenas para acompanhar as tendências de design, mas a procurá-los. Enquanto a Web pode ser ainda em sua infância, design móveis é, literalmente, apenas alguns anos de idade. Isto significa que as tendências provavelmente vai evoluir cada vez mais rapidamente, assim como mais estudos de usabilidade e pesquisas adicionais são realizados para determinar como as necessidades dos usuários estão sendo atendidos. O futuro do design Web móvel é uma indústria para cima e chegando, e precisamos pagá-lo muita atenção.Como um número crescente de dispositivos portáteis aparecer (com renderizadores diferentes e tamanhos viewport), a forma como concebemos está sendo afetado por frameworks como jQuery, o avanço de padrões como HTML5 e CSS3, e as aplicações como estão a ser gradualmente puxado para a nuvem . Embora este estudo mostra que as tendências rudimentares existem para projetos móveis (como layouts única coluna), será interessante nos próximos anos como conta designers mais para o público em expansão móvel.
