Introducción
Uso de Sitely
Elementos
Cómo
En Sitely, cuando hablamos de dispositivos, nos referimos a adaptar los diseños de página para que se ajusten mejor a distintos dispositivos. En muchas aplicaciones de desarrollo web, el software a menudo cambia automáticamente los diseños de página basándose en un framework subyacente. Si bien esto puede ser conveniente para algunos, puede resultar restrictivo para quienes desean ser un poco más creativos con el aspecto en dispositivos con diferentes dimensiones de pantalla. Esto suele obligar a los desarrolladores de sitios web a meterse bajo el capó para ajustar finamente los diseños o el código que producen esas apps. En Sitely, adoptamos un enfoque diferente basado en la naturaleza de formato libre del diseño web de Sitely. El uso de múltiples diseños por dispositivo produce páginas comúnmente denominadas “responsive”.
Cuando abres el selector de dispositivos de Sitely, verás información sobre el dispositivo actualmente seleccionado. De forma predeterminada es PC de escritorio con un ancho de 1200 píxeles. Se ve así.
Este debería ser tu punto de partida para todos los proyectos nuevos. Simplemente comienza a añadir y organizar contenido en tu página para crear la versión estándar de escritorio de tu página web. Al iniciar un proyecto nuevo, intenta, siempre que sea posible, usar los estilos de texto integrados de Sitely. Por ejemplo, usa el estilo Title para tus encabezados principales, el estilo Body para el texto del cuerpo, etc. Puedes cambiar la tipografía, el tamaño y los colores de cada estilo a medida que creas tu contenido y luego actualizar los estilos correspondientes haciendo clic en el botón "Apply Changes" debajo del nombre del estilo en el panel de estilos.
Crear y usar estilos de esta manera será muy útil cuando llegue el momento de adaptar el diseño de tu página para diferentes dispositivos más adelante. Continúa maquetando tu página de escritorio hasta que quede exactamente como quieres. En este punto, quizá te convenga dividir tu página en bloques de diseño (Layout Blocks), tal vez un bloque para la navegación, otro para tu sección Hero y varios más para cada sección visualmente definible de la página. Para crear un bloque de diseño, selecciona todos los elementos individuales de la página que quieres incluir en el bloque, haz clic derecho y elige la opción "Mover a Layout Block" en el menú contextual.
Esto agrupará cómodamente todos los elementos seleccionados en un bloque que puede moverse hacia arriba o hacia abajo en tu página sin alterar la posición de los elementos individuales dentro del bloque. Además, el bloque de diseño puede mover todos los bloques de diseño que estén debajo a medida que reubicas elementos en la página. Esta es otra función que resultará útil al maquetar páginas para otros tamaños de dispositivos. Nota: cuando se crea un bloque de diseño por primera vez, se estiliza con uno de los colores de wireframe de Sitely. Esto es solo para que sepas que has creado un bloque de diseño y para que sea inmediatamente visible en el lienzo. Puedes quitar o cambiar el color en cualquier momento cambiando el relleno en el panel de estilos.
Una vez que tu página de escritorio esté terminada, estarás listo para añadir un nuevo diseño de dispositivo. Recomendamos que no empieces a añadir nuevos diseños de dispositivo hasta que hayas completado tu página de escritorio. Cuando estés listo, haz clic en el icono de selección de dispositivo en la parte superior de la pantalla y haz clic en el botón etiquetado "Customize Device Layouts". Esto te mostrará una lista de otros dispositivos para los que puedes diseñar. Nuestra recomendación es comenzar añadiendo la opción de smartphone en vertical con un ancho de 320 píxeles.
Haz clic en la lista desplegable etiquetada "Not Present" y elige la opción "Custom Layout". Esta acción creará un lienzo nuevo con todo tu contenido escalado para ajustarse a la pantalla del nuevo dispositivo.
Lo primero que probablemente notes es que el texto es increíblemente pequeño y casi imposible de leer. Además, todas las imágenes se han escalado proporcionalmente. Claramente, esta página ahora necesita cierto reacomodo para que sea adecuada para verse en la pantalla de un smartphone. Pero, si seguiste nuestro consejo anterior sobre el uso de estilos de texto, todo puede escalarse a un tamaño más aceptable realizando cambios a tus estilos de texto en el panel de estilos.
Recuerda: los estilos de texto se aplican por dispositivo. Esto significa que cualquier cambio que hagas a un estilo de texto solo se aplicará al dispositivo en el que estás trabajando. En nuestro ejemplo, el estilo de texto del cuerpo en nuestra variante de escritorio estaba en 15 pt. Cuando cambiamos al diseño de smartphone, se redujo a 4 pt. Ahora podemos cambiar este estilo de texto a, digamos, 12 pt y, nuevamente, actualizar el estilo haciendo clic en el botón "Apply Changes" en el panel de estilos. Esto tendrá el efecto de cambiar el tamaño de fuente de todo el texto del cuerpo en el diseño de smartphone a 12 pt. Hacemos lo mismo con cualquier otro estilo de texto en uso. Por ejemplo, nuestros títulos de escritorio pueden estar en 28 pt, mientras que en nuestro diseño para smartphone están en 18 pt.
Estos cambios tendrán un efecto instantáneo en nuestro diseño para smartphone. Ahora se verá algo así.
Todo el texto ahora se ha redimensionado a niveles legibles, pero los cuadros de texto deben redimensionarse para contener el texto recién ampliado. Esto se denota por los contornos rojos en los cuadros de texto. Estos indican que hay más texto en los cuadros de lo que se puede ver en la pantalla. Esto se corrige fácilmente con unas pocas maniobras simples.
Lo primero es extender la longitud de la página de smartphone para darnos mucho espacio con el que trabajar. El siguiente paso es arrastrar el tirador inferior de redimensionamiento del bloque de diseño superior para agrandarlo y así poder ajustar el tamaño de su contenido. Arrastrar el tirador inferior de redimensionamiento empujará hacia abajo todos los demás bloques de diseño en la página, creando un gran espacio para poder trabajar en el contenido del primer bloque de diseño.
Ahora lo único que hay que hacer es tomar los tiradores de redimensionamiento de cada cuadro de texto y arrastrar hasta que desaparezca el contorno rojo. Puedes mover los elementos dentro del bloque para que se ajusten mejor al espacio disponible. Si necesitas más espacio, simplemente agranda un poco más el bloque de diseño. Aquí está nuestra página móvil empezando a tomar forma.
En la mayoría de los casos, diseñar una versión de escritorio de tu página web y una versión para smartphone será suficiente para que Sitely gestione por ti los tamaños intermedios. Al añadir otros dispositivos entre escritorio y smartphone, simplemente puedes hacer que Sitely escale automáticamente los distintos dispositivos. Para ello, basta con configurar la opción "Automatically Scaled" en cada variante de dispositivo.
Por supuesto, siempre existe la opción de configurar cada dispositivo con un "Custom Layout" si el diseño de tu página lo requiere. Por ejemplo, puede que quieras crear una página web similar a la que se ilustra a continuación.
En este ejemplo, el sitio de escritorio está diseñado principalmente con una estructura de 2 columnas, con algunos bloques de diseño construidos sobre una estructura de 4 columnas. En la versión para tablet, predominan las cuadrículas de 2 y 3 columnas, mientras que en la versión móvil la estructura es predominantemente de una sola columna, con algunos bloques construidos sobre una estructura de 2 columnas. La elección de la estructura de cuadrícula subyacente depende realmente de la cantidad de texto que se vaya a mostrar y de la densidad de imágenes de la página. Afortunadamente, Sitely te cubre cuando diseñas para diferentes dispositivos de esta manera.
La estructura de cuadrícula subyacente estándar para una versión de escritorio de un sitio web suele ser de 12 columnas. Esto hace que la página sea divisible en 2, 3 y 4 columnas, además de un ancho completo de 12 columnas. Sin embargo, al considerar tamaños de dispositivos intermedios, puede ser preferible cambiar la estructura de la cuadrícula para que se adapte mejor al diseño de página que tienes en mente. En el ejemplo anterior, puede ser preferible organizar la página de tablet con una cuadrícula de 4 u 8 columnas, mientras que la versión móvil puede ajustarse mejor a una cuadrícula de 2 columnas.
Para satisfacer este requisito, Sitely ofrece una cuadrícula por dispositivo, de modo que puedes configurar tu página de escritorio para usar las 12 columnas estándar, mientras que las páginas de tablet y móvil se pueden configurar para usar 2, 4 u 8 columnas, según las necesidades. Configuras la cuadrícula del dispositivo desde el selector de cuadrícula (Grid Selector) de diseño en la parte superior de la pantalla de Sitely.
Por favor, informa de cualquier deficiencia en esta documentación y la solucionaremos lo antes posible.
Actualizado para Sitely 6
Este sitio web utiliza cookies.
Consulta nuestra política de privacidad para más detalles.
