Plantilla HTML para dispositivos móviles. Plantilla móvil Flatsome: tema de WordPress multipropósito y responsivo
Todas las plantillas presentadas para su sitio web se basan en versiones modernas de HTML5 y CSS3. Además, los autores utilizan funciones tan de moda como diseño plano, diseño responsivo, diseño adaptativo, controles deslizantes jQuery, animación CSS3, etc. Es decir, si está buscando una plantilla de sitio web móvil, puede elegir cualquiera de las presentadas. Hermosas plantillas html5 2017, aunque gratuitas, parecen premium.
Aquí encontrará más de 50 plantillas de sitios web responsivos gratuitas de alta calidad en HTML5 y CSS3, que se pueden utilizar tanto para sitios nuevos como para rediseñar los existentes. ¡Lo que necesitas son elegantes plantillas de sitios web html5!
Actualizado el 12/03/2019: Desde que se escribió el artículo hace 2 años, muchos enlaces se rompieron. O los propietarios de las plantillas se fusionaron, cambiaron el estado de las plantillas de gratuitas a pagadas, o los extraterrestres lo arruinaron todo. Les pedimos, queridos lectores, que si encuentran dicho enlace lo dejen en los comentarios, lo corregiré.
1. Snow: plantilla de página de destino gratuita que utiliza HTML5 y CSS3plantilla HTML5 css3 página de destino Snow se basa en el marco Bootstrap. ¡La plantilla es muy elegante y genial! Un fondo fijo y un enorme Jumbotron, algo que muestra el contenido principal del sitio. ¿Qué es lo más importante en la página de destino? Así es, un llamado a la acción. Naturalmente, la plantilla está totalmente adaptada para dispositivos móviles. Incluso puedes utilizarlo como base para tus propias plantillas.
Esta plantilla html5 css3 también se basa en el marco Bootstrap. Puede crear un sitio web único en esta plantilla con un portafolio, su equipo, precios, reseñas y todo lo que sea necesario. Por ejemplo, esta plantilla es perfecta para un sitio web de servicios de limpieza. La animación de esta plantilla es fluida y eficaz, las fuentes son limpias y fáciles de leer. ¡Simplemente la plantilla perfecta!
Una característica distintiva de la plantilla del sitio web White son las dos opciones de fondo en la parte superior. Su elección es un control deslizante con imágenes o un vídeo de fondo. ¡Plantilla efectiva y de muy alta calidad para el sitio!
Una plantilla de sitio web HTML5 moderna y visualmente atractiva diseñada en base a una cuadrícula (lea más sobre la cuadrícula). Diseño de plantilla hermoso y responsivo para un blog o sitio web.
El diseño fresco y elegante de la plantilla del sitio web se adapta mejor a todo tipo de sitios web de moda que venden zapatos, ropa, relojes, accesorios, ropa deportiva, etc. Viene con un archivo PSD que puede ajustar según sus necesidades.
Nava es una plantilla de sitio web HTML5 moderna que se utiliza principalmente para 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 web sea único. Plantilla de sitio web ligera, hermosa y responsiva.
La plantilla del sitio web Box Portfolio tiene un diseño minimalista limpio y moderno. Perfecto para profesionales que desean mostrar su trabajo en línea de manera efectiva. Como sugiere el nombre, la plantilla de sitio web es ideal para un portafolio.
El tema de la montaña en el diseño de sitios web ha sido muy popular últimamente. La plantilla del sitio web de Mountain King no es una excepción. Incluye 336 iconos vectoriales de Typicons. Además de una gran animación usando CSS3. La plantilla es perfecta para sitios web de viajes y portafolios.
Beauty Spa es una plantilla de sitio web adaptable que tiene muchas características, ideal para sitios de spa, centros de salud o fitness, sitios de yoga o incluso peluquerías. Excelente legibilidad de fuentes y minimalismo discreto.
Bent es una excelente plantilla de sitio web gratuita en html5 y css3. Diseño responsivo, animación CSS3, desplazamiento de paralaje, navegación personalizada 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 la apariencia del sitio y al mismo tiempo vean claramente su contenido principal.
Triangle es una plantilla de sitio web HTML5 y CSS3 creativa exclusiva específicamente para aquellos que desean modificar su diseño atractivo, pero no empeorarlo. La plantilla viene con más de 40 páginas prediseñadas que le permiten personalizar su sitio a su gusto.
Experimente una auténtica sensación de diversión con esta plantilla de sitio web, ideal para escritores, autores, redactores publicitarios y otros trabajadores con lápiz y papel. La plantilla también se puede utilizar para un blog personal, un blog sobre viajes, creatividad, etc. A muchas personas les gustará el diseño creativo y el diseño adaptable de la plantilla.
bodo- hermosa plantilla sitio en HTML5 y CSS3, que es ideal para un sitio personal. Especialmente para organizar un portafolio. Tipografía limpia y nítida, control deslizante de carrusel, ventanas emergentes para mostrar el trabajo y mucho más.
Los fotógrafos siempre están buscando la plantilla perfecta para su sitio web para mostrar su trabajo en todo su esplendor, de manera impresionante y, lo más importante, ¡en grande! Una plantilla de sitio web poco común cumple con estos requisitos. Lens es una de esas plantillas de sitios web para fotógrafos.
Si está buscando plantillas de sitios web gratuitas sobre el tema automático, Spectral le solución ideal. Aquí hay un diseño de plantilla de sitio web de una página hecho a mano y completamente único. El diseño se puede cambiar a su discreción. Con esta plantilla puedes crear un sitio web impresionante sobre absolutamente cualquier tema, ya sea un blog de viajes o una galería de fotos impresionante, un sitio web sobre automóviles o un proveedor de hosting.
Oxygen es una plantilla cómoda y única para un sitio web empresarial. Diseño plano moderno, diseño adaptable. Por ejemplo, esta plantilla es ideal para un sitio sobre aplicaciones móviles o tecnología móvil.
Si está buscando una plantilla de sitio web gratuita, Mobirise Bootstrap es perfecto para comenzar. Esta es una plantilla multifuncional con muchos extras incluidos. Tres diseños prediseñados pagina de inicio y el blog te ayudará con esto. Mobirise Bootstrap también está 100% optimizado para SEO y se adapta a cualquier tamaño de pantalla.
La plantilla Brandy es perfecta para organizar un sitio web de bienes raíces comerciales. Un diseño responsivo y muy hermoso atraerá no solo al propietario del sitio, sino también a los visitantes.
Plantilla de sitio web HTML5 y CSS3 elegante y animada para organizar un portafolio. Diseño limpio, excelente tipografía, hermosos íconos y mucho más.
Pluton es una plantilla de sitio web brillante y eficaz basada en Bootstrap. Una plantilla de sitio web moderna con un diseño único de una sola página y un diseño responsivo ideal para estudios, fotógrafos y diseñadores creativos.
La plantilla SquadFree es perfecta para crear un sitio web comercial de una página. La plantilla no sólo tiene un aspecto profesional, sino que también se adapta a todo tipo de pantallas. La plantilla está basada en Bootstrap.
Sublime es una plantilla de sitio web HTML5 y CSS3 limpia e increíblemente hermosa, perfecta para una startup, una agencia creativa o un sitio de cartera. Diseño responsivo y dos opciones de página para elegir.
Timber es un tema de plantilla de sitio web de una sola 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 o cartera de negocios. Hay una galería incorporada, un mapa y Información del contacto, que podrás adaptar fácilmente a tus necesidades.
E-Shopper es una excelente opción para una plantilla de sitio web de comercio electrónico. Construido sobre bootstrap con un increíble conjunto de características para una tienda en línea completa y eficiente.
Una plantilla HTML5 y CSS3 absolutamente impresionante para crear un sitio web de fotografías o un portafolio para un diseñador, ilustrador o artista. ¡Esta plantilla lleva el listón de las plantillas profesionales al siguiente nivel! Diseño responsivo, excelente soporte para todo tipo de dispositivos de visualización, navegación fácil y conveniente y mucho más.
El diseño plano de esta plantilla de sitio web minimalista es perfecto para crear un portafolio. ¡En la plantilla todos los detalles están perfectamente comprobados!
Este folleto gratuito basado en el marco Bootstrap es perfecto para sitios web corporativos, tanto para pequeñas como para grandes empresas. Diseño plano, diseño adaptable, todos elementos de diseño de alta calidad. La plantilla viene en 4 colores diferentes.
Infusion es un gran ejemplo de una plantilla de sitio web HTML5 y CSS3 diseñada específicamente para crear una cartera de negocios. La rica funcionalidad de esta plantilla le permite trabajar eficazmente con clientes y atraer otros nuevos.
Esta plantilla de sitio web de estilo plano de alta calidad es perfecta para cualquier sitio web corporativo. Diseño adaptable, toneladas de configuraciones y opciones de edición.
Esta plantilla de sitio web única y muy hermosa con efecto de paralaje no dejará indiferente a nadie. La plantilla de una página está construida en HTML5 y CSS3 puro con diseño responsivo, fondos impresionantes, soporte para redes sociales, etc.
Urbanic es una plantilla de sitio web HTML5 y CSS3 nueva y genial construida en el motor Bootstrap. Perfecto para iniciar su sitio web de inmediato sin problemas especiales. La plantilla se adapta perfectamente a cualquier tamaño de pantalla.
Una plantilla de sitio web HTML5 visualmente armoniosa y eficaz para organizar su cartera. La plantilla está perfectamente adaptada a dispositivos móviles, lo cual es muy difícil de lograr en sitios de este formato.
Mamba One es un ejemplo de una plantilla de sitio web simple pero elegante para crear un paginador. Compatible con todos los navegadores modernos y se mostrará adecuadamente en todas partes.
Otra gran plantilla de sitio web para fotógrafos. El diseño responsivo y la clasificación muy conveniente de fotografías 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 las fotos.
Como sugiere el nombre, esta maravillosa plantilla de sitio web no solo es ideal para páginas de destino, sino que también cumple con las nuevas tendencias móviles, especialmente en términos de claridad de visualización en dispositivos con pantalla Retina.
Brushed es una plantilla de sitio web HTML5 y CSS3 responsiva y gratuita basada en el motor Bootstrap. También optimizado para pantallas Retina (iPhone, iPad, iPod Touch Y Macbook Pro Retina).
¡Bienvenidos al panorama general! Esta plantilla de sitio web HTML5 responsivo es perfecta para todas las personas creativas que tienen algo que mostrar y lo muestran de manera grande e impresionante en su sitio web. Además, la plantilla utiliza una excelente animación.
Una plantilla sencilla de una página que tiene todo en cuenta herramientas necesarias para la creación exitosa de un sitio web. Ideal para el blog personal de un escritor, redactor publicitario o simplemente un amante de la palabra escrita.
Esta plantilla única de sitio web HTML5 y CSS3 puro es perfecta para cualquier persona creativa. Es totalmente responsivo y completamente gratuito.
Runkeeper es una plantilla de sitio web gratuita, responsiva y muy bonita. Se puede utilizar para un sitio web de cualquier tema. Estilo brillante y fuentes claras, diseño responsivo y detalles de plantilla impresionantes. ¡Todo funciona para ti!
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 responsiva de la plantilla se muestran perfectamente tanto en monitores grandes como en dispositivos móviles.
Esta plantilla de sitio web HTML5 y CSS3 limpia, simple y clara es perfecta para crear una página de destino. El diseño minimalista no distrae de lo principal. ¡Una llamativa barra de navegación lateral con desplazamiento y líneas de página limpias son la combinación perfecta!
Otra plantilla de sitio web de estilo minimalista y formas limpias. Diseñado específicamente para aprovechar las pantallas de gran tamaño, pero también perfectamente adaptado a las pantallas pequeñas de los dispositivos móviles.
Esta plantilla de sitio web moderna, responsiva y completamente gratuita tiene una gran ventaja: es simple y concisa, pero esto es exactamente lo que le falta a mucha gente.
Una nueva plantilla de sitio web con un estilo minimalista semi-retro. Es solo que lo retro ya no está de moda, pero un ligero toque de ello es muy bienvenido. Esta plantilla de sitio web es totalmente responsiva, está construida en HTML5 y CSS3 puro e incluye todos los elementos de página principales necesarios. La plantilla Strongly Typed es ideal para sitios web creativos. Por ejemplo, para un sitio sobre decoración del hogar.
Nueva plantilla de sitio web fresca y limpia, hermosa y funcional en HTML5 y CSS3. Tiene en su arsenal todos los elementos de página necesarios, incluidas citas, tablas y listas diseñadas, así como una barra lateral adaptada (a la derecha o a la izquierda, como desee).
Parallelism es una elegante plantilla de sitio web para organizar portafolios o fotografías. Lo que lo hace inusual es que el desplazamiento aquí no es vertical, como es habitual, sino horizontal. Esto le da al sitio una elegancia especial y un carácter memorable.
Excelente plantilla de sitio web en estilo minimalista en HTML5. Perfecto para un sitio web/blog personal, así como un pequeño sitio web corporativo de una página o como sitio web de tarjeta de presentación.
El diseño limpio y espacioso de esta plantilla de sitio web es perfecto para grandes sitios web corporativos o proyectos comerciales. Responsivo y conveniente tanto para el autor como para los usuarios.
Y el último en la lista, pero no menos importante en términos de calidad y efectividad visual, está la plantilla de sitio web: ZeroFour. Diseño elegante, menú muy bonito, formularios y botones perfectamente ajustados, iconos bonitos y mucho más. ¡Y todo esto es absolutamente gratis!
Espero que hayas encontrado algo adecuado para ti entre estas increíbles plantillas de sitios web HTML5 y CSS3. ¡Buena suerte!
Márcalo como favorito para que puedas encontrarlo rápidamente.
PD: Si no puedes elegir, lee el artículo “No sé lo que quiero”. Será útil.
He preparado una nueva selección de veinte de los temas premium más interesantes para WordPress, que son perfectos para crear sitios web de presentación y páginas de destino. juegos móviles y aplicaciones.
Desarrollo global de las telecomunicaciones móviles, accesibilidad. Internet móvil ha formado un mercado completamente nuevo y en desarrollo dinámico para aplicaciones móviles. Que se ha convertido en una gran industria en tan solo unos años. Es difícil contar cuántas startups interesantes centradas en dispositivos móviles han aparecido en los últimos años. El mercado es grande y rentable, muchas empresas y desarrolladores lo entienden y se esfuerzan por conquistarlo.
El desarrollo de las tecnologías móviles y el crecimiento de la productividad de los teléfonos inteligentes contribuyen a la mejora, la funcionalidad y la calidad de las aplicaciones móviles. Los mejores teléfonos inteligentes ya tienen casi el mismo rendimiento que Computadoras personales. Y probablemente ya se hayan pasado por alto los de oficina. En este contexto, el crecimiento generalizado ya no es tan sorprendente. tráfico móvil. Google desactivó su “búsqueda en vivo” la semana pasada, por ejemplo. Esto fue motivado por la enorme proporción de tráfico móvil y las características de la búsqueda móvil. Creo que el mercado de aplicaciones móviles es muy prometedor. Al menos, en los próximos años solo habrá crecimiento, desarrollo, mejora, una penetración más profunda en la vida cotidiana, en la llamada. Internet de las Cosas.
Como en cualquier otro ámbito, cualquier aplicación móvil necesita un embalaje bonito y brillante en forma de sitio web de presentación. Donde sería posible demostrar sus capacidades, hablar de sus ventajas, ventajas, etc.
Un tema moderno de una página con un diseño limpio para presentar aplicaciones móviles, fácil de personalizar, tiene 12 opciones de visualización listas para usar, fuentes web, íconos, paralajes, cajas de luz, Visual Composer incorporado, Slider Revolution y mucho más.
Descargar Manifestación
Página de inicio de una página con amplias opciones de personalización, creador de páginas visual integrado, compatibilidad con Google Fonts, comercio electrónico basado en WooCommerce, Slider Revolution y mucho más.
Descargar Manifestación
Un excelente tema responsivo para presentar aplicaciones móviles, creado en Bootstrap con soporte para Google Fonts y Google Maps.
Descargar Manifestación
Un tema moderno multipropósito con un diseño limpio, puede funcionar en modos de una sola página y de varias páginas, tiene 4 opciones de diseño de página de inicio, admite el modo multilingüe basado en el complemento WPML, el constructor Visual Composer, los boletines de Mailchimp, etc.
Descargar Manifestación
Tema multipropósito para demostrar las capacidades de las aplicaciones móviles basadas en Bootstrap, 2 opciones de visualización de inicio, soporte de visualización alta definición, Visual Composer integrado, importación con un solo clic de contenido de demostración y toda la munición tradicional.
Descargar Manifestación
Plantilla de aterrizaje para WordPress con limpieza diseño moderno, centrado en mostrar aplicaciones móviles para tres plataformas principales: Android, iOS y Windows. Bien documentado, fácil de configurar.
Descargar Manifestación
Otra página de inicio adaptable para WordPress en Bootstrap con 24 opciones de diseño, también diseñada para presentaciones de aplicaciones móviles y startups. Hay un creador de páginas visual y más de 80 elementos de diseño integrados, formularios de contacto e integración. boletines de mailchimp y otra.
Descargar Manifestación
Una nueva plantilla de página de destino adaptable basada en Warp 7 Framework para los amantes de los sitios web modulares y livianos. Adecuado no sólo para aplicaciones móviles, también es muy adecuado para otras áreas.
Descargar Manifestación
Un tema moderno y sencillo para exhibir aplicación movil con dos opciones de diseño de página de inicio, soporte para pantallas Retina, un diseñador Visual Composer integrado, control deslizante Slider Revolution, importación de contenido con un solo clic, mega menú, más de 600 fuentes y mucho más.
Descargar Manifestación
Tema de WordPress multipropósito de una página para demostrar aplicaciones móviles, nuevas empresas y sitios web personales. Construido sobre Bootstrap, Visual Composer incorporado, Revolution Slider, formularios de contacto, códigos cortos, íconos, etc.
Descargar Manifestación
Plantilla de página de inicio de aplicación móvil con 3 opciones de página de inicio, 20 opciones de diseño, personalización sencilla, creador de páginas visual Visual Composer, compatibilidad con el complemento multilingüe WPML.
Descargar Manifestación
Tema de WordPress responsivo, multipropósito y económico con 23 opciones de diseño listas para usar.
Descargar Manifestación
Un tema moderno multipropósito con un diseño responsivo profesional para presentar aplicaciones y juegos móviles. A bordo de Visual Composer, soporte para el complemento multilingüe WPML, boletines de Mailchimp, formularios comentario Formulario de contacto 7.
Descargar Manifestación
Plantilla de página de destino optimizada y multipropósito para desarrolladores de aplicaciones móviles, productos de software, empresas emergentes y agencias creativas y de diseño. 4 opciones de diseño de página de inicio, fácil personalización utilizando el personalizador de WordPress incorporado, creador de páginas visual con más de 40 elementos de diseño, Revolution Slider, más de 50 códigos cortos, más de 500 íconos optimizados para pantallas Retina.
Descargar Manifestación
Uno de los temas responsivos de una página más rápidos en ThemeForest, perfecto para empresas emergentes. 12 diseños listos para usar, importación de contenido de demostración con un solo clic, fácil personalización, código limpio, creador de páginas Visual Composer, Revolution Slider, soporte de comercio electrónico WooCommerce y mucho más.
Descargar Manifestación
El desarrollador afirma que con la ayuda del tema Helium, sus páginas de destino se convertirán en una poderosa arma de marketing. Es difícil discutir: el tema es muy moderno, está construido en Bootstrap, optimizado para SEO, tiene 10 opciones de visualización principales, un control deslizante, más de 1000 fuentes, Visual Composer integrado con más de 50 elementos de diseño, soporte para WooCommerce, Mailchimp, Google. Mapa, Google Fonts, Formulario de contacto 7, portafolio y mucho, mucho más.
Descargar Manifestación
Un tema muy elegante con 7 diseños de página de inicio, 6 opciones de visualización de encabezado, 5 opciones de pie de página, Visual Composer integrado con Ultimate Addons, Slider Revolution, WooCommerce, One Page Navigator, compatibilidad con WPML e importación de contenido de demostración con un solo clic.
Descargar Manifestación
Un tema moderno y responsivo con un diseño Bootstrap limpio para sitios de distribución de software. 9 opciones de página de inicio, 8 combinaciones de colores, 3 opciones de diseño de encabezado, soporte para Twitter, YouTube, Font Awesome, etc.
Descargar Manifestación
Un tema creativo de una página con diseño responsivo, 17 opciones de diseño listas para usar, soporte para pantallas Retina, Visual Composer integrado, Slider Revolution, soporte para Google Fonts, varios paralajes y animaciones.
Descargar Manifestación
Plantilla responsiva Página de inicio con un diseño limpio y moderno y amplias opciones de personalización, perfecta para aplicaciones móviles, productos y nuevas empresas. Visual Composer integrado, importación con un solo clic, compatibilidad con varios idiomas en WPML, formularios de contacto Formulario de contacto 7, Revolution Slider y mucho más.
Descargar Manifestación
Una plantilla muy bonita que le dará a tu sitio web de aplicación móvil un aspecto profesional sin hacerlo aburrido. Puedes elegir entre tres opciones pagina de inicio, cada uno de los cuales luce simplemente maravilloso. La combinación de colores del futuro proyecto en línea se puede cambiar como desee. Además, la función de arrastrar y soltar le permite trabajar con contenido sin profundizar en el código.
Descargar Demostración de PaPay
Una plantilla excelente que te permitirá construir el proyecto online deseado sin gastar una gran cantidad de dinero en él. Ofrece una amplia gama de opciones de personalización. apariencia sitio. Y el constructor Elementor te permitirá olvidarte del código y de todo lo relacionado con él. No olvide utilizar un mega menú para que sea mucho más fácil para los usuarios navegar por su sitio.
Descargar Demostración Momex
Momex es una plantilla moderna que, como todas las demás soluciones listas para usar de esta colección, le permite crear un proyecto en línea impresionante. A los usuarios se les ofrece una gran selección de opciones que pueden utilizarse para mejorar tanto la apariencia del sitio como su funcionalidad. Por ejemplo, entre los cuatro diseños de blogs, cualquiera puede encontrar una opción que definitivamente le gustará. Y el paquete de complementos de Cherry complacerá a aquellos que quieran presentar los servicios de una manera que convenza al público objetivo de elegirlos.
Descargar Manifestación
Consor es una plantilla maravillosa que puede presentar cualquier negocio de la manera más memorable. Por lo tanto, puedo recomendarlo para crear sitios de aplicaciones móviles. En su paquete puede encontrar una variedad de opciones de encabezado, con la ayuda de las cuales también se logra la singularidad del proyecto en línea. Y WordPress Live Customizer le permitirá trabajar con los colores y fuentes de su futuro proyecto en línea sin esfuerzo adicional.
Descargar Manifestación
Una plantilla completamente funcional y flexible que seguramente llamará mucho la atención. Incluye muchas páginas listas para usar que lo ayudarán a presentar sus servicios, crear una galería de proyectos y mucho, mucho más. Junto con Elementor-builder, crear un sitio web se convertirá en puro placer. Después de todo, le permite simplemente arrastrar y soltar el contenido seleccionado en la ubicación deseada del sitio.
Descargar Demostración En conclusiónComo puedes ver, hay mucho para elegir. También puedes consultar temas en la categoría "Software" en TemplateMonster. La elección no es tan amplia como en ThemeForest, pero también hay algunas cosas interesantes. Permítame recordarle que al elegir un tema premium para su sitio, no debe obsesionarse con el tema. Lo principal es el diseño, la estructura y se puede “atraer” cualquier tema. Hablé más sobre cómo no arruinarlo en uno de mis artículos anteriores.
Suscríbase a mi telegrama y sea el primero en recibir nuevos materiales, incluidos los que no están en el sitio.
Adapté esta plantilla a los estándares de navegadores de plataformas como IOS (3.1+), Android (2.1+), Blackberry (6.0+), Telefono windows 7, así como Opera mobile para Android, que está ganando popularidad. Me gustaría señalar que todos los navegadores estándar (a excepción de Windows Phone 7, que tiene IE9) se basan en webkit.
¿Cuál es la diferencia entre desarrollar sitios de escritorio y sitios para dispositivos móviles? A continuación, te hablaré de algunos trucos que te ayudarán a sortear muchos problemas.
Qué resolución elegir y la metaetiqueta de la ventana gráficaParecería que deberíamos tener una pregunta sobre qué resolución utilizar como base para nuestro sitio. Después de todo, los dispositivos con 230x340 (por ejemplo HTC Wildfire S), y aproximadamente 800x480,960x640 (HTC Incredible S, iPhone 4), e incluso 1280x720 (HTC One X) son relevantes ahora. La metaetiqueta de ventana gráfica viene en nuestra ayuda, que resolverá el problema de resolución y escala.
- ancho = ancho del dispositivo: el valor lo establece el propio dispositivo
- escala-inicial=1 - la escala inicial se establece en 1 (es decir, 1:1)
- max-scale=1.0, user-scalable=no - el escalado está prohibido (me gustaría señalar que incluso con estos parámetros, HTC seguirá escalando persistentemente y los desarrolladores dijeron que esto no es un error, sino una característica)
Incluso con este rango de resoluciones, debo señalar que la mayoría de los dispositivos móviles, al tener una resolución alta, la utilizan no para ampliar su espacio de trabajo, sino para aumentar la claridad (más sobre esto). En otras palabras, su saturación de píxeles (DPI) es varias veces mayor que la de resoluciones más pequeñas. Esto lleva a la conclusión de que los dispositivos con un PDI grande en realidad comprimen el sitio 2 veces para obtener las mismas dimensiones que en los dispositivos con una resolución más baja (por ejemplo, en los dispositivos Apple con pantalla Retina, hay 4 veces más puntos en la misma zona de la pantalla, lo que aumenta la definición). Podemos ver el resultado más claramente en la siguiente imagen.
Ahora que ya sabemos cómo funcionan las pantallas con altos DPI, vale la pena pensar en la correcta visualización de todos los elementos de nuestro sitio Web.
Comencemos con elementos como fuentes, bordes y otros elementos similares. Todos estos elementos son esencialmente objetos vectoriales que el navegador puede escalar sin problemas, así que no nos detengamos en eso.
La situación es diferente con las fotografías y las imágenes de fondo. Después de todo, si guardamos la imagen de fondo basándose en que tenemos 320x480, los dispositivos con un DPI más denso no podrán aparecer ante nosotros en todo su esplendor y todos los esfuerzos para transmitir la claridad y belleza de la imagen se verán afectados. a la nada, ya que en realidad lo aumentarán 2 veces (y no importa qué tan bien se escale el navegador, la calidad siempre se pierde cuando el software aumenta el tamaño). ¡Aquí es donde un truco viene en nuestra ayuda! Intentaré explicarlo con un ejemplo. Tenemos un sitio web en cuyo encabezado hay un fondo determinado que ocupa 320px de ancho, por lo que para que nuestras pantallas súper claras muestren esta imagen al 100%, la imagen original no debe ser de 320x50 sino de 640x100 (exactamente 2 veces más grande) y usando css establezca el tamaño de fondo: 320px 50px;. Hacemos chamanismo similar con imágenes en forma de img.
Debido al hecho de que Android, BlackBerry, IOS y Windows Phone 7 son totalmente compatibles con Data-url, podemos reducir significativamente la cantidad de solicitudes implementando todas las imágenes de fondo en CSS. Además de la optimización de consultas, tenemos una gran ganancia gracias al almacenamiento en caché de CSS.
Problemas con sprites e imágenes.Debido al hecho de que nuestro navegador comprime el contenido y lo escala a un tamaño específico, puede redondear incorrectamente los tamaños durante los cálculos y, por lo tanto, al pegar sprites píxel por píxel, aparecerá una franja del siguiente elemento. Para evitar esto, conviene dejar un espacio de un par de píxeles al pegar.
Pequeño problema con los formatos de imagen.También encontré un problema desagradable en algunos dispositivos relacionado con los formatos de imagen. Nuevamente, daré un ejemplo: hay 2 imágenes guardadas usando Guardar para Web en Photoshop (una de las cuales es un degradado lineal que se extiende a lo largo del eje Y, y la segunda es una especie de imagen recortada con un trozo del degradado, y de hecho debería encajar en el degradado repetido), pero en diferentes formatos (png y jpg). Entonces, en algunos dispositivos una imagen es más clara y la segunda es más oscura. Entonces para solucionar este problema tuve que guardar ambas imágenes en el mismo formato.
Ocultar la barra de URLComo no tenemos tanto espacio en nuestro dispositivo, no nos vendrá mal ganar un par de docenas de píxeles extra. Y podemos encontrarlos ocultando nuestra barra de URL. Para ello tenemos un script sencillo:
AddEventListener("cargar", función() ( setTimeout(hideURLbar, 0); ), falso); función hideURLbar() ( ventana.scrollTo(0, 1); )
Pero observo que este script puede interferir con nosotros si nuestro enlace conduce a uno de los anclajes. nueva pagina(en este caso, se nos desplazará hasta nuestro elemento y, después de cargar, la página volverá a la parte superior), pero esto se puede evitar fácilmente haciendo una verificación adicional de nuestra URL.
Efecto visual de hacer clic en un elemento.Por ejemplo, para iOS podemos lograr el efecto de clic usando la pseudoclase: active. Pero funcionará incluso si nuestro elemento está enfocado al desplazarnos por la página, lo cual no es muy agradable. Por lo tanto, decidí escribir un pequeño script que emulará un clic y lo cancelará al desplazarse por la página.
Desplazador var=falso; $("a").live("touchstart",function(event)( var elem=$(this); clickable=setTimeout(function () ( elem.addClass("active");), 100); )) ; $("a").live("touchmove",function(event)( clearTimeout(clickable); scroller=true; )); $("a").live("touchend",function(event)( var elem=$(this); clearTimeout(clickable); if(!scroller) ( elem.addClass("active"); setTimeout(function ( ) ( elem.removeClass("activo");), 50); ) else ( elem.removeClass("activo"); ) ));
Quitar el marco y resaltar de enlaces y botonesProbablemente todos los usuarios hayan notado que cuando hacen clic en un enlace, éste aparece enmarcado y resaltado. Este efecto puede arruinar enormemente la idea del diseñador. Aquí viene a nuestro rescate una especie de restablecimiento de estilo (probado en todos los navegadores webkit, y estos son navegadores nativos IOS, Android, BlackBerry)
*( -webkit-text-size-adjust: none; /*corregir un error en IOS con escalado en paisaje*/ esquema: none; /*eliminar el marco alrededor de enlaces y botones*/ -webkit-touch-callout: none; /* si es necesario, desactivamos el resaltado de texto*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*eliminamos el resaltado de fondo de enlaces y botones*/ )
soporte fijoPorque tecnologías móviles Ahora están avanzando muy rápido y, en el momento de escribir el artículo, el porcentaje de navegadores que no admiten el servicio fijo se acerca a cero, no profundizaré en la descripción. Sólo diré que para estos navegadores deberíamos usar iscroll. También describiré un pequeño truco sobre la conexión dinámica de scripts (necesario para no incluir un archivo extra para los navegadores normales)
//versión antigua de IOS detectando var OSName="SO desconocido"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversión
EN en este ejemplo Verifiqué que si es un Iphone y la versión del navegador es menor a 534 (no admite arreglos). Incluyo dinámicamente el script fix.js
CSS3Además, no olvides que ya podemos utilizar algunas propiedades css3 al máximo (pero no te olvides de los prefijos moz-, webkit-, o-). Para WP7, no dudes en conectar pie.htc.
Enlace de escritorio para IOSProbablemente para usuarios de iOS No es ningún secreto que en Safari puedes colocar un enlace a un sitio web en tu escritorio.
A continuación se muestra un ejemplo de dicho vínculo con Forismatic.
Abajo ejemplo HTML código para el ícono (el propio IOS lo ampliará, agregará esquinas redondeadas), anuncios que este enlace debe abrirlo como una aplicación (se ejecuta en pantalla completa), así como un código que oculta la barra de URL. Si lo desea, puede incluso mostrar una ventana de presentación.
- anuncia que se abrirá en pantalla completa, ocultando la barra de URL - cambia el color de la barra de estado a negro (los valores disponibles son predeterminados, negro, negro translúcido). predeterminado predeterminado: enlace al icono que se muestra en el escritorio.
Podemos ver un ejemplo en vivo de todo lo descrito anteriormente.
Saludos, mis queridos lectores del blog. Ruslan Galiulin está en contacto. Hoy hablaremos de las versiones móviles de sitios web que todo sitio web o blog debería tener para poder pasar al TOP. los motores de búsqueda. En el artículo proporcionaré códigos de estilo y ejemplos listos para usar de diseño de página que puede descargar a su computadora.
Si su sitio aún no es móvil, le recomiendo seguir mis consejos o ponerse en contacto con profesionales: http://www.Mobile-version.ru, quienes harán todo de acuerdo con los estándares de los motores de búsqueda. Usando el mismo enlace, puede verificar la movilidad de su sitio.
En 2013, Google comenzó a presionar a los webmasters (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), convenciéndolos de la necesidad de crear modificaciones ligeras en el sitio y, desde entonces, En 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 "Vladivostok" que tiene en cuenta la idoneidad del sitio para verlo en teléfonos.
Mobile Friendly hoy en día no es sólo una cuestión de cuidar a los visitantes, sino una condición indispensable para la promoción.
Cuando un sitio web se crea desde cero, se utiliza el enfoque Mobile First. Pero la mayoría tiene proyectos de trabajo antiguos. La principal pregunta que plantea la versión móvil del sitio en tales situaciones es ¿cómo crearla sin estropear la plantilla existente?
Hay tres enfoques:
- Una dirección y un diseño separados, ubicados en un subdominio como m.site.ru. La redirección se produce a través de una redirección del servidor al agente de usuario.
- Diseño responsivo: la URL y el HTML siguen siendo los mismos que en el formato de escritorio, pero en CSS las consultas de medios proporcionan reglas para diferentes pantallas.
- RESS es un diseño responsivo, la dirección sigue siendo la misma, pero el servidor envía conjuntos de estilos según el tipo de hardware que solicita la página.
Para propietarios de proyectos antiguos. elección óptima- uso de diseño adaptativo. Veamos paso a paso cómo hacer esto con tus propias manos y sin utilizar complementos inseguros.
Versión móvil del sitio: cómo hacerlo bienOtras acciones requerirán confianza conocimiento básico html y css o la capacidad de buscar rápidamente en Google cosas incomprensibles.
Información para principiantes: en CSS, las palabras antes de llaves significan fragmentos específicos archivo html, que son responsables de mostrar. A menudo se escriben con un punto o una almohadilla: #lugar (propiedad: valor;).
Paso 1. Eliminar restricciones.
Los propietarios de diseños de goma pueden omitir este paso. El resto tendrá que trabajar más duro.
Ancho: buscamos secciones grandes 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 medio ambiente. 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 el ancho máximo.
Imágenes: en lugar de tamaños claros, escribimos propiedades para la etiqueta img, lo que hará que las imágenes se adapten. Las fotos cambiarán de proporciones dentro de sus contenedores principales.
img(
Ancho máximo: 100%;
Altura: automático;
Tablas: no podrá configurarlas para que respondan completamente, pero puede crear páginas con ellas adecuadas para dispositivos móviles agregando este código:
mesa (
Bloqueo de pantalla;
Ancho: 100%;
Desbordamiento-x: desplazamiento;
Desbordamiento-y: oculto;
estilo-desbordamiento-ms: -ms-autohiding-scrollbar;
Webkit-overflow-scrolling: táctil;
Las envolturas se especifican mediante la propiedad flotante. Establecer este parámetro permitirá que los bloques se muevan según los parámetros de la ventana, ajustándose a elementos con una posición estable o dentro de contenedores principales. Los elementos div estándar se traducen de forma predeterminada cada uno a nueva línea. Por ejemplo, al colocar bloques div de 1000 px de 200 px cada uno en un contenedor, puede ver la siguiente imagen.
Los bloques estaban uno encima del otro. Agregar un ajuste elimina los saltos de línea y alinea los elementos en todo el espacio disponible.
Paso 2: planifique la reorganización de su contenido.
Descubra qué partes de su sitio de escritorio deben mostrarse en dispositivos móviles. Para ello, responda usted mismo estas preguntas:
- ¿Qué bloques realizan sólo funciones decorativas? - En la mayoría de los casos se trata de controles deslizantes, decoraciones de barras laterales, cuestionarios y fotografías aleatorias.
- ¿Qué ignoran los visitantes? - Los mapas de calor de clics y rutas ayudarán a responder esta pregunta. Ocultaremos sin piedad los elementos menos activos.
- Lo que definitivamente debe permanecer en version móvil? - Normalmente se trata de publicidad, un formulario de comentarios, suscripciones o botones de redes sociales.
- Piense en cómo debería verse el sitio en tabletas, teléfonos inteligentes y teléfonos pequeños y antiguos; puede configurar una apariencia diferente para cada dispositivo.
Paso 3. Comodidad.
Navegación: las pantallas de los teléfonos son demasiado pequeñas; el menú de un sitio web normal rara vez cabe en un marco así. Es habitual instalar un menú que se despliega mediante un botón.
Área de contenido: para teléfonos, es común establecer el ancho del cuerpo en CSS al 100%, según el espacio disponible. Esto significa que el texto, los módulos, la publicidad y el contenido de la barra lateral se mostrarán en una columna en dispositivos pequeños.
Sensores: Los dedos no son tan precisos como los de un ratón, déles mucho espacio. El espacio alrededor de los enlaces y otros elementos activos debe ser de al menos 28 x 28 píxeles.
Ayude a sus visitantes a definir el espacio activo: sangrías, resaltados, cambios de color y otras cosas que se pueden configurar para toques, escriba una pseudoclase flotante para enlaces y botones.
Implementación de Media Queries con ejemplosSi alguna vez ha creado tablas CSS para imprimir, ya tiene una idea de 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 de verdadero o falso. Si el resultado de la consulta es verdadero, es decir, las dimensiones del dispositivo o del agente de usuario coinciden con el tipo de medio especificado, entonces las reglas de estilo especificadas dentro del bloque de medios se aplican automáticamente.
Las consultas de medios se pueden asignar según los siguientes parámetros:
- ancho y alto de la ventana del navegador;
- ancho y alto del dispositivo;
- orientación: modo horizontal o vertical;
- resolución de la pantalla.
La lista actual de argumentos está disponible en la especificación oficial.
Pasemos a los ejemplos. Comer plantilla preparada, el tamaño de su parte de contenido es de 1000 píxeles, todos los elementos internos y detalles están configurados en relación con este parámetro.
Si la pantalla del usuario es más estrecha que la parte del contenido especificado, aparecerá una barra de desplazamiento. Los elementos de diseño flotantes pueden comportarse de manera impredecible: chocando entre sí, difuminándose o estrechándose demasiado.
En primer lugar eliminamos el tamaño fijo que crea la banda para que no interfiera con los ajustes. En nuestra plantilla, este es el contenedor de navegación. En el diseño de un lector, puede haber uno o más elementos. Si le resulta difícil determinarlo, abra las herramientas de desarrollo del navegador; utilizando la vista del modelo de bloques, busque el elemento que no se ajusta a las dimensiones de la pantalla.
Para solucionar este problema, elimine los marcos fijos escribiendo en los estilos de la plantilla:
Pantalla solo @media y (ancho máximo: 1000 px) (
Navegación (ancho: 100%; )
Ahora, si el ancho de la pantalla del usuario es inferior a 1000 px, entonces 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. Al reemplazar la propiedad se eliminó la barra de desplazamiento inferior al reducir la pantalla.
Pero los bloques todavía parecen dudosos: cambiaremos su visualización aumentando el ancho como porcentaje hasta el tamaño requerido.
Agregamos a la misma mediaquery:
Bloque (ancho: 35%;)
¿Cómo saber los tamaños óptimos para los bloques de su sitio? Calcule manualmente o tome como base cualquier cuadrícula ya preparada: una cuadrícula fluida. Puede centrarse en los estándares existentes: en diseños de dos columnas con un ancho de ventana de 980-1050 px, el contenedor se toma como 95%, el contenido, 60% y el 30% se deja para la barra lateral. El espacio restante se utiliza para formar bordes y márgenes para mayor claridad.
Sin embargo, puede utilizar el tamaño del cuadro para el 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 menor resolución:
Pantalla solo @media y (ancho máximo: 600 px) (
Bloquear (
Flotador: ninguno;
Ancho:85%;
Margen: 1em automático;
Si la pantalla tiene menos de 600 px, entonces nuestros bloques deben caber en una columna: elimine los envoltorios, establezca nuevas sangrías, centre y cambie el ancho. La mayoría de las veces se establece en 100%, pero si por alguna razón esto no es conveniente, configuramos nuestro propio tamaño.
De esta manera puedes configurar no sólo las dimensiones de los bloques de contenido, sino también su visualización. Por ejemplo, prohibir la exhibición de elementos grandes, reemplazándolos por otros convenientes.
Demostremos las posibilidades usando el ejemplo de cambiar colores y pantallas.
La versión para teléfonos inteligentes oculta el menú principal y cambia el color del bloque a azul, mientras que la pantalla más grande muestra el diseño sin estos cambios.
En la mayoría de los casos es necesario ocultar la navegación: se reemplaza con un botón. Es más apropiado hacer esto usando javascript; puede usar soluciones ya preparadas.
Las ediciones se realizan puntualmente, el rango se puede limitar tanto arriba como abajo. Es rápido y conveniente: en una línea especifica 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 la regla @import.
Versión móvil del sitio: cómo hacerlo y a qué prestar atenciónTodos los navegadores modernos entienden MediaQuery, pero no funcionará en IE 8 y versiones inferiores. El problema se resuelve recurriendo a IE más antiguos mediante comentarios condicionales. Deben escribirse en el código de la plantilla, no en CSS.
El script en sí está disponible en GitHub (https://github.com/scottjehl/Respond), agrega soporte para dimensiones mínimas y máximas y consultas de medios al antiguo IE.
Otro problema es que el diseño responsivo implica el uso de HTML5, que nuevamente resulta incomprensible para los navegadores más antiguos. Tratado con hack:
Document.createElement("encabezado");
Document.createElement("nav");
Document.createElement("sección");
Document.createElement("artículo");
Document.createElement("aparte");
Document.createElement("pie de página");
El código está escrito en HTML, además la visualización en bloque de los elementos creados está configurada en CSS:
encabezado, navegación, sección, artículo, aparte, pie de página (display:block;)
Pasemos inmediatamente a la pregunta: cómo asegurarnos de que algunos scripts se muestren solo con los parámetros de pantalla especificados. Si usa jquery, deberá agregar un script simple al código de la plantilla. Los números cambian a los requeridos. Se lee así: si el ancho de la ventana excede 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 utilizando un punto y coma dentro de llaves.
Si ($(documento).ancho() > 980) (
$.getScript("ruta al script");
Otro punto es cómo debe procesar el navegador móvil del iPhone el contenido transmitido y si está permitido aumentarlo. Para ello se escribe en cabeza una escala inicial:
Todo lo que queda es comprobar la exactitud; para ello puede utilizar su propio navegador y teléfono o recurrir a los servicios.
Si el sitio se rediseña para servidor local, la corrección se puede determinar en ami.responsivedesign.is . Para una visualización correcta, los propietarios de Denver deberán cambiar la codificación a utf-8 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 un formulario especial https://www.google.com/webmasters/tools/mobile-friendly, así como en webmasters .
En Yandex esto parece detallado, pero 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 has aprendido a hacerla tú mismo. Si el material le resultó útil, dele 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 plegada de esta lección y simplemente trabajar con las páginas terminadas y copiar el código.
Atentamente, Galiulin Ruslan.
En este post hablaremos de una plantilla móvil para Wordpress. La plantilla es muy bonita, funcional, con excelente usabilidad y diseñada específicamente para plataformas móviles y tabletas.
La plantilla tiene un menú conveniente que se puede configurar en blanco y negro o elegir una combinación de colores diferente para su visualización. La plantilla está hecha para el motor Wordpress incluyendo todas las páginas necesarias y está completa en su montaje.
En este caso, tenemos ante nosotros un típico plantilla de blog móvil. Dada la dinámica de la transición de los dispositivos informáticos de escritorio a sus encarnaciones móviles, debería hacer un pequeño esfuerzo para aumentar el impacto de sus blogs en el entorno de Internet móvil.
Interesante en todos los aspectos, la plantilla móvil Dot Mobi encontrará muchas aplicaciones en sus proyectos de Internet. Un diseño nuevo, un diseño profesional, un peso ligero y una excelente usabilidad encontrarán muchos partidarios para trabajar con la plantilla para un sitio móvil inmediatamente después de descargarla.
Este es uno de esos diseños de sitios móviles del que no desea desprenderse y conservarlo para sus propios sitios. Sin embargo, este no será el caso y estará en contradicción con el principio de presentación de información en el sitio. Por lo tanto, tómalo.
Publicaciones sobre el tema.
-
Fuente de alimentación para una computadora: cómo elegir la adecuada según la potencia, el fabricante y el costo
La fuente de alimentación es el componente más importante de cualquier computadora personal, del cual depende la confiabilidad y estabilidad de su construcción. Sobre el...
-
Guía de la sección de Intereses y Búsqueda en Instagram Cómo encontrar una historia en Instagram
Al utilizar la red social Instagram, muchos usuarios pueden preguntarse: "¿Qué es el directo en Instagram y dónde se encuentra?" -...