Dimensións estándar locais: características, requisitos e recomendacións

desenvolvemento de tecnoloxía de sitios web - un proceso moi multi-achaflanada. Con todo, as súas fases pode ser dividido en dúas compoñentes principais - un funcional e unha vaina exterior. Ou, como no medio webmaster Beg End e Front End, respectivamente. As persoas que compraron os seus sitios en estudos de desenvolvemento web, moitas veces inxenuamente cren que é necesario centrarse só funcional, e será a decisión correcta. Pero iso é verdade nun moi, moi raras ocasións, xeralmente para start-ups de proxectos en fase de probas beta. O resto do deseño gráfico e interface de usuario son simplemente obrigados a cumprir cos estándares de desenvolvemento web e ser cómodo.

A primeira pedra angular de fronte para o deseño de interface, ou deseño - é o ancho do esquema do sitio web. Despois de todo, é necesario chamar as interfaces para ela. Intuitivamente, hai dous enfoques - sexa para facer esquemas separados para cada unha das resolucións de pantalla populares, ou pode crear unha versión do sitio web para todos os mapas. Ambas as opcións sería malo, pero as primeiras cousas primeiro.

ancho estándar en píxeles para o sitio que realmente precisa

Antes do desenvolvemento do fenómeno de masas disposición adaptativa foi o desenvolvemento dun sitio web con miles de píxeles de ancho. Este número foi escollido por unha simple razón - que o sitio foi instalado en calquera pantalla. E hai unha certa lóxica, pero imos supor que unha persoa que é, polo menos, HD-monitor no escritorio. Neste caso, o seu esquema vai parecer pequena franxa no medio da pantalla, onde todo é moldeado nunha pila, e nas laterais do enorme non-espazo. Agora imos supor que unha persoa veu para a súa web a partir dun tablet con pantalla de 800 píxeles de ancho, e é marcada na configuración "Mostrar o sitio web da versión completa." Neste caso, o sitio web tamén serán mostrados incorrectamente, como simplemente non se encaixan na pantalla.

A partir destas consideracións, podemos concluír que unha largura fixa para o deseño, simplemente non se encaixan e quere atopar outra forma. Imos analizar a idea dun esquema diferente para cada ancho da pantalla.

Esquemas para todas as ocasións

Se ten escollido como unha estratexia para crear esquemas para tamaños dispoñibles todos pantalla no mercado, a continuación, o seu sitio será o máis orixinal na Internet. Ao final, hoxe é simplemente imposible para cubrir toda a gama de dispositivos nun intento de facer un axuste exacto para cada opción. Pero se se concentrar sobre os dispositivos de resolución do monitor e pantalla máis populares, a idea é boa. A súa única desvantaxe - os custos financeiros. Ao final, cando o deseño de interface deseño e programador será forzado a 5 ou 6 veces para realizar o mesmo traballo, o proxecto vai custa desproporcionalmente orixinalmente plantado a prezos accesibles.

Polo tanto posúen unha abundancia de versións para distintas pantallas pódense agás que a web de odnostranichniki cuxo obxectivo - para vender un produto e asegúrese de facelo ben. Ben, se non é un deses Landing, un multi-sitio web, é lóxico aínda máis.

Os tamaños máis populares de sitios

Un compromiso entre os dous extremos é un deseño do esquema para tres ou catro tamaños de pantalla. Entre eles, un debe ser un esquema para dispositivos móbiles. O resto ten que ser adaptado á pantalla de escritorio de pequeno, medio e grande porte. Como elixir o ancho da páxina? Por baixo presentamos HotLog estatísticas de servizo para maio de 2017, o que nos mostra a distribución da popularidade de varios resolución de pantalla do dispositivo, así como a dinámica do cambio neste indicador.

A partir da táboa, é posible aprender a determinar o tamaño do sitio web que quere usar. Ademais, pódese concluír que o máis común hoxe é o formato de pantalla de 1366 por 768 píxeles. Estas pantallas están instalados nun portátil de baixo custo, así que a súa popularidade é natural. O seguinte máis popular é un HD monitor completo, que é o patrón ouro para películas, xogos, e, polo tanto, para crear esquemas de sitios. Ademais na táboa vemos permitir que os dispositivos móbiles de 360 x 640 píxeles, así como varias concrecións do escritorio e pantallas móbiles despois.

disposición de proxecto

Entón, despois de analizar as estatísticas, podemos concluír que o ancho ideal do sitio web ten 4 variacións:

1. portátiles versión con 1366 píxeles de ancho.
2. HD-versión completa.
3. 800 píxeles no esquema tamaño do ancho para exhibición en pequenos monitores de escritorio.
4. a versión móbil do sitio - 360 píxeles de ancho.

Supoña que decidiu o que quere usar o tamaño do código fonte xerado para o sitio. Pero tal proxecto aínda sería caro. Por iso, considero máis opcións, esta vez sen o uso de un ancho fixo.

Fai un esquema flexible

Existe unha visión alternativa que necesitamos só para axustar o tamaño mínimo da pantalla, eo tamaño dos lugares será solicitada por cento. Neste caso, os elementos de interface, como menús, botóns e logos, pode ser definida en termos absolutos, con foco no tamaño mínimo do ancho da pantalla en píxeles. Bloques co contido, pola contra, será estirado segundo o especificado por cento do ancho da área da pantalla. Esta visión non permite detectar o tamaño do local como restricións para o deseño eo talento para gañar esta matices.

Cal é a proporción áurea, e como usar as páxinas web para o deseño?

Mesmo no Renacemento moitos arquitectos e artistas intentaron dar as súas creacións a perfecta forma e proporción. Para obter respostas a preguntas sobre as implicacións de tales proporcións, se volveron para a raíña de todas as ciencias - Matemáticas.

Desde os días da antigüidade foi inventado pola proporción que o noso ollo percibe como o máis elegante e natural, xa que é omnipresente na natureza. Descubridor da fórmula deste ratio foi un arquitecto grego talentoso chamado Fidias. Calcúlase que, se a maioría das proporcións refírese a partir dun conxunto proporciona unha maior, entón esta proporción se ve ben. Pero, neste caso, se quere dividir assimetricamente obxecto. Esta proporción máis tarde pasou a ser chamado a proporción áurea, que aínda non superestimar súa importancia para a historia cultural mundial.

Imos volver para deseño web

É moi sinxelo - utilizando a proporción áurea, podes crear páxinas que será máis agradable ao ollo humano. Calculado segundo a fórmula da sección áurea, atopamos o número irracional 1,6180339887 ... pero por conveniencia pode utilizar o valor redondado de 1,62. Isto significa que os nosos bloques da páxina deben ser de 62% e 38% do total, non importa o tamaño xerado código fonte para o sitio web que está a usar. Exemplo, pode ver no seguinte esquema:

Uso de novas tecnoloxías

Modernos sitios de deseño tecnoloxía permiten que transmitir con precisión ideas do deseñador e deseñador, entón agora pode pagar a implantación das ideas máis ousadas que nos inicios da tecnoloxía de Internet. Xa non precisa de moito para confundir sobre cal debe ser o tamaño dun sitio. Coa chegada de cousas como bloque de deseño adaptable, carga dinámica de contidos e fontes, desenvolvemento de sitios web converteuse en moitas veces máis agradable. Ao final, estas tecnoloxías teñen menos restricións, aínda que eles son. Pero como vostede sabe, sen limitación, non habería art. Suxerimos que use unha visión verdadeiramente creativo para proxectar - a sección áurea. Con el, será capaz de forma eficaz e ben encher o espazo de traballo, non importa o tamaño ou sitios que pediu nos seus modelos.

Como aumentar o sitio web de espazo de traballo

As posibilidades son que non vai ter espazo suficiente para acomodar todos os elementos da interface no esquema do tamaño pequeno. Neste caso, terá que comezar a pensar creativamente, ou mesmo máis creativo do que fixo antes.

liberar espazo máximo na web como sexa posible, agochar a navegación no menú emerxente. Esta visión é lóxico usar non só móbil, senón tamén no ámbito de traballo. Ao final, o usuario non ten todo o tempo para ollar para o que ten títulos na súa páxina web - chegou ao contido. Un usuario desexa ser respectado.

Un exemplo de un bo xeito de ocultar o menú é o seguinte esquema (foto abaixo).

Na esquina superior canto do vermello área, podes ver unha cruz, prema o menú que se esconde nunha pequena icona, deixando o usuario só co contido do sitio web.

Sen embargo, este é opcional, pode deixar a navegación que sempre á vista. Pero pode facelo un elemento de deseño bonito, e non só unha lista de enlaces no sitio web popular. Use as iconas intuitivo, ademais de ligazóns de texto ou mesmo substituír-los. Tamén pode facer que o seu sitio web para uso máis eficiente do espazo na pantalla do dispositivo.

Mellor Website - adaptativa

Se non sabe cal escoller un esquema para o sitio, todo só para ti. Para aforrar en custos de desenvolvemento e, á vez, non perder a audiencia por mor da mala disposición por algún dispositivo, use deseño web responsabilidade.

Adaptive chamado de deseño que parece en diferentes dispositivos igualmente ben. Esta visión permitirá que o seu sitio web para ser clara e fácil, mesmo para un portátil, polo menos no tablet, mesmo nun smartphone. Conseguiu este efecto é debido a cambios automáticas escritorio do ancho da pantalla. Usando follas de estilo adaptativas para o sitio, está tomando a decisión correcta posible.

O que distingue o proxecto de adaptación da dispoñibilidade de distintas versións do seu sitio

deseño responsabilidade é diferente do sitio web móbil para que, no último caso, o usuario recibe un código HTML, que é diferente do escritorio. Esta é unha desvantaxe do punto de vista de optimizar o rendemento do servidor, así como a optimización de motor de busca. Ademais, máis difícil se fai a considerar as estatísticas de acordo con diferentes versións da web. Unha visión adaptativa é desprovido de deficiencias.

A adaptabilidade para dispositivos diferentes é alcanzada pola anchura da disposición ou Porcentaxes través bloques de transporte no espazo dispoñible (no plano vertical no canto de horizontal do aparello nun ambiente de traballo), ou os esquemas individuais a través da creación de varias pantallas.

Podes aprender máis sobre deseño responsabilidade e desenvolver pode a partir de libros.