Subido porJuan Morales
Responsive Web Design
El documento discute el diseño web responsivo, destacando su importancia para mejorar la experiencia del usuario en dispositivos móviles mediante el uso de estructuras y medias queries fluidas. También detalla los beneficios, como la optimización para motores de búsqueda y la reducción de costos, así como herramientas y mejores prácticas para su implementación. Se incluyen ejemplos de sitios y recursos adicionales para profundizar en el tema.
Más contenido relacionado
Responsive Web Design
- 1. Responsive Web Design Notasde observación Laboratorio de Aprendizaje Institución Universitaria CEIPA
- 2. “Almost every newclient these days wants a mobile version of their website” Smashing Magazine.com
- 3. Definición • Es larespuesta a la frustración del usuario en la navegación desde dispositivos móviles – Estructuras e imágenes fluidas (medidas relativas) – Uso de media-queries en CSS (pregunta sobre el medio) – Diseño para lectura y navegación fácil (experiencia de usuario)
- 4. ¿Qué no es? •No es adaptación al diseño gráfico, es pertinencia sobre la oferta de contenidos • No es disponibilidad de diferentes versiones, es experiencia para el usuario
- 5. Beneficios Las webs conmejor experiencia de usuario gustarán más, serán más compartidas, mejor valoradas, más populares. Y eso en SEO es muy importante (emenia.es)
- 6. Beneficios Desde el puntode vista de la optimización de motores de búsqueda (SEO), sólo aparecería una URL en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. (Wikipedia.org)
- 7. Beneficios Reducción de costos:se reducen los costos ya que hasta hoy se debe hacer un portal para la Web y otro para dispositivos móviles. Esto origina mayores costos de creación y mantenimiento de la información (MarketingDigital)
- 8. Beneficios Impacto en elvisitante: esta tecnología por ser nueva genera impacto en las personas que la vean en acción, lo que permitirá asociar a la marca con creatividad e innovación (MarketingDigital)
- 9. Características claves • Thesite must be built with a flexible grid foundation • Images that are incorporated into the design must be flexible themselves • Different views must be enabled in different contexts via media queries (Ethan Marcotte)
- 10. Herramientas Boilerplate “HTML5 Boilerplate helpsyou build fast, robust, and adaptable web apps or sites” – Analytics, icons, and more – jQuery and Modernizr – Normalize.css and helpers – High performance
- 11. Herramientas Modernizr “(…) is aJavaScript library that detects HTML5 and CSS3 features in the user’s browser” - Identifica características del navegador - Personalización de la librería para HTML5
- 12. Herramientas Chrome – Window Resizer –Mobile Tester
- 13. Dificultades • Consulta demedios en IE 6 y 7 (Respond.js) • Equipos de trabajo 4.01 y 2.1
- 14. Hacer • Iniciar eldesarrollo con BoilerPlate, para aprovechar las características de un framework. Esto ahorra tiempos y no traiciona la memoria. • En el <HEAD> se indica primero los estilos CSS y luego los scripts. Esto da respuesta al usuario. • No puede faltar el <!DOCTYPE html> para desarrollos HTML5
- 15. • El <METACHARSET=“UTF-8”> es obligatorio para los programadores, diseñadores y guionistas de productos en español. Además, el atributo “lang=es” debe indicarse en la etiqueta <HTML> • No olvidar: <META NAME=VIEWPORT”> para la consulta de medios. Con un content=“initial-scale=1.0” puede obtenerse pantalla completa en iPhone 5 Hacer
- 16. Hacer • Para iOS,tener presente los iconos touch, con el fin de garantizar la identidad de la página en la pantalla de inicio. • Para cada dispositivo iOS existe una dimensión. • Además, tener presente las imágenes startup y asociarlas a media-query.
- 17. Hacer • Con <metaname="apple-mobile-web- app-capable" content="yes" /> se puede lograr la apariencia de una Webapp, luego de guardarla en la pantalla de inicio. • Con <meta name="apple-mobile-web- app-status-bar-style" content="default" /> se puede dar apariencia a la barra superior de la Webapp.
- 18. Hacer • Primero seindica el CSS normalize.css. Luego, main.css. Para finalizar con los media-query. • Aprovechar las familias tipográficas que ofrece Google Web Fonts. Esto da garantía de una correcta visualización en los dispositivos. • Descargar solo las variaciones de fuente que son estrictamente necesarias.
- 19. Hacer • Cargar libreríamodernizr.js, en su última versión. Además, de configurar el paquete en la versión estricta: únicamente lo que se utilizará. • Cargar JS de add2home.js para permitir asistente de “agregar a la pantalla de inicio”. • Manos a la obra.
- 20. Ejemplos • Mr. SimonCollison (http://colly.com) • Andresson Wise (http://anderssonwise.com) • Food Sense (http://foodsense.is)
- 21. Ejemplos • Sasquatch (http://sasquatchfestival.com) • OneChannel (http://youtube.com/onechannel) •Tienda CEIPA (http://icontent.ceipa.edu.co/nucleos/Tienda)
- 22. Tutoriales • Tutorial ResponsiveDesign Mejorando.la • Introducción al Responsive Design CodeJobs
- 23. Bibliografía • Introducción alDiseño Web Adaptable o Responsive Web Design (en línea) • Responsive Web Design: 50 examples and best practices (en línea) • Guía de Responsive Web Design: todo lo que necesita saber sobre Responsive Web Design (en línea)
- 24. Bibliografía • Responsive WebDesign: what it is and how to use it (en línea) • Responsive Web Design (en línea) • Understanding the elements of Responsive Web Design (en línea)
- 25. Bibliografía • Diseño webadaptativo (en línea) • 50 fantastic tools for responsive web design (en línea) • HTML5 Boilerplate (en línea) • Modernizr (en línea)