Tamanho padrão do site: características, requisitos e recomendações

A tecnologia de desenvolvimento de sites é muitoum processo multifacetado. Mas ainda assim todos os seus estágios podem ser divididos em dois componentes principais - o funcional e o externo. Ou, como é habitual em webmasters, backend e front-end, respectivamente. As pessoas que encomendam seus sites a partir de estúdios de desenvolvimento da web, muitas vezes acreditam ingenuamente que vale a pena se concentrar apenas na funcionalidade, e essa será a decisão certa. Mas isso é verdade em casos muito raros, geralmente para projetos de inicialização na fase beta. Em outros aspectos, o design gráfico e a interface do usuário são simplesmente obrigados a estar em conformidade com os padrões de desenvolvimento da Web e serem fáceis de usar.

A primeira pedra angular com a qualo designer de interface, ou o designer, está enfrentando é a largura do layout do site. Afinal, é necessário desenhar interfaces para isso. Intuitivamente, existem duas abordagens: criar layouts separados para cada resolução de tela popular ou criar uma versão do site para todos os mapeamentos. E ambas as opções estarão incorretas, mas sobre tudo em ordem.

A largura padrão do site em pixels para RuNet

Antes do desenvolvimento do layout adaptativo de um fenômeno de massafoi o desenvolvimento de um site com uma largura de mil pixels. Esta figura foi escolhida por uma simples razão - que o site se encaixa em qualquer tela. E isso tem sua própria lógica, mas vamos supor que a pessoa ainda tenha pelo menos um monitor HD na área de trabalho. Neste caso, o seu layout vai parecer pequena faixa no meio da tela, onde tudo é moldado em uma pilha, e nas laterais do enorme não-espaço. Agora vamos supor que uma pessoa veio para o seu site a partir de um tablet com uma tela de 800 pixels de largura, e é marcada nas configurações "Mostrar o site da versão completa." Nesse caso, seu site também será exibido incorretamente, porque simplesmente não cabe na tela.

A partir dessas considerações, podemos concluir queA largura fixa para o layout não se ajusta exatamente a nós e é necessário procurar outro caminho. Vamos analisar a ideia de um layout separado para cada largura de tela.

Layouts para todas as ocasiões

Se você escolheu como estratégia criar layouts paratodos os tamanhos de telas presentes no mercado, o seu site se tornará o mais exclusivo de toda a Internet. É simplesmente impossível cobrir toda a gama de dispositivos hoje, tentando fazer um ajuste preciso para cada opção. Mas se você se concentrar nas resoluções mais populares de monitores e telas de dispositivos, a ideia não é ruim. O único menos é os custos financeiros. Afinal, quando o designer de interfaces, designer e designer de layout são forçados a fazer o mesmo trabalho 5 ou 6 vezes, o projeto custará incomensuravelmente mais do que o preço originalmente estabelecido no orçamento.

Portanto, possuem uma abundância de versões para diferentesAs telas podem, exceto os sites de página única, cuja finalidade é vender um produto e fazer com que ele seja bem feito. Bem, se você não tiver um desses desembarques e um site de várias páginas, vale a pena discutir mais.

Os tamanhos de site mais populares

O trade-off entre os dois extremos édesenho de layout para três ou quatro tamanhos de tela. Entre eles, um deve ser um layout para dispositivos móveis. O restante deve ser adaptado para uma tela de desktop pequena, média e grande. Como escolher a largura do site? Abaixo estão as estatísticas do serviço HotLog para maio de 2017, o que nos mostra a distribuição da popularidade de várias resoluções de tela do dispositivo, bem como a dinâmica deste indicador.

Da tabela você pode descobrir como determinar o tamanho.site para usar. Além disso, podemos concluir que o formato mais comum hoje é a tela 1366 por 768 pixels. Essas telas são instaladas em laptops econômicos, por isso sua popularidade é natural. O segundo mais popular é o monitor Full HD, que é o padrão ouro para vídeos, jogos e, portanto, para a criação de layouts de sites. Além disso, na tabela, vemos a resolução de dispositivos móveis de 360 ​​por 640 pontos, bem como várias opções para telas de desktop e móveis depois.

Layout de design

Então, analisando as estatísticas, podemos concluir que a largura ótima do site tem 4 variações:

1. Versão para laptops com uma largura de 1366 pixels.
2. Versão Full HD.
3. Um layout de 800 pixels de largura para exibição em pequenos monitores de mesa.
4. Versão para celular do site - 360 pixels de largura.

Digamos que decidimos o que é necessáriouse o tamanho da fonte gerada para o site. Mas tal projeto ainda seria caro. Portanto, considere mais opções, desta vez sem usar uma largura fixa.

Tornando o layout flexível

Existe uma abordagem alternativa quandoVale a pena ajustar apenas para o tamanho mínimo da tela, e os tamanhos do próprio site serão definidos como porcentagens. Ao mesmo tempo, elementos de interface como menus, botões e logotipo podem ser definidos em valores absolutos, concentrando-se na largura mínima da tela em pixels. Por outro lado, os blocos com conteúdo serão esticados de acordo com as porcentagens indicadas da largura da área da tela. Essa abordagem permite que você pare de perceber o tamanho dos sites como uma restrição para o projetista e supere essa nuance com talento.

Qual é a proporção áurea e como aplicá-la ao layout das páginas da web?

De volta ao Renascimento muitos arquitetos eartistas tentaram dar às suas criações uma forma e proporção ideais. Para respostas a perguntas sobre os valores de tal proporção, eles se voltaram para a rainha de todas as ciências - matemática.

Desde que a antiguidade foi inventadaa proporção que nossos olhos percebem como a mais natural e elegante, porque é onipresente na natureza. O descobridor da fórmula para tal relacionamento era um talentoso arquiteto grego antigo chamado Phidias. Ele calculou que, se uma grande proporção da razão se relaciona com a menor, como o todo se relaciona com a maior, então essa proporção parecerá melhor. Mas este é o caso se você quiser dividir o objeto assimetricamente. Essa proporção foi mais tarde chamada de seção áurea, que ainda não superestima sua importância para a história mundial da cultura.

De volta ao web design

É muito simples - usando a proporção áurea, vocêVocê pode projetar as páginas que serão tão agradáveis ​​quanto possível ao olho humano. Ao calcular a definição da fórmula da seção áurea, obtemos o número irracional de 1,6180339887 ..., mas por conveniência, você pode usar o valor arredondado de 1,62. Isso significa que os blocos da nossa página devem ser 62% e 38% do total, não importa o tamanho da fonte criada para o site que você usa. Um exemplo que você pode ver neste esquema:

Use nova tecnologia

Sites de layout de tecnologia modernapermitem que você transmita com precisão a ideia do designer e designer, agora você pode permitir a implementação de ideias mais ambiciosas do que no início das tecnologias da Internet. Você não precisa mais lutar com a cabeça sobre qual deveria ser o tamanho do site. Com o advento de coisas como layout de bloco adaptável, carregamento dinâmico de conteúdo e fontes, o desenvolvimento do site tornou-se muitas vezes mais agradável. Afinal, essas tecnologias têm menos restrições, embora ainda existam. Mas como você sabe, sem limitações não haveria arte. Sugerimos que você use uma abordagem de design verdadeiramente criativa - a seção áurea. Com ele, você pode preencher o espaço de trabalho de maneira eficiente e bonita, independentemente do tamanho dos sites especificados nos modelos.

Como aumentar o espaço de trabalho do site

As chances são de que você não teráEspaço suficiente para encaixar todos os elementos da interface em um layout pequeno. Nesse caso, você precisa começar a pensar de forma criativa ou até mais criativa do que antes.

Espaço livre máximo no site pode serocultando a navegação no menu pop-up. Essa abordagem é lógica para usar não apenas em dispositivos móveis, mas também em desktops. Afinal, o usuário não precisa de todo o tempo para ver quais rubricas estão em seu site - ele veio em busca de conteúdo. E os desejos do usuário devem ser respeitados.

Um exemplo de uma boa maneira de ocultar um menu é o seguinte layout (foto abaixo).

No canto superior da área vermelha, você pode ver uma cruz, clicando no que irá esconder o menu em um pequeno ícone, deixando o usuário sozinho com o conteúdo do site.

No entanto, isso não é necessário, você podedeixe a navegação, que estará sempre à vista. Mas você pode torná-lo um belo elemento de design e não apenas uma lista de links populares no site. Use ícones intuitivos além ou até mesmo em vez de links de texto. Ele também permitirá que seu site use com mais eficiência o espaço na tela no dispositivo do usuário.

Melhor site - responsivo

Se você não sabe qual layout escolher para o seu site,então tudo é simples para você. Para economizar nos custos de desenvolvimento e ainda não perder seu público devido a um layout ruim para algum dispositivo, use um design responsivo.

O design responsivo é um design queparece igualmente bom em dispositivos diferentes. Essa abordagem permitirá que seu site seja compreensível e conveniente, mesmo em um laptop, até mesmo em um tablet ou até mesmo em um smartphone. Este efeito é obtido alterando automaticamente a largura da área de trabalho da tela. Ao usar folhas de estilo de sites responsivos, você está tomando a melhor decisão possível.

Como o design responsivo difere de ter diferentes versões de um site?

O design responsivo é diferente do celularsite, neste último caso, o usuário recebe um código html que difere do desktop. Esta é uma desvantagem em termos de otimização de desempenho do servidor, bem como otimização de mecanismo de pesquisa. Além disso, torna-se mais difícil calcular estatísticas para diferentes versões do site. A abordagem adaptativa está livre de tais desvantagens.

A adaptabilidade para diferentes dispositivos é alcançadadevido a um layout com uma configuração percentual da largura, seja movendo blocos para o espaço disponível (em um plano vertical em um smartphone ao invés de horizontal em um desktop), ou criando layouts individuais para telas diferentes.

Você pode aprender mais sobre design e desenvolvimento responsivo nos tutoriais.