Zeni
  • Inicio
  • Blog
  • Trabajos
  • Sobre mí
  • Contacto
Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado
 

Visión de las futuras webs: Responsive Web Design

Escrito por Alfredo
::
[Jueves, 04 Octubre 2012 09:25]
Última actualización por Alfredo
::
[Viernes, 08 Marzo 2013 12:35]
Average rating
  • 1
  • 2
  • 3
  • 4
  • 5
12 Visión de las futuras webs: Responsive Web Design /blog/item/12-vision-de-las-futuras-webs-responsive-web-design
Click to subscribe

Tal y como veíamos en el anterior artículo El uso de las media queries, hacíamos una breve introducción en su uso para que se pudieran visualizar en la mayor parte de los dispositivos existentes. Esto es debido a su conexión con otro nuevo término: el "Responsive Web Design".

 El concepto procede del inglés, aunque existen muchas "versiones" sobre él, nosotros nos quedaremos con el concepto de "diseño web adaptable". La idea es englobar, como se ha dicho antes, la idea de una única web para ser visualizada en cualquier parte y accesible desde cualquier medio ya sea tanto de sobremesa, móvil, televisión, etc...

Al principio, el coste en tiempos de desarrollo y testeo de este tipo de portales puede aumentar al igual que su complejidad pero con una adecuada planificación es más efectiva y rentable que el mantenimiento y desarrollo de las soluciones específicas de cada una de las plataformas en las que se quiera visualizar.

Funcionamiento de la técnica

Básicamente la filosofía del RWD es la realización de un diseño flexible en el cual puedan ser mostrados u ocultados los diferentes elementos según el tipo de dispositivo en el cual se esté visualizando, por ejemplo, que un menú que en nuestra página web se encuentre en el lado derecho al lado del logotipo de la empresa, cuando sea visto desde un dispositivo móvil este mismo elemento se posicione justo debajo del mismo logotipo.

Todo esto se consigue mediante CSS (CSS3) y la utilización de las media queries que se habló en el capítulo anterior.

Además de lo dicho, la estructura del sitio sigue unos patrones de diseño denominado "fluido" o lo que es lo mismo, que los anchos representativos como las columnas o algunas de las imágenes sean relativas (con porcentajes) al portal.

Beneficios del Responsive Web Design

  • Reducción de costos. Con la realización de una única parte debido a que solo hace falta crear un único portal mientras que anteriormente hacía falta crear una versión para cada medio empleado.
  • Actualizaciones más eficientes. El portal solo es necesario el actualizarlo una única vez y ya se encuentra visible en todos los dispositivos.
  • Aumento de la usabilidad. Los estudios que han sido realizados aportan que cuando la usabilidad de esta tecnología aumenta, aumenta la conversión.
  • Atracción hacia el visitante. Al ser una tecnología nueva y actual genera un impacto positivo en las personas que lo ven por primera vez, lo que permitirá relacionar una web con las palabras "creatividad" e "innovación".

Ejemplos de Responsive Web Design

A continuación se van a colocar unos ejemplos de la técnica que habíamos hablado. Para que podais ver la diferencia deberéis ir encogiendo poco a poco el ancho de vuestro navegador y así podréis ir viendo la diferencia que experimentan los usuarios del resto de plataformas.

  • Coolvillage
  • Protección Civil de Utebo
  • CSS tricks
  • Smashing Magazine
Categories
Blog
  • CSS
  • HTML
  • jQuery
  • PHP
  • Sublime Text 2
    • Archivo

    • ► 2013 (1)
      • ► Junio (1)
        • • Parsear un XML mediante AJAX y jQuery
    • ► 2012 (5)
      • ► Octubre (3)
        • • Ahorra código utilizando snippets
        • • Atajos de teclado para Sublime Text 2
        • • El uso de las media queries
      • ► Septiembre (2)
        • • Almacenamiento con HTML5, Web Storage
        • • Efectos 3D para tus sliders
    Powered by mod LCA
    • @Twitter

    • Para la reflexión

      La mejor razón para crear una empresa es para tener un impacto: crear un producto o servicio que haga del mundo un lugar mejor.

      - Guy Kawasaki -

    Created by luiszuno.com
    Adaptación a Joomla ByteLovers

    • Facebook
    • twitter
    • linkedin
    • Google plus