El consumo de datos de tráfico móvil creció un 74% solo en 2015 , con más de mil millones de dispositivos vendidos durante ese mismo período, y esta tendencia no muestra intención de frenar. Eso solo debería ser suficiente para subrayar la importancia de optimizar sus diseños para dispositivos móviles.
Algunos temas de WordPress están mejor optimizados para manejar diseños y resoluciones receptivos que otros, pero eso no significa que deba abandonar el barco si desea mejorar la compatibilidad móvil de su sitio. De hecho, hay una serie de correcciones fáciles de implementar que le permitirán obtener grandes ganancias cuando se trata de optimizar sus diseños para dispositivos móviles.
A lo largo de este artículo, cubriremos todo, desde consejos para sistemas operativos móviles específicos hasta optimización de imágenes, diseño de diseño y muchos otros temas. ¡Empecemos!
Imagen de lenjoyeverytime / shutterstock.com
A pesar de los muchos avances realizados por Android, los dispositivos iOS siguen siendo muy populares y disfrutan del respaldo de una comunidad activa de desarrolladores. El punto es que es probable que muchos de sus espectadores visiten su sitio desde la comodidad de sus iPhones y iPads, y si disfrutan lo suficiente de su contenido, incluso podrían guardar su sitio web en sus pantallas de inicio.
Para prepararse para esta eventualidad, repasemos cómo puede agregar algunos íconos de iOS personalizados a su sitio web de WordPress.
En primer lugar, deberá encontrar el archivo header.php de su tema , ya que necesitaremos agregar un código entre las etiquetas <head> para que esto funcione.
¿Ya llegaste? ¡Excelente! Aquí está el código que querrás agregar:
|
01
02
03
|
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" /> |
Como puede ver, el código menciona íconos específicos para iPhone, iPad y dispositivos Retina, todos los cuales deben estar precedidos por el atributo rel apple-touch-icon .
Siempre que estés editando ese archivo header.php , también puedes diseñar una nueva pantalla de presentación de iOS para tu sitio web e incluirla agregando la siguiente línea de código:
|
01
|
<link rel="apple-touch-startup-image" href="splash-screen.png" /> |
Consejo 2: use varios tamaños de imagen en combinación con consultas de medios
Imagen de Artem Kovalenco / shutterstock.com
Por supuesto, ya estás familiarizado con las consultas de medios. Piense en ellos como reglas de diseño específicas integradas en su CSS en caso de que entre en juego un escenario específico. En el caso del diseño móvil, estos escenarios son diferentes resoluciones, orientaciones de dispositivos y dimensiones del navegador. El problema con las consultas de medios hoy en día es que muchos diseñadores y desarrolladores crean sitios web con un segundo enfoque móvil en mente, mientras que idealmente debería ser al revés.
Este enfoque de segundo móvil se puede detectar en las consultas de medios cuando ve las dimensiones de dispositivos populares (es decir, 320 px, 480 px, 768 px) que se utilizan como pautas. Si bien, en teoría, esto puede parecer un enfoque sensato, ya que está siendo eficiente en lugar de introducir consultas innecesarias, en el mundo real, siempre surgen nuevos dispositivos (con nuevos tamaños de pantalla y resoluciones).
Por lo tanto, la próxima vez que esté trabajando en un diseño, intente abordarlo desde una perspectiva móvil:
- Diseñe sus consultas trabajando hacia arriba , desde pequeñas ventanas gráficas.
- Evite usar píxeles para declarar sus puntos de interrupción. En su lugar, intente trabajar con ems y porcentajes con la mayor frecuencia posible para que sus diseños se ajusten según el nivel de zoom.
- Recuerde ajustar sus consultas de medios para adaptarse a dispositivos retina (es decir, resolución mínima: 192 ppp ).
Consejo 3: Optimice sus imágenes
Imagen de Ganibal / shutterstock.com
Incluso si tiene un diseño fantástico y totalmente receptivo, los espectadores potenciales podrían alejarse de su sitio si tarda demasiado en cargarse , y las imágenes juegan un factor importante en este aspecto. Los usuarios esperan gráficos perfectos en píxeles y esperan que se carguen increíblemente rápido, por lo que debe encontrar una manera de mantener bajos los tamaños de los archivos mientras la calidad se mantiene alta.
Si bien esto puede parecer un enigma, existen muchas herramientas que pueden ayudarlo a lograr estos resultados. En el frente de los complementos, tenemos EWWW Image Optimizer y WP Smush , que una vez instalados, aplicarán automáticamente técnicas de compresión sin pérdida a cada imagen cargada en su sitio web de WordPress e incluso pueden revisar su catálogo de medios para optimizar las imágenes cargadas en el pasado. .
Si prefiere no agregar otro complemento a su sitio web, siempre hay herramientas independientes como TinyJPG y TinyPNG , que esencialmente logran el mismo objetivo que EWWW Image Optimizer al reducir selectivamente la cantidad de colores en sus imágenes, así como eliminar eliminar metadatos innecesarios. Esto da como resultado tamaños de archivo mucho más pequeños y solo induce cambios casi invisibles, lo que es un compromiso ideal para la mayoría de los gráficos.
Consejo 4: considere usar SVG
Imagen de Giingerann / shutterstock.com
Los gráficos vectoriales escalables (SVG) son una herramienta ingeniosa para agregar a su lista personal de trucos. A pesar de lo que implicaría el nombre, utilizan una forma de lenguaje de marcado XML en lugar de un formato de imagen directo, y son particularmente útiles para gráficos simples como logotipos, íconos, infografías y otras aplicaciones similares.
“¿Por qué los SVG son tan útiles?”, es posible que se pregunte razonablemente. Bueno, para empezar, son escalables (de ahí el nombre), lo que significa que no tendrá que preocuparse por adaptarlos a diferentes ventanas gráficas. Además de eso, también se pueden animar fácilmente usando CSS, que es un proceso que cubrimos anteriormente en detalle en Cómo crear un logotipo animado con SVG y CSS .
Ya debería estar familiarizado con herramientas como Adobe Illustrator , Inkscape y Sketch , todas las cuales incluyen soporte para este formato, ¡así que pruébelo!
Consejo 5: elija las fuentes correctas
Imagen de Neuevector / shutterstock.com
El diseño móvil no se trata solo de imágenes. Elegir qué fuentes usar puede tener tanto impacto (si no mayor) en sus diseños como los gráficos, ya que la mayoría de los sitios usan texto como método principal para transmitir información.
Desde la perspectiva de un diseñador, esto significa elegir las fuentes adecuadas para el trabajo, y eso implica:
- Alejarse de formas de letras delgadas o complejas. Los usuarios ya tienen que colocar la pantalla del móvil cerca de su cara; no querrá que tengan que acercar aún más cada línea para descubrir lo que dice.
- Evite las fuentes con muy poco espacio entre las letras para una mejor legibilidad.
- Si usa consultas de medios para su texto, use ems para tamaños en lugar de píxeles.
- Considere usar fuentes sans serif , ya que tienden a escalar mejor en la mayoría de las resoluciones.
Consejo 6: trate el texto como parte de la interfaz de usuario
Imagen de Aleksandr Bryliaev / shutterstock.com
Si bien estamos en el tema del texto, la fuente que use no es la única preocupación cuando se trata de legibilidad. Dado que vamos a trabajar con una amplia variedad de ventanas gráficas, desea que sus diseños móviles tengan en cuenta el texto como parte de toda la experiencia de la interfaz de usuario desde el primer momento para maximizar la legibilidad. Esto significa:
- Usar consultas de medios para mantener un límite manejable de caracteres por línea (¡recuerde usar ems en lugar de píxeles!). La cantidad generalmente acordada se establece entre 45 y 75 caracteres .
- Considere usar los valores CSS3 vw , vh y vhmin (todos estos están relacionados con las longitudes porcentuales de la ventana gráfica) para mantener el tamaño de la fuente en relación con el tamaño de su contenedor en cualquier ventana gráfica dada.
Consejo 7: use colores contrastantes a su favor
Imagen de MaluStudio / shutterstock.com
Cualquiera que esté remotamente familiarizado con los fundamentos del diseño le dirá lo mismo: el contraste juega un papel importante en el diseño web. Ya que acabamos de hablar sobre la tipografía, echemos un vistazo a un excelente ejemplo de diseño de sitio web que usa el contraste para resaltar el texto:
Aquí la mirada se dirige hacia el texto gracias al contraste de colores. Esta técnica también se puede aplicar a otras partes de su diseño, y no es necesario que se limite al blanco simple sobre negro: los colores que chocan también pueden verse muy bien en ciertos contextos de diseño.
Si no está seguro de si los colores que ha elegido cumplen con las pautas de buen diseño (o las del World Wide Web Consortium ), puede usar esta sencilla herramienta en línea para saber si está en el camino correcto. Todo lo que tiene que hacer es ingresar dos colores y le dirá si su contraste es adecuado desde el punto de vista del diseño.
Imagen de Gamegfx / shutterstock.com
Si su tema de WordPress no incluye menús móviles por alguna razón insondable, hay muchas herramientas que puede usar para abordar este problema de inmediato. Por ejemplo, en el frente de los complementos, tenemos un par de contendientes fuertes:
Super vuelo
Superfly le permite crear una amplia variedad de menús adicionales que pueden usarse para reemplazar los predeterminados de su tema o complementarlos. Por ejemplo, puede personalizar fácilmente sus menús de Superfly para que se muestren solo en resoluciones móviles y no se muestren en páginas seleccionadas.
Además de representar todo tipo de menús móviles regulares, Superfly también le ofrece la opción de crear menús verticales basados en íconos.
Hero Menu simplifica el proceso de creación con un editor de arrastrar y soltar y funciones totalmente receptivas. El complemento viene con docenas de diseños de menú prediseñados, combinaciones de colores e íconos personalizados para que cada menú sea único. Los menús creados con el complemento se mostrarán automáticamente con una versión más ligera cuando se encuentre en una interfaz móvil.
Consejo 9: use CSS3 en lugar de imágenes (cuando sea posible)
Imagen de 10 CARA / shutterstock.com
Este es bastante sencillo. Aunque la tentación de usar herramientas de diseño gráfico para diseñar cada aspecto de su sitio web puede ser fuerte, hay muchas ocasiones en las que un poco de CSS3 será suficiente en lugar de usar imágenes adicionales.
Tome este funcionamiento del botón del molino, por ejemplo.
Si supuso que se trataba de un truco gráfico complejo, estaba equivocado. Todo se logró usando CSS3 , y con un poco de imaginación (o el tutorial correcto) puedes lograr muchos efectos complejos que de otro modo requerirían gráficos más complejos (y más pesados) para lograrlos.
Para ver algunos excelentes ejemplos de botones hechos a mano con CSS3, consulte 40 tutoriales de botones CSS3 para diseñadores .
Consejo 10: use estas herramientas para probar sus diseños para dispositivos móviles
Imagen de Iconic Bestiary / shutterstock.com
Uno de los mayores problemas con el diseño móvil surge de la gran cantidad de ventanas gráficas y resoluciones diferentes que debe tener en cuenta. Si bien hay algunas resoluciones que disfrutan de una gran popularidad, el mercado no es uniforme en lo que respecta a este aspecto y cada mes se lanzan nuevos dispositivos.
Por lo tanto, a menos que tenga acceso a una amplia variedad de dispositivos físicos, debe buscar métodos alternativos para probar sus diseños móviles. Afortunadamente, la web está repleta de aplicaciones creadas para estos propósitos expresos, como:
NavegadorPila
BrowserStack es una solución completa que incluye un laboratorio de pruebas remoto para dispositivos físicos reales, incluida una amplia gama de teléfonos y tabletas con Android e iOS. Además de eso, también obtienes acceso a múltiples versiones de todos los navegadores más populares (y algunos no tan populares, como Edge y Yandex ). Esta combinación de entornos de prueba es perfecta para comprobar cómo funcionarán sus diseños en escenarios de la vida real y es útil no solo desde la perspectiva del diseño sino también para los desarrolladores.
La mejor parte es que ni siquiera tiene que probar sus diseños manualmente en cada dispositivo, ya que el servicio incluye una función de Capturas de pantalla rápidas , que probará automáticamente su sitio con más de 700 combinaciones de dispositivos, navegadores y resoluciones para que pueda identificar rápidamente cualquier error en entornos específicos.
estudioprensa
StudioPress no incluye la mitad de las funciones que ofrece BrowserStack. De hecho, solo le permite probar sitios en vivo para anchos específicos (que puede configurar manualmente) o usar tamaños de dispositivos preestablecidos. Sin embargo, es completamente gratis y no tienes que registrarte para usarlo.
Además de las herramientas anteriores, es posible que también desee recurrir a las Herramientas para desarrolladores de Chrome o al complemento Firebug para Firefox, que le permiten probar cómo se mostrará su sitio en múltiples resoluciones sin salir de su navegador.
Configuración multidispositivo y modos de vista previa de Divi
Finalmente, si es un usuario de Divi , puede usar los controles de diseño receptivos incorporados para crear módulos y diseños que se adapten mejor a cada tamaño de pantalla. También puede obtener una vista previa de estos cambios sin tener que salir de Divi Builder.
Conclusión
Si bien estos consejos sin duda tendrán un impacto positivo en su sitio web, debe recordar que la optimización móvil es algo que debe revisar constantemente, ya que los usuarios de dispositivos móviles tienen poca paciencia con las prácticas de diseño descuidadas.
Siempre surgen nuevos dispositivos, cambios en las tendencias de diseño, actualizaciones del sistema operativo y otros factores que podrían causar problemas con sus diseños. Con eso en mente, repasemos lo que hemos cubierto en este artículo:
- Cree iconos de iOS y una pantalla de inicio.
- Siga nuestras pautas para consultas de medios y optimice las imágenes en consecuencia.
- Considere reemplazar imágenes con SVG o CSS cuando sea posible.
- Elija las fuentes correctas y trate la tipografía como parte de la UX.
- Diseño de menús móviles personalizados.
- ¡No olvides probar tus diseños!
¿Tiene consejos que le gustaría compartir sobre el diseño web para plataformas móviles? ¡Háganos saber en la sección de comentarios!
Imagen en miniatura del artículo por Shai_Halud / shutterstock.com