Responsive
Responsive Design
desktop, mobile, tablet, tv, …
Responsive Design
•   Step forward towards a better and more flexible web.•   It’s (more) “future-proof”.•   Not just demos, real people, cl...
Responsive Design
HTML = Content in boxes.CSS = Styling the content and boxes.It works in delivering custom CSS for the same HTML(custom sty...
•   Borders-radius•   Shadow•   Web Fonts!•   Multi Column Layouts•   Transitions / Animation•   Media Queries ..here is w...
CSS2:Screen and Print.CSS3:Width, height, orientation, aspect-ratio, color, resolution, scan..and more
@media screen and (max-width: 768px) {  .menu { width:100px; }}@media screen and (min-width: 769px) {  .menu { width:980px...
• Not supported by IE8 and bellow.. of course• Issues in IE mobile and Blackberry browsers• Images are not responsiveGood ...
Responsive Design Not like this ->
(unfortunately)
•   Strategy: Is responsive design the best approach?•   Choose which devices & resolutions breakpoints to target.•   Mobi...
• It’s more complicated initially but the outcome is worth it• It’s not the answer for every site out there   Strategy and...
Responsive design lunch and learn
Responsive design lunch and learn
Upcoming SlideShare
Loading in...5
×

Responsive design lunch and learn

136

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
136
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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.

×