Nuestro flujo de trabajo receptivo para crear un sitio web en Elementor

En este artículo, queríamos discutir cómo creamos sitios web muy receptivos para todo tipo de dispositivos y dimensiones de pantalla al construir con Elementor. Este es nuestro flujo de trabajo individual de la agencia y lo hemos desarrollado en los últimos dos años de operaciones. Si cree que esto podría ser útil para su negocio y diseño, no dude en adoptarlo. Tenga en cuenta que la mayoría de los sitios web que construimos son bastante complejos y no meros aterrizajes corporativos de cinco páginas. Algunos de estos pasos son increíblemente útiles al construir tiendas electrónicas complejas o sitios web de contenido, pero se pueden ignorar para ahorrar tiempo y dinero al construir un sitio más simple.
Hace que el primer paso hacia nuestro diseño web receptivo es burlarse de él. Utilizamos Adobe XD para crear modelos de sitios web, proyectando con una primera ideología de muebles. Lo que esto significa es que iremos más allá y crearemos un modelo móvil antes de pensar en la versión de escritorio. El 60% de todo el tráfico del sitio web proviene de los navegadores móviles, lo que significa que esto es más importante que corregir el escritorio.

Un poco desactualizado, pero eso muestra las tendencias cambiantes, entonces tomaremos ese modelo, lo extenderemos al tamaño de una tableta y luego la extenderemos al tamaño del escritorio. La versión de escritorio del sitio puede verse bastante diferente de la versión móvil del sitio, pero tiene todas las mismas secciones y estructura para reducir la cantidad de elementos DOM y mantener todo receptivo.
Al diseñar una mentalidad móvil en primer lugar, podemos asegurarnos de que el aspecto del sitio web sea perfecto desde el primer día. Usando Adobe XD, nuestra agencia puede colaborar fácilmente entre sí, compartir modelos para recibir comentarios e incluso verlos en teléfonos personales mientras diseña. Más exactamente, cuando se trata de diseñar sitios web para proyectos complejos, levantar estática del sitio web es increíblemente importante. Puede leer nuestro artículo sobre sitios de elevación aquí: https://isotropic.co/is-making-a-website-mockup-worth-it/

Una vez que los modelos están listos, probados por los grupos de introducción de los usuarios, los clientes y el equipo de nuestra agencia, es hora de crearlos en el elemento. Este es el aspecto más importante de crear el sitio receptivo: incluso su construcción. Creación del sitio web que responde con Elementor Cuando construimos el sitio web, primero definiremos la estructura básica en su forma de escritorio. Sin embargo, podremos llenar el contenido de la tableta móvil a la escritorio. Al hacer esto, podemos asegurarnos de que esta estructura funcione en todas las dimensiones de la pantalla y, poblando el contenido con una mentalidad móvil, sabemos que se verá bien (desde el principio) en un teléfono móvil.
Fuente Para asegurarse de que todo se vea bien en las diferentes dimensiones de la pantalla, utilizaremos la función incorporada de “escondite receptivo” que viene con un elemento. Se encuentra en la pestaña Configuración avanzada del fabricante. Sin embargo, debe tener cuidado al ocultar elementos (esto solo usa la pantalla CSS: ninguna en una interfaz gráfica de usuario), porque todos estos elementos continuarán cargándose. Si oculta la mitad de su página web móvil, esto puede afectar seriamente la velocidad de su sitio, por lo que debe tener cuidado y crear el sitio para ser lo más débil posible. El elemento actual se entrega con tres puntos de interrupción receptivos. En algunas situaciones, estos tres puntos de interrupción son más que suficientes para alcanzar un diseño receptivo de alta calidad. Sin embargo, cuando diseñamos con otras herramientas, utilizamos hasta seis puntos de interrupción individuales. Elementor no nos deja hacer esto fuera de la caja, por lo que estamos bloqueados para usar consultas CSS de medios. En esta nota, vote para los desarrolladores Elementor agregue puntos de interrupción adicionales como característica nativa:

Afortunadamente, utilizamos una gran cantidad de CSS personalizados, porque es más rápido para que nos desarrollemos. Sin embargo, si no está familiarizado con CSS o no le gusta usarlo, hay una colección de complementos que le permiten agregar puntos de descanso personalizados a su proyecto, hemos usado suplementos PioTnet especialmente (sobre los cuales se habló en el anterior Artículo), porque tienen muchos elementos excelentes de terceros, y el instrumento se entrega con una utilidad personalizada de punto de ruptura.
Sin embargo, no compraríamos otra licencia de PioTnet solo para agregar puntos de interrupción móvil, los interrogatorios de CSS de medios son una forma más rápida y barata de hacerlo. Otra herramienta que puede usar cuando se trata de un diseño receptivo es algo llamado Csshero. Csshero le permite generar una gran cantidad de CSS personalizados utilizando una hermosa interfaz gráfica. Usamos esto en el pasado y fue bastante beneficioso para nuestro flujo de trabajo: puede leer sobre nuestros pensamientos aquí. Cuando agregamos elementos de contenido específicos, tratamos de respetar todas las mejores prácticas de diseño receptivas.
Por ejemplo, disminuiremos ciertos elementos usando VH, VW o porcentaje. Tratamos de evitar las dimensiones de los píxeles siempre que sea posible, ya que esto puede tener un impacto negativo en la apariencia receptiva de un sitio web de tamaño de pantalla único. Si es posible, intentamos usar SVG para nuestros iconos y los gráficos básicos en el sitio, ya que son los más receptivos. Las imágenes se deteriorarán cuando se arrojen al aire, y los SVG no (sin mencionar que son mucho más pequeños que la mayoría de las imágenes, lo que conduce a un tiempo de carga mucho más rápido).
Fuente realmente nos gusta usar REM para todos nuestros elementos tipológicos. Recuerde solo el valor básico del texto HTML y extender o disminuir el sitio. Por ejemplo, el tamaño de fuente básico típico para la mayoría de los navegadores es de 16 píxeles, por lo que un remista de 16 píxeles.
Fuente, por supuesto, estas dimensiones de fuente difieren entre los navegadores, especialmente al comparar escritorio y móvil. Para nosotros, esto es genial, porque nos permite lograr dimensiones de texto receptivas que son visibles y legibles en múltiples dimensiones de pantalla. Hay muchos artículos sobre las mejores prácticas de diseño receptivas en Google, por lo que si está interesado, solo buscalas. Lo que realmente se resume es prestar atención a los visitantes, mantener las cosas simples en su móvil y asegurarse de que los artículos sean continuos entre los dispositivos de escritorio y los dispositivos móviles. Asegúrese de usar mediciones relativas, como porcentajes y REM, para asegurarse de que los artículos estén Avalado correctamente hacia arriba y hacia abajo para cumplir con los requisitos del tamaño de la pantalla. Optimización de la velocidad móvil Después de tener una versión general de nuestro sitio, es hora de optimizarla a la velocidad. Tenemos muchos artículos y recursos sobre cómo hacer un sitio web elemental para cobrar más rápido, pero hay algunas cosas en las que debe concentrarse en lo que respecta a la navegación móvil. Los dispositivos móviles tienen menos energía e Internet más lentos, lo que significa que este tipo de sitios generalmente se cargan mucho más lento que los sitios de escritorio. Este es solo un hecho conocido, pero es algo que necesita mitigar tanto como sea posible, de lo contrario, sus visitantes no llegarán a su sitio web. Las personas tienen un período de atención de solo 6 segundos, y su sitio debe cobrar en 2.

Cuando se trata de optimización primaria para la velocidad móvil, las dos cosas más importantes son las fuentes y las imágenes. Cuando se usan fuentes, siempre deben ser precargadas y usar el formato de archivo .wof .wof2. Esto garantiza la compatibilidad con la mayoría de los navegadores móviles, y estos formatos de archivo son pequeños y rápidos de cargar. Para optimizar correctamente todas nuestras fuentes en los sitios de elementos, las alojamos localmente o usamos WP Rocket para precargarlas rápidamente. Las imágenes generalmente tienen el mayor impacto negativo en la velocidad de cargar su sitio móvil. Debe asegurarse de que estén bien optimizados y se transmitan en formatos de próxima generación, como WebP. Esto no es realmente algo que pueda hacer manualmente, pero afortunadamente, hay muchos servicios dedicados a la optimización y la conversión automática de las imágenes. Nuestro instrumento ir a asegurar que las imágenes se carguen rápidamente en sitios web móviles se denomina ShortPixel. Simplemente tiene que instalarlo, hacer clic en el botón Rojo de gran optimización y comprimirá y convertirá todas sus imágenes y las transmitirá a través de un CDN para garantizar el tiempo de carga más rápido para el sitio: su móvil Elementor Mobile. Probando el sitio hasta ahora, construimos nuestro sitio web, nos aseguramos de que se vea bien en el móvil y lo optimizamos para la velocidad. El último paso en nuestro trabajo de desarrollo móvil para el elemento es las pruebas.

Esta es, con mucho, la parte más importante de cualquier proyecto de sitio web receptivo, porque ahora tiene que probar el diseño receptivo que se ve bien en todo tipo de tamaño de pantalla. En el pasado, solían tener dimensiones de pantalla estandarizadas. Tendría sus grandes computadoras portátiles, computadoras portátiles pequeñas, tabletas y dispositivos móviles. Eso sería ahora, cada computadora portátil tiene su propio tamaño de pantalla y la relación de apariencia, los dispositivos móviles varían desde dimensiones increíblemente largas y altas hasta dimensiones de pantalla cortas y gruesas. Hay muchos allí y es su deber asegurarse de que su diseño móvil funcione bien en todo tipo de tamaños de pantalla. Para probar nuestro diseño móvil receptivo en nuestro sitio elemental, utilizamos varias herramientas diferentes. Firefox Developers Edition Las herramientas para desarrolladores entregadas con la edición de desarrolladores de Firefox son increíblemente poderosas y fáciles de usar. Cuando se trata de un diseño receptivo, utilizamos herramientas para que los desarrolladores de Firefox emulen ciertas dimensiones de ventanas de vista. Si identificamos problemas importantes con este método, podemos editar fácilmente el CSS que se aplica al elemento específico y podemos ver si podemos hacer Un remedio rápido. Pila

Browserstack está más orientado a los agentes y al uso de empresas y nos permite probar nuestro sitio de desarrollo entre hasta 2000 dispositivos y navegadores reales.Al ejecutar dispositivos reales y docenas de navegadores, podemos identificar cualquier problema que pueda ocurrir en dispositivos o navegadores antiguos.Cuesta $ 29.00 por mes y también tiene un período de prueba gratuito.Si trabaja en un proyecto en particular que cree que podría usar un instrumento como este, ciertamente le recomiendo que eche un vistazo a ese intento.
Si también es una agencia inferior o un profesional independiente, puede acceder a precios bajos que llegan a $ 12 por mes por 100 minutos de pruebas. Finalmente, si tiene un proyecto de código abierto, que probablemente no sea el caso si usa Elementor, puede acceder a pruebas gratuitas. Receptivamente, esta herramienta de prueba final es una adición reciente a nuestra caja de herramientas, pero es uno de los aspectos más importantes de nuestro trabajo de diseño web receptivo. Responderly es un proyecto de código abierto que le permite obtener una vista previa fácilmente hasta 30 dimensiones preestablecidas de la pantalla del dispositivo y usar herramientas de desarrollo directamente en el navegador. Hay muchas funciones únicas y avanzadas, como interacciones espejo entre todos los tamaños de pantalla, una apariencia personalizable y muchos dispositivos. También obtiene una consola de herramientas para desarrolladores de Chromium, por lo que puede editar fácilmente CSS. Esta es la herramienta final que usamos para identificar cualquier problema con la versión receptiva de nuestros sitios elementales y ciertamente es algo que debe echar un vistazo. El instrumento se descarga como una extensión del navegador y una aplicación independiente. Haga clic en la extensión del navegador y abra el sitio web en la aplicación. Finalmente, la conclusión, una vez que probamos nuestro diseño receptivo construido con elemento por docenas de dispositivos, ventanas y navegadores, finalmente estamos lo suficientemente seguros como para impulsar los cambios en vivo. Esto completa nuestro flujo de trabajo para el diseño receptivo cuando se trata del elemento.
Si ha encontrado esto interesante, no dude en adoptarlo en su propia rutina.Si tiene su propio flujo de trabajo, no dude en publicarlo en la sección de comentarios a continuación, ya que puede ayudar a otros creadores a usar una puerta. Abon y distribuir

Si le gustó este contenido, suscríbase al resumen mensual de noticias de WordPress, inspiración para sitios web, ofertas exclusivas y artículos interesantes.

Dar la baja en cualquier momento.No enviamos spam y nunca venderemos o distribuiremos su correo electrónico.