Hoy en día, la mayoría de las personas se conectan en línea a través de dispositivos móviles: tabletas, teléfonos, en este sentido, la optimización del sitio también se aplica a nuevo nivel. Si un usuario entra y ve que el sitio no está optimizado para dispositivos móviles: la imagen no se puede ver, los botones se han movido, las fuentes son pequeñas e ilegibles, el diseño está torcido: el 99% de 100% saldrá y empezar a buscar otro más conveniente. A marcará la casilla de que el recurso es irrelevante, es decir, no coincide con la consulta de búsqueda. Por lo tanto, el diseño de la página debe adaptarse a varios dispositivos móviles. ¿Qué es una versión móvil del sitio, cómo hacerla y cuál es la mejor manera de aplicarla? Lea más en este artículo.
Por lo tanto, hay cuatro formas clave de adaptar el sitio para la versión móvil.
Método uno: diseño receptivo
Las plantillas receptivas cambian la imagen del sitio según el tamaño de la pantalla. Como regla general, se configuran en 1600, 1500, 1280, 1100, 1024 y 980 píxeles estándar. Las consultas se utilizan para la implementación. No se cambia a sí mismo.
Las ventajas de este método incluyen:
- desarrollo conveniente, ya que la estructura en sí se adapta a los parámetros de la pantalla, y cualquier actualización no requiere un desarrollo de diseño desde cero, basta con modificar CSS y HTML;
- una dirección URL: el usuario no necesita recordar varios nombres, no es necesario redirigir (redirigir de una dirección a otra), lo que puede complicar el trabajo del webmaster, y es más fácil para el motor de búsqueda ordenar y clasificar un recurso con una sola dirección.
Por supuesto, las plantillas adaptables tienen sus inconvenientes, que, por cierto, son más que ventajas. Sin embargo, muchos desarrolladores se adhieren a este concepto, por ejemplo, Google Corporation, cuya versión móvil del sitio tiene un diseño adaptativo. Entonces, desventajas:
- El diseño receptivo no admite las mismas tareas en dispositivos móviles que en computadoras de escritorio. Si se trata, por ejemplo, de una versión móvil del sitio web de un banco, donde es más probable que la información sobre el tipo de cambio o los cajeros automáticos más cercanos sean importantes para el usuario, entonces este diseño es suficiente. Pero si se trata de un recurso estructurado complejo con muchas secciones y subsecciones, es poco probable que a los visitantes les guste.
- La carga lenta convierte un sitio favorito en uno odioso. Esto es especialmente cierto para los recursos donde abundan las animaciones, videos, ventanas emergentes y otros elementos activos. Debido al alto peso, la página simplemente se "ralentizará", el usuario se enojará y se irá, y las posiciones de búsqueda del sitio caerán.
- no se puede deshabilitar version móvil- Otro inconveniente importante. Si algún elemento está oculto por un diseño de este tipo, no puede hacer nada para abrirlo, a diferencia de los sitios donde puede desactivarlo y cambiar a un dominio normal.
Sin embargo, una versión móvil del sitio de este tipo rápidamente, sin habilidades ni costos especiales, le permite adaptar el recurso a cualquier dispositivo. Pero, en vista de las deficiencias enumeradas, se adaptará a recursos pequeños y simples con un mínimo de información y multimedia, sin navegación ni animación complejas. Para un sitio complejo, otros 2 métodos son adecuados.
Método dos: una versión separada del sitio
Este método es muy común y, a menudo, logra que el sitio sea más legible en un dispositivo móvil. Su esencia es crear una versión separada de la página, dibujada para la aplicación y ubicada en una URL o subdominio separado, por ejemplo, m.vk.com. Al mismo tiempo, se conserva la funcionalidad principal, el diseño del sitio se ve diferente. Las ventajas de este método son obvias:
- interfaz amigable;
- es fácil de cambiar y hacer ediciones, ya que la versión existe por separado del recurso principal;
- debido al bajo peso, una versión separada del sitio funciona mucho más rápido que una plantilla adaptable;
- la mayoría de las veces es posible ir a la versión principal de la página desde el móvil.
Pero incluso aquí no estuvo exento de inconvenientes:
- Varias direcciones: versión de escritorio y móvil del sitio. ¿Cómo hacer que el usuario recuerde dos opciones? Los webmasters suelen prescribir desde la versión de escritorio hasta la versión móvil, pero si esta página no existe en la versión móvil, el usuario recibirá un error. Aquí surgen dificultades con los motores de búsqueda, a los que les cuesta posicionar 2 recursos idénticos, y esto afecta directamente a la promoción.
- La versión móvil del sitio desde una computadora, si el usuario lo visita por error, se verá ridículo, lo que también puede afectar el tráfico.
- Esta versión a menudo está muy restringida, de escritorio, por lo que el usuario recibirá una funcionalidad muy limitada. Pero al mismo tiempo, si falta algo, el visitante puede ir a versión completa paginas
En general, un sitio móvil separado se justifica por sí mismo y es la forma más común de adaptar un recurso para dispositivos móviles. Es popular entre las grandes tiendas en línea como Amazon.
La tercera vía - RES-diseño
El motor de búsqueda de Google apoya activamente esta dirección del diseño móvil. Este es el método más complejo, costoso pero efectivo para adaptar el sitio a un teléfono o tableta. Se llama RESS. Esta es la orientación de recursos en una aplicación móvil que se puede descargar para cada dispositivo por separado. Para Android, con GooglePlay y para Apple, con iTunes.
Tales aplicaciones son rápidas, gratuitas, convenientes, tienen la capacidad de acomodar varios tipos de información, mientras que la memoria del teléfono y el tráfico de Internet no se consumen como cuando se visita un sitio a través de un navegador. Son fáciles de visitar, ya que el enlace siempre estará en la pantalla y no es necesario ingresar un nombre complejo en la barra de direcciones del navegador.
Por supuesto, también hay desventajas aquí, como la complejidad en el desarrollo, los altos costos de mano de obra para una gran cantidad de programadores y la necesidad de realizar varias opciones de diseño. Algunas veces dispositivo móvil no reconocido por la aplicación. Regular soporte técnico, corrección de deficiencias. No obstante, esta opción se considera la mejor de las tres propuestas por su funcionamiento productivo e ininterrumpido.
La forma más barata de hacer un sitio web móvil
Todos los métodos anteriores implican, aunque no siempre largos y complicados, pero aún así el trabajo remunerado de un webmaster. Si no ve una necesidad urgente de dicho desarrollo, una versión móvil simple y gratuita del sitio le conviene. ¿Cuál es la forma más fácil de hacerlo?
Descargue plantillas especiales (complementos) para un diseño receptivo. Por ejemplo, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile y otros. Ayudarán a visualizar el sitio de forma más correcta en el teléfono, mientras que recibirá algunos consejos sobre lo que debe corregirse para adaptar mejor la página a la versión móvil.
Por supuesto, este método difícilmente es adecuado para recursos serios. Más bien, oportunidad libre está diseñado para sitios pequeños y simples, blogs, fuentes de noticias. Tampoco hay que olvidar que motor de búsqueda de Google, al igual que Yandex, hoy en día impone serias exigencias a las versiones móviles, por lo que existe una gran posibilidad de reducir sus posiciones con este método.
Con este método, lo más probable es que se eliminen los anuncios y los banners emergentes, pero la página se cargará rápidamente y sin "retrasos".
Principios de creación de versiones móviles
No importa si la versión móvil del sitio se creó de forma gratuita o con la ayuda de un equipo de webmasters, se hizo en el sistema RESS o utilizando una plantilla adaptable. Lo que es más importante, para su funcionamiento efectivo, se requiere adherirse a varios principios extremadamente importantes. Entonces, ¿cuál debería ser la versión móvil del sitio? ¿Cómo hacerlo productivo, eficiente y productivo?
Eliminamos todo lo innecesario
El minimalismo es lo que debe buscar el desarrollador de la versión móvil del sitio. Imagínese lo difícil que es percibir información que está repleta de colores, botones, pancartas y que tiene que desplazarse sin cesar en busca del material adecuado. El diseño móvil debe ser simple y limpio. Elija 2-3 colores para dividir el espacio (por ejemplo, de marca). Mejor si uno de ellos es blanco. Divide el espacio de una pequeña pantalla en zonas comprensibles y legibles. llaves virtuales debe estar visible para que el usuario sepa claramente dónde hacer clic y ver: aquí está el producto, aquí está el formulario para completar los datos, aquí está la información sobre la entrega y el pago.
Todos opciones adicionales, que sería útil en la versión de escritorio y facilitaría la vida del usuario, aquí solo traerá dificultades. Deja solo los elementos más importantes. La animación, los banners publicitarios, los multimedia, muy probablemente, solo ralentizarán el trabajo del sitio o la aplicación y distraerán la atención de lo principal.
alineación
El tema de la alineación no es menos agudo, ya que si se hace de forma incorrecta, el usuario solo obtendrá las terminaciones de las palabras importantes. Generalmente se acepta la alineación vertical y alineada a la izquierda. Imagínese desplazándose por las noticias en su teléfono. Lo haces de arriba hacia abajo, pero no hacia la izquierda o hacia la derecha.
Unión
Cuando no haya posibilidad de una larga cadena de transiciones, intente combinar varios pasos en uno. Por ejemplo, el sitio requiere la entrada de datos en varias etapas: un nombre, luego una dirección, donde cada celda individual contiene una casa, una calle, un apartamento, etc. por separado. Para no obligar al usuario a tratar de presionar muchas celdas pequeñas, pregunte él para completar sólo 2 - nombre y dirección.
y desconexión
A veces, por el contrario, se requiere separar demasiada información. Por ejemplo, en el menú desplegable tienes una lista de más de 80 ciudades donde se realizan envíos. Agrúpelos por región para que el usuario no tenga que desplazarse por esta enorme lista. Cuando pase el cursor sobre el centro regional o la región, aparecerá otra lista de ciudades.
Liza
Por cierto, sobre las listas. Hay dos de ellos: fijados en orden alfabético u otro y con sustitución. Su elección depende de lo que se enumerará.
Fixed es útil si el usuario sabe exactamente lo que está buscando. Por ejemplo, ciudad, número o fecha. La segunda opción es adecuada para nombres largos y complejos o para casos en los que hay muchas variaciones del mismo nombre, y cada una acerca al usuario un paso más a la meta. La opción de sustitución automática se usa con más frecuencia cuando un visitante necesita ayuda. Por ejemplo, un sitio de tejido ofrece comprar agujas de tejer. El usuario ingresa la consulta de búsqueda "Agujas de tejer de metal", y en la información sobre herramientas ve "Agujas de tejer de 5 mm", "Agujas de tejer de 4,5 mm", etc.
Autocompletar
Este punto es especialmente cierto para los sitios donde algo se vende en línea y usted tiene que completar formas estándar de pago, entrega, etc. Si una persona realiza una compra desde un teléfono, lo más probable es que no tenga tiempo para llegar a un ordenador, por lo que el proceso de compra debe realizarse de la forma más rápida y cómoda posible.
Para ello, los formularios pueden contener datos ya rellenados, puede recurrir a las respuestas más populares. Por ejemplo, inserte la fecha de hoy, el método de pago en efectivo, la ciudad si trabaja en la misma región. Se pueden cambiar, pero si aciertas en el objetivo, se ahorrará el tiempo del usuario.
Todo se lee, todo se ve
Al crear el diseño de la versión móvil del sitio, recuerde que los teléfonos de todos son diferentes, al igual que su vista. Tal vez su sitio se verá desde una pantalla pequeña, por lo que las fuentes deben ser simples y legibles, los botones deben ser lo suficientemente grandes para que se pueda hacer clic en ellos sin que se lleven a otra página, y las imágenes deben abrirse por separado, grandes, especialmente cuando se trata de Internet.-tienda.
Algunas estadísticas
Hablando de la adaptación del sitio a los dispositivos móviles, uno no puede dejar de recurrir a las estadísticas para comprender cuán importante es este proceso para la promoción en línea.
Los números son los siguientes. Hoy en día, los gadgets son utilizados por el 87% de la población, al parecer, salvo los niños más pequeños y algunos ancianos. Los economistas predicen el crecimiento comercio movil 100 veces en los próximos 5 años. Al mismo tiempo, solo el 21% de los sitios están adaptados para funcionar con dispositivos móviles. Esto significa que el tráfico de Internet y el mercado de comercio electrónico solo están ocupados por una pequeña 5ª parte.
Piensa en estos números. ¿Tiene sentido adaptar su recurso? Por supuesto que sí. Además, si bien hay tanto espacio libre en este mercado, puede crear su propio segmento en él.
¿Dónde se necesita la versión móvil?
El uso de la versión móvil tiene sentido para cualquier plataforma que pretenda obtener una clasificación alta. Después de todo, este es un impacto directo en el usuario, creando condiciones cómodas para que permanezca en su sitio.
Sin una versión móvil no puede existir:
- portales de noticias, ya que la mayoría de ellos son vistos desde el teléfono camino al trabajo o estudio;
- redes sociales: por la misma razón, además hay un factor de comunicación en línea, lo que significa que se debe crear un chat conveniente y comprensible para esto;
- referencia, sitios con navegación, etc., donde la gente va cuando busca algo;
- compras en línea: una oportunidad para atraer clientes que no pierden el tiempo comprando, sino que compran todo a través de Internet móvil.
En lugar de una conclusión
Hoy dia tecnologías móviles se encuentran en la etapa de crecimiento y desarrollo activo, por lo tanto, al luchar por el liderazgo en el mercado, cualquier empresa debe asegurarse de que su recurso de Internet cumpla con los requisitos. Debido a las crecientes demandas de los usuarios, los sitios deben modernizarse constantemente y adaptarse a varios dispositivos. Está claro que si a una persona le resulta inconveniente estar en un recurso en particular, no puede obtener información sobre un producto o precio allí, realizar un pedido, averiguar sobre la entrega, luego encontrará el sitio donde todo esto será posible. Por lo tanto, para ganar la competencia, es importante contar con un recurso flexible, conveniente, funcional e interesante.
La versión móvil del sitio Android o Ios ayudará a hacer esto. Para hacer esto, debe elegir uno de los métodos de rediseño anteriores: una plantilla adaptable, crear un nuevo sitio en un subdominio e ir a él redirigiéndolo, usando plantillas gratuitas o creando aplicación movil, con lo cual el usuario podrá ingresar y estar en la página de manera más conveniente.
En el mundo moderno, a veces tener su propio sitio web es tan importante como tener un número de teléfono o una dirección. Correo electrónico. Desafortunadamente, no todos pueden crear un hermoso sitio web profesional por su cuenta y, a veces, incluso una curva no funciona. Hacer pedidos a los programadores tampoco es una solución ideal, ya que no todos pueden permitírselo.
Las plantillas de sitio web HTML gratuitas lo ayudarán a salir de esta situación. Una plantilla de sitio HTML es un conjunto de páginas estáticas preparadas para un sitio de un tema determinado. Con esta plantilla, puede crear un sitio web simple en solo un par de horas, con conocimientos básicos de marcado HTML. En la sección HTML, obtendrás este conocimiento si dedicas un par de horas más a estudiar, y si no dedicas tiempo a la sección CSS, podrás controlar completamente el diseño de las plantillas del sitio HTML y personalizarlas por completo. a tus necesidades
Otra ventaja indiscutible de las plantillas de sitios web es que, en la mayoría de los casos, están escritas por profesionales. Una plantilla de sitio profesional significa no solo un diseño hermoso y moderno, sino también cómo se escribe el código. Los motores de búsqueda miran cómo está escrito su sitio, si el código está optimizado para SEO o no, y en base a esto bajan o aumentan sus posiciones en los resultados de búsqueda. Por lo tanto, un buen sitio no solo debe ser hermoso y moderno, lo cual es importante, sino también estar bien escrito en términos de código.
Descargue plantillas de sitios web HTML gratuitas y cree sus proyectos en poco tiempo.
hay una solucion
Pregunta sobre un tema. En realidad entendí que? mobile = 1 elimina el indicador "nomobile" en el archivo de sesión. Si este parámetro se especifica en la versión de escritorio del navegador, entonces la plantilla de la versión móvil no está conectada. Si está en dispositivos móviles, entonces...
Esta es la versión modificada de Shop-Script 6: función estática pública isMobile($check = true) ( if ($check) ( if (self::get("nomobile") !== null) ( if (self: :get( "nomóvil")) ( waSystem::getInstance()->getStorage()->write("nomobile", false); ) ) elseif (self::get("mobile")) ( waSystem::getInstance ()- >getStorage()->write("nomobile", true);...
Tenemos un sitio http://kotofey.md (estacionado en webasyst), es un espejo de https://kotofey.webasyst.cloud (plantilla de facebook) sobre la base de la cual se crea la aplicación de la tienda en línea en facebook: https ://www.facebook .com/kotofey.md/app/2151596388... hay...
Cambiar los elementos del menú en la versión móvil
Ahora se muestra el menú del sitio. Lo que hay que hacer es mostrar el menú de la tienda con información sobre la entrega, etc. Plantilla de versión móvil "móvil"
TIENDA ONLINE VERSIÓN MÓVIL
PERSONALICE COMPLETAMENTE LA PLANTILLA DE LA VERSIÓN MÓVIL DE LA TIENDA EXPRESS Y HAGA UNA TIENDA EN LÍNEA.
Diseño de la versión móvil del sitio.
Colegas, buenas tardes Después de una experiencia fallida al trabajar con uno de los expertos de este foro (el trabajo duró desde el 10/12/2016 pero nunca se completó, y ahora el desarrollador ha desaparecido por completo), les pido una solicitud para completar una versión móvil completa...
Buenas tardes, me encontré con una interpretación muy extraña de los desarrolladores sobre qué es y qué no es un dispositivo móvil. Cuando en la configuración de Webasyst (Sitio o Tienda) habilito la opción "Tema móvil" (Tema para...
Estimados desarrolladores miren este video Tiene una persona encima...
hay una solucion
Buen día. Necesitas mostrar contenido diferente dependiendo de la versión móvil o de PC. ¿Cómo puedo comprobar si la versión móvil está ahora o no en el código de la plantilla?
(si $wa->esMóvil()) .... (/si)
+1
hay una solucion
Dígame cómo puede ocultar este o aquel bloque, elemento, etc., en la plantilla, en la versión móvil del sitio. La tarea es eliminar varios elementos de la versión móvil debido a que no se muestran correctamente en Talla.
¿Puedes elaborar un poco más sobre CSS?
Haz mín. el importe del pedido en la versión móvil e insertar una imagen.
Necesidad de hacer: 1) Min. importe del pedido en la versión móvil del sitio (en versión normal está escrito en la plantilla cart.js, pero en la móvil) 2) Inserte una imagen en la página del sitio para que se expanda a tamaño completo cuando se haga clic.
Buenas tardes Existe tal situación: la versión móvil del sitio parece funcionar como debería, pero para algunas páginas, en particular Área personal comprador, la plantilla de escritorio está cargada, aunque hay una versión móvil. Dime dónde necesitas arreglarlo para que ...
Para superar las hordas de bots que se registraban todos los días, tuve que instalar Google Recaptcha v.2, los bots desaparecieron, pero si la casilla "No soy un robot" no funciona para la gente común y aparece la verificación, luego en la versión móvil del sitio (plantilla:...
hay una solucion
Buenas tardes, dígame en qué archivo registrar el contador y se mostrará de la misma forma que en el sitio. Transfirí el archivo liveInternet.js de la plantilla principal a la móvil, en la que está el código del contador, pero ahora Lo inserto en la versión móvil del sitio: - así es como funcionaba Configurar la versión móvil.
Hola a todos, esta tienda http://biznes-lunch.com/ no se muestra bien en una tableta con alta resolución, ya que se muestra en su forma original. En teléfonos con pantalla pequeña, la versión móvil se abre y parece que debería... Compré webasyst Shop-Script 6, pedí un diseño individual (no de plantillas), ¿necesito pedir configuraciones y diseños adicionales para la versión móvil de mi tienda en línea? En la plantilla "Minimo" en la versión móvil del sitio, la canasta se encuentra de manera muy inconveniente, es casi invisible. ¿Es posible hacerlo desplazable junto con la página, y no fijo en una parte determinada de la página?En la primera foto, la cesta... Buenas tardes Compramos una plantilla de sitio https://www.webasyst.ru/store/theme/spring/ tiene las funciones de adaptarse a la versión móvil y, como nuestro sitio, más precisamente, las imágenes se pueden adaptar al teléfono [correo electrónico protegido] Hola. Compramos una plantilla de diseño https://www.webasyst.ru/store/theme/supreme/ No me gusta la versión de diseño para dispositivos móviles, ¿es posible reemplazarla con una versión de tamaño completo en algún lugar de la configuración? Gracias. hay una solucion Hola. Compramos una plantilla de diseño https://www.webasyst.ru/store/theme/profitbuy/ No me gusta la versión de diseño para dispositivos móviles, ¿es posible reemplazarla con una versión de tamaño completo en algún lugar de la configuración? Gracias. Puede cambiar el tema de diseño móvil al deseado en la sección Sitio - Estructura - (asentamiento) - Tema móvil. Antón hay una solucion Buenas tardes Me encontré con un problema como este.El usuario se sienta en el sitio desde un dispositivo móvil, camina a través de las páginas. El visor web Yandex registra su comportamiento, solo cuando ve el resultado en el visor web SS, le da una plantilla de escritorio, no una de escritorio ... Podría estar equivocado, pero intente habilitar el guardado de páginas en Webvisor. Y así lo obtienes con tu navegador y, naturalmente, obtienes una plantilla de escritorio. O intente navegar desde un dispositivo móvil. hay una solucion Al agregar una foto a la página principal del sitio usando la plantilla "Predeterminada 3.0", cuando se ve en un dispositivo móvil, la foto se distorsiona. En otras plantillas todo está bien. Dime cuál es el problema? Creo que el problema está en algún lugar del css... Captura de pantalla del sitio móvil con la plantilla Default 3Captura de pantalla con la plantilla NiftyComo puede ver en la plantilla Default 3, la foto de la página principal está distorsionada Buena tarde. Nuestro sitio utiliza shop-scipt, una plantilla de Hercules. Al abrir el sitio desde un dispositivo móvil, solo muestra una pantalla blanca con algunos elementos de menú (irrelevantes). Por favor, dígame cómo hacerlo para que cuando abra el sitio, ...
Todas las plantillas presentadas para su sitio se basan en versiones modernas de HTML5 y CSS3. Además, los autores utilizan funciones tan modernas como diseño plano, diseño receptivo, diseño adaptable, controles deslizantes jQuery, animaciones CSS3, etc. Es decir, si está buscando una plantilla de sitio móvil, puede elegir cualquiera de las presentadas. Hermosas plantillas html5 2017, aunque gratis, pero mira el nivel premium.
Aquí encontrará más de 50 plantillas de sitios web adaptables HTML5 y CSS3 de alta calidad que se pueden usar tanto para sitios web nuevos como para rediseños de los existentes. Plantillas de sitio web html5 con estilo- ¡Esto es lo que necesitas!
Actualizado 03/12/2019: Desde que se escribió el artículo hace 2 años, muchos enlaces se han roto. O los propietarios de las plantillas se fusionaron, o el estado de las plantillas cambió de gratuito a pago, o los extraterrestres arruinaron todo. Una solicitud para ustedes, queridos lectores, si encuentran un enlace de este tipo, tírenlo en los comentarios, lo corregiré.
1. Snow - Plantilla de página de destino HTML5 y CSS3 gratuita
La plantilla html5 css3 de la página de inicio de Snow se basa en el marco Bootstrap. ¡La plantilla es muy elegante y genial! Un fondo fijo y un enorme Jumbotron es lo que muestra el contenido principal del sitio. ¿Y qué es lo más importante en la landing page? Así es, una llamada a la acción. Naturalmente, la plantilla está totalmente adaptada para dispositivos móviles. Incluso puede usarlo como base para sus propias plantillas.
2. Sima - elegante plantilla de sitio web comercial
Esta plantilla html5 css3 también se basa en el marco Bootstrap. Puede usar esta plantilla para crear un sitio único con una cartera, su equipo, precios, reseñas y todo lo demás que se necesitará. Por ejemplo, esta plantilla es perfecta para un sitio web de servicios de limpieza. La animación en esta plantilla es fluida y efectiva, las fuentes son limpias y fáciles de leer. ¡Simplemente la plantilla perfecta!
3. ¡El blanco es una gran plantilla de una página!
Una característica distintiva de la plantilla de sitio web White son dos opciones de fondo en la parte superior. Su elección de un control deslizante de imagen o un fondo de video. ¡Plantilla espectacular y de muy alta calidad para el sitio!
4. Platz - Plantilla de sitio web de cuadrícula HTML5 gratuita
Una plantilla de sitio web HTML5 moderna y visualmente atractiva diseñada en torno a una cuadrícula (lea más sobre la cuadrícula). Diseño de plantilla hermoso y receptivo para un blog o sitio web.
5. Mart eCommerce - Hermosa plantilla de sitio web de comercio electrónico HTML5 y CSS3
El diseño fresco y elegante de la plantilla de sitio web es mejor para todo tipo de sitios web de moda que venden zapatos, ropa, relojes, accesorios, ropa deportiva, etc. Viene con un archivo PSD que puedes ajustar a tus necesidades.
6. Nava: una espectacular plantilla HTML5 y CSS3 para sitios web creativos
Nava es una plantilla de sitio web HTML5 moderna utilizada principalmente por profesionales creativos que desean mostrar su trabajo en todo su esplendor. Muchas variaciones de la configuración de la plantilla le permiten hacer que su sitio sea único. Plantilla de sitio web ligera, hermosa y receptiva.
7. Box Portfolio - Plantilla creativa única para sitio web HTML5 y CSS3
La plantilla del sitio web Box Portfolio tiene un diseño minimalista limpio y moderno. Perfecto para profesionales que quieren mostrar su trabajo online de forma efectiva. Como sugiere el nombre, la plantilla del sitio está idealmente diseñada para portafolios.
8. Mountain King - Plantilla de sitio web HTML5 y CSS3 popular y funcional
El tema de la montaña en el diseño de sitios web es muy popular últimamente. La plantilla del sitio web Mountain King no es una excepción. Incluye 336 iconos vectoriales de Typicons. Además de una gran animación CSS3. La plantilla es perfecta para sitios web de viajes y portafolios.
9. Beauty Spa - Genial plantilla de sitio web HTML5 y CSS3 para salones de spa
Beauty Spa es una plantilla de sitio web receptivo con muchas funciones, perfecta para spa, centros de salud o fitness, sitios web de yoga o incluso salones de belleza. Excelente legibilidad de las fuentes y minimalismo discreto.
10. Bent: página de destino elegante y eficaz para sitios web HTML5 y CSS3
Bent es una gran plantilla de sitio web gratuita html5 y css3. Diseño receptivo, animación CSS3, desplazamiento de paralaje, navegación personalizable y otras ventajas. Este es un diseño de plantilla limpio para sitios que desean utilizar un diseño equilibrado para garantizar que los visitantes disfruten de la apariencia del sitio sin dejar de ver claramente el contenido principal.
11. Triangle - Plantilla HTML5 y CSS3 multipropósito receptiva gratuita
Triangle es una plantilla de sitio web HTML5 y CSS3 creativa exclusiva, especialmente para aquellos que quieren mejorar su diseño genial sin empeorarlo. La plantilla tiene más de 40 páginas prediseñadas que le permiten personalizar su sitio al contenido de su corazón.
12. Futuro imperfecto: ¡una plantilla de sitio web brillante para personas creativas!
Experimente una genuina sensación de placer con esta plantilla de sitio web, perfecta para escritores, autores, redactores publicitarios y otros trabajadores de pluma y papel. La plantilla también se puede usar para un blog personal, un blog sobre viajes, creatividad, etc. El diseño creativo y el diseño adaptable de la plantilla atraerán a muchos.
13. Bodo es una gran plantilla de sitio web personal
Bodo es una hermosa plantilla de sitio web HTML5 y CSS3 que es perfecta para un sitio web personal. Especialmente para la organización de carteras. Tipografía limpia y nítida, control deslizante de carrusel, ventanas emergentes para mostrar su trabajo y más.
14. Lens es la plantilla de sitio web HTML5 perfecta para fotógrafos
Los fotógrafos siempre están buscando la plantilla perfecta para que su sitio muestre su trabajo en todo su esplendor, de manera espectacular y, lo que es más importante, ¡a lo grande! La plantilla de sitio raro cumple con estos requisitos. Lens es una de esas plantillas de sitios web para fotógrafos.
15. Spectral - Plantilla única para sitio web HTML5 y CSS3 hecha a mano
Si usted está buscando plantillas de sitios web de automóviles gratis, entonces Spectral sería la solución ideal. Aquí hay un diseño de plantilla de sitio web de una página hecho a mano completamente único. El diseño se puede cambiar como desee. Con esta plantilla, puede crear un sitio impresionante sobre absolutamente cualquier tema, ya sea un blog de viajes impresionante o una galería de fotos, un sitio automotriz o un proveedor de alojamiento.
16. Oxygen - Plantilla de sitio web HTML5 y CSS3 de una página
Oxygen es una plantilla de sitio web comercial conveniente y única. Diseño plano moderno, diseño receptivo. Por ejemplo, esta plantilla es ideal para un sitio sobre aplicaciones móviles o tecnología móvil.
17. Mobirise Bootstrap - Perfecta plantilla de sitio web HTML5 y CSS3 gratis
Si está buscando una plantilla de sitio web gratuita, entonces Mobirise Bootstrap es el lugar perfecto para comenzar. Esta es una plantilla multifuncional con muchos complementos incluidos. Tres diseños de página de inicio y blog prefabricados te ayudarán con esto. Mobirise Bootstrap también está 100% optimizado para SEO y responde a todos los tamaños de pantalla.
18. La Casa - Hermosa y gratuita plantilla HTML5 para sitio web de bienes raíces
La plantilla Brandy es perfecta para organizar un sitio web de bienes raíces comerciales. El diseño receptivo y muy hermoso atraerá no solo al propietario del sitio, sino también a los visitantes.
19. Drifolio - Elegante plantilla de sitio web de cartera HTML5
Plantilla de sitio web de cartera HTML5 y CSS3 elegante y animada. Diseño limpio, excelente tipografía, hermosos íconos y más.
20. Pluton: plantilla de sitio web de una página brillante y elegante
Pluton es una plantilla de sitio web de Bootstrap brillante y llamativa. Una plantilla de sitio web moderna con su diseño único de una página y diseño receptivo que es ideal para estudios, fotógrafos y diseñadores creativos.
21. SquadFree - Plantilla de sitio web profesional HTML5 de una página
La plantilla SquadFree es perfecta para crear un sitio web comercial de una página. La plantilla no solo se ve profesional, sino que también se adapta a todo tipo de pantallas. La plantilla está basada en Bootstrap.
22. Sublime: fascinante plantilla de sitio web HTML5 y CSS3
Sublime es una plantilla de sitio web HTML5 y CSS3 limpia e increíblemente hermosa, perfecta para un sitio web de inicio, agencia creativa o cartera. Diseño receptivo y dos opciones de página para elegir.
23. Timber: plantilla de sitio web HTML5 y CSS3 inusual y hermosa
Timber es un tema de plantilla de sitio web de una página fresco, elegante e inusual. La diagonal es la principal característica de diseño de esta plantilla. La plantilla es perfecta para un sitio web comercial o una cartera. Hay una galería integrada, un mapa e información de contacto que puede personalizar fácilmente para usted.
24. E-Shopper - La mejor plantilla de sitio web de comercio electrónico
E-Shopper es una gran plantilla de sitio de comercio electrónico. Construido sobre Bootstrap con un increíble conjunto de funciones para una tienda en línea completa y eficiente.
25. Magnetic - Plantilla de sitio web de fotos HTML5 y CSS3 gratis
Una plantilla HTML5 y CSS3 absolutamente impresionante para crear un sitio de fotos o un portafolio para un diseñador, ilustrador o artista. ¡Esta plantilla sube el listón de las plantillas profesionales al siguiente nivel! Diseño receptivo, excelente soporte para todo tipo de dispositivos de visualización, navegación fácil y conveniente y mucho más.
26. Mabur Portfolio - Hermosa plantilla de sitio web minimalista HTML5 y CSS3
El diseño plano de esta plantilla de sitio web minimalista es perfecto para crear una cartera. ¡En la plantilla, todos los detalles se verifican perfectamente!
27. Modern Bootstrap HTML5 - Plantilla de sitio web gratuita de una página
Este one-pager gratuito basado en Bootstrap es perfecto para sitios web corporativos, tanto para empresas pequeñas como grandes. Diseño plano, diseño receptivo, todos los elementos de diseño de alta calidad. La plantilla viene en 4 colores diferentes.
28. Infusion - Elegante plantilla de sitio web de una página en HTML5 y CSS3
Infusion es un gran ejemplo de una plantilla de sitio web HTML5 y CSS3 que está diseñada específicamente para crear una cartera comercial. La rica funcionalidad de esta plantilla le permite trabajar de manera efectiva con los clientes y atraer nuevos.
29. Yebo - plantilla de sitio web corporativo en HTML5 y CSS3
Esta plantilla de sitio web de estilo plano de alta calidad es perfecta para cualquier sitio web corporativo. Diseño receptivo, muchas configuraciones y opciones de edición.
30. Veinte - Espectacular plantilla de sitio web HTML5 y CSS3 Parallax
Esta plantilla de sitio web única y muy hermosa con efecto de paralaje no dejará indiferente a nadie. La plantilla de una página se basa en HTML5 puro y CSS3 con diseño receptivo, fondos impresionantes, compatibilidad con redes sociales y más.
31. Urbanic: excelente plantilla de sitio web Bootstrap HTML5 y CSS3
Urbanic es una plantilla de sitio web HTML5 y CSS3 fresca y genial construida en el motor Bootstrap. Perfecto para comenzar a construir su sitio de inmediato sin demasiados problemas. La plantilla se adapta perfectamente a cualquier tamaño de pantalla.
32. Design Showcase - Plantilla de sitio web de portafolio HTML5
Plantilla de sitio web HTML5 visualmente armoniosa y efectiva para organizar su cartera. La plantilla está perfectamente adaptada para dispositivos móviles, lo cual es muy difícil de hacer para sitios de este formato.
33. Mamba One: plantilla de sitio web HTML5 y CSS3 simple y elegante
Mamba One es un ejemplo de una plantilla de sitio web de una página simple pero elegante. Compatible con todos los navegadores modernos y se mostrará adecuadamente en todas partes.
34. KreativePixel - Plantilla de sitio web gratuita para fotógrafos
Otra gran plantilla de sitio web para fotógrafos. El diseño receptivo y la clasificación muy conveniente de fotos en portafolios y galerías atraerán a muchos amantes de la fotografía. La plantilla también utiliza un efecto de paralaje, que también impresiona a los espectadores cuando ven fotos.
35. Aplicación receptiva Retina Ready: plantilla de página de destino HTML5 y CSS3 gratuita
Como sugiere el nombre, esta increíble plantilla de sitio web no solo es perfecta para páginas de destino, sino que también cumple con las nuevas tendencias móviles, especialmente en términos de claridad en dispositivos Retina.
36. Cepillado - Plantilla de sitio web HTML5 y CSS3 receptivo con tecnología Bootstrap
Brushed es una plantilla de sitio web HTML5 y CSS3 gratuita y receptiva basada en el motor Bootstrap. También optimizado para pantallas Retina (iPhone, iPad, iPod Touch y MacBook Pro Retina).
37. Plantilla de sitio web de imagen grande HTML5 y CSS3
¡Bienvenido a Big Picture! Esta plantilla de sitio web HTML5 receptivo es perfecta para todas las personas creativas que tienen algo que mostrar y mostrarlo a lo grande y espectacular en su sitio web. Además, la plantilla utilizó una gran animación.
38. Tesselatte - Plantilla responsiva HTML5 y CSS3 gratuita
Una plantilla simple de una página que tiene en cuenta todas las herramientas necesarias para crear un sitio con éxito. Ideal para un blog personal de un escritor, redactor y simplemente un amante de la palabra impresa.
39. Desbordamiento: plantilla de sitio web HTML5 y CSS3 única
Esta exclusiva plantilla de sitio web HTML5 puro y CSS3 es perfecta para cualquier persona creativa. Es totalmente receptivo y completamente gratuito.
40. Runkeeper: plantilla de sitio web receptiva y muy hermosa
Runkeeper es una plantilla de sitio web gratuita, receptiva y muy hermosa. Se puede utilizar para cualquier sitio. Estilo brillante y fuentes nítidas, diseño receptivo y detalles de plantilla impresionantes. ¡Todo funciona para ti!
41. Estilo de cuadrícula receptivo de pinball: excelente plantilla de sitio web basada en cuadrícula
Esta increíble plantilla de sitio web profesional basada en cuadrícula es perfecta para un sitio web corporativo. El diseño plano moderno y la estructura receptiva de la plantilla se muestran perfectamente en las pantallas de monitores grandes y dispositivos móviles.
42. Prologue - Plantilla de sitio web de una sola página HTML5 y CSS3 puro
Esta plantilla de sitio web HTML5 y CSS3 limpia, simple y nítida es perfecta para crear una página de destino. El diseño minimalista no distrae la atención de lo principal. ¡Una barra de navegación lateral con desplazamiento espectacular y líneas de página limpias son la combinación perfecta!
43. Helios - Plantilla de sitio web moderno con HTML5 puro y CSS3
Otra plantilla de sitio web con estilo minimalista y formas limpias. Especialmente diseñado para aprovechar las grandes pantallas de visualización, pero también se adapta perfectamente a las pequeñas pantallas de los dispositivos móviles.
44. Telephasic - Plantilla de sitio web HTML5 gratuito y receptivo
Esta plantilla de sitio web moderna, receptiva y completamente gratuita tiene una gran ventaja: es simple y concisa, pero esto es exactamente lo que a muchos les falta.
45. Strongly Typed - muy hermosa plantilla de sitio web semi-retro
Nueva plantilla de sitio web con un estilo semi-retro minimalista. Es solo que lo retro ya no está de moda, pero un ligero indicio de ello es muy bienvenido. Esta plantilla de sitio web es totalmente receptiva, se basa en HTML5 y CSS3 puros e incluye todos los elementos de página básicos necesarios. La plantilla Strongly Typed es ideal para sitios web creativos. Por ejemplo, para un sitio web sobre decoración del hogar.
46. Striped - Plantilla de sitio web HTML5 y CSS3 limpio, hermoso y funcional
Nueva plantilla de sitio web fresca y limpia, hermosa y funcional en HTML5 y CSS3. Tiene todos los elementos de página necesarios en su arsenal, incluidas citas decoradas, tablas y listas, así como una barra lateral adaptada (a la derecha o a la izquierda, como desee).
47. Paralelismo: plantilla de sitio web inusual y elegante en HTML5 y CSS3
Parallelism es una elegante plantilla de sitio web para organizar portafolios o fotos. Lo inusual es que el desplazamiento aquí no es vertical, como de costumbre, sino horizontal. Esto le da al sitio un glamour y una memorabilidad especiales.
48. Miniport - Plantilla de sitio web HTML5 minimalista totalmente sensible
Una gran plantilla minimalista de sitio web HTML5. Perfecto para un sitio / blog personal, así como para un pequeño sitio corporativo de una página o como un sitio de tarjeta de presentación.
49. Verti - Plantilla de sitio web HTML5 adaptable, espaciosa y gratuita
El diseño limpio y espacioso de esta plantilla de sitio web es perfecto para sitios web corporativos pequeños o proyectos comerciales. Responsivo y conveniente tanto para el autor como para los usuarios.
50. ZeroFour - Plantilla de sitio web HTML5 y CSS3 impresionante y elegante
Y la última de la lista, pero no la última en cuanto a calidad y vistosidad externa, es la plantilla web de ZeroFour. Diseño elegante, menú muy hermoso, formularios y botones perfectamente ajustados, hermosos íconos y mucho más. ¡Y todo esto es absolutamente gratis!
Espero que haya encontrado algo adecuado entre estas maravillosas plantillas de sitios web HTML5 y CSS3. ¡Buena suerte!
Márquelo como favorito para que pueda encontrarlo rápidamente más tarde.
PD: Si no puedes decidirte por una opción, lee el artículo “No sé lo que quiero”. Será útil.
Hola mis queridos lectores del blog. Galiulin Ruslan está en contacto. Hoy hablaremos sobre las versiones móviles de los sitios que todo sitio o blog debe tener para avanzar al TOP de los motores de búsqueda. En el artículo, daré códigos de estilo y ejemplos de diseño de página listos para usar que puede descargar a su computadora.
Si su sitio aún no está optimizado para dispositivos móviles, le recomiendo utilizar mis consejos o ponerse en contacto con profesionales: http://www.versión-móvil.ru que hará todo de acuerdo con los estándares de los motores de búsqueda. También puede consultar su sitio para la movilidad utilizando el mismo enlace.
En 2013, Google comenzó a presionar a los webmasters ( https://webmasters.googleblog.com/2013/06/cambios-en-las-clasificaciones-de-smartphone_11.html), convenciendo de la necesidad de crear modificaciones ligeras del sitio web, y desde 2015, la movilidad se ha convertido en uno de los aspectos del ranking ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex no se queda atrás, ya que creó un algoritmo especial de Vladivostok que tiene en cuenta la idoneidad del sitio para verlo desde teléfonos.
Mobile Friendly hoy no es solo cuidar a los visitantes, sino una condición indispensable para la promoción.
Cuando se crea un sitio desde cero, se aplica el enfoque Mobile First. Pero la mayoría tiene viejos proyectos de trabajo. La pregunta principal que plantea la versión móvil del sitio en tales situaciones es cómo hacerlo sin arruinar la plantilla existente.
Hay tres enfoques:
- Dirección y diseño separados: colocados en un subdominio del formulario m.site.ru. La redirección se produce a través de una redirección del servidor por parte del agente de usuario.
- Diseño receptivo: la URL y el html siguen siendo los mismos que en el formato de escritorio, pero en CSS, las consultas de medios devuelven reglas para diferentes pantallas.
- RESS es un diseño receptivo, la dirección permanece igual, pero el servidor envía conjuntos de estilos según el tipo de hardware que solicita la página.
Para los propietarios de proyectos antiguos, la mejor opción es utilizar un diseño adaptable. Cómo hacerlo usted mismo y sin usar complementos inseguros, lo consideraremos paso a paso.
Versión móvil del sitio: cómo hacerlo bien
Los pasos adicionales requerirán un sólido conocimiento básico de html y css o la capacidad de buscar rápidamente en Google cosas incomprensibles.
Información para principiantes: en CSS, las palabras antes de las llaves significan las partes específicas del archivo html que son responsables de mostrar. Escrito más a menudo con un punto o una almohadilla - #lugar (propiedad: valor;).
Paso 1. Elimina las restricciones.
Los propietarios de diseños fluidos pueden omitir este paso. El resto tendrá que trabajar duro.
Ancho- estamos buscando grandes secciones en el código con una visualización rígidamente definida. Si el parámetro se especifica en píxeles o puntos, debe cambiar su valor a porcentajes, ems y otras unidades que sean sensibles al entorno. A menudo, el contenedor principal o el área de contenido tiene un ancho fijo; en la mayoría de los casos, las restricciones se eliminan reemplazándolo con max-width.
Imágenes- en lugar de tamaños claros, prescribimos propiedades para la etiqueta img, que darán adaptabilidad a las imágenes. Las fotos cambiarán la relación de aspecto dentro de sus contenedores principales.
imagen(
Max-ancho: 100%
altura: automático;
mesas- No se puede configurar la adaptabilidad total, pero puede crear páginas con ellos adecuadas para dispositivos móviles agregando este código:
mesa (
bloqueo de pantalla;
Ancho: 100%;
desbordamiento-x: desplazamiento;
desbordamiento-y: oculto;
ms-overflow-style: -ms-autohiding-scrollbar;
webkit-overflow-scrolling: toque;
Wraps: se establecen mediante la propiedad float. Establecer esta opción permitirá que las cajas se muevan según la configuración de la ventana, ajustándose a elementos con una posición estable o dentro de contenedores principales. Los elementos div estándar por defecto traducen cada uno a una nueva línea. Por ejemplo, al colocar bloques div de 200 px en un contenedor de 1000 px, puede ver esta imagen.
Los bloques se apilan unos encima de otros. Agregar envoltura elimina los saltos de línea, coloca elementos en una línea en todo el espacio disponible.
Paso 2: Plan para la reorganización del contenido.
Averigüe qué detalles del sitio de escritorio deben mostrarse en los dispositivos móviles. Para ello, respóndete a ti mismo las siguientes preguntas:
- ¿Qué bloques realizan solo funciones decorativas? - Más a menudo, estos son controles deslizantes, decoraciones de barra lateral, cuestionarios, fotos aleatorias.
- ¿Qué ignoran los visitantes? - Los mapas de calor de clics y rutas ayudarán a responder esta pregunta. Ocultamos sin piedad los elementos menos activos.
- ¿Qué debe permanecer en la versión móvil? - Por lo general, se trata de un anuncio, un formulario de comentarios, suscripciones o botones de redes sociales.
- Considere cómo debería verse el sitio en tabletas, teléfonos inteligentes y teléfonos pequeños antiguos: puede configurar su propio aspecto para cada dispositivo.
Paso 3. Conveniencia.
Navegación: las pantallas de los teléfonos son demasiado pequeñas, el menú habitual del sitio rara vez cabe en dichos marcos. Es costumbre configurar el menú, desplegable en el botón.
Área de contenido: los teléfonos generalmente establecen el ancho del bloque principal en CSS al 100 % según el espacio disponible. Esto significa que el texto, los módulos, los anuncios y el contenido de la barra lateral se mostrarán en dispositivos pequeños en una columna.
Sensores: los dedos no son tan precisos como un ratón, deja mucho espacio para ellos. El espacio alrededor de los enlaces y otros elementos activos debe tener al menos 28 x 28 píxeles.
Ayude a sus visitantes a definir el espacio activo: relleno, resaltado, cambio de color y otras cosas que se pueden configurar para toques, prescriba la pseudoclase flotante para enlaces y botones.
Implementación de consultas de medios con ejemplos
Si alguna vez ha creado tablas CSS para imprimir, ya tiene una idea sobre las posibilidades de asignar estilos individuales según las condiciones.
Las consultas de medios son expresiones lógicas, acceder a ellas implica una respuesta con un parámetro verdadero o falso. Si el resultado de la consulta es verdadero, es decir, las dimensiones del agente de usuario o del dispositivo coinciden con el tipo de medio especificado, las reglas de estilo especificadas dentro del bloque de medios se aplican automáticamente.
Las consultas de medios se pueden asignar mediante parámetros:
- ancho y alto de la ventana del navegador;
- ancho y alto del dispositivo;
- orientación - modo paisaje o retrato;
- resolución de la pantalla.
Una lista actualizada de argumentos está disponible en especificación oficial.
Pasemos a los ejemplos. Hay una plantilla preparada, el tamaño de su parte de contenido es de 1000 píxeles, todos los elementos y detalles internos están configurados en relación con este parámetro.
Si la pantalla del usuario es más estrecha que la parte de contenido especificada, aparecerá una barra de desplazamiento. Los elementos de diseño flotantes pueden comportarse de manera impredecible: chocar entre sí, extenderse, estrecharse demasiado.
En primer lugar, quitamos el tamaño fijo que crea la tira para que no interfiera con el ajuste. En nuestra plantilla, este es el contenedor de navegación. En un diseño de lector, esto puede ser uno o más elementos. Si no entiende la definición, abra las herramientas de desarrollador del navegador; utilice la vista de modelo de caja y busque el elemento que no se ajusta a las dimensiones de la pantalla.
Para solucionarlo, eliminamos los marcos fijos agregando estilos a la plantilla:
@media solo pantalla y (ancho máximo: 1000px) (
Navegación (ancho: 100%;)
Ahora, si el ancho de la pantalla del usuario es inferior a 1000 px, el ancho del menú será igual al 100 % de su tamaño. La versión principal de la plantilla tiene el mismo aspecto que antes. Reemplazar la propiedad eliminó la barra de desplazamiento inferior al reducir la pantalla.
Pero los bloques aún parecen dudosos: cambiemos su visualización aumentando el ancho como un porcentaje para que se ajuste a las dimensiones deseadas.
Agregamos a la misma mediaquery:
Bloque (ancho: 35%;)
¿Cómo saber los tamaños óptimos para los bloques de tu sitio? Calcule manualmente o tome como base cualquier cuadrícula preparada: cuadrícula fluida. Puede concentrarse en los estándares existentes: en diseños de dos columnas con un ancho de ventana de 980-1050 px, el envoltorio se toma como 95 %, el contenido es 60 % y el 30 % se deja para la barra lateral. El espacio restante se destina a la formación de bordes y márgenes para mayor precisión.
Sin embargo, puede aplicar tamaño de cuadro al contenido, para no calcular los píxeles cada vez, sino trabajar de acuerdo con las dimensiones generales.
Pasemos a configurar la visualización en pantallas con una resolución más baja:
@media solo pantalla y (ancho máximo: 600 px) (
Cuadra (
flotante: ninguno;
Ancho: 85%;
Margen: 1em automático;
Si la pantalla tiene menos de 600 px, nuestros bloques deben caber en una columna: eliminamos el envoltorio, establecemos nuevas sangrías, centramos y cambiamos el ancho. Más a menudo, se establece el 100%, pero si por alguna razón esto no es conveniente, establecemos nuestro propio tamaño.
Por lo tanto, puede establecer no solo las dimensiones de los bloques de contenido, sino también su visualización. Por ejemplo, para prohibir la exhibición de elementos grandes, reemplazándolos por los convenientes.
Demostremos las posibilidades usando el ejemplo de cambiar colores y pantallas.
En la versión para smartphone, el menú principal está oculto y el color del bloque cambia a azul, mientras que la pantalla más grande muestra el diseño sin estos cambios.
En la mayoría de los casos, se requiere ocultar la navegación; se reemplaza por un botón. Es más apropiado hacer esto usando javascript, puede usar soluciones listas para usar.
Las ediciones se realizan puntualmente, el rango se puede limitar tanto desde arriba como desde abajo. Es rápido y conveniente: una línea establece un CSS separado para diferentes dispositivos, sin afectar la vista principal del sitio.
Puede declarar reglas @media en cualquier lugar dentro de una hoja de estilo existente, o puede crear una separada para estas declaraciones y luego importarla al CSS principal usando una regla @import.
Versión móvil del sitio: cómo hacer y qué buscar
Todos los navegadores modernos entienden Mediacware, pero no funcionará en IE 8 y versiones anteriores. El problema se resuelve refiriéndose al antiguo IE a través de comentarios condicionales. Deben estar escritos en el código de la plantilla, no en CSS.
El script en sí está disponible en github ( https://github.com/scottjehl/responder), agrega soporte para dimensiones mínimas y máximas y consultas de medios a los IE más antiguos.
Otro problema es que el diseño receptivo implica el uso de Html5, que nuevamente es incomprensible para los navegadores más antiguos. Tratado con un truco:
El código está escrito en html, además, la visualización de bloques de los elementos creados se establece en CSS:
encabezado, navegación, sección, artículo, aparte, pie de página (display:block;)
Abordemos de inmediato la pregunta: cómo hacer que algunos scripts se muestren solo cuando se configuran los parámetros de la pantalla. Si jquery está instalado, deberá agregar un script simple al código de la plantilla. Los números se cambian a los necesarios. Se lee así: si el ancho de la ventana supera los 980 píxeles, el script especificado en la ruta se aplica a la página. Puede especificar varios, la sintaxis se escribe por analogía a través de un punto y coma dentro de llaves.
Si ($(documento).ancho() > 980) (
$.getScript("ruta al script");
Otro punto es cómo el navegador móvil del iPhone debe procesar el contenido proporcionado, si se permite su aumento. Para ello se escribe en la cabeza la escala inicial:
Solo queda verificar la corrección; para esto, puede usar su propio navegador y teléfono, o comunicarse con los servicios.
Si el sitio se vuelve a implementar en un servidor local, la corrección se puede determinar en ami.responsivedesign.es. Los propietarios de Denver deberán cambiar la codificación a utf-8 para una visualización correcta editando el archivo httpd.conf del servidor.
El servicio demostrará cómo se ve el proyecto en diferentes dispositivos.
Además, la plantilla se prueba https://developers.google.com/speed/pagespeed/insights/ o en forma especial https://www.google.com/webmasters/tools/mobile-friendly, así como en webmasters.
En Yandex, esto parece detallado y Google simplemente informará que no hay problemas.
Si todo se hace correctamente, no habrá desplazamiento, ni elementos innecesarios. La versión móvil está lista, y ahora ha aprendido cómo hacerlo usted mismo. Si el material le resultó útil, haga clic en Me gusta y suscríbase al boletín del blog. Mis mejores deseos.
A continuación, al hacer clic en uno de los botones, puede descargar 2 ejemplos de la página doblada en esta lección y es fácil trabajar con las páginas terminadas y copiar el código.
Atentamente, Galiulin Ruslan.
