Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive design lunch and learn


Published on

  • Be the first to comment

  • Be the first to like this

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