WILFREDO SALAS G. - Responsive Web Design - Webuda

Recommendations

Info

CAPÍTULO 5 Más sobre responsive AL FIN TIENES TODAS las herramientas necesarias para diseñar páginas web responsive. Has logrado manejar la idea detrás de la grilla flexible, investigado algunas estrategias para incorporar elementos de multimedia dinámicos a tu diseño, y explorado como los media queries pueden llevar a nuestros diseños más allá del escritorio. En este capítulo analizaremos algunos conceptos e ideas que mejoran el diseño responsive. Veremos formas diferentes de agregarlas a nuestro trabajo, y como mejorar algunas técnicas que hemos aprendido durante el transcurso de este manual. PRIMERO EL MÓVIL Hacia finales del 2009, el diseñador Luke Wroblewski lanzó un pequeño desafío a la industria, sugiriendo que la experiencia móvil de un diseño web no tiene que ser una idea tardía (http:// bkaprt.com/ rwd/47/). Citando el crecimiento explosivo del tráfico web móvil, Wroblewski sugirió que que los profesionales web de hoy deben diseñar para el móvil primero. “Mobile first” (o “móvil primero”) esa una filosofía de diseño, de hecho, es una de las filosofías invaluables para el diseño web responsive. Mientras más navegadores y dispositivos nuestros clientes usen para acceder a nuestros diseños, más interés se tiene en diseñar fuera del escritorio. Es una oportunidad perfecta para repensar en cómo se ha diseñado la web: nuestro proceso, como también las preguntas que usamos y cuáles serían las soluciones que podemos aplicar. 30 RESPONSIVE WEB DESIGN — Capítulo 5: Más sobre responsive
REPASA LA “MEJORA PROGRESIVA” La mejora progresiva (o “progressive enhacement”) es otra estrategia de diseño web que acentúa la accesibilidad, margen de la semántica, y tecnologías externas de manera que permite que cada uno tenga acceso a la funcionabilidad básica de una página web, a través de cualquier navegador. Durante el 2003, Nick Finck y Steve Champeon acuñaron el término “progressive enhacement”, desde entonces ha sido la marca para un alcance responsable para un diseño web estándar. Empezando con una semántica fuerte, marcas bien definidas, estilos hechos con CSS, y scripts de DOM a través de JavaScript cuando se necesite, se pueden crean experiencias completas a través de diseño web, mientras se asegura un acceso universal del contenido a través del diseño. Steven Hay también reiteró la necesidad de mejora progresiva, a través de su ensayo (en inglés) “No hay web móvil” (http://bkaprt.com/rwd/54 /): “la mayoría de los sitios en la web no están hechos con usos específicos para web. En cambio, millones de personas acceden a estos sitios cada día a través de dispositivos móviles. Ellos a sitios webs “normales” (lo que sea que eso quiera decir) a través de sus dispositivos “móviles”. … para ser honesto, puedo pensar en un par, pero no tantos usas de sitios webs o aplicaciones los cuales son o deberían ser exclusivos para móviles. Pareciese que la web móvil nos permite revivir toda la charla de inclusión, mejora progresiva y accesibilidad de hace años.” En vez de simplemente depositar nuestro contenido en diferentes sitios, podemos usar la mejora progresiva para aquellos dispositivos que sea capaces de soportarla. SÉ RESPONSABLE CON EL RESPONSIVE Se mencionaron estas mejoras no porque sean necesariamente las mejores. En este tiempo de 3G hotspots portables y teléfonos habilitados con wifi, puede ser peligroso igualar automáticamente la dimensión de una pantalla con el ancho de banda disponible para ello. Pero si necesitas algo de resolución extra en tu trabajo, estas herramientas están disponibles. Aún así, que es beneficioso en mantener la filosofía de “móvil primero” en mente cuando te encuentras en una situación en donde se amerita. Porque más que nada, el diseño web es sobre hacer la respuesta correcta. Y realmente, de eso se trata el diseño responsive: una posible solución, una forma más para diseñar la web de forma flexible. En el primer capítulo, dije que los ingredientes para el diseño responsive son una grilla flexible, imágenes flexibles y media queries. Pero realmente, ellos son el vocabulario que usaremos para articular respuestas a los problemas que nuestros clientes se enfrentan, una forma para ordenar el contenido a un sinfín de dispositivos y navegadores. Si estamos dispuestos a investigar en las necesidades de nuestros clientes, y aplicar estos ingredientes cuidadosamente, entonces el diseño web responsive es un alcance poderoso. 31 RESPONSIVE WEB DESIGN — Capítulo 5: Más sobre responsive
Page 1 and 2: WILFREDO SALAS G. Responsive Web De
Page 3 and 4: CAPÍTULO 1 Nuestro Mundo Sensible
Page 5 and 6: FIG.2 FIG.1 FIG.1 es el link que se
Page 7 and 8: Desde que este proyecto empezó a e
Page 9 and 10: FIG.3 Un ejemplo de la página web
Page 11 and 12: #titulo h2{ } font-family:meta_seri
Page 13 and 14: #titulo h2{ } font-family:meta_seri
Page 15 and 16: Paso 2 Escribe el código: Aunque e
Page 17 and 18: Paso 4 Aplicar la fórmula: La fór
Page 19 and 20: CAPÍTULO 3 Imágenes flexibles HAS
Page 21 and 22: FIG.9 Y dio problema. A pesar de qu
Page 23 and 24: EL PLACER DE ESTAR “OCULTO” Com
Page 25 and 26: @media screen and (min-width: 1024p
Page 27 and 28: 600 px Tablets pequeños, como el A
Page 29: 1200 px Pantallas anchas (widescree

WILFREDO SALAS G. - Responsive Web Design - Webuda

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?