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.
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
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)
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)