Responsive design
Responsive design solves the problem of having various browser sizes on different devices. The changing landscape of web browsers meant people expected to be able to browse the web on their phones just as easily as on their desktop computers. Then when tablets and netbooks came along, it was more practical to create one website that can respond to various browser sizes.1Fluid layouts
Whereas fixed layouts are configured in pixels, fluid layouts are configured with percentages. 3 According to Web Designer Wall (ref), responsive design can be achieved in just 3 steps! Their simple summary of this complex subject is to simply add a meta tag, configure the html structure of the page layout with containers, and reference these containers inside of media queries to change based on the browser window. Although this is greatly simplified, it does in fact create a basic responsive design. 2Our conclusion
Responsive design and fluid layouts makes things awesome on mobile, and it's good practice to use them.Reflection
- Implementing these concept was easy to do in CSS. There's is no reason NOT to do it.
- Smartphones and tablets have changed web design, as there is now a responsibility for web designers to make their websites mobile-friendly. New technologies like Google Glass and touchscreens or voice-activated events can push the level of responsive design even further. It will add more functionality for the users more standards for developers.
- Visually impaired people use text interpreters such as screen readers. We should design and development for them, if budgets permit.
- Media queries were straight forward and easy to implement. Floats are annoying do not make much sense. The float system should be reworked. CSS should contain variables. If there was a grid system or columns that were easier to control, it would make responsive design even better.