Responsive Web Design Techniques, Tools and Design Strategies - Smashing Mobile | Smashing Mobile Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Back in January, we published an article on responsive design, Responsive Web Design: What It Is and How to Use It1. To that end, we’ve compiled this round-up of resources for creating responsive website designs. Further Reading on SmashingMag: Link Responsive Design Techniques Link CSS Transitions and Media Queries5 Elliot Jay Stocks provides insight into the combination of CSS media queries and CSS transitions. Responsive Data Tables7 Chris Coyier and Scott Jehl are experimenting with responsive design techniques for displaying data tables. Responsive Navigation Menus: Convert a Menu to a Dropdown for Small Screens9 Chris Coyier describes another technique for converting a regular row of links into a dropdown menu when the browser window is narrow.
A simple guide to responsive typography The vast majority of articles talking about responsive design focus on two main areas: a fluid, flexible grid, and fluid, flexible images. What many of them don’t talk about is typography. And yet, for the majority of websites the text, the content, is the most important element. Granted, for sites where images or video are the primary content, responsive type is a bit less important, but it still shouldn’t be overlooked. The good news is that responsive typography isn’t particularly difficult to achieve. We just need to take some time to think through how our type should respond to changes in screen size, and then implement those changes. Principles of responsive type There are two main principles to creating effective responsive typography. The second is optimized line lengths, which maintain readability. Resizable type using rems Most designers use either pixels or ems for sizing their type. Rems offer a better alternative to ems. Maintaining optimum line lengths Using alternate typefaces
A List Apart: Articles: Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. Becoming responsive#section2 Recently, an emergent discipline called “ responsive architecture .
Conditional Loading for Responsive Designs On the eighteenth day of last year’s 24 ways, Paul Hammond wrote a great article called Speed Up Your Site with Delayed Content. He outlined a technique for loading some content — like profile avatars — after the initial page load. This gives you a nice performance boost. There’s another situation where this kind of delayed loading could be really handy: mobile-first responsive design. Responsive design combines three techniques: a fluid grid flexible images media queries At first, responsive design was applied to existing desktop-centric websites to allow the layout to adapt to smaller screen sizes. Rather then starting with the big, bloated desktop site and then scaling down for smaller devices, it makes more sense to start with the constraints of the small screen and then scale up for larger viewports. One of the great advantages of the mobile-first approach is that it forces you to really focus on the core content of your page. <script> searchNews('cats'); </script> See the result