• Save
Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive Web Design

  • 525 views
Uploaded on

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

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
525
On Slideshare
465
From Embeds
60
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 60

http://juanca.e-lexia.com 60

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Responsive Web DesignNotas de observaciónLaboratorio de AprendizajeInstitución Universitaria CEIPA
  • 2. “Almost every new client thesedays wants a mobile version oftheir website”Smashing Magazine.com
  • 3. Definición• Es la respuesta a la frustración del usuarioen 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. BeneficiosLas webs con mejor experiencia de usuariogustarán más, serán más compartidas, mejorvaloradas, más populares. Y eso en SEO esmuy importante(emenia.es)
  • 6. BeneficiosDesde el punto de vista de la optimización demotores de búsqueda (SEO), sólo apareceríauna URL en los resultados de búsqueda, con locual se ahorran redirecciones y los fallos quese derivan de éstas.(Wikipedia.org)
  • 7. BeneficiosReducción de costos: se reducen los costos yaque hasta hoy se debe hacer un portal para laWeb y otro para dispositivos móviles. Estoorigina mayores costos de creación ymantenimiento de la información(MarketingDigital)
  • 8. BeneficiosImpacto en el visitante: esta tecnología por sernueva genera impacto en las personas que lavean en acción, lo que permitirá asociar a lamarca con creatividad e innovación(MarketingDigital)
  • 9. Características claves• The site must be built with a flexible gridfoundation• Images that are incorporated into the designmust be flexible themselves• Different views must be enabled in differentcontexts via media queries(Ethan Marcotte)
  • 10. HerramientasBoilerplate“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. HerramientasModernizr“(…) is a JavaScript library that detects HTML5and CSS3 features in the user’s browser”- Identifica características del navegador- Personalización de la librería para HTML5
  • 12. HerramientasChrome– 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, paraaprovechar las características de un framework.Esto ahorra tiempos y no traiciona la memoria.• En el <HEAD> se indica primero los estilos CSSy luego los scripts. Esto da respuesta al usuario.• No puede faltar el <!DOCTYPE html> paradesarrollos HTML5
  • 15. • El <META CHARSET=“UTF-8”> es obligatoriopara los programadores, diseñadores yguionistas de productos en español. Además, elatributo “lang=es” debe indicarse en laetiqueta <HTML>• No olvidar: <META NAME=VIEWPORT”> para laconsulta de medios. Con uncontent=“initial-scale=1.0” puedeobtenerse pantalla completa en iPhone 5Hacer
  • 16. Hacer• Para iOS, tener presente los iconos touch, conel fin de garantizar la identidad de la página enla pantalla de inicio.• Para cada dispositivo iOS existe una dimensión.• Además, tener presente las imágenes startup yasociarlas a media-query.
  • 17. Hacer• Con <meta name="apple-mobile-web-app-capable" content="yes" /> sepuede 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 darapariencia 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 ofreceGoogle Web Fonts. Esto da garantía de unacorrecta visualización en los dispositivos.• Descargar solo las variaciones de fuente queson estrictamente necesarias.
  • 19. Hacer• Cargar librería modernizr.js, en su últimaversión. Además, de configurar el paquete en laversión estricta: únicamente lo que se utilizará.• Cargar JS de add2home.js para permitirasistente 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 DesignMejorando.la• Introducción al Responsive DesignCodeJobs
  • 23. Bibliografía• Introducción al Diseño Web Adaptable oResponsive Web Design (en línea)• Responsive Web Design: 50 examples and bestpractices (en línea)• Guía de Responsive Web Design: todo lo quenecesita saber sobre Responsive Web Design(en línea)
  • 24. Bibliografía• Responsive Web Design: what it is and how touse it (en línea)• Responsive Web Design (en línea)• Understanding the elements of Responsive WebDesign (en línea)
  • 25. Bibliografía• Diseño web adaptativo (en línea)• 50 fantastic tools for responsive web design (enlínea)• HTML5 Boilerplate (en línea)• Modernizr (en línea)