Móvel primeiro. Do Mobile First ao Mobile Native: o que é importante lembrar para desenvolvedores que focam apenas em smartphones

Lar / Tecnologias

Vamos criar uma navegação de site simples e responsiva. Nossa solução nos ajudará a focar contente nossa página, que talvez seja a principal prioridade no desenvolvimento para dispositivos móveis. Não haverá nenhum JavaScript envolvido aqui, mas abordaremos isso usando uma abordagem Mobile First.

Navegação móvel

Um design responsivo perfeitamente aceitável, mas em tamanhos de visualização móvel padrão (320 x 480 pixels), tudo o que você realmente vê é o menu de navegação. Certamente, apenas abrindo página inicial, eu gostaria de ver algo diferente disso. London & Partners não são os únicos com esse problema; essa prática é vista em muitos designs responsivos em toda a web.

Então, quais são as soluções?

Já conhecemos algumas maneiras de contornar isso, como contar com jQuery para nos ajudar a descobrir. Veja a explicação de Chris Coyier sobre o menu suspenso Cinco etapas simples.



Tela grande, tela pequena.

COM usando jQuery um menu duplicado é criado como uma lista suspensa, inicialmente ocultada da visualização usando CSS. Quando as consultas de mídia detectam uma tela menor, elas tornam o menu suspenso visível e a navegação original invisível. Esta é uma solução ideal para dispositivos móveis, já que as listas suspensas ocupam um espaço mínimo e usam recursos especiais. interface do usuário dispositivos (por exemplo, um scroller em um iPhone).

Além disso, você pode ocultar sua navegação, mas entrar no modo de visualização ao pressionar o botão "menu". Você pode ver esse efeito em ação no Bootstrap mais recente do Twitter.


Telas menores ocultam links de navegação e exibem um ícone de “lista” (que rapidamente passou a ser percebido como um “menu”) que mostra a navegação quando clicado. Novamente, os visitantes móveis recebem o máximo de conteúdo possível e têm opções de navegação disponíveis, se assim desejarem.


Solução CSS Pura

Usaremos a técnica discutida por Lucas, que envolve usando CSS e a abordagem Mobile First. O que queremos dizer com o termo “abordagem Mobile First”? Simplificando, vamos desenvolver um layout móvel direto e depois melhorar gradualmente o design para telas maiores. Usaremos consultas de mídia que detectam tamanhos de tela cada vez maiores, adicionando gradualmente estilo e funcionalidade.

Isso significa que ao visualizar um design em um dispositivo móvel, apenas o mínimo de CSS e recursos será carregado. Isso também significa que versões mais antigas do IE (que não reconhecem consultas de mídia) serão apresentadas na versão móvel do site. Confira Deixando o antigo Internet Explorer para trás, de Joni Korpi, para obter mais informações sobre isso.

1. Marcação

Explicarei as ideias por trás desta solução à medida que avançamos, então, por enquanto, vamos esboçar algumas marcações, começando com um documento HTML5 em branco.

Navegação responsiva primeiro para dispositivos móveis

Feito isso, vamos adicionar alguma estrutura de página. Pontos diretamente necessários e tudo mais para efeitos da nossa demonstração. Usei o preenchimento de texto Monty Python do Holy Grail (obrigado Chris Valleskey), que é de um jeito bom traga um sorriso ao seu rosto enquanto trabalha :)

Azul de navegação. Não, sim...

Cale-se! Você vai calar a boca?! Mas você está vestido como um... Camelot! Você não vota em reis.

Queremos um arbusto!!

Olha, minha mentira! Cale-se! Mas você está vestido como um...

  • O nariz?
  • Shh! Cavaleiros, dou-lhes as boas-vindas à sua nova casa. Vamos cavalgar até Camelot!
  • Olha, minha mentira!
Socorro, socorro, estou sendo reprimido!

Por que? Ouvir. Mulheres estranhas deitadas em lagos distribuindo espadas não são base para um sistema de governo. O poder executivo supremo deriva de um mandato das massas, e não de alguma cerimônia aquática ridícula. Fique quieto! Uma salamandra?!--invólucro final-->

2. Layout de navegação

Montamos uma página html básica, então agora é hora da atração principal; nossa navegação principal..

Sim, você viu tudo corretamente - adicionamos na linha 68 depoisúltimo artigo. Não se esqueça que atualmente estamos desenvolvendo para dispositivos móveis, mais tarde veremos a versão desktop. Colocamos a navegação no final da nossa página, o que parece um tanto estranho. Agora vamos colocar um link no topo da nossa página para que os usuários possam encontrar a navegação, se desejarem.

Navegação Menu

3.Redefinir CSS

Dependendo de como você normalmente inicia projetos web, esta etapa pode ser diferente do seu fluxo de trabalho normal. Sempre fui da opinião de que a reinicialização de Eric Meyer é um ponto de partida sólido, especialmente porque ele a revisou recentemente. Adicionaremos suas regras de redefinição à folha de estilo para iniciar nosso css:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NOTA: TRABALHO EM ANDAMENTO USE COM CUIDADO E TESTE COM ABANDONO */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , sigla, endereço, grande, citar, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeno, greve, forte, sub, sup, tt, var, b, u, i, centro , dl, dt, dd, ol, ul, li, fieldset, formulário, rótulo, legenda, tabela, legenda, tbody, tfoot, thead, tr, th, td, artigo, aparte, tela, detalhes, figcaption, figura, rodapé , cabeçalho, hgroup, menu, navegação, seção, resumo, hora, marca, áudio, vídeo (margem: 0; preenchimento: 0; borda: 0; contorno: 0; tamanho da fonte: 100%; fonte: herdar; vertical- alinhar: linha de base ) /* Redefinição da função de exibição HTML5 para navegadores mais antigos */ artigo, aparte, detalhes, figcaption, figura, rodapé, cabeçalho, hgroup, menu, nav, seção ( display: block; ) body ( line-height: 1; ) ol, ul ( estilo de lista: nenhum; ) blockquote, q ( aspas: nenhum; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) / *lembre-se de destacar as inserções de alguma forma! */ ins (decoração de texto: nenhum;) del (decoração de texto: passagem de linha;) tabela (colapso de borda: colapso; espaçamento de borda: 0;)

4. Estilos básicos

Sobre no momento nossa página parece muito chata.


Então, vamos melhorar a situação adicionando alguns estilos simples.

/*começar nossos estilos*/ body ( font: 16px/1.4em "PT Sans", sans-serif;; color: #1c1c1c; ) p, ul ( margin: 0 0 1.5em; ) ul ( list-style: disc ; preenchimento: 0 0 0 20px ) a ( cor: #1D745A; ) h1 ( ) h2 ( família de fontes: "PT Serif", serif; tamanho da fonte: 32px; altura da linha: 1,4em; margem: 0 0 .4em; peso da fonte: negrito ) /*layout*/ .wrapper ( ) artigo ( border-bottom: 1px sólido #d8d8d8; preenchimento: 10px 20px 0 20px; margem: 10px 0; ) /*cabeçalho*/ cabeçalho ( plano de fundo: #1c1c1c; preenchimento: 15px 20px ) /*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/ header:before, header:after ( content:""; display:table; ) header :after ( clear:both; ) /* Para IE 6/7 (trigger hasLayout) */ header ( zoom:1; ) h1.logo a ( color: #d8d8d8; text-decoration: none; font-weight: negrito; transformação de texto: tamanho da fonte: 20px; float: esquerda; espaçamento entre letras: 0,2em;

tamanho da fonte: 12px;


peso da fonte: negrito; altura da linha: 22px; altura: 22px; transformação de texto: maiúscula; espaçamento entre letras: 0,1em; -webkit-border-radius: 2px;-moz-border-radius: 2px; raio da borda: 2px; ) a.to_nav:hover, a.to_nav:focus ( cor: #1c1c1c; fundo: #ccc; ) Estes são todos os princípios básicos (fontes, alturas de linha, cores, etc.), mas o que é realmente importante é que desenhei o botão "menu" à direita, dentro do , exatamente onde você esperaria vê-lo. Se você passar o mouse sobre ele, verá um estado congelado - é claro que isso não é necessário para dispositivos com tela sensível ao toque

, mas uma natureza de ação semelhante será transferida para versões incompatíveis


Internet Explorer

. O que nós

determinado

/*navegação*/ #primary_nav ul ( list-style: none; background: #1c1c1c; padding: 5px 0; ) #primary_nav li a ( display: block; padding: 0 20px; color: #fff; text-decoration: none ; peso da fonte: negrito; espaçamento entre letras: 0,1em; altura da linha: 2em; borda inferior: 1px sólido) #primary_nav li :last-child a (border-bottom: none; ) #primary_nav li a:hover, #primary_nav li a:focus ( color: #1c1c1c; background: #ccc; ) /*footer*/ footer ( font-family: " PT Serif", serif; font-style: itálico; text-align: center; font- tamanho: 14px);

Muito melhor. Tornamos os links do menu bonitos e grandes (leia o blog Touch Target Sizes de Luke Wroblewski para obter mais detalhes) e redefinimos state:focus para feedback do usuário.


6. Crescendo

Ok, trabalhamos com nosso modelo móvel simples, mas agora é hora de melhorias mais avançadas. Usaremos consultas de mídia para determinar quando nosso layout móvel não é mais adequado.

Mas em que ponto isso se torna assim? Há muitas maneiras de abordar consultas de mídia, mas trabalharemos com base no fato de que a janela de visualização móvel tem 320 x 480 pixels. Tem 320 pixels de largura quando visualizado na orientação "retrato", 480 pixels de largura quando visualizado na orientação "paisagem", então faz sentido definirmos nossa primeira consulta de mídia para especificar qualquer tela maior que 480 pixels.

No entanto, o próximo passo é provavelmente um tablet. O iPad tem resolução de 980px x 768px, então podemos assumir com segurança que qualquer coisa menor que 768px é adequada para nosso layout móvel. Qualquer coisa maior que 768px pode funcionar com o layout de navegação de desktop, versão "desktop".

Agora podemos começar a adicionar regras, então vamos configurar uma consulta de mídia:

/*consultas de mídia*/ @tela somente mídia e (largura mínima: 768px) ( )

Esta consulta de mídia disparará todos os estilos que contém se o menor valor da janela de visualização for 768 pixels. Observe a inclusão o único palavra-chave que garante que o Internet Explorer 8 não se confunda e tente processar a solicitação. Para informações mais detalhadas consulte.

Vamos começar nosso trabalho fazendo desaparecer o botão "menu":

@media apenas tela e (largura mínima: 768px) ( a.to_nav ( display: none; ) )

Quando o navegador estiver um pouco mais largo, o botão de menu não aparecerá mais.

7.Mover navegação

Agora precisamos mover nossa navegação principal para o topo da página. Faremos isso removendo-o do fluxo de documentos, colocando-o bem no topo.

@media only screen and (largura mínima: 768px) ( a.to_nav ( display: none; ) .wrapper ( posição: relativa; largura: 768px; margem: auto; ) #primary_nav (posição: absoluta; topo: 5px; direita : 10px; plano de fundo: nenhum; : 2px; raio da borda: 2px;

Para que isso seja possível, devemos primeiro colocar seu pai (.wrapper) corretamente. Podemos fazer isso aqui na consulta de mídia ou defini-lo no início da nossa folha de estilos.

Assim que o menu estiver totalmente instalado, precisamos remover alguns elementos âncora. Você não precisa fazer nada de especial, basta fazer com que a lista de produtos seja exibida de forma linear, remover bordas e espaços enormes. Os estados de foco sobre os quais falamos anteriormente são ótimos, então não precisamos alterá-los.


8. E por último...

Se você está prestando atenção, deve ter notado que ainda temos um link “voltar ao topo” na navegação – não precisamos disso agora, certo?

Podemos removê-lo de várias maneiras, mas para deixar claro o que está acontecendo, vamos primeiro adicionar uma classe ao elemento da lista:

  • Principal

    • E então podemos nos livrar disso em nossa consulta de mídia:

    #primary_nav li.top (exibição: nenhum;)

    Conclusão

    É isso! Há muitas maneiras de implementar essa ideia (o ícone da lista é apenas uma delas) e, claro, você pode continuar adicionando consultas de mídia para trabalhar em telas maiores. Espero que agora você tenha um motivo para fazer isso. Criamos uma navegação simples e responsiva por toque usando uma abordagem mobile first, com foco no conteúdo e na usabilidade. Quem precisa de mais alguma coisa?!

    Recursos Adicionais

    Aqui estão alguns links úteis mencionados neste artigo, compilados em uma lista conveniente:

    • Luke Wroblewski
    • Chris Coyier
  • Desenvolvimento de aplicativos móveis

    • Muito já foi escrito sobre Mobile First e existem bons livros sobre esse assunto. Mesmo assim, a maioria dos desenvolvedores e empresas não a utiliza em seus projetos ou nem conhece essa abordagem.

    Portanto, quero falar brevemente e com exemplos, esta será uma informação útil para quem ainda não ouviu falar desta abordagem.
    Tentarei responder a três questões principais:

    • O que é Mobile First e suas vantagens
    • Implementação da abordagem
    • Estatísticas de resultados
    O que é o celular primeiro? Este ano, o número de utilizadores que utilizam dispositivos móveis para aceder à Internet atingiu os 60%. É por isso tráfego móvel está se tornando mais significativo e os proprietários de sites devem levar essas estatísticas em consideração. Como mostra a prática, os usuários telefones celulares e os tablets passam menos tempo on-line e preferem sites que aparecem nas primeiras linhas dos resultados de pesquisa. Enquanto os usuários de PC podem gastar mais tempo procurando informações. Portanto, seu site deve estar bem otimizado para motores de busca(SEO) e atender a todos os requisitos do Mobile First, para que a visita do usuário ao seu site seja o mais conveniente e compreensível possível através do seu dispositivo móvel.

    Portanto, alguns dos requisitos mais importantes no desenvolvimento Mobile First são:

    • Mostre primeiro o conteúdo mais importante
    • O site deve ser leve e otimizado porque... velocidade de conexão rede móvel pode ser fraco dependendo da localização do usuário
    • O site não deve carregar mais recursos do que o usuário necessita para obter as informações que necessita, pois... A Internet móvel ainda é cara. Informações adicionais devem ser carregadas somente mediante solicitação do usuário
    Assim, Mobile First é um método de desenvolvimento de um site otimizado para diversos dispositivos móveis, levando em consideração a velocidade da conexão de rede. E a importância de exibir o conteúdo principal ao usuário final.

    O gigante das buscas Google escreveu recentemente sobre a importância desta abordagem:

    “Vamos aumentar o indicador mobile-friendly em nosso ranking de resultados. Essas mudanças terão impacto na pesquisa móvel em todos os idiomas do mundo e terão um impacto significativo nos resultados da pesquisa. Portanto, será mais fácil para os usuários encontrarem resultados otimizados para seus dispositivos.”
    Vídeo sobre a importância do Mobile First de Olivier Rabenschlag - chefe da Google Creative Development Agency.

    Vantagens da abordagem Mobile First Gostaria de lembrar que hoje o número de usuários que utilizam dispositivos móveis para navegar na Internet atingiu 60%. E, portanto, usar o Mobile First ao desenvolver um site oferece grandes benefícios para esses usuários em primeiro lugar.
    • Um site para todos os dispositivos
    • Os usuários receberão primeiro o conteúdo importante da página
    • Carregamento rápido de páginas em baixas velocidades de conexão
    • Interface conveniente para navegação na tela do celular
    • Quantidade mínima de recursos da web necessários para exibir o conteúdo principal - economia internet móvel tráfego
    • Principais posições nos resultados de pesquisa do Google
    Implementação A implementação da abordagem será demonstrada usando a estrutura Moff.js (Mobile First Framework). Esta é uma estrutura JavaScript adaptada para o desenvolvimento Mobile First.

    Consideraremos a abordagem usando o exemplo de uma página com informações detalhadas sobre um carro.

    Determinando a parte importante do conteúdo Geralmente há muitos dados nessa página. E devemos decidir qual deles é importante principalmente para o usuário.

    Lista detalhada de dados na página:

    Imaginemos que o principal desta lista seja a imagem principal, o nome do fabricante, modelos, equipamentos, preço, lista de características e equipamentos.

    Primeira página móvel. Nome da Empresa Descrição da Empresa Nota Nissan Versa 2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidente ut labore et dolore magna aliqua.

    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    • Modelo: Versa Nota
    Corpo: Hatchback 4D
    • Motor: 1.6L 4 cilindros DOHC 16V
    • Combustível: Gasolina
    • Padrão
    • Assistência de freio
    • Airbags duplos de impacto lateral frontal
    • Desembaçador do vidro traseiro
    • Compartimento da porta do passageiro
    • Compartimento da porta do motorista
    • Airbag com detecção de ocupante
    • Controle de tração
    • leitor de CD
    • Computador de bordo
    • Controle Eletrônico de Estabilidade
    • Barra estabilizadora frontal
    • Direção hidráulica
    • Limpador do vidro traseiro
    Luzes de leitura frontais
    • Airbag aéreo
    • Contato
    • Freios ABS

    Criado por Company.com

    Direitos autorais Mapa do site Idealmente, esta é a quantidade de tráfego que pode ser gasto pelo usuário para obter esses dados. E tentaremos conseguir isso com uma diferença mínima.

    Primeiro de tudo, vamos escrever estilos para exibir páginas em

    dispositivos móveis. E só depois disso os estilos são ajustados para outros tamanhos de tela via media query. @media (largura mínima: 768px) ( /*Estilos de tablet e desktop*/ ) Adicionando informações adicionais

    Agora devemos adicionar os dados restantes de forma que o usuário saiba e possa obter os dados solicitando-os.
    Aqui utilizamos helpers de Data Events, que auxiliam na obtenção de informações quando solicitadas. Ao clicar no link, uma solicitação Ajax será enviada para o endereço especificado no atributo href. O resultado da solicitação será gravado no elemento especificado no atributo data-load-target. Um ponto importante é que o atributo data-load-screen indica em quais valores de tela as miniaturas serão carregadas automaticamente. Os tamanhos de tela são retirados da estrutura CSS do Twitter Bootstrap. E no atributo data-load-module indicamos o identificador do módulo cadastrado, que será conectado após inserir o resultado da solicitação ajax.

  • Uma solicitação ajax é enviada para a URL especificada no link e o resultado é inserido na página
  • O módulo cadastrado (galeria de veículos) está conectado
  • Dependências estão incluídas (jQuery e Slick-carousel)
  • Carregando o arquivo do módulo principal
  • Inicialização do módulo
    • A seguir, vamos ver como registrar este módulo. Declaração de classe de módulo O framework Moff possui um sistema de modularidade com o qual implementamos a classe de módulo galeria de veículos.

    Módulos no Moff são elementos de aplicativo independentes que possuem sua própria lógica de negócios e podem ter dependências de bibliotecas externas.

    Moff.modules.create("VehicleGallery", function() ( var _module = this; var _mainImage; function setMainImage() ( _mainImage = _module.find(".vehicle_images_main img"); ) function inicializeSlickJs() ( $(_module. find(".vehicle_images_thumbs-list")).slick(( infinito: true, slidesToShow: 5, slidesToScroll: 1 )) ) função handleMainImage() ( $(_module.scope).on("click", ".vehicle_images_thumbs- item img", changePreview); ) function changePreview() ( var index = this.src.match(/thumb(\d+)/); _mainImage.src = "images/preview" + index + ".jpg"; ) this .scopeSelector = ".vehicle_images"; this.init = function() ( setMainImage(); inicializeSlickJs(); handleMainImage(); ));
    Durante a inicialização da classe, executamos slick-carousel para criar um carrossel de nossas miniaturas e configuramos um manipulador para visualizá-las.

    Cadastro de módulo O registro do módulo ocorre usando um objeto que contém um identificador exclusivo e pode conter dependências do módulo e o arquivo de classe do módulo principal.

    Moff.amd.register(( id: "gallery de veículos", depende: ( js: ["/bower_components/jquery/dist/jquery.min.js", "/bower_components/slick-carousel/slick/slick.min. js"], css: ["/bower_components/slick-carousel/slick/slick.css"] ), arquivo: ( js: ["js/vehicle-gallery.js"] ), afterInclude: function() ( Moff. module.initClass("VehicleGallery");
    Em nosso exemplo, especificamos jQuery e seu plugin slick-carousel, que cria um carrossel a partir de miniaturas, como dependências. As dependências são carregadas de forma síncrona, na ordem especificada. E após as dependências, a classe do módulo veículo-gallery.js é carregada. A seguir, após carregar o arquivo do módulo e suas dependências, inicializamos o módulo usando o evento afterInclude.

    Estatísticas de resultados. Vamos resumir os resultados da criação da página Mobile First.

    O gráfico inferior mostra que uma página não otimizada é 73% mais pesada do que uma página Mobile First. Desta forma podemos economizar 186,94 KB, que o usuário pode não precisar ao visualizar sua página.

    Conclusão Assim nos livramos do carregamento grandes quantidades recursos secundários, mas que estarão disponíveis mediante solicitação do usuário.

    Este artigo cobre apenas um exemplo de carregamento. Informações adicionais. Um exemplo completo pode ser visualizado no site da estrutura.

    Data de publicação: 29/03/2013

    Nota do autor: No início deste ano, eu estava nos estágios iniciais de reformulação do site da nossa empresa. Já havíamos planejado adotar uma abordagem de web design responsivo direto, que é a solução preferida para suportar vários dispositivos. Depois de aprender com discussões francas no An Event Apart em Boston sobre as limitações e desafios do web design responsivo, percebi que nossa solução precisava de alguns ajustes.

    Felizmente, o projeto que temos diante de nós foi a oportunidade perfeita para experimentar e nos desafiar para melhorar nosso fluxo de trabalho adaptativo. Neste artigo, detalharei as etapas que seguimos, incluindo algumas mudanças ao longo do caminho, enquanto trabalhávamos para construir um site melhor responsivo.

    Estabelecendo metas

    O primeiro passo que demos em nosso projeto foi criar uma lista dos benefícios e barreiras à nossa abordagem adaptativa. Nossa lista ficou assim:

    VANTAGENS

    1. Construção, suporte e promoção de um site.

    2. Suporta muitos tamanhos de tela, não apenas monitores extremamente grandes computadores desktop e pequenos dispositivos portáteis.

    3. Preparado para o futuro, pois o layout mudará dependendo do tamanho da tela, não apenas do tamanho dos dispositivos populares de hoje.

    OBSTÁCULOS

    1. O conteúdo destinado apenas a dispositivos de tela grande é frequentemente transmitido para telas pequenas e simplesmente “cortado” usando consultas de mídia CSS, criando downloads desnecessários.

    2. Devido ao layout "sem tamanho", não podemos alterar a ordem original de tal layout (ou eliminar completamente elementos sem importância dele) dependendo do dispositivo ou do tamanho da tela.

    Você provavelmente notará que as deficiências da abordagem adaptativa que identificamos são aquelas áreas onde apenas uma solução móvel para o problema é melhor. Para o nosso novo site, queríamos o melhor dos dois mundos – os benefícios que uma abordagem responsiva e uma solução móvel dedicada podem oferecer.

    Começando pelo conteúdo

    Uma das diferenças comuns entre design responsivo e específico para dispositivos móveis ou somente para dispositivos móveis é o conteúdo, ou propriedades, passado para o navegador. Um site móvel dedicado geralmente reflete apenas um subconjunto do conteúdo encontrado na versão “normal” do site. Este é um dos debates em curso entre as duas abordagens, com os defensores de websites exclusivamente móveis argumentando frequentemente que os utilizadores móveis só querem aceder a conteúdos que sejam “importantes” para eles.

    O problema com essa linha de pensamento é que o que é “importante” para um usuário – qualquer usuário – muda dependendo da situação. Restringir o acesso ao conteúdo simplesmente por causa do dispositivo que você está usando é uma maneira infalível de irritar e decepcionar aqueles que não se enquadram no cenário ideal que você imaginou quando decidiu o que manter e o que remover do seu site para celular.

    Sempre acreditamos que todos os usuários deveriam ter acesso a todo o conteúdo que um site tem a oferecer, mas queríamos ter certeza de que isso era realmente adequado para o nosso site e para os nossos usuários. Para determinar a abordagem correta, recorremos aos nossos analistas e não encontramos nenhuma diferença perceptível entre o tipo de conteúdo solicitado pelos hóspedes móveis e pelos visitantes de dispositivos não móveis. O conteúdo popular entre os usuários de desktop era igualmente popular entre os visitantes de dispositivos móveis.

    Além disso, sentamos e conversamos com alguns de nossos clientes atuais, que representam a maioria do público do nosso site, e fizemos algumas perguntas, incluindo: "Qual conteúdo você acessa em nosso site quando está em um site? monitor de mesa?" e: “Que tal um tablet ou telefone?” As entrevistas, claro, foram mais detalhadas, mas já dá para perceber o que nos interessou. Mais uma vez, constatou-se que o conteúdo pesquisado era o mesmo independente do dispositivo utilizado.

    Os dados ditam a direção

    Os factos que descobrimos durante a nossa pesquisa reforçaram a nossa convicção de que uma abordagem responsiva, garantindo o acesso ao mesmo conteúdo em qualquer dispositivo, era a escolha certa para o nosso website. Essa pesquisa também nos permitiu determinar qual conteúdo do nosso site não estava sendo acessado. Quando encontramos páginas que não estavam sendo usadas pelo nosso público, nós as retiramos do mapa do site. O mesmo foi feito com o conteúdo menos popular na hierarquia de conteúdo e com nossos planos de reformulação.

    Ao iniciar o design observando o conteúdo e coletando dados sobre o que era importante para o nosso público e o que não era, fomos capazes de passar para o estágio de design com um plano sólido para qual conteúdo o design do nosso site precisava suportar.

    Criando o design dos pontos extremos

    Já ouvi argumentos para projetar no navegador e aprecio os benefícios que essa abordagem oferece. Tendo tentado projetar no navegador em algumas ocasiões, descobri que meu próprio fluxo de trabalho de design é mais fácil e conveniente para começar no Photoshop. Não acredito de forma alguma que esta seja a decisão certa para todos, mas é verdade para mim e foi assim que comecei este projeto.

    Para design responsivo, uso um método que chamo de “design de borda”. Começo criando uma versão desktop do site. Nele eu trabalho o layout tipográfico dos textos de design, estilo e direção visual geral - bem como o layout do visual widescreen do site. Quando estou satisfeito com a versão do site, trabalho em uma tela pequena ou versão “mobile”, seguindo a mesma direção visual, mas ajustando o layout para se adequar à tela menor. Ao final desse processo, já tenho exemplos visuais de dois layouts de sites bem diferentes – versões deste projeto para telas maiores e menores. Esses dois exemplos serão meu guia no desenvolvimento do front end de um site.

    Móvel primeiro

    A abordagem “” para design adaptativo não é uma ideia nova. Essa técnica, em que você primeiro constrói o layout móvel de um site e depois usa consultas de mídia para ajustar e adicionar a esse layout conforme o tamanho da tela aumenta, já é considerada há algum tempo. melhores práticas em web design responsivo. A abordagem não é nova, ainda é muito importante, e quando combinada com o nosso plano “começar com conteúdo”, ajudou-nos a concentrar energia numa das deficiências identificadas em projectos adaptativos – o problema de comunicar conteúdos sem importância.

    Começando pelo conteúdo, garantimos que todo o conteúdo do nosso site seja relevante e adequado para todos os usuários, móveis ou não. Isso significava que não precisávamos nos preocupar em passar muito conteúdo na marcação, apenas ocultá-lo visualmente com usando CSS. A abordagem mobile-first significava que essas imagens seriam compartilhadas apenas com os dispositivos aos quais se destinavam. Por exemplo, nosso novo design exigia um gráfico de fundo com textura aquarela.

    A imagem, bastante grande, pretendia fazer parte do design apenas em telas grandes (a partir de 660 px e maiores). Como nosso CSS começa com design móvel, esses gráficos grandes nunca são enviados para dispositivos de tela pequena porque a consulta de mídia que carrega essa imagem só é acionada em telas grandes. Uma consulta de mídia que aplica um plano de fundo a elemento HTML, fica assim:

    @media apenas tela e (largura mínima: 660px) ( html ( background: url(/images/bg-watercolor.jpg) parte superior central fixa sem repetição; ) )

    Tela @media somente e (min - largura: 660px) (

    HTML (

    background: url (/images/bg - aquarela. jpg) não - repete parte superior central fixa;

    Além de usar este imagem de fundo, rodando a 660px, a consulta de mídia também introduz uma série de outras mudanças no layout do site, passando do que é considerado um layout de tela pequena para o que se tornará uma variedade de versões de tela larga.

    Criando para design, não para dispositivos

    Quando começamos a usar design responsivo em nossos projetos web, nos concentramos em dispositivos e tamanhos de tela conhecidos, e nossas consultas de mídia geralmente os refletiam (iPhones, iPads - tanto retrato quanto paisagem - laptops, desktops widescreen, etc. .d.). Com o tempo, descobriu-se que essa não era a melhor abordagem porque abordava apenas os dispositivos e tamanhos de tela populares hoje, e não aqueles que poderiam aparecer no futuro. Uma das vantagens poderosas do web design responsivo é sua natureza voltada para o futuro. Portanto, para implementar plenamente esta pontos fortes deixamos de construir dispositivos em vez de deixar o design ditar pontos de controle consultas da mídia.

    O método mobile-first estabeleceu a base CSS do nosso site. Feito isso, lançamos o site no navegador e o dimensionamos para o menor tamanho do nosso layout (definimos o CSS para uma largura mínima de 320px). Gradualmente, o tamanho da janela do navegador aumentou para ver como a marcação respondia. À medida que a janela crescia, notamos que as marcações começaram a deformar-se. Foi nesses pontos que precisávamos definir novas consultas de mídia para ajustar a marcação.

    Para entender esse método, criamos um gráfico e o definimos como plano de fundo da área de trabalho. As linhas verticais tinham uma largura de 320 px (nosso menor tamanho), depois foram colocadas a cada cem pixels começando em 400 e usadas como guias à medida que a janela do navegador era dimensionada para determinar onde o design estava começando a quebrar, e então usamos esses valores aproximados de pixel nas consultas de mídia finais, que foram adicionadas ao CSS.

    A abordagem de adicionar consultas de mídia com base em requisitos de design, em vez de tamanhos de dispositivos conhecidos, permite que um site responda melhor a uma ampla variedade de tamanhos de tela. No entanto, o resultado é que ele preenche o arquivo CSS com mais consultas de mídia do que se você aplicasse pontos de interrupção específicos do dispositivo. E ainda assim, embora o número de consultas de mídia seja maior, as consultas em si tendem a ser muito pequenas, já que poucas alterações são feitas em cada uma delas, em vez de criar as mudanças drásticas que as consultas de mídia baseadas em dispositivos normalmente exigiriam.

    Uma área do nosso site onde houve um aumento óbvio nas consultas de mídia é a navegação.

    Navegação adaptativa

    A navegação é um dos aspectos mais difíceis do design responsivo. Nosso site possui essencialmente quatro áreas principais de navegação.

    1. Navegação principal;

    2. O que chamamos de “navegação auxiliar”, que direciona para os diversos portais e serviços utilizados pelos nossos clientes;

    3. Navegação no rodapé;

    4. Navegação de seções individuais, que é apresentada nas subpáginas do site (para layouts de tela grande) na coluna da esquerda.

    Como nosso CSS prioriza os dispositivos móveis, uma das primeiras preocupações foi configurar a navegação para um layout de tela pequena. Isso significa desligar a exibição de todas as seções de navegação, exceto a navegação principal.

    #helpNav, .subNav, navegação de rodapé (exibição: nenhum;)

    #helpNav, .subNav, navegação de rodapé (

    exibição: nenhum;

    Além disso, já mencionei que nosso objetivo não é entregar conteúdo aos dispositivos, mas só então “desligá-los”. Na verdade, esse era o objetivo, mas na nossa navegação tivemos que chegar a um acordo sobre como fazê-lo. Não conseguimos encontrar outra solução simples, mas com suporte. Felizmente, o conteúdo que entregamos e não servimos parece ser apenas algumas listagens, portanto seu impacto nos downloads dos visitantes é mínimo.

    A navegação auxiliar é a única área do site que determinamos não ser relevante para a maioria dos usuários porque esses links e portais eram destinados apenas a usuários de desktop. Esta é uma suposição forte e uma afirmação ousada. A principal razão por trás disso foram os próprios portais, que eram aplicativos de terceiros fora do nosso controle e não foram otimizados para dispositivos móveis de tela pequena, e os serviços que eles ofereciam foram adaptados para oferecer suporte clientes corporativos com grandes telas de desktop.

    Esta situação nos inspirou a decidir remover esta seção da versão em tela pequena e, ao longo dos meses em que o site está no ar, não recebemos nenhum comentário ou reclamação de nossos base de usuários. Quanto às outras duas áreas de navegação, a seção de navegação de subpáginas e a seção de rodapé, este conteúdo é apresentado como parte da navegação principal em dispositivos de tela pequena. É por isso que desligamos essas três áreas por padrão.

    Mais tarde, à medida que o tamanho da tela aumenta e ultrapassamos o ponto de 660px onde o design da tela mais ampla começa a aparecer, daremos a essas áreas de navegação os estilos que elas exigem.

    Aqui está o CSS para nossa navegação secundária:

    #helpNav ( display: bloco; posição: absoluto; topo: 1px; direita: 0px; largura: 100%; alinhamento de texto: direita; ) #helpNav ul ( preenchimento à esquerda: 10px; ) #helpNav li ( display: inline; preenchimento à direita: 6px; preenchimento à esquerda: 6px; cor de fundo: #2f6a98; ) #helpNav a (tamanho da fonte: 12px; preenchimento: 0 6px; cor: #FFF; raio da borda: 20px; ) #helpNav a :hover ( cor de fundo: #f66606; )

    #helpNav (

    exibição: bloco;

    posição: absoluta;

    superior: 1px;

    direita: 0px;

    largura: 100%;

    alinhamento de texto: à direita;

    #helpNavul (

    preenchimento - esquerda: 10px;

    #helpNavli (

    exibição: embutido;

    preenchimento - direita: 6px;

    preenchimento - esquerda: 6px;

    cor de fundo: #2f6a98;

    #helpNav a (

    tamanho da fonte: 12px;

    preenchimento: 0 6px;

    cor: #FFF;

    raio da borda: 20px;

    #helpNav a:hover (

    E áreas de navegação de subpáginas:

    SubNav ( display: bloco; largura: 25%; float: esquerda; ) .subNav h4 ( preenchimento inferior: 8px ) .subNav ul ( estilo de lista: disco; cor: #c65204; preenchimento: 0 0 20px 20px; ) . subNav li ( padding-bottom: 14px; ) .subNav a ( color: #186483; font-size: 21px; font-family: "RokkittRegular", Times, "Times New Roman", serif; line-height: 1; )

    SubNavegação(

    exibição: bloco;

    largura: 25%;

    flutuar: esquerda;

    SubNav h4 (

    preenchimento - inferior: 8px

    SubNavul(

    estilo de lista: disco;

    cor: #c65204;

    preenchimento: 0 0 20px 20px;

    SubNavli (

    preenchimento inferior: 14px;

    SubNavegação a (

    cor: #186483;

    tamanho da fonte: 21px;

    altura da linha: 1;

    Finalmente, a navegação no rodapé:

    footer nav ( display: block; margin-top: 40px; ) footer nav ul ( list-style: none; ) footer nav li ( padding-bottom: 24px; width: 19%; padding: 0 5% 20px 0; float: esquerda; ) .innerNav li ( largura: 100%; float: nenhum; padding-bottom: 4px; ) rodapé nav a ( cor: #575454; tamanho da fonte: 12px; ) .innerNav a ( peso da fonte: normal; )

    navegação de rodapé (

    exibição: bloco;

    margem superior: 40px;

    rodapé de navegação (

    estilo de lista: nenhum;

    rodapé navli (

    preenchimento inferior: 24px;

    largura: 19%;

    preenchimento: 0 5% 20px 0;

    flutuar: esquerda;

    Navli interno (

    largura: 100%;

    flutuar: nenhum;

    preenchimento inferior: 4px;

    navegação de rodapé a (

    cor: #575454;

    tamanho da fonte: 12px;

    Navegação interna a (

    peso da fonte: normal;
    Pixels ou ems

    Você notará que usamos valores de pixel para nossas consultas de mídia. Usando consultas de mídia de pixel é onde nós, como outros desenvolvedores front-end, começamos a fazer design responsivo e adotamos essa prática como parte de nosso fluxo de trabalho. No entanto, no espírito de “construir um site melhor responsivo”, destacarei o artigo sobre consultas de mídia dimensionais usando ems que chamou nossa atenção durante a edição desta seção. Essencialmente, para melhorar aparência site ao aumentar o zoom, é altamente recomendável converter consultas de mídia px em consultas de mídia em, dividindo todos os valores de pixel pelo tamanho da fonte do corpo.

    Este excelente artigo nos inspirou a repensar nosso pensamento sobre consultas de mídia baseadas em pixels e é outro exemplo de como continuamos a aprimorar a abordagem responsiva. Embora não tenhamos usado ems em nossas consultas de mídia neste projeto específico, estamos atualmente fazendo experiências com eles e vale a pena mencionar a abordagem aqui.

    Navegação principal

    Nossa navegação principal é apresentada em telas amplas como uma linha horizontal na parte superior do layout. Em telas pequenas, a estrutura da navegação principal muda para que haja um grande botão Menu na parte superior de cada página com link para a navegação na parte inferior da página. Para conseguir isso, adicionamos um link com o ID menuLink e a classe oftabButtonr ao cabeçalho, que é quase o início da marcação. Em seguida, colocamos uma seção com ID mainNav bem no final da marcação. Dentro desta seção está nossa navegação principal, que é simplesmente uma lista não ordenada com algumas outras listas não ordenadas para o menu da seção de subpáginas. Também temos uma âncora com ID toTop, que funciona como um link para o topo da página.

    Dando continuidade ao princípio mobile-first, estilizamos o link do menu na parte superior do layout da tela pequena para que pareça um botão.

    #menuLink a ( float: direita; margem: -56px 8px 0 0; ) .tabButton a ( cor: #FFF; família de fontes: "RokkittRegular", Times, "Times New Roman", serif; tamanho da fonte: 20px; cor de fundo: #45829b; preenchimento: 10px 12px; raio da borda: 10px;

    #menuLink a (

    flutuar: certo;

    margem: - 56px 8px 0 0 ;

    TabButton a (

    cor: #FFF;

    fonte - família: "RokkittRegular" , Times , "Times New Roman" , serif ;

    tamanho da fonte: 20px;

    fundo - cor: #45829b;

    preenchimento: 10px 12px;

    raio da borda: 10px;

    TabButton a: passar o mouse (

    fundo - cor: #f66606;

    Nosso menu de navegação principal está configurado para exibição em tela pequena:

    #mainNav ( margin-top: 30px; width: 100%; ) #mainNav #toTop a ( float: right; margin: 0 8px 0 0; font-size: 20px; ) #mainNav nav ( padding-top: 80px; ) #mainNav ul ( estilo de lista: nenhum; ) #mainNav li ( background: #45829b; border-bottom: 1px sólido #abc7d2; preenchimento: 4px 10px 4px 15px; ) #mainNav li:hover ( background-color: #f66606; ) #mainNav a ( tamanho da fonte: 24px; cor: #FFF; família da fonte: "RokkittRegular", Times, "Times New Roman", serif; )

    #mainNav (

    margem superior: 30px;

    largura: 100%;

    #mainNav #toTop a (

    flutuar: certo;

    margem: 0 8px 0 0 ;

    tamanho da fonte: 20px;

    #mainNav navegação (

    preenchimento - topo: 80px;

    #mainNavul (

    estilo de lista: nenhum;

    #mainNavli (

    plano de fundo: #45829b;

    borda - inferior: 1px sólido #abc7d2;

    preenchimento: 4px 10px 4px 15px;

    #mainNav li:hover (

    fundo - cor: #f66606;

    #mainNav a (

    tamanho da fonte: 24px;

    cor: #FFF;

    fonte - família: "RokkittRegular" , Times , "Times New Roman" , serif ;

    Nossos submenus, que não são exibidos em sua posição original, agora podem ser exibidos conforme exigido pela página. Cada um desses submenus possui um ID exclusivo, como servicesTab, e cada seção do site possui uma classe aplicada à tag body. A classe da seção “Empresa” é companyPage. Usamos essa classe para estilizar uma seção inteira do site. Para ativar um submenu, usamos a classe de seção de submenu conforme necessário quando a seção é ativada.

    CompanyPage #companyTab ul, .newsPage #newsTab ul, .contactPage #contactTab ul, .servicesPage #servicesTab ul ( display: block; )

    CompanyPage #companyTab ul,

    Página de notícias #newsTab ul,

    ContactPage #contactTab ul,

    Página de serviços #servicesTab ul (

    exibição: bloco;

    Estamos aumentando

    À medida que surgem layouts de tela maiores - novamente com consultas de mídia de 660px e superiores - estamos mudando drasticamente o layout da navegação principal. Primeiramente, desabilitamos a exibição dos botões menuLink e toTop, pois eles não são mais necessários:

    #menuLink a, #toTop a ( display: nenhum; )

    #menuLink a, #toTop a (

    exibição: nenhum;

    #mainNav (posição: absoluta; topo: 92px; margem: 18px 2% 0 2%; largura: 96%; alinhamento de texto: centro; ) #mainNav nav ( preenchimento: 5px 0; borda superior: 1px sólido #bacfd7; border-bottom: 1px sólido #bacfd7; ) #mainNav li ( background: none; display: inline; border-bottom: 0; border-right: 1px sólido #bebebe; preenchimento: 0 6px 0 8px; margem: 4px 0; ) #mainNav a ( tamanho da fonte: 16px; cor: #45829b; ) #mainNav a:hover ( cor: #f66606; )

    #mainNav (

    posição: absoluta;

    superior: 92px;

    margem: 18px 2% 0 2%;

    largura: 96%;

    alinhamento de texto: centro;

    }

    #mainNav navegação (

    preenchimento: 5px 0;

    borda - topo: 1px sólido #bacfd7;

    borda - inferior: 1px sólido #bacfd7;

    }

    #mainNavli (

    histórico: nenhum;

    exibição: embutido;

    borda inferior: 0;

    tamanho: 16px;

    cor: #45829b;

    }

    #mainNav a:hover (

    cor: #f66606;

    }

    Esses estilos definem a aparência da navegação principal. Mas para encaixá-lo no design e não no dispositivo, precisaremos fazer pequenos ajustes conforme o tamanho da tela aumenta. No total, nossa fonte de navegação principal possui oito tamanhos diferentes de layouts widescreen, mudando conforme a tela se amplia e o espaço de trabalho aumenta. Descobrir a melhor forma de exibir essa navegação de uma forma que a torne fácil de usar e visualmente atraente foi um dos obstáculos que enfrentamos ao trabalhar com design responsivo.

    Seguimos esse padrão diversas vezes, finalmente aumentando o tamanho da fonte para 27px quando o site atinge seu objetivo. maior tamanho. Desta forma, a navegação do site corresponde ao design e à tela utilizada para visualizá-lo da melhor forma possível.

    Obtendo ajuda do CMS

    Nosso CMS preferido é o ExpressionEngine, e os detalhes da próxima seção do artigo são específicos para essa plataforma, mas a ideia central do que alcançamos com o ExpressionEngine pode certamente ser aplicada a outras plataformas CMS populares.

    Um dos maiores obstáculos para a abordagem adaptativa é que você não pode fornecer marcações ou códigos-fonte diferentes em vários dispositivos. Este é o obstáculo que queríamos superar com a ajuda do nosso CMS. Ao experimentar e pesquisar, encontramos um artigo chamado Going Truly Adaptive With ExpressionEngine. Usando a metodologia detalhada neste artigo, conseguimos usar um script de detecção de dispositivo para definir uma variável em um sistema móvel ou desktop. Pudemos então carregar a marcação em nosso site com base em quais dessas variáveis ​​encontramos.

    Ao avançar e aplicar a detecção de dispositivos, conseguimos fazer outras pequenas alterações para melhorar ainda mais a experiência móvel. Para nós, foi como um aprimoramento progressivo, onde construímos uma solução de qualidade e depois tentamos impulsioná-la para oferecer uma experiência ligeiramente otimizada. Não deixe de ler a opinião semelhante de Chris Coyier sobre a combinação de RWD e modelos móveis, onde ele argumenta sobre misturar e combinar diferentes técnicas em sua estratégia móvel.

    Vamos começar pequeno

    É claro que você poderia usar essas variáveis ​​para fornecer marcações e códigos-fonte completamente diferentes para dispositivos diferentes, mas nossa abordagem inicial foi um pouco menos extrema. Como já havia sido decidido que qualquer versão do nosso site teria acesso a todo o conteúdo, inicialmente solicitamos este método variáveis ​​para regular ligeiramente a quantidade de conteúdo entregue. Por exemplo, na página inicial do nosso site mostramos teasers de grande parte do conteúdo encontrado no site. Nas seções “Cultura” e “Projeto em destaque”, cada postagem vem acompanhada de uma imagem.

    As imagens são uma boa adição, mas definitivamente não são cruciais, e é por isso que não mostramos essas imagens aos nossos usuários móveis. Novamente, não quero dizer que usamos CSS para desativá-los, o que carregará os dados no navegador de qualquer maneira; em vez disso, usamos variáveis ​​definidas para excluir imagens da marcação caso elas não devam ser mostradas.

    A sintaxe é bastante simples. Depois de definir as variáveis ​​- e o artigo acima explica como é fácil fazer isso adicionando arquivo de sistema config.php é um script pequeno - você pode usar essas variáveis ​​como uma instrução if.

    img src = "(imagem do teaser)" alt = "(título)" / > { / if } { if global : site_version == "mobile" } { title } { / if } !}

    Esta é a sintaxe do ExpressionEngine, mas você pode lê-la e ver facilmente o que está acontecendo. Se a variável completa for encontrada, entregamos a imagem teaser da entrada do artigo no banco de dados. Se, em vez disso, a variável mobile for encontrada, entregamos o título do artigo.

    A mesma abordagem é aplicada às seções “Notícias” e “Blog” da página inicial, entregando três teasers curtos se a variável completa for encontrada, e apenas um se for móvel. A sintaxe é semelhante a esta:( exp : canal : entradas canal = "notícias" ( if global : site_version == "full" ) limit = "3" ( / if ) ( if global : site_version == "mobile" ) limit = "1" ( / se ) )

    Aqui você pode ver que estamos acessando um canal do ExpressionEngine chamado news. Usamos nossa variável para determinar quantos elementos atuais serão exibidos neste canal usando o parâmetro limit.

    Vamos dar um passo adiante

    Na seção Cultura do site publicamos artigos que muitas vezes vêm acompanhados de muitas imagens. Ao contrário das imagens teaser na página inicial de um site, as imagens nos próprios artigos são vitais para esse conteúdo porque ajudam a manter ou aumentar a ênfase do artigo. Embora essas imagens sejam importantes, elas também são bastante grandes – cada uma com 650 pixels de largura, e a maioria dos artigos inclui pelo menos três imagens e, às vezes, até dez. Como os dispositivos móveis exibirão imagens com cerca de metade do tamanho original, carregar imagens em tamanho real se tornará muito importante. Para lidar com isso, vamos examinar novamente a definição e as variáveis ​​do dispositivo.

    Para cada artigo, criamos dois conjuntos de imagens: um em tamanho real com 650px de largura e o segundo com quase metade desse tamanho. Em seguida, usamos variáveis ​​em nosso artigo (mas primeiro precisamos ativar o código ExpressionEngine em nosso modelo de página) e adicionamos marcação para ambos os conjuntos de imagens - mas apenas um deles é entregue ao navegador. Os dispositivos móveis recebem imagens pequenas, enquanto todos os outros recebem imagens em tamanho real.
    A mesma abordagem se aplica à grande área publicitária da página inicial. Esses banners e imagens rotativos anunciam coisas importantes, como eventos futuros, novos serviços e anúncios, melhor do que o resto das áreas da página inicial. O outdoor é outro elemento agradável em todos os aspectos, que se destina apenas a grandes monitores. Novamente usamos variáveis ​​para entregar a seção principal do outdoor, bem como o JavaScript que o executa, para o dispositivo apropriado - o que nos permite enviar efetivamente marcações diferentes para dispositivos diferentes e eliminando outro obstáculo que identificamos no início do projeto.

    Usando a abordagem mobile-first e nosso CMS, somos capazes de entregar nossos página inicial para usuários de desktop em 738,3 KB e reduz significativamente para apenas 174,4 KB para usuários móveis.

    Planos alternativos

    Uma das questões que sempre me incomodou sobre a abordagem apenas móvel e a detecção de dispositivos é: “O que acontece se a detecção falhar? A versão “normal” do site é entregue no dispositivo móvel, invalidando assim o seu design móvel cuidadosamente elaborado? Esse recurso é um dos principais motivos pelos quais evitei a solução somente móvel usada no passado para detecção de dispositivos.

    Usamos a detecção de dispositivos para nosso fluxo de trabalho adaptativo e isso nos forneceu ótimas alternativas caso a detecção de dispositivos não funcione por algum motivo. Como usamos uma abordagem adaptativa, mesmo que navegador móvel a versão completa será entregue, a marcação se ajustará a este dispositivo porque nosso CSS se ajustará adequadamente.

    Além disso, como tudo prioriza os dispositivos móveis, os elementos que não são destinados a telas pequenas, como os enormes gráficos de fundo mencionados acima, não são refletidos de forma alguma. A única coisa que nos decepcionará é o que fizemos com as variáveis ​​geradas para definir o dispositivo. Se ocorrer o pior cenário e a detecção do dispositivo falhar, então versão móvel obterá apenas algumas imagens extras, ou alguma marcação, ou algum JavaScript. A impressão geral ainda será adequada para um dispositivo móvel. Nada mal para um “pior cenário”.

    Progresso, não ideal

    Há alguns anos, um cliente me contou algo que ainda me lembro até hoje. Falando sobre seu site, ele disse:

    « Não se preocupe em tornar meu site perfeito. Apenas trabalhe para melhorá-lo. A sua melhoria contínua será um passo na direção certa».

    Essa ideia me inspira há anos e me lembra de não rejeitar o melhor só porque não é perfeito.

    eu sei que esta decisão– não é perfeito, e tudo bem porque é uma melhoria em nosso fluxo de trabalho adaptativo anterior. Ajudou-nos a superar alguns dos obstáculos que identificamos e agora podemos trazer essas melhorias para os projetos em que trabalhamos. Sim, ainda existem muitas complexidades que ainda não podemos influenciar de forma eficaz, como a entrega de imagens de alta qualidade para monitores HD, bem como o uso de consultas de mídia baseadas em em, sobre as quais já escrevemos, mas em relação a este e outros projetos, nós estão se movendo na direção certa.

    Quem sabe... Talvez um dia alguém construa o “site perfeito”. No momento estamos focados no progresso e não na perfeição, fazendo pequenas melhorias ao longo do caminho, trabalhando para construir um site mais responsivo.

    O que você acha?

    Como você constrói sites responsivos? Você está usando definição de característica ou definição de dispositivo? Quando você recomendaria usar um ou outro? Estamos aguardando seus comentários!

    O layout adaptável do site permite que as páginas da web se ajustem automaticamente às telas de tablets e smartphones. O tráfego da Internet móvel cresce a cada ano e, para processar esse tráfego de maneira eficaz, é necessário oferecer aos usuários sites responsivos e com uma interface amigável.

    Os motores de busca utilizam vários critérios para avaliar a capacidade de resposta de um site quando visualizado em dispositivos móveis. O Google está tentando simplificar o uso da Internet para proprietários de smartphones e tablets, marcando sites adaptados para dispositivos móveis com uma marca especial compatível com dispositivos móveis nos resultados de pesquisa para dispositivos móveis. Yandex também possui um algoritmo que dá preferência a sites com versão mobile/responsiva para usuários em busca mobile.

    Você pode verificar a exibição da página em dispositivos móveis nos serviços e.


    Arroz. 1. Resultados de pesquisa para celular do Yandex e do Google com uma observação sobre a facilidade de uso do site para dispositivos móveis.

    O layout adaptativo pressupõe a ausência de barra de rolagem horizontal e áreas escalonáveis ​​​​quando visualizadas em qualquer dispositivo, texto legível e grandes áreas para elementos clicáveis. Usando consultas de mídia, você pode controlar o layout e o posicionamento de blocos em uma página, reorganizando o modelo para que ele se adapte a diferentes tamanhos de tela de dispositivos.

    As técnicas básicas para criar um site responsivo são fornecidas no artigo. Para design responsivo, a largura do contêiner principal do site é definida em% e pode ser igual a 100% da largura da janela do navegador ou menos. A largura das colunas da grade também é especificada em%. No design responsivo, a largura do contêiner principal e das colunas da grade é fixada usando valores px.

    A técnica de layout de borracha adaptativo discutida nesta lição funcionará perfeitamente em um modelo de duas colunas, tornando o site adaptável e conveniente para visualização em dispositivos móveis. O modelo assume um layout diferente do conteúdo principal das páginas; nesta lição será discutido o layout da página principal.

    Layout da página inicial

    Uma página consiste em três blocos principais: um cabeçalho (cabeçalho), um contêiner wrapper para o conteúdo principal e barra lateral e um rodapé (rodapé). Vamos considerar 768px e 480px como pontos de virada no design.

    No primeiro ponto, ocultaremos o menu superior e moveremos a barra lateral para baixo do container com postagens. No segundo ponto iremos alterar a localização dos elementos do cabeçalho e cancelar o posicionamento dos botões redes sociais nas postagens e cancelar a quebra automática das colunas do rodapé da página.


    Arroz. 2. Exemplo de layout adaptativo 1. Meta tags e seção

    1) Adicione à seção arquivos necessários— um link para as fontes usadas, a biblioteca jQuery, bem como o plugin prefixfree (para não escrever prefixos de navegador para propriedades):

    Layout de site adaptável

    2. Cabeçalho da página

    Colocaremos os seguintes elementos de contêiner no cabeçalho da página:
    logotipo

    Escolha do Editor

    © 2024 ermake.ru - Sobre reparo de PC - Portal de informações