Plantilla responsive en HTML5

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Todo hace indicar que este año 2012 será el año de los diseños web adaptables, también llamados sensible o responsive design.

A modo de resumen esta nueva tecnología viene a decir que un mismo diseño se adapte al ancho del dispositivo en el que nuestros visitantes estén navegando, lo que permite tener un único diseño para dispositivos tan diferentes como: tablets, teléfonos móviles, grandes pantallas de TV y cualquier dispositivo con el que sea posible conectarse a internet.

Lo realmente interesante es que no es necesario la instalación de plugins ni largas líneas de código para que esto funcione. El diseño de la web se adapta y cambia según disminuimos o aumentamos la superficie destinada a nuestro navegador, también se ajustarán el tamaño de las fotografías, cambiarán la disposición de los menús, la forma en la que se muestra el contenido…

¿Cómo puede ayudar a tu web utilizar diseños responsive?

  • Mejora de usabilidad y conversión: estudios demuestran que aprovechando la totalidad de la pantalla aumenta la conversión y facilita a los usuarios la estancia en el site.
  • Facilidad en la actualización: cuando añadimos nueva información sólo requiere actualizarse una vez el contenido y se mostrará para las plantillas de escritorio, móvil y tablets. Al contrario de si tendríamos diseños independientes.
  • Redución de costos: sólo se requiere un único diseño, con lo que esto conlleva, ahorro de dinero en la creación y mantenimiento de portales móviles.
  • Avance: al ser una tecnología relativamente nueva, el impacto positivo que generará a nuestros visitantes, permitirá asociar nuestra marca con palabras como creatividad e innovación.

 

Simpliste

 

El ejemplo anterior corresponde a Simpliste una plantilla HTML5 responsive que puedes descargar de forma gratuita desde su página. También hace uso del poder del diseño CSS3, un código limpio y la posibilidad de encontrar varios estilos disponible.

Para comenzar a utilizarlo sólo tienes que descargarlo y subirlo a tu servidor, recuerda que no es necesario utilizarlo bajo un CMS.

  • /_www/ Carpeta principal. Contiene ficheros HTML, hojas de estilo CSS y favicon.
  • /_xtensions/ Carpeta para Xtensions.
  • /skinname/skin.css Carpeta para: skins, contiene la hoja de estilos skin.css

 

En la siguiente galería encontrarás otros diseños con esta tecnología responsive design, exactamente hasta 50 diseños de diseños web adaptables con las mejores prácticas aplicadas.

 

2 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.