Fundamentos de Responsive Web Design

DesarrolloWeb.com > Manuales > Videotutoriales de Responsive Web Design

ej. css Buscar

 _{Login | Registro}

Por Daniel Martínez Seguir a @Wakkos

 _{26 de marzo de 2015  0 Comentarios  Diseño web}

Sesión dedicada a acercar el Responsive Web Design a las personas que

desean mejorar sus prácticas en el mundo del diseño web.

Fundamentos de Responsive Web Design

Esta sesión ha sido realizada para introducir el concepto de Responsive Web Design de una manera amena y resumida, impartida por Daniel Martínez @Wakkos con motivo de la nueva convocatoria del Curso de Responsive de EscuelaIT que comienza esta semana.

Se celebraron dos clases y cada una de ellas se ha dividido en varios vídeos para facilitar el acceso a la información. En esta ocasión vamos a hablar de los "Fundamentos del Responsive Web Design".

Qué es Responsive Web Design

En dos palabras, podemos decir que Responsive Web Design es "Diseño web". Hoy no cabe la duda sobre si hacer un sitio responsive o no. Lo más importante en una web es el contenido, lo que debemos de tener siempre a mano y lo que debe de mostrarse bien en diferentes condiciones.

Cuando pensamos en "Responsive" generalmente pensamos en resoluciones y tamaños de pantalla, pero hay mucho más detrás, ya que las resoluciones no son el único parámetro que puede variar entre distintos usuarios o sistemas que puedan visitar una web.

Un diseño web Responsive (aunque "responsivo" existe en el diccionario preferimos no traducir la palabra y si acaso nos gusta más llamarlo "adaptable") se reconoce porque si agrandamos, o empequeñecemos, la ventana del navegador el contenido se va adaptando para que se vea correctamente, llegando a cambiar los bloques que se visualizan en el layout de la web.

Pero como decimos en Responsive no solo nos tenemos que centrar en las diferencias de pantalla, también existen distintos sistemas operativos, navegadores, existen condiciones en las que quizás no tenemos acceso a lenguajes como Javascript. Incluso en lo que respecta a velocidades de conexión.

Por qué el diseño tiene que ser adaptable

En cierto modo Responsive Web Design no es más que accesibilidad, del contenido. Todo lo que tiene que ver con disponibilizar un contenido para todo el mundo lo pueda consumir de la mejor manera, está relacionado con el concepto de Responsive.

Todo aquel que construye una web tiene un objetivo y presenta un contenido para que éste se cumpla. Obviamente, las técnicas que puedas desempeñar para que ese contenido sea correctamente consumido, son siempre positivas y deseables.

Si nos remontamos a la historia de la web, todos comenzamos diseñando a 800x600, o incluso en tamaños menores de la web, luego pasamos a diseñar para 1024 y tuvimos que reformular las páginas con las que trabajábamos. Pero luego llegaron los teléfonos inteligentes, con el iPhone, en el cual era posible navegar por Internet. Rápidamente salieron otros smartphones capaces de navegar por Internet, con pantallas distintas y sin embargo no aprendimos la lección y tratamos de diseñar orientados a esos tipos de pantallas, creando versiones de las webs optimizadas para ciertas resoluciones.

Hasta hace pocos años no nos dimos cuenta de la necesidad de ser "future friendly" y pasar de la etapa de diseñar para una resolución determinada. Hay que diseñar para cualquier tipo de sistemas, siendo

amistosos con el futuro y diseñar de manera que la web no la tengas que cambiar cada vez que aparece una nueva resolución de pantalla, o tipo de dispositivo.

La web debe ser vista en todos lados y por todo el mundo! Existente ahora o que pueda existir en el futuro.

Dónde comienza y hasta donde llega el responsive web

design

Al definir un contenido de una web debemos pensar en responsive, por lo tanto, esta filosofía comienza incluso antes de ponerte a diseñar nada.

Piensa en esto: si le damos a una persona un litro de agua, pero tiene un vaso de 200ml no va a entrar todo el agua en su vaso y por la tanto es posible que no se la pueda beber. Si el agua es el contenido de una web, debemos comenzar por entregarla de una manera en la cual las personas, tengan el contenedor que tengan, sean capaces de consumirla.

Por supuesto, el contenido debe mostrarse en la mayor cantidad de dispositivos que puedan consultarla. Pero esa filosofía debe acompañar todas y cada una de las etapas de desarrollo, desde su concepción o la definición de los objetivos y por tanto del contenido a mostrar, su implementación y algo tan importante y que veremos más tarde que es la optimización.

Como puedes apreciar Responsive es una disciplina tan apasionante como amplia y en la que entran en juego muchos factores. Como diseñadores o desarrolladores es nuestra responsabilidad dominarla y usar los recursos y tecnologías a nuestra mano para poder sacar el máximo partido de nuestra web y llevar su contenido a todo tipo de clientes con sus características.

Sobre todo esto trataremos en nuevas sesiones en abierto que vendrán a continuación, pero si te interesa aprender de una manera más rápida, completa, más agradable y con garantía de estar aprendiendo las mejores prácticas, estudia con nosotros en el Curso de Responsive que empieza hoy en EscuelaIT. Te dejamos con el corte del vídeo de esta sesión dedicada a introducir el concepto básico del diseño adaptable y su necesidad en la web de hoy.



Seguir a @Wakkos

Daniel es un diseñador gráfico convertido a web que vive dentro de Internet desde el año 95. Amante del diseño y estilismo en las diferentes expresiones, siempre ha destacado creando diseños adaptados a las últimas tendencias. Es una de esas personas que ha formado parte de todas las generaciones dedicadas al diseño web, desde el estilo "Geocities" de los 90, hasta Responsive Web Design actualmente. Diseñador gráfico convertido a web

Autor

Daniel Martínez

Subir 

Manual

Videotutoriales de Responsive Web Design

 _{Vídeo sobre mediaqueries en Responsive Web Design}

2

Tweet

51

Compartir

Superpowered Audio Engine

Android, iOS and OSX Low Latency, Cross Platform Mobile

3

Compartir

12

Principales

Monotemáticos

Blogging









Powered by:

Desarrolloweb.com Copyright Publicidad Acerca de Datos legales P. de cookies Contacta

Comentarios