Responsive Web Design
•
0 recomendaciones•996 vistas
Presentación realizada en la Institución Universitaria CEIPA (Colombia) que aborda -desde la comunicación y la producción Web- aspectos relevantes para el diseño responsive web. Si quieres tener website amigables para dispositivos móviles, esta presentación puede aportar elementos de interés. Esta presentación está en constante construcción.
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Destacado (20)
Similar a Responsive Web Design
Similar a Responsive Web Design (20)
Último
Último (20)
Responsive Web Design
- 1. Responsive Web Design Notas de observación Laboratorio de Aprendizaje Institución Universitaria CEIPA
- 2. “Almost every new client these days wants a mobile version of their website” Smashing Magazine.com
- 3. Definición • Es la respuesta 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 con mejor 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 punto de 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 el visitante: 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 • The site 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 helps you 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 a JavaScript 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 de medios en IE 6 y 7 (Respond.js) • Equipos de trabajo 4.01 y 2.1
- 14. Hacer • Iniciar el desarrollo 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 <META CHARSET=“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 <meta name="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 se indica 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ía modernizr.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. Simon Collison (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 Responsive Design Mejorando.la • Introducción al Responsive Design CodeJobs
- 23. Bibliografía • Introducción al Diseñ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 Web Design: 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 web adaptativo (en línea) • 50 fantastic tools for responsive web design (en línea) • HTML5 Boilerplate (en línea) • Modernizr (en línea)