Uploaded byRicardo Queiroz
Responsive design lunch and learn
The document discusses responsive design, which allows websites to automatically adapt their layout to different screen sizes and devices like desktops, mobile phones, and tablets. It explains that responsive design uses CSS media queries to apply different styling based on screen width, providing custom styles for the same HTML content on different devices. While responsive design is a step forward, it has some browser compatibility issues and images may not resize responsively, though JavaScript can help address these limitations. Overall, responsive design allows a single website to be optimized for all devices.
Responsive design lunch and learn
- 1.
- 2.
- 3.
- 4.
- 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.
- 7. HTML = Contentin boxes. CSS = Styling the content and boxes. It works in delivering custom CSS for the same HTML (custom style for the same content)
- 8. • Borders-radius • Shadow • Web Fonts! • Multi Column Layouts • Transitions / Animation • Media Queries ..here is where the magic happens
- 9. CSS2: Screen and Print. CSS3: Width,height, orientation, aspect-ratio, color, resolution, scan ..and more
- 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. • Not supportedby IE8 and bellow.. of course • Issues in IE mobile and Blackberry browsers • Images are not responsive Good 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. Responsive Design Notlike this ->
- 13.
- 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. • It’s morecomplicated 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.