Responsive design is not only a new technique — it's an entirely new mindset. This eBook, “Responsive Design”, provides an overview on responsive Web design, showing many situations and techniques in which this approach can be applied to. Smartphones, tablets, laptops and desktop computers may share the same design, which is adapted according to screen size, platform and orientation of each device.
Learn about content prototyping, device-agnostic design approach, gracefully degrading media queries and navigation patterns to achieve flawless responsiveness. Choose the right approach to a responsive project and avoid some common mistakes — it's worth it!
TABLE OF CONTENTS
- Responsive Web Design: What It Is And How To Use It
- Progressive And Responsive Navigation
- Techniques For Gracefully Degrading Media Queries
- Is There Ever A Justification For Responsive Text?
- How To Use CSS3 Media Queries To Create A Mobile Version Of Your Website
- Device-Agnostic Approach To Responsive Web Design
- Content Prototyping In Responsive Web Design
- Formats: PDF, EPUB, Kindle (DRM-free)
- Pages: 160 pages
- Language: English
- Released: May 2012
- Publisher: Smashing Media GmbH
- ISBN: 978-3-943075-33-5
Excerpt From Chapter 2
Progressive And Responsive Navigation — by
Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming. But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less capable browsers and reward those with modern browsers in both desktop and mobile environments.
Excerpt From Chapter 3
Techniques For Gracefully Degrading Media Queries — by
Media queries are the third pillar in Ethan Marcotte’s implementation of responsive design. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of devices out there. Fluid layouts can appear cramped and unreadable on small mobile devices and too large and chunky on big widescreen displays. Media queries enable us to adapt typography to the size and resolution of the user’s device, making it a powerful tool for crafting the perfect reading experience.
CSS3 media queries, which include the browser width variable, are supported by most modern Web browsers. Mobile and desktop browsers that lack support will present a subpar experience to the user unless we step up and take action. I’ll outline some of techniques that developers can follow to address this problem.