El esquema básico de un sitio optimizado para teléfonos inteligentes

Si la web que estamos acostumbrados a disfrutar de nosotros mismos con la combinación infinita de diseño y el espacio, el diseño de páginas web para teléfonos inteligentes que revisar nuestras ambiciones creativas, o al menos cambiar el tamaño el tamaño limitado de la muestra destinada a la visualización de nuestro trabajo.

Nota: la resolución de vídeo varía, por supuesto, dependiendo del modelo, la mayoría de los teléfonos inteligentes de próxima generación tiene una pantalla con un ancho que van desde un mínimo de 240 a un máximo de 480 píxeles. La resolución más común puede contar, en modo vertical, con un ancho de 320 píxeles.

Olvídese de diseño continuación las columnas dos, tres o cuatro! Desde mi punto de vista, la única solución posible a fin de garantizar la buena usabilidad al contenido, es el diseño de una sola columna, donde se organiza todo el contenido a lo largo de una cascada de orden vertical (es decir, uno debajo del otro). Cuando se crea una página web, recuerda siempre, lo más importante es asegurar la buena usabilidad y, más aún cuando la pantalla está limitada a un teléfono inteligente, la sencillez es siempre el mejor camino a seguir.

Como puede ver, nuestra estructura es muy simple y consiste inicialmente en tres partes:

• Encabezado: es la parte superior de la página y está diseñado para acomodar el logo del sitio y posiblemente algunos otros elementos de la primera planta;
• Cuerpo de la página: está diseñado para dar cabida a la parte central del contenido real de las páginas de nuestro sitio web;
• Pie de página: Esta es la parte final, en la parte inferior, donde lo habitual es poner los créditos, referencias legales, los avisos de copyright, contactos, etc.

El menú de navegación

La parte central de la página, a su vez, se utilizará a la casa de otras áreas (que varían dependiendo de sus necesidades).
Un elemento esencial, por supuesto, es el menú de navegación a través del cual acceder a otras páginas / las áreas del sitio. Si son pocos (primera solución) se puede crear una barra de herramientas con los enlaces necesarios, de lo contrario - por razones de espacio - que es mejor añadir un solo botón que, cuando se hace clic, se muestra una lista de todas las páginas / áreas disponibles (segunda solución).

El contenido

También, y sobre todo, por el contenido que necesita tener en cuenta la pequeña pantalla de su teléfono inteligente. Una vez más, por lo tanto, la simplicidad y linealidad son, en mi opinión, la mejor opción.

Evitar innecesarios adornos gráficos es una buena regla de diseño web y es aún más en el desarrollo de páginas web para dispositivos móviles y para las cuestiones relacionadas con el pequeño tamaño de la pantalla y por razones relacionadas con el ancho de banda disponible (además de tener un costo, El ancho de banda 3G no siempre es rápido así que lo mejor es centrarse en lo esencial).

Incluso de los contenidos, por lo tanto, sugieren una cascada donde los elementos de diseño diferentes (texto, imágenes, video) en un seguimiento entre sí:

En la próxima lección veremos cómo crear el código HTML en nuestra página web a partir, por supuesto, por el head (título, meta tags y CSS).

• <<Lección anterior
• Índice de la ayuda
• Lección siguiente>>