O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Responsive design lunch and learn

459 visualizações

Publicada em

  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Responsive design lunch and learn

  1. 1. Responsive
  2. 2. Responsive Design
  3. 3. desktop, mobile, tablet, tv, …
  4. 4. Responsive Design
  5. 5. • Step forward towards a better and more flexible web.• It’s (more) “future-proof”.• Not just demos, real people, clients and agencies are using it.• And It’s awesome.Not a final answer to our problems. What are the project goals?
  6. 6. Responsive Design
  7. 7. HTML = Content in boxes.CSS = Styling the content and boxes.It works in delivering custom CSS for the same HTML(custom style for the same content)
  8. 8. • Borders-radius• Shadow• Web Fonts!• Multi Column Layouts• Transitions / Animation• Media Queries ..here is where the magic happens
  9. 9. CSS2:Screen and Print.CSS3:Width, height, orientation, aspect-ratio, color, resolution, scan..and more
  10. 10. @media screen and (max-width: 768px) { .menu { width:100px; }}@media screen and (min-width: 769px) { .menu { width:980px; }}This is simple but things can get ugly
  11. 11. • Not supported by IE8 and bellow.. of course• Issues in IE mobile and Blackberry browsers• Images are not responsiveGood News? There are javascript solutions for that.Even better? media queries are broadly supported in modern desktop,mobile and tablet browsers. I can’t believe it either..
  12. 12. Responsive Design Not like this ->
  13. 13. (unfortunately)
  14. 14. • Strategy: Is responsive design the best approach?• Choose which devices & resolutions breakpoints to target.• Mobile first or Desktop first. What are the user’s goals?• Design closer to development for testing and prototyping• Arquitect, design and develop all screen layouts.
  15. 15. • It’s more complicated initially but the outcome is worth it• It’s not the answer for every site out there Strategy and user experience are key• Could work great for web apps• With new CSS and HTML versions, there’s more to come.