Se que muchos de ustedes son lectores recurrentes al blog de www.okhosting.com saben que es el “Responsive Web Design”, incluso han leído alguno de los artículos que hemos escrito para ustedes donde les hemos explicado que es esta tendencia y como se ha ido llevando en México.

Creo que toda la referencia que les hemos dado ya es suficiente para que tengan el contexto y entiendan porque es un buen paso para cualquier sitio web al tomar seriamente el diseño web flexible o Responsive Web Design.

Es por eso que hoy vamos a dar el primer paso de una serie de artículos para crear tu primer portafolio de trabajo en con un diseño y programación web totalmente flexible.

Primeros pasos

Comenzar un nuevo diseño no es algo complicado, lo esencial es tener bien ubicados ciertos elementos, definirlos y comenzar a trabajar sobre ellos.

Uno de los elementos necesarios es definir al ancho total del diseño de tu pagina web. Uno de los principios del Responsive Web Design es poder acoplarse a las diferentes resoluciones de pantalla y estas las primordialmente las tomamos del ancho de pantalla. Con los monitores actuales y las resoluciones cada vez mayos seria de suponerse que no debería importarnos en gran medida esto, pero, un hecho es que hoy los nuevos monitores no son los que captan el mayor trafico a los sitios web. Los dispositivos móviles son los que han ganado la batalla y claramente estamos notando como es que, cada vez es mas común que los sitios web, implementen características para hacer sus sitios mas amigables con los móviles, nosotros al igual que muchos otros, creemos que no es necesario hacer tantas modificaciones para ajustar cada sitio a una resolución de pantalla diferente, creemos que basta con un solo esfuerzo, que tal vez al principio sea mayor, pero al cabo del tiempo será la mejor opción.

La resolución de pantalla

Hoy en día tenemos estándares web de los cuales muchos se rigen por tecnologías ya viejas, una de ellas es la resolución de pantalla. Hoy los sitios de internet, en su mayoría tiene un común denominador, todos están escalados o pensados para leerse perfectamente en pantallas de un mínimo de 1024 pixeles de ancho. Nosotros también recomendamos también contemplar esta resolución, pero siendo un poco mas visionarios. La resolución de la pantalla es de 1024 y justo por eso sabemos que nuestro diseño debe ser menor a ese tamaño, porque? Simple, aun hay elementos que interfieren y que podrían traer problemas, por ejemplo, la barra de scroll. Te recomendamos crear tus diseños en medidas entre 980 y 950 pixeles de ancho.

Resoluciones secundarias de pantalla

Como lo platicábamos un poco mas arriba, hay otras resoluciones que deben ser tomadas en cuenta por crear un diseño web flexible, estas medidas son esencialmente de móviles, ya sea tabletas o smartphones.

Para esto, vamos a tomar de ejemplo algunas otras resoluciones, que serán de 700 pixeles, 480 pixeles y 320 pixeles. La decisión de tomar estas medidas, es que muchos dispositivos cuentan con resoluciones similares, por lo cual, estaríamos abarcando una gran cantidad de dispositivos ya en el mercado.

El CSS y HTML

Un elemento que debes contemplar para recrear los ejemplos que aquí te daremos es tu habilidad en HTML y mucho mas en CSS. Las versiones que desees tener conocimiento es en la 4.1 de HTML y 2 en el caso de CSS, aunque si ya eres un Rockstar en CSS 3 y HTML 5, no importa, entenderás mas rápido y mejor.

El comienzo

Ya tienes las bases y el porque de casa una, en el siguiente articulo, comenzaremos a ver el comienzo de tu pagina web flexible. Lo ideal es que vayas practicando y que tu mismo pongas a prueba tus habilidades o las vayas perfeccionando.