ej.

css

Buscar
Login | Registro

DesarrolloWeb.com > Manuales > Videotutoriales de Responsive Web Design

FundamentosdeResponsiveWebDesign
Por Daniel Martnez

Seguira@Wakkos

26 de marzo de 2015 0 Comentarios Diseo web

Sesin dedicada a acercar el Responsive Web Design a las personas que

desean mejorar sus prcticas en el mundo del diseo web.
Esta sesin ha sido realizada para introducir el concepto
de Responsive Web Design de una manera amena y
resumida, impartida por Daniel Martnez @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 vdeos para facilitar el acceso a la informacin.
En esta ocasin 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 "Diseo web". Hoy no cabe la duda sobre si
hacer un sitio responsive o no. Lo ms 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 tamaos de pantalla, pero
hay mucho ms detrs, ya que las resoluciones no son el nico parmetro que puede variar entre distintos
usuarios o sistemas que puedan visitar una web.
Un diseo web Responsive (aunque "responsivo" existe en el diccionario preferimos no traducir la palabra y
si acaso nos gusta ms llamarlo "adaptable") se reconoce porque si agrandamos, o empequeecemos, 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, tambin
existen distintos sistemas operativos, navegadores, existen condiciones en las que quizs no tenemos
acceso a lenguajes como Javascript. Incluso en lo que respecta a velocidades de conexin.

Por qu el diseo tiene que ser adaptable

En cierto modo Responsive Web Design no es ms 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 tcnicas que puedas desempear para que ese contenido sea correctamente consumido,
son siempre positivas y deseables.
Si nos remontamos a la historia de la web, todos comenzamos diseando a 800x600, o incluso en tamaos
menores de la web, luego pasamos a disear para 1024 y tuvimos que reformular las pginas con las que
trabajbamos. Pero luego llegaron los telfonos inteligentes, con el iPhone, en el cual era posible navegar
por Internet. Rpidamente salieron otros smartphones capaces de navegar por Internet, con pantallas
distintas y sin embargo no aprendimos la leccin y tratamos de disear orientados a esos tipos de
pantallas, creando versiones de las webs optimizadas para ciertas resoluciones.
Hasta hace pocos aos no nos dimos cuenta de la necesidad de ser "future friendly" y pasar de la etapa de
disear para una resolucin determinada. Hay que disear para cualquier tipo de sistemas, siendo
amistosos con el futuro y disear de manera que la web no la tengas que cambiar cada vez que aparece
una nueva resolucin 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.

Dnde comienza y hasta donde llega el responsive web

design
Al definir un contenido de una web debemos pensar en responsive, por lo tanto, esta filosofa comienza
incluso antes de ponerte a disear 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 filosofa debe acompaar todas y cada una de las etapas de desarrollo, desde su concepcin o la
definicin de los objetivos y por tanto del contenido a mostrar, su implementacin y algo tan importante y
que veremos ms tarde que es la optimizacin.
Como puedes apreciar Responsive es una disciplina tan apasionante como amplia y en la que entran en
juego muchos factores. Como diseadores o desarrolladores es nuestra responsabilidad dominarla y usar
los recursos y tecnologas a nuestra mano para poder sacar el mximo partido de nuestra web y llevar su
contenido a todo tipo de clientes con sus caractersticas.
Sobre todo esto trataremos en nuevas sesiones en abierto que vendrn a continuacin, pero si te interesa
aprender de una manera ms rpida, completa, ms agradable y con garanta de estar aprendiendo las
mejores prcticas, estudia con nosotros en el Curso de Responsive que empieza hoy en EscuelaIT.
Te dejamos con el corte del vdeo de esta sesin dedicada a introducir el concepto bsico del diseo
adaptable y su necesidad en la web de hoy.

Superpowered Audio Engine

Android, iOS and OSX Low Latency, Cross Platform Mobile

Autor

Daniel Martnez

Seguira@Wakkos

Daniel es un diseador grfico convertido a web que vive dentro de Internet

desde el ao 95. Amante del diseo y estilismo en las diferentes expresiones,
siempre ha destacado creando diseos adaptados a las ltimas tendencias. Es

una de esas personas que ha formado parte de todas las generaciones

dedicadas al diseo web, desde el estilo "Geocities" de los 90, hasta Responsive
Web Design actualmente.
Diseador grfico convertido a web

Subir

Manual
Videotutoriales de Responsive Web Design
Vdeo sobre mediaqueries en Responsive Web Design

Compartir
3
Compartir

12
Recomendar

51
Tweet

Comentarios
Enviar un comentario al artculo

Principales

Monotemticos

Blogging

Manuales

Desde cero

Actualidad

FAQs

HTML, CSS

De inters

En directo

Javascript, Ajax

Agenda

Vdeos

Diseo, ASP

Powered by:

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