Cómo crear un Sitio Web Adaptable

Best practice > Paso 2 - Plantilla > Cómo crear un Sitio Web optimizado para dispositivos móviles >

Cómo crear un Sitio Web Adaptable

Previous pageReturn to chapter overviewNext page
Mostrar/ocultar el texto oculto

Un Sitio Web Adaptable es un Sitio en el que la estructura y los contenidos se adaptan al comportamiento o al ambiente del Usuario en función de factores como las dimensiones de la pantalla, la plataforma o la orientación del dispositivo. Esto significa que cuando por ejemplo el Usuario pasa de su PC de escritorio a una tableta o a un smartphone, el Sitio Web Adaptable se adapta automáticamente a la nueva resolución de modo que sigue siendo posible un óptimo disfrute de los contenidos y de los modos de interacción.

El principio sobre el que se basa el Diseño Adaptable, pues, es que no es necesario crear versiones diferentes de un mismo Sitio Web: todo Sitio Web debe más bien saberse adaptar a la creciente variedad de dispositivos desde los que se disfrutará lo que ofrece.

Para obtener este resultado, el Diseño Web Adaptable recurre a una mezcla de rejillas, estructuras e imágenes flexibles, más un uso inteligente de las media queries CSS. Más allá de los medios técnicos empleados, para llegar a realizar un Sitio Web Adaptable es ante todo importante comprender plenamente cuáles son los objetivos que este tipo de modo de proyectar se plantea y cómo estos objetivos influyen en el modo de organizar y gestionar los contenidos.

Teniendo como fin hacer posible una experiencia positiva del usuario en los contextos de uso más diversos, el Diseño Web Adaptable se propone objetivos como:

adaptar la estructura al mayor número de resoluciones de pantalla posible (de las de los teléfonos móviles a las de ordenadores de sobremesa),
adaptar los tamaños de las imágenes (y en general de todos los contenidos de anchura fija) a la resolución y al tamaño de la pantalla,
simplificar el aspecto gráfico de los elementos presentes en la Página para los dispositivos móviles con pantallas pequeñas,
esconder elementos no esenciales en estos mismos dispositivos,
ofrecer una interfaz apropiada para la interacción táctil para los dispositivos que la contemplan.

Teniendo muy presentes estos objetivos mínimos y el fin último de garantizar la mejor satisfacción en el uso posible independientemente del dispositivo utilizado, con WebSite X5 es posible realizar Sitios Web Adaptables contando con el hecho de que el programa simplifica la gestión de los contenidos y resuelve completamente la parte de la creación del código que subyace a las páginas.

Pulsar para expandir/reducirHow To: Cómo configurar los puntos de interrupción

Uno de los primeros puntos a resolver al proyectar un Sitio Web Adaptable es el referido a los puntos de interrupción.

Un punto de interrupción es un punto sobre la línea imaginaria que expresa la resolución de los posibles dispositivos en los que se podrá ver un sitio web, en los que se produce alguna modificación del aspecto gráfico de la página.

Para comprender mejor el mecanismo, contemplemos la imagen de ejemplo que representa esquemáticamente el comportamiento de un Sitio Web para el que han sido establecidos 3 puntos de interrupción a 960px, 720px y 480px.

Con 3 puntos de interrupción se determinan 4 diferentes tipos de vistas. Para resoluciones inferiores a 480px, el Sitio web tiene el fondo azul. Cuando la ventana del Explorador alcanza el tamaño de 480px de ancho, el fondo se vuelve verde y permanece de este color hasta que el ancho supera los 720px: en ese momento el fondo se vuelve amarillo. Por último, a 960px hay otro punto de interrupción y desde ese punto en adelante el fondo es rojo.

Pero, ¿cuántos puntos de interrupción es oportuno o necesario crear? No es posible dar una respuesta definitiva a esta pregunta: mucho depende de las características del Sitio Web, de su aspecto gráfico, del público al que se dirige, etc. Se podría responder que es necesario crear tantos puntos de interrupción como hagan falta para que una Página se adapte del mejor modo a los dispositivos en los que se va a ver.

La práctica predominante tiende a fijar los puntos de interrupción según los tamaños de las pantallas de los principales tipos de dispositivos. Retomando esta praxis, WebSite X5 indica sobre la línea de Resoluciones de Referencia los siguientes puntos de interrupción:

960px: Escritorio
720px: Tabletas con orientación apaisada
600px: Tabletas con orientación retrato
480px: Smartphone con orientación apaisada
Inferior a 480px: Smartphone con orientación retrato

El objetivo a alcanzar es configurar los puntos de interrupción de manera que identifiquen macrocategorías: los dispositivos son en efecto innumerables, por lo que resulta inútil intentar fijar un punto de interrupción para cada uno de ellos. Con la edición Evo de WebSite X5 se pueden gestionar 3 puntos de interrupción; en cambio, la edición Pro permite establecer hasta 10 puntos de interrupción, incluidos los correspondientes a las Vistas Escritorio y Smartphone.

Tras estas consideraciones sobre los puntos de interrupción que es necesario activar, en WebSite X5 para proceder a la creación de un Sitio Web Adaptable es necesario:

En el Paso 2 en la ventana Resoluciones y Diseño Adaptable activar la opción Sitio web Adaptable.
Todavía en la ventana Resoluciones y Diseño Adaptable, definir la lista de los puntos de interrupción que se quiere activar para el Sitio web usando los comandos al efecto.

A la hora de configurar los puntos de interrupción es preciso tener en cuenta lo siguiente:

Por defecto todos los puntos de interrupción se configuran según valores tomados de la Plantilla gráfica elegida para el Proyecto.
Todos los puntos de interrupción, excepto el correspondiente a Smartphone que toma automáticamente el valor del punto de interrupción superior, pueden modificarse libremente por medio del botón al efecto Editar....
En la edición Evo no es posible ni eliminar los puntos de interrupción existentes ni añadir otros nuevos.
En la edición Pro no es posible eliminar el punto de interrupción Smartphone pero sí es en cambio posible decidir eliminar (mediante el botón Eliminar) los puntos de interrupción intermedios. El punto de interrupción Escritorio puede seleccionarse y eliminarse, pero el siguiente punto de interrupción asumirá automáticamente el lugar de nuevo punto de interrupción Escritorio. Como mínimo deben existir 2 puntos de interrupción, el de Smartphone y el de Desktop.
En la edición Pro es posible añadir (mediante el botón Agregar) nuevos puntos de interrupción hasta un máximo de 10, incluidos los puntos de interrupción Escritorio y Smarphone.
El punto de interrupción Smartphone define la resolución mínima por debajo de la cual el Sitio web se mostrará siempre dispuesto linealmente: todos los Objetos se mostrarán uno debajo de otro (respetando el orden y la elección de Objetos que se ha querido ocultar, ambos ajustes hechos en la ventana Ajustes de Adaptabilidad), y, como el ancho de Página, están configurados de manera que ocupen el 100% del espacio disponible a lo ancho.

Todos los puntos de interrupción establecidos están enumerados en la Tabla-resumen y se retomarán en la ventana Ajustes de Adaptabilidad.

Mientras que con la edición Evo se exige fijar solamente el punto de interrupción Smartphone, en la edición Pro es posible añadir hasta 10 puntos de interrupción, incluidos el de Escritorio y el de Smartphone. Abriendo con la edición Pro un proyecto realizado con la edición Evo, se recoge el punto de interrupción Smartphone y se tiene la posibilidad de añadir otros nuevos.

Pulsar para expandir/reducirHow To: Cömo configurar la Plantilla

Si se piensa en cómo se ve un Sitio web en dispositivos diferentes, es fácil darse cuenta de que también la Plantilla gráfica debe sufrir cambios para poderse presentar siempre de la mejor manera. A medida que la resolución de los dispositivos disminuye, de hecho, algunos elementos de la Plantilla podrían no tener ya espacio suficiente para ser mostrados, y en función de su importancia, podría ser oportuno quitarlos.

En WebSite X5 es posible trabajar sobre la Plantilla para definir cómo debe cambiar en las diferentes Vistas determinadas por los puntos de interrupción que se hayan establecido.

Tras haber elegido si utilizar una Plantilla Predefinida o una Plantilla Vacía, ir a la ventana Resoluciones y Diseño Adaptable, escoger crear un Sitio web Adaptable y activar todos los puntos de interrupción que se desea gestionar.
Aún en el Paso 2, ir a la ventana Estructura de la Plantilla.
Usar la Barra de Adaptabilidad para seleccionar la vista Escritorio y usar las opciones disponibles para definir cómo debe aparecer la Plantilla en esta Vista y en consecuencia en el intervalo de resoluciones correspondiente.
La Barra de Adaptabilidad reproduce todos los Intervalos definidos configurando los puntos de interrupción en la ventana Resoluciones y Diseño Adaptable. Una vez definida la Plantilla para la Vista Escritorio, seleccionar en la Barra de Adaptabilidad el siguiente intervalo e introducir las modificaciones necesarias en la Plantilla.
Proceder de igual modo seleccionando uno tras otro todos los intervalos que hay en la Barra de Adaptabilidad modificando así la Plantilla.

Tras haber definido la estructura de la Plantilla es posible todavía personalizar el Encabezado y el Pie de Página: también estas secciones pueden presentar ciertas variaciones en función de la resolución a la que se muestra el Sitio web.

En el Paso 2, ir a la sección Contenido de la Plantilla. También en esta ventana, dado que estamos trabajando en la creación de un Sitio web adaptable, está disponible la Barra de Adaptabilidad.
En la Barra de Adaptabilidad, seleccionar el intervalo correspondiente a la Vista Escritorio y conformar el Encabezado/Pie de Página de la Plantilla.
También en la Barra de Adaptabilidad, seleccionar uno tras otro los intervalos siguientes y aportar los cambios necesarios en el Encabezado/Pie de Página.

En concreto, para cada Vista es posible lo siguiente:

Añadir nuevos Objetos. Introduciendo un Objeto, este será visible en la Vista actual y en las inferiores, pero no en las superiores (donde quedará oculto automáticamente).
Esconder Objetos. Una vez seleccionado un Objeto, basta con pulsar sobre el botón Mostrar/Ocultar Objeto y decidir si este debe estar oculto solo en la Vista actual o en todas las Vistas inferiores.
Mostrar de nuevo todos los Objetos que se había ocultado con anterioridad. Pulsar en el triangulito que hay en el botón Mostrar/Ocultar Objeto para acceder al menú: pulsar en el elemento Gestión de Objetos ocultos. En la ventana que se abre, seleccionar de la lista el Objeto en el que se desea trabajar y activar la opción Visible.
Modificar la posición y/o el tamaño de los Objetos. Las demás propiedades de los Objetos permanecen inalteradas en todas las diferentes Vistas.

Si en una determinada Vista uno o más Objetos resultan posicionados de manera que ya no son completamente visibles, estos serán automáticamente resituados. En este proceso de nuevo posicionamiento los Objetos se desplazan pero no cambian de tamaño: puede por tanto suceder que los Objetos se superpongan. Por ello se aconseja comprobar siempre en la Vista Previa cómo se comportan el Encabezado y el Pie de Página en los diferentes puntos de interrupción.

Al hablar de Plantillas es necesario indicar que todas las Plantillas predefinidas incluidas en WebSite X5 están optimizadas para permitir la realización de un Sitio web adaptable: esto significa que para cada Plantilla ya se ha pre-ajustado un cierto juego de puntos de interrupción que se activa en el momento en el que se selecciona la opción Sitio web Adaptable en la ventana Resolución y Diseño Adaptable. Como es natural, este juego de puntos de interrupción preajustados por defecto en la Plantilla podrá más tarde modificarse libremente en función de las exigencias del usuario.

Dado que los ajustes relacionados con el comportamiento en la adaptabilidad de la Plantilla están guardados en el archivo de Plantilla y no en el archivo de Proyecto, sucede que si se cambia la Plantilla eligiendo otra de la lista de las predefinidas, aparecerá una ventana que pide definir cómo se debe gestionar el paso de la Plantilla actual a la nueva elegida.

En la práctica, esta ventana advierte que continuando los estilos se sobreescribirán y pide elegir si:

los puntos de interrupción de la Plantilla actual se deben mantener o sustituirse con los de la Plantilla seleccionada,
como contenidos del Encabezado y del Pie de Página se deben mantener solo los Objetos añadidos en la Plantilla actual, solo los Objetos incluidos en la Plantilla elegida, o los objetos incluidos tanto en la Plantilla actual como en aquella que se ha seleccionado.
Pulsar para expandir/reducirHow To: Cómo gestionar los contenidos

En el Diseño Web Adaptable, cualquiera que sea el nivel de complejidad del Sitio web que se quiere realizar, es fundamental desarrollar una buena estrategia para la gestión de los contenidos, preguntándose no solo qué contenidos deben estar sino también cómo deben ser presentados:

¿Qué contenidos deben incluirse en una Página?
¿Deben mantenerse los mismos contenidos tanto para dispositivos móviles como para el entorno escritorio?
En caso contrario, ¿qué contenidos deben eliminarse en los dispositivos móviles?
¿En qué orden es oportuno colocar los contenidos?
Etc. ...

Una buena estrategia es hacer una lista de todos los contenidos que deben estar presentes en una Página y ordenarlos de mayor a menor importancia: de este modo es más fácil identificar los contenidos esenciales, aquellos que deben permanecer disponibles siempre, y los contenidos accesorios que en cambio pueden ser ocultados cuando, en resoluciones más bajas, es preciso presentar solo aquello que es realmente útil. Obviamente, esta operación de ordenación debe repetirse para cada Página del Sitio web.

Para comprender mejor este mecanismo, el ejemplo clásico es el del Sitio Web de un restaurante. Cuando el Sitio se ve en entorno escritorio, se puede contar mucho con imágenes y animaciones que exhiben los diferentes platos del menú para despertar el interés y las ganas de probarlos en los Usuarios. Pero cuando el mismo Sitio se visita desde un dispositivo móvil, se puede suponer que el Usuario esté más interesado en leer las valoraciones o en encontrar información de contacto más que en ver imágenes de gran tamaño. Se hace por tanto necesario ahorrar en imágenes para complacer las exigencias de un usuario que se sirve de un dispositivo menos capaz (pantalla pequeña, posible ausencia de banda ancha, etc.) y que en un contexto de movilidad tenga necesidad de informaciones rápidas y precisas.

En WebSite X5, una vez creada la Página tal como se debe mostrar en entorno escritorio (ver Cómo configurar una página a través de la rejilla de maquetación), es posible configurar qué cambios debe sufrir en función de los diferentes puntos de interrupción establecidos. En concreto, hay que proceder como se explica a continuación:

En el Paso 4 - Páginas , crear la Página arrastrando a la Rejilla de maquetación los Objetos necesarios y procediendo al añadido de los diferentes contenidos. La Página así creada es la que se mostrará para resoluciones superiores al punto de interrupción Escritorio.
Una vez concluida la conformación de la Página, pulsar el botón Adaptable para abrir la ventana Ajustes de Adaptabilidad. En esta ventana está disponible la Barra de Adaptabilidad, que ofrece todas las Vistas determinadas por los puntos de interrupción activados para el Sitio web (mediante la ventana Resoluciones y Diseño Adaptable). Se debe proceder por orden, comenzando por seleccionar en la Barra de Adaptabilidad con la Vista Escritorio y pasando a continuación a seleccionar todas las demás hasta la Vista Smartphone.
Una vez seleccionada la Vista Escritorio, en la Rejilla se reproduce la configuración establecida en la ventana Creación de la página. Pulsar sobre el botón Ordenación para activar el modo que permite proceder a la ordenación de los Objetos presentes en la Rejilla. Sobre cada Objeto presente en la Rejilla se muestra un número asignado en función de la ordenación efectuada de manera automática por el programa.
Modificar la ordenación de los Objetos según la importancia que tienen los diferentes contenidos y cómo se desea que estén dispuestos en la Página. Para proceder a la ordenación es posible seguir diferentes caminos:
Eligiendo Ordenación | Ordena todos los Objetos desde el principio, se debe empezar pulsando sobre el Objeto que se quiere colocar primero y después continuar pulsando en orden sobre todos los demás Objetos.
Eligiendo Ordenación | Proseguir con la ordenación desde un Objeto, se debe pulsar sobre el Objeto desde el que se quiere continuar en la ordenación. Todos los Objetos anteriores se confirman mientras que para todos los Objetos siguientes es necesario pulsar sobre ellos para definir su posición en la ordenación.

El procedimiento de ordenación termina:

Cuando se llega a pulsar sobre el último Objeto que hay en la Página.
Pulsando en Ordenación | Completar la ordenación: termina el proceso confirmando el orden actual.
Pulsando en Ordenación | Anular ordenación: termina el proceso anulando los cambios efectuados y restableciendo el orden inicial.

WebSite X5 guía en el proceso de ordenación: al seleccionar un Objeto todos los Objetos sobre los que se puede pulsar para establecer el que debe seguirlo quedan resaltados con un borde rojo. El orden configurado para la Vista Escritorio se mantendrá también para todas las demás Vistas.

Pulsar el botón Mostrar/Ocultar Objeto para iniciar el modo que permite configurar los Objetos como invisibles. Pulsar sobre los Objetos que a resoluciones inferiores a la actualmente seleccionada no deberán mostrarse. Pulsar una segunda vez sobre el botón Mostrar/Ocultar Objeto para confirmar y salir de este modo.
Pulsar sobre el botón para iniciar el modo en el que es posible modificar la alineación de los Objetos forzando a algunos de ellos a colocarse en una nueva línea a resoluciones inferiores a la de la Vista Escritorio (actualmente seleccionada). En todos los puntos en los que es posible insertar una Interrupción de Línea aparece una línea punteada gris: pulsar sobre estas líneas para configurar las Interrupciones de Línea deseadas. Pulsar una segunda vez sobre el botón Interrupción de Línea para confirmar y salir de este modo.
Trabajando con la edición Pro es posible que hayan sido incluidos hasta 10 puntos de interrupción en total. Si hay Vistas intermedias, utilizar la Barra de Adaptabilidad para seleccionar la Vista siguiente a la de Escritorio. La Rejilla se actualizará en función de lo definido para la Vista Escritorio: sobre esta nueva configuración, continuar configurando, si fuese necesario, otros Objetos como no visibles y añadiendo otras interrupciones de línea. Repetir estos pasos para todas la Vistas siguientes.
Una vez llegado a la Vista Smartphone no es necesario hacer nada más ya que todos los Objetos que hayan quedado como visibles simplemente serán alineados, es decir colocados uno bajo el otro, según el orden inicialmente definido.

Como se deduce de lo explicado, la Rejilla reproduce la estructura que la Página asume en el intervalo de resoluciones identificado por la Vista seleccionada. Todos los cambios que se realicen determinarán, en cambio, la estructura que la Página asumirá para el intervalo de resoluciones asociado a la Vista inmediatamente sucesiva.

Cuando se crea una nueva Página en un Sitio web que se quiere hacer Adaptable, es aconsejable hacer que en la Rejilla de maquetación no haya Celdas vacías. El programa, de hecho, trata las Celdas vacías como si fueran Objetos (vacíos) y asigna a cada uno de ellos una posición en la ordenación: estas posiciones no podrán ser modificadas sino que influirán en las posibilidades de ordenación de los Objetos reales. Para mantener el mayor grado de libertad a la hora de ordenar los Objetos es mejor por tanto evitar tener Celdas vacías añadiendo mejor Objetos vacíos: si han sido añadidos manualmente, estos Objetos vacíos no influirán en la composición de la Página y podrán ser ordenados manualmente.

<%%EXTOGGLE>How To: Cómo comprobar el funcionamiento de un Sitio Web Adaptable en la Vista local

Para comprobar el correcto funcionamiento de un Sitio Web Adaptable antes de publicarlo en Internet, basta abrir la Vista Previa local, que ofrece los instrumentos necesarios para simular el comportamiento de las Páginas bajo diferentes resoluciones.

En el Paso 4 - Páginas, tras haber creado la Página y haber configurado todo lo necesario para hacerla adaptable, pulsar el botón Vista previa para ver mediante el Navegador interno una Vista Previa en local de la Página.
El Navegador interno presenta una Barra de resoluciones en las que están indicados todos los puntos de interrupción activados para el Proyecto. Basta pulsar sobre el indicador de un punto de interrupción para redimensionar automáticamente la ventana del Navegador hasta la resolución correspondiente y comprobar cómo se ve la Página. Como alternativa es también posible operar manualmente en la ventana del Navegador para modificar el ancho y comprobar cómo cambia la estructura y la disposición de los Objetos.
Si en la Vista Local los contenidos no están dispuestos de la manera esperada, pulsar sobre el botón Mostrar numeración: los contenidos de la Página quedan enmarcados en recuadros y sobre cada uno de ellos se muestra un número. Este número es el asociado al Objeto correspondiente al contenido durante el proceso de ordenación. De esta manera es más fácil comprender qué es necesario modificar para obtener el resultado deseado.

Se aconseja comprobar mediante la Vista Previa local todas las Páginas en todos los puntos de interrupción activados para tener la certeza de que el Sitio Web funcionará correctamente en el momento de publicarlo en Internet y se podrá ver en dispositivos diferentes.

 


Best practice:

-

Cómo crear un Sitio Web optimizado para dispositivos móviles

-

Cómo funciona el proceso de ordenación de los Objetos

-

Cómo y por qué configurar las Interrupciones de Línea