Adapté esta plantilla para navegadores estándar 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. Quiero señalar que todos los navegadores estándar (con la 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, hablaré de algunos trucos que ayudarán a sortear muchos problemas.

Qué resolución elegir y la metaetiqueta de la ventana gráfica

Parecería que deberíamos tener una pregunta sobre qué permiso tomar como base de 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 viewport viene al rescate, lo que resolverá el problema con la resolución y la escala.

• ancho = ancho del dispositivo: el valor lo establece el propio dispositivo
• initial-scale=1 - la escala inicial se establece en 1 (es decir, 1:1)
• escala máxima = 1.0, escalable por el usuario = no: la escala está deshabilitada (quiero señalar que incluso con esta configuración, HTC seguirá escalando obstinadamente, y los desarrolladores dijeron que esto no es un error, sino una característica)

Un poco sobre gráficos

Incluso con tal rango de resoluciones, debo señalar que la mayoría de los dispositivos móviles, que tienen una resolución alta, no la usan para expandir 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 las resoluciones más pequeñas. ¿De dónde viene 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 dispositivos de manzana Las pantallas retina tienen 4 veces más puntos en la misma área de la pantalla, lo que aumenta la claridad). Podemos ver mejor el resultado en la siguiente imagen.

Ahora que sabemos cómo funcionan las pantallas con alto 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, por lo que no nos detendremos en eso.
Otra cosa es con fotos e imágenes de fondo. Después de todo, si guardamos la imagen de fondo basándonos en el hecho de que tenemos 320x480, entonces los dispositivos con un DPI más denso no podrán aparecer en todo su esplendor frente a nosotros, y todos los esfuerzos para transmitir la claridad y el encanto de la la imagen quedará en nada, ya que en realidad la aumentarán 2 veces (y no importa qué tan bien escale el navegador, la calidad siempre se pierde cuando el software aumenta el tamaño). ¡Aquí es donde entra el ingenio! Intentaré explicarlo con un ejemplo. Tenemos un sitio web que tiene un fondo en el encabezado de 320 px de ancho, por lo que nuestras pantallas súper claras mostrarían esta imagen al 100 %. foto original no debería ser 320x50 sino 640x100 (exactamente 2 veces más grande), y ya con CSS establezca el tamaño de fondo: 320px 50px;. Hacemos chamanismo similar con imágenes en forma de img.

Optimización de consultas

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 todos fotos de fondo en css. Además de la optimización de consultas, tenemos una gran ganancia debido al almacenamiento en caché de css.

Problemas con sprites e imágenes.

Debido a que nuestro navegador comprime el contenido y escala a uno u otro tamaño, puede que durante los cálculos redondee incorrectamente los tamaños, y por tanto, al pegar sprites píxel a píxel, salga una tira del siguiente elemento. Para evitar esto, vale la pena hacer un espacio al pegar un par de píxeles.

Pequeño problema con los formatos de imagen.

También encontré un problema desagradable en algunos dispositivos relacionados 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 algún tipo de imagen que se recorta con un trozo de el degradado, y de hecho debería encajar en un 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 resolver este problema, tuve que guardar ambas imágenes en el mismo formato.

Ocultar la barra de URL

Como no tenemos tanto espacio en nuestro dispositivo, no nos hará daño ganar un par de docenas de píxeles adicionales. Y podemos encontrarlos ocultando nuestra barra de URL. Para esto tenemos un script simple:

AddEventListener("cargar", function() ( setTimeout(hideURLbar, 0); ), false); función hideURLbar() ( ventana.scrollTo(0, 1); )

Pero observo que este script puede interferir con nosotros si nuestro enlace lleva a uno de los anclajes. nueva pagina(en este caso, nos desplazaremos a 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, en IOS podemos lograr un efecto de clic con la pseudoclase :active. Pero funcionará incluso si nuestro elemento está enfocado al desplazarse 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.

var scroller=falso; $("a").live("touchstart",function(evento)( var elem=$(this); clickable=setTimeout(function () ( elem.addClass("active");), 100); )) ; $("a").live("touchmove",function(evento)( clearTimeout(clickable); scroller=true; )); $("a").live("touchend",function(evento)( var elem=$(this); clearTimeout(clickable); if(!scroller) ( elem.addClass("active"); setTimeout(function ( ) ( elem.removeClass("activo");), 50); ) else ( elem.removeClass("activo"); ) ));

Eliminación de bordes y resaltados de enlaces y botones

Probablemente todos los usuarios notaron que cuando hace clic en un enlace, se enmarca y resalta. Tal efecto puede estropear en gran medida la idea del diseñador. Aquí viene al rescate una especie de reinicio de estilos (probado en todos los navegadores webkit, y estos son navegadores nativos IOS, Android, BlackBerry)

*( -webkit-text-size-adjust: none; /*corregir error en IOS con escalado horizontal*/ contorno: ninguno; /*quitar borde alrededor de enlaces y botones*/ -webkit-touch-callout: none; /* si es necesario, deshabilite el resaltado de texto*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*elimine el resaltado de fondo de enlaces y botones*/ )

soporte fijo

Porque tecnologías móviles ahora están avanzando muy rápido, y al momento de escribir el artículo, el porcentaje de navegadores que no soportan fijos tiende a cero, no profundizaré mucho en la descripción. Solo diré que para estos navegadores deberíamos usar iscroll . También describiré un pequeño truco con respecto a conexión dinámica scripts (requeridos para no conectar un archivo adicional para navegadores normales)

//versión antigua de IOS que detecta var OSName="Sistema operativo desconocido"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversión

En este ejemplo comprobé que si es un Iphone y la versión del navegador es inferior a la 534 (no soporta fijo). Incluyo dinámicamente el scriptfixing.js

CSS3

Además, no olvide que ya podemos usar algunas propiedades css3 al máximo (simplemente no se olvide de los prefijos moz-, webkit-, o-). Para WP7, no dude en incluir pie.htc.

Enlace de escritorio IOS

Probablemente para los usuarios de iOS no sea un secreto que en Safari se puede colocar un enlace al sitio en el escritorio.
Aquí hay un ejemplo de un enlace de este tipo a Forismatic.

Abajo ejemplo HTML código para el ícono (IOS mismo lo escalará, agregará redondeo de las esquinas), un anuncio de que este enlace debe abrirse 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 lo que se abriría en pantalla completa, oculta la barra de URL - cambie el color de la barra de estado a negro (los valores disponibles son predeterminados, negro, negro translúcido). defecto - enlace al icono que se muestra en el escritorio.

Podemos ver un ejemplo vivo de todo lo anterior.

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 observan 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.

Hoy en día, muchas empresas prestan mucha más atención a la creación de recursos móviles de alta calidad, ya que, según los últimos datos, el 80 % de los usuarios de Internet utilizan dispositivos portables para encontrar la información que necesita. Además, los especialistas en marketing se están preparando para un gran cambio en el algoritmo de Google que entró en vigencia el 21 de abril de 2015. El blog oficial de la compañía dice que ahora la calidad de la optimización móvil de un recurso determinará en gran medida su posición en los resultados de búsqueda.

La próxima actualización tendrá un impacto mucho mayor en el sistema de clasificación que el mismo Panda o , por lo que mejorar la experiencia móvil debería ser su prioridad para el futuro cercano. Según un artículo de Search Engine Land en esta actualización, todos los sitios estarán sujetos a rigurosas pruebas de capacidad de respuesta móvil.

Para que pueda preparar completamente su sitio para un cambio tan importante, hemos seleccionado 15 ejemplos inspiradores de diseño web móvil para usted.

Shutterfly es un servicio en línea que le permite crear álbumes de fotos, tarjetas de felicitación, cartas de invitación y más. Con más personas accediendo a sus fotos en sus teléfonos inteligentes todos los días, Shutterfly se compromete a brindar una experiencia móvil positiva a sus clientes.

El sitio móvil de la empresa sigue teniendo éxito por dos razones principales: facilita a los usuarios encontrar información sobre ofertas y las vende a través de bellas imágenes.

Una vez en el sitio, verá que las secciones del menú aquí se presentan como botones grandes en la parte inferior de la pantalla. Gracias a esto, los visitantes pueden decidir muy rápidamente la elección de la opción que les interesa y obtener información adicional.

Una plantilla de sitio móvil es una solución indispensable para un sitio moderno que debe cumplir con los requisitos más altos. Cualquier recurso web de alta calidad debe tener un diseño que se adapte a los dispositivos móviles, y para ello la plantilla debe ser adaptativa o responsive. Esta característica, en particular, es Plantillas de WordPress. En esta plataforma se ejecutan los sitios web de muchas marcas globales, como la revista Harvard Business Review, la cantante Katy Perry, la saga de fantasía Star Wars y Mercedes-Benz. Todos estos sitios están adaptados a dispositivos móviles mod, lo cual es una ventaja significativa.

Ahora es muy importante que el sitio esté optimizado no solo para los motores de búsqueda pero también adaptado para dispositivos móviles. Esto se debe principalmente a la creciente popularidad de los teléfonos inteligentes y las tabletas entre los usuarios comunes. Si su sitio no es compatible con dispositivos móviles, se verá incómodo por decir lo menos: fuentes pequeñas, texto que no cabe en la pantalla y tiene que desplazarse hacia la derecha, imágenes enormes y muchos otros problemas. Un usuario móvil simplemente dejará ese sitio por el sitio de su competidor. La importancia de adaptarse a los sitios móviles también viene dictada por el hecho de que tráfico móvil en la participación total puede alcanzar hasta el 50%. Al olvidar inicialmente que el sitio debe tener un diseño receptivo o adaptativo, corre el riesgo no solo de perder una gran parte de su audiencia potencial, sino también de reducir sus posibilidades de éxito en principio.

Los temas premium de WordPress proporcionan solución completa, que se convertirá en una base sólida para su sitio de cualquier tipo: blog, revista, tienda en línea, sitio corporativo, sitio de gimnasio, cine, organización sin fines de lucro, etc. Además del hecho de que el diseño de dichas plantillas se realiza al más alto nivel y no contiene fallas ni en el código ni en el diseño, también es receptivo.

Al elegir una plantilla de WordPress y este sitio, puede estar seguro de que su sitio no solo tendrá como objetivo atraer visitantes, sino que también funcionará bien en cualquier dispositivo y navegador. Para ahorrarle tiempo, decidimos junto con nuestros expertos hacer una pequeña selección de dichas plantillas para varios propósitos. Elige lo que te gusta y crea un sitio web exitoso ahora mismo.

Plantilla de sitio web móvil

Flatsome - Tema de WordPress multipropósito y receptivo

Flatsome será una excelente opción para crear cualquier tipo de sitio web, ya sea un blog, una tienda, un portafolio, etc. La versatilidad de este tema también se expresa en su excelente adaptabilidad a los dispositivos. varios tipos ya todas las extensiones de pantalla. El tema se verá y funcionará muy bien tanto en dispositivos móviles como en portátiles y Computadoras personales. Editor de página de arrastre simple Y cae le permitirá crear y editar las páginas de su sitio web de la manera que desee. El tema también viene con un complemento de WooCommerce para que pueda crear su propia tienda en línea.

Porto es un gran y colorido tema de WordPress

Porto es un tema empresarial de WooCommerce de WordPress versátil y totalmente receptivo que también es adecuado para crear cualquier tipo de sitio web. Porto le brinda la oportunidad de aprovechar muchos elementos y potentes funciones que lo ayudarán a personalizar todo lo que desee. En comparación con las funciones de otros temas universales, Porto presenta funciones avanzadas de WooCommerce, diseños de página exclusivos, funciones de personalización de diseño y más. Porto garantiza un rendimiento súper rápido en todos los dispositivos, lo cual es muy importante para cualquier negocio y tienda en línea.

Puca - Tema WooCommerce de WordPress optimizado para dispositivos móviles

Puca es un tema de WP WooCommerce extremadamente flexible y altamente personalizable que se puede instalar y modificar a su gusto en minutos con una rápida importación de diseño de demostración. Puca se puede utilizar para una variedad de propósitos: tiendas de moda, tiendas de muebles, tiendas de electrónica, etc. El tema es totalmente compatible con todos los estándares de SEO, lo que ayudará a que su empresa se ubique en la parte superior de la búsqueda de Google. Todas las páginas de Puca son totalmente receptivas, por lo que se pueden ver independientemente del tipo de dispositivo y la extensión de la pantalla.

Plantillas de sitios web móviles para empresas

Abogado y abogado: una plantilla para un sitio web para un abogado, un abogado y una oficina notarial

Esta es una plantilla legal universal que también se puede utilizar en el sector financiero. Para crear un sitio en él, debe importar un sitio listo para usar o crearlo usted mismo a través de la interfaz de arrastrar y soltar del constructor. Un sitio listo para usar con un diseño objetivo tiene secciones estándar con áreas de práctica legal, ejemplos de casos completados con éxito, miembros del equipo y horas de trabajo. Puede agregar un formulario para registrarse para una consulta legal gratuita.

Además de ser receptivo y funcionar bien con dispositivos táctiles, también admite complementos de SEO y tiene alta velocidad cargando a pesar de usar animaciones CSS. Puede agregar hermosos íconos (más de 1200 piezas) y un control deslizante con efectos sorprendentes al sitio.

Houzez - plantilla de sitio web móvil de agencia inmobiliaria

Esta no es solo una plantilla para un agente inmobiliario o una agencia de bienes raíces. Sobre esta base, puede obtener un sistema completo para administrar objetos inmobiliarios con la posibilidad de colocarlos en el catálogo. Esto aumentará el flujo de clientes a su sitio. Hay varias demostraciones para importar. Puede usar el efecto de paralaje y agregar video al fondo.

El catálogo admite varios diseños para mostrar objetos en una lista o cuadrícula, así como diseños de página objetos individuales. La búsqueda se realiza de acuerdo a varios criterios: tamaño, tipo, costo, ubicación y comodidades. Al buscar una propiedad, el usuario puede ver los objetos que están cerca. Puede ver el objeto en detalle utilizando la función "Visita virtual 360 °". La plantilla admite complementos profesionales iHomeFinder y dsIDXpress.

Total es una plantilla de sitio web universal para dispositivos móviles para cualquier negocio

Una de las plantillas más vendidas en ThemeForest para su uso en varios campos de actividad: diseño de interiores, desarrollo, SEO, industria de servicios, construcción, medicina, etc. Puede instalar uno de los temas de demostración para su aplicación, pero si tiene tiempo, siga adelante y use la herramienta de arrastrar y soltar del constructor Visual Composer para obtener un diseño realmente único. Para ello existen módulos especiales para portafolios, reseñas, staff, galerías y otras secciones.

La plantilla admite las funciones de la tienda, el foro y el control deslizante. Con el complemento Calendario de eventos, puede programar, agregar e invitar a eventos, y con el complemento Formulario de contacto 7, puede agregar un formulario de contacto conveniente a su sitio. Soporte para el complemento Yoast SEO.

Plantillas de sitios web móviles: blog y revista

Soledad - Plantilla de sitio web móvil WordPress conceptual para blog y revista

Esta es la plantilla más vendida en la categoría de Blog y revista en 2016. Para configurarlo se utiliza la herramienta Live Customizer, que funciona en modo tiempo real y admite más de 300 opciones. Además, para personalizar o crear un sitio desde cero, existe un complemento de Visual Composer. Más de 900 variaciones de página de inicio para revistas y blogs sobre diversos temas (viajes, música, videos, juegos, películas, comida, salud, autos, moda, etc.) y más de 300 diseños de controles deslizantes. Cinco diseños de publicación, tres diseños de barra lateral y seis diseños de cartera. Impresionantes rejillas de galería.

Caress es una plantilla completa de blog móvil de WordPress.

El tema Caress tiene un diseño limpio y fresco que se puede personalizar fácilmente a tu gusto. Para hacer esto, la herramienta Live Customizer tiene más de 70 opciones diferentes. La plantilla es especialmente adecuada para blogueros que cargan mucho contenido gráfico: brinda soporte para cargar fotos de alta resolución, organizar galerías y agregar videos que se verán muy armoniosos en las publicaciones.

Hay 14 diseños disponibles para el diseño de blogs y categorías. Dos tipos de control deslizante con postes adhesivos. También puede hacer que la barra lateral sea pegajosa y agregar una sección de productos de la tienda WooCommerce y nueve widgets para redes sociales y publicaciones. El pie de página también tiene áreas para widgets, incluido un carrusel de fotos de Instagram.

Vlog - Plantilla WordPress para Vlog o Revista

Esta plantilla diseñada por expertos está estrictamente enfocada en la presentación de videos sobre varios temas. Podría ser un blog de videos, un sitio de tutoriales en video o una revista de videos virales. Para ello, cuenta con total compatibilidad con los conocidos servicios de vídeo YouTube, Vimeo y Dailymotion.

La plantilla admite más de 200 diseños y características exquisitas para presentar contenido de texto y video de la manera que desee. Con el complemento Serie, puede agrupar y crear listas de reproducción a partir de artículos y videos, lo cual es muy conveniente para videos de capacitación. El complemento Video Thumbnails lo ayudará a personalizar la imagen en miniatura de su video. Al igual que en YouTube, los visitantes pueden expandir el video a pantalla completa o verlo más tarde. Al colocar pancartas, puede ganar en publicidad.

Plantillas web para dispositivos móviles - Tiendas online

Oxygen - Tema personalizable de la tienda WooCommerce

La plantilla de sitio web móvil personalizada de Oxygen lo ayudará a obtener una tienda con un diseño sofisticado y soporte para las funciones principales para vender productos. Para las páginas, puede crear sus propios diseños de forma totalmente gratuita utilizando Visual Composer. Una presentación de diapositivas ayudará a atraer compradores potenciales a productos atractivos, promociones y ofertas especiales. La navegación se puede organizar con un menú lateral fijo, lo que puede ser muy conveniente.

Con la ayuda de un módulo interactivo, los compradores podrán ver rápidamente el producto de su interés sin salir de la página del catálogo. Los mejores productos se pueden agregar a la lista de deseos o al carrito de compras, que siempre está disponible en la parte superior del sitio. Algunos productos también se pueden publicar como catálogo. El tema tiene un diseño receptivo y es totalmente compatible con todos los gestos de los dispositivos móviles.

Savoy: una plantilla de tienda en línea minimalista basada en AJAX

El tema Savoy tiene un diseño simple y al mismo tiempo Bonito diseño, lo que le permite concentrarse en los productos vendidos. La funcionalidad AJAX será conveniente tanto en PC estacionarias como en dispositivos móviles. Su ventaja es que el usuario no necesita ir a página separada para tomar alguna acción. En particular, se admite una búsqueda simple de Ajax para productos.

Para optimizar el rendimiento de la tienda, se utiliza la función de carga lenta de fotos de productos. Compatibilidad con una galería de productos a pantalla completa con la capacidad de acercar. Soporte para vista rápida, lista de deseos y formulario emergente de inicio de sesión/registro.

Hay varios diseños de página de blog. Los controles deslizantes y las galerías responden libremente a los gestos táctiles móviles.

Diferentes plantillas para sitios que admiten dispositivos móviles

Bellevue: plantilla de sitio web móvil de hotel con soporte de servicio de reserva

En este tema, hay siete demostraciones para varias variaciones del sitio, incluida una página. La versión premium del complemento WP Booking System brindará a los visitantes la posibilidad de reservar fácilmente una habitación en su hotel. Con el Calendario de eventos, puede agregar eventos importantes a su calendario con soporte para iCal de Apple y exportar a Gmail. También hay un MasterSlider con soporte para gestos móviles.

El efecto de paralaje hará que el sitio sea visualmente más atractivo. El blog está disponible en dos diseños: estándar y mampostería. Impresionantes diseños de página para habitaciones y suites. Un conjunto de más de 1300 íconos vectoriales claros y escalables, así como animaciones CSS3, ayudarán a decorar el sitio. Para la conversión, puede agregar cualquier formulario al sitio. Soporte para descuentos de temporada y pago a través de WooCommerce.

Sport - plantilla de WordPress para club deportivo

Sport es una plantilla de sitio móvil especializada para un club deportivo, centro o comunidad. El diseño es simple y limpio, por lo que será conveniente sentarse en su sitio tanto desde una PC normal como desde dispositivos móviles, incluidos iPhones y iPads con requisitos de alta calidad de imagen.

El kit incluye dos sitios listos para usar con dos esquemas de color, que se configuran fácilmente a través del panel de administración. Para crear un encabezado, hay un generador especial con soporte para 40 opciones para anuncios y enlaces a redes sociales. Cuatro tipos de galería: isótopo, mampostería, deslizador y sencillo. Soporte para complementos de foro, red social, un calendario de eventos y una tienda online serán de gran utilidad para la web de un club deportivo.

Elija solo una plantilla de sitio web móvil de alta calidad para sus propósitos, y definitivamente no se arrepentirá. Se pueden encontrar aún más temas para sitios móviles en nuestras revisiones, y.

Alexander es el fundador del proyecto de sitio web Web Lab of Success, creado para apoyar a los principiantes y emprendedores continuos de Internet.Es un adicto al trabajo convencido con experiencia profesional en la gestión de la oficina editorial de una revista en línea, creando y administrando su propia tienda en línea. Ocupación principal: promoción de negocios (incluyendo tiendas online) a través de Facebook y Google Adwords. Pasión principal: monetización de sitios web a través de herramientas de marketing de afiliación y Google Adsense. Registros personales verificados: 3 millones de visitantes del blog por mes.

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 está alcanzando un nuevo nivel. Si un usuario ingresa y ve que el sitio no está optimizado para dispositivos móviles: la imagen no se puede ver, los botones se han movido hacia afuera, las fuentes son pequeñas e ilegibles, el diseño está torcido: el 99% de 100% que 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 del 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 (redireccionar de una dirección a otra), lo que puede complicar el trabajo de un webmaster, y es más fácil para un 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 hay nada que pueda hacer 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 alojar varios tipos información, mientras que la memoria del teléfono y el tráfico de Internet no se consumen de la misma manera que cuando se visita el 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. A veces, la aplicación no reconoce el dispositivo móvil. Regular apoyo 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 diseño adaptativo. 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. No olvide que el 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 realizó 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. 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. Las claves virtuales deben estar visibles para que el usuario sepa claramente dónde presionar 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.

Todas las opciones adicionales que serían útiles en la versión de escritorio y facilitarían la vida del usuario solo traerán dificultades aquí. 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.

Una asociació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 que el comercio móvil crecerá 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, aunque hay tantos espacio libre en este mercado, puede tomar 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 en día, las tecnologías móviles se encuentran en la etapa de crecimiento y desarrollo activo, por lo tanto, al esforzarse por liderar 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 es inconveniente para una persona 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 redirigiendo, use plantillas gratis o creación aplicación movil, con lo cual el usuario podrá ingresar y estar en la página de manera más conveniente.