epelpad

El post que buscas se encuentra eliminado, pero este también te puede interesar

Mi sitio web y el Responsive Web Design



Mi sitio web y el Responsive Web Design

Hace tiempo termine el nuevo re diseño de mi sitio web, que no fue mas que para probar nuevas cosas y seguir aprendiendo.
Creo que es mi primer sitio web con un diseño bueno o pasable. Utilice mi pobre conocimiento sobre Photoshop para realizar los iconos de las redes sociales y los titulares de las secciones con letra gigante. HTML5 y CSS3 para el maqueteado y diseño, Javascript/jQuery para darle efectos y mas dinamismo al sitio y para hacer cross-browser (se ve bien en Google Chrome 5.0+, Opera 10.0+, Safari 3.1+, Firefox 3.5+, Internet Explorer 7+), y AJAX para enviar el formulario sin recargar la pagina. También utilice la técnica de Diseño web adaptable (Responsive Web Design), que detallo en el próximo párrafo.

html

Incursionando en algo nuevo


css

sitio web
La cantidad de dispositivos con diferentes resoluciones que pueden pasar por nuestro sitio web es tan abrumadora que hacer un diseño fijo significa resignarse a que gran cantidad de personas vean bien tu sitio web.
Mi sitio web se adapta a cualquier dispositivo moderno con acceso a internet, desde celulares con un ancho de 320px hasta monitores de más de 1920px, a esto se le llama Diseño web adaptable y es una nueva técnica de diseño web utilizando los nuevos media queries que ofrece CSS3; para seleccionar los estilos a cargar dependiendo del tamaño de pantalla, imágenes y vídeos flexibles: para mantener la proporción con respecto al diseño, combinada con la ya conocida técnica de diseño fluido; para que el diseño se adapte a cualquier dispositivo.
La diferencia entre diseño fluido y Diseño web adaptable puede causarnos confusión al principio pero podemos visitar cualquiera de estos sitios webs o el mio y empezar a redimensionar el tamaño de la ventana de nuestro navegador para darnos cuenta de la diferencia y asombrarnos por la magia de esta técnica.
Las ventajas de esto es que no es necesario crear dos webs diferentes, una para computadoras de escritorios y otra para celulares, con lo cual se ahorra en esfuerzo, trabajo, dinero y tiempo.

Los pasos para lograr un diseño web adaptable son sencillos para cualquier diseñador web con conocimientos intermedios (asumo que ya conoces las ventajas y desventajas del diseño fluido y fijo, y conoces las medidas en porcentajes y em):

HTML5Diseño fluido: definir medidas relativas como los porcentajes para los tamaños de los contenedores y em para la tipografía, aunque si definimos una medida en px para el tamaño de la tipografía en la etiqueta body es medio absurdo utilizar luego em o porcentajes para definir el tamaño de letra.
diseno webImágenes y vídeos flexibles: lo ideal seria hacer imágenes de gran tamaño y aplicar la siguiente regla CSS:
[color=#000000]img, embed, object, video {
max-width: 100%;
}[/color]

Y en el archivo HTML todos las etiquetas img, embed, object y video deben estar dentro de un div contenedor con un ancho definido, ejemplo:
[color=#000000]CSS:
div {
width:90%;
}
HTML:
<div><img src="imagenes/ramasilveyra.png" alt="Titulo Ramasilveyra" /></div>[/color]

Con esto lo que se logra es que las imágenes al igual que cualquier archivo .swf ocupe el 100% del ancho del div contenedor, ya que la medida de este div es relativa va a cambiar según la resolución de pantalla y la imagen o flash que este adentro siempre ocupara todo el ancho disponible. Genial, no? Por supuesto esto genera problemas con navegadores muy viejos como IE 6 o Firefox 2 que ya nadie usa, así que no hay que hacerse mucho drama.

CSS3CSS3 media-queries: Utilizar media queries para corregir los desperfectos que se originan al ver tu diseño en pantallas muy pequeñas o muy grandes, también para ir modificando el diseño de tu sitio según el tamaño de pantalla.
Los media queries existen desde CSS 2.1, los primeros servían para definir una hoja de estilos para la impresión y otra para la pantalla, con la llegada de CSS3 existen media queries para detectar el tamaño de pantalla y cargar estilos dependiendo de los límites expresados.
Los anchos que use para mi sitio web y que recomiendo son los siguientes:
[color=#000000]@media only screen and (min-width: 1600px) {
}
@media only screen and (min-width: 992px) and (max-width: 1599px) {    
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
}[/color]

El primer media querie abarca pantallas con un mínimo de ancho de 1600px y no posee un limite de máximo, el segundo y tercero tienen los limites de mínimo y máximo definidos, el cuarto y quinto no poseen mínimo por lo cual abarcan desde los 0px de ancho hasta el máximo de 479px en el ultimo y 767px en el ante ultimo. El ante ultimo al no tener mínimo hereda sus estilos al ultimo, pero los estilos definidos en el ultimo media querie siempre van a ser mas importantes que los heredaros.
design webCross-browser media queries: agregar librerías como css3-mediaqueries.js para hacer compatible las media queries con cualquier navegador, como IE 5+, Firefox 1+, Opera 7+ y Safari 2, Chrome soporta las media queries desde su primera versión.
responsive designMeta tag e icono para iPads y iPhones: por ultimo es necesario añadir un meta tag, lo que hace es para que en algunos móviles se anule la escala automática:
[color=#000000]<meta name="viewport" content="width=device-width" />[/color]

También es necesario agregar un favicon de 129px * 129px en formato png para que cuando alguien accede a tu sitio desde un dispositivo Apple aparezca un icono:
[color=#000000]<link rel="apple-touch-icon" href="imagenes/apple-touch-icon.png" />[/color]

diseYYo web adaptable

Todas estas técnicas, que se están imponiendo como tendencia en diseño web fueron "descubiertas" por Ethan Marcotte, todo esto existía desde hace tiempo pero el se encargo de combinarlas y crear lo que llamamos Diseño web adaptable. Todo esto fue publicado en su libro Responsive Web Design, que si saben ingles es de obligatoria lectura si el diseño o programación web es lo suyo. Allí explica el origen del Diseño web adaptable y como aplicarlo.

Mi sitio web y el Responsive Web Design

El lado oscuro


html

css
Pero hay algo en lo que el Diseño web adaptable hace agujeros y es que se envía la misma cantidad de imágenes, archivos html, hojas de estilo, scripts e información que recibe una computadora de escritorio a un celular.
Mi sitio web en mi PC de escritorio con una conexión de banda ancha de 1mb tarda en cargar menos de 2 segundos, una velocidad de carga aceptable, pero en un celular conectado a internet por 3G tarda 20 segundos en cargarse! Y ni se imaginan cuanto tarda con una conexión GPRS o WAP casi dos minutos! Si dos minutos!!! Ustedes conocen alguna persona que sea capaz de resistir la espera de dos minutos para la carga de un sitio web, sin cerrar el navegador o pestaña e irse a otro lado? Creo que todos conocemos o nos imaginamos la respuesta. Un estudio realizado por KISSmetrics revela que cada segundo de retardo en la carga de tu web puede suponer 2.5 millones de dólares de perdidas al año.
Por lo cual la idea de tener un sitio web exclusivo para las pequeñas pantallas de un celular vuelve a nosotros con mucha fuerza. Y la verdad creo que es la mejor solución hasta ahora.
Lo ideal y la única solución más perfecta existente hasta el momento seria basar nuestros diseños en el Diseño web adaptable para que nuestro sitio web sea perfectamente funcional en cualquier computadora de escritorio o tableta (ya que es sabido que la mayoría de ellos poseen una conexión buena a internet) y disponer de una versión reducida para móviles, para celulares (conexiones con una velocidad pobre a internet) o hacer una aplicación nativa para cada sistema operativo móvil.
Por supuesto la solución para que los celulares se conecten a internet a una buena velocidad si existe y se llama Wi-Fi, pero no es algo del que todos disfruten o puedan acceder desde cualquier lado.

dijo:
sitio web

Esta obra está bajo una licencia Creative Commons Atribución 3.0 Unported.
[/quote]
HTML5

diseno web

El arte de tu escritorio es una comunidad dedicada exclusivamente a la personalización de tu sistema operativo. No hay restricciones en cuanto a sistema operativo ni nada por el estilo simplemente queremos conocer tu desktop. Sacale una captura a tu escritorio para enseñarle a la comunidad cómo se ve nuestro entorno de trabajo en el día a día. También encontraras todo lo necesario para que hagas de el una obra de arte.


CSS3

design web

Vivir Paraná será la comunidad referencia para habitantes y viajeros, porque desde aquí cubriremos la oferta cultural de la ciudad, los rincones que no aparecen en ninguna guía, las mejores recomendaciones de restaurantes, alojamientos, cursos, paseos y todos lo que hay para hacer.

responsive design

diseYYo web adaptableMi sitio web y el Responsive Web Designhtmlcsssitio webHTML5diseno webCSS3design webresponsive design

15 comentarios - Mi sitio web y el Responsive Web Design

Rem_la25
Muy bueno, te dejo puntos por lo bien armado que está el post, aunque del tema no entienda...
La web te quedó genial!
RodriZ +2
groso, muy buen aporte!!!!!

Mi sitio web y el Responsive Web Design html
elmourax +1
Espectacular! Me es super util ya que no conocia nada del tema y me estoy iniciando en la programacion web. Gracias! Favs y +10
Ferchos +2
Me viene al pelo!
Js_Toni +2
ksper9 dijo:
man_in_flames dijo:lo favoriteo y despues lo leo..

psff ya somo tres jeeje lo leo despues voy a descansar la vista

Buen aporte
pichoncitotv +2
Muy bueno. lo que si sobre performance y respuesta, todo depende de que sigas los criterios del diseño web para dispositivos móviles, ser sencillo, poner lo esencial y en el menor HTML posible, porque la realidad es que no te queda aceptar la conexión 3g tal cual como es. Despues varios factores, como el cache del navegador, organizar bien los recursos en el HTML, todo se puede lograr un pageload de 7 segundos aprox.
man_in_flames +1
te funciona el smooth scroll al acceder desde un movil?
taringav5
Me salvaste con esto:

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; /&gt;



+10
Dhomino +1
Buena Información!, para seguir indagando en el tema. Saludos.