Simon Foster | Blog | The Responsive Designer I had the pleasure to speak at Web Expo Guildford on Friday 12th October, and it was received very well despite my nervousness (it was my first speaking engagement at a web conference) and the fact that I forgot about half the points I was going to make. So I figured I’d write a quick overview of my talk and include some of the slides as well. You can see the video of my talk on vimeo. The name of my talk was “The Responsive Designer” and it focused on how my own experiences with working responsively and how the lessons I’ve learnt and the conclusions I’ve made have made me a better designer. One major conclusion (if you can call it that) that I’ve had is that if we as designers are making our sites so that they respond or adapt to whatever device or screen size is thrown at them, then shouldn’t we as designers also be as adaptive or responsive when working on our projects? Addendum So how do we do that? Anticipate change and expect the unexpected. Colophon
Impact of Responsive Designs As people continue to use an ever increasing number of devices to get online, there's no shortage of companies exploring multi-device solutions for the Web. Some are even sharing data about the impact of their new responsive designs and the numbers look good enough to get even more organizations on board. Time Inc. Responsive Redesign Pages per visit, across mobile, tablet and desktop are up considerably. O’Neill Clothing Responsive Redesign 65.7% conversion rate increase on iPhone/iPod (source)101.2% revenue growth on iPhone/iPod (source)407.3% conversion rate increase on Android devices (source)591.4% revenue growth on Android devices (source)20.3% conversion rate increase on non-mobile devices (source)41.1% revenue growth on non-mobile devices (source) Skinny Ties Responsive Redesign Fathead Responsive Redesign 90% improvement in mobile conversions YOY. Bonnier Tidskrifter Responsive Redesign Regent College Responsive Redesign Wait... that's only four sources of data?
What We've Learned About Responsive Design I was nervous when we decided to start doing responsive design. I thought it would completely disrupt our workflow, causing projects to be much more complicated, stressful, and far less profitable. Fortunately, that hasn't happened. It's not that it hasn't required us to make changes to our process, or that it's been stress-free. But it hasn't been a disaster, and that's what I tend to expect from change… After a year or so of doing responsive design projects, we've learned a ton, and I've solidified some of my opinions about what we're doing and how we're doing it. In a nutshell, responsive design is really about the nut, not the shell. The more flexible the information, the more variables there are to manage. Responsive design is more work. I've run into the idea that since responsive design is a more efficient mobile solution than creating unique mobile sites or alternate page templates, it is therefore going to be cheaper and simpler than what everyone is expecting. 1. 2. 3.
Grid Framework: How To Use | Style Guide A responsive, proportional, nestable, and mobile-first 6-column grid framework. Responsive Flexible grid defined in percentages Flexible media that will proportionaly scale down when larger than the parent tag Media Queries: that create breakpoints at: 240px, 320px, 480px, 600px, 769px, and 992px Proportional The sizes are based on commonly used proportions: 1/1, 1/2, 2/3, 1/3, 1/4, etc. See Region Sizes Nestable Grids can be infinitely nested within other grids in order to create more complex layouts. Mobile-First Only when the viewport width is above 768px does the grid take affect, otherwise it remains collapsed vertically. Getting Started The framework is built around a combination of these three elements: container, fields, and region. The container class sets the max-width of the page and centers it horizontally. <div class="container"><div class="fields"><div class="region size2of3">2/3</div><div class="region size1of3">1/3</div></div></div> Sizes Nesting Prefix & Suffix Blocks
Responsive Web Design: Clever Tips and Techniques The Responsive Web Design War Strategy It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development in 2013. That’s reasonable too, since RWD is currently the only sounding approach that deals with any device resolution universally and effectively. It tries to unite this chaotic browser-based universe littered by the fragmentation resulted from hardware business competition. (Image Source: Michael Schmid, Subtle Patterns) But alas, Responsive Web Design is not the messiah you’re seeking, for it has its own range of imperfections. Since we strictly practice the philosophy of ‘Make Design, Not War’, today we are just here to explore 5 core disadvantages of Responsive Web Design, and the respective arguments and solutions to lessen the destructive consequences that designers and clients are forced to bear. Recommended Reading: 50 Useful Responsive Web Design Tools For Designers 1. The first rule to successful web design: make it as fast as possible. (Image Source: Seth Waite) 2. 3.
Article View the detailed comparison: What is responsive web design? Responsive web design is a rapidly growing approach to web development wherein webpage layouts respond to their environment. That is to say websites should look good and function well no matter where they’re viewed, be it a desktop computer or mobile phone. Responsive frameworks give developers a baseline for building responsive websites. The setup Each developer on our team tackled a different framework and then reported their findings back to the group. Which frameworks did we test? We focused on the three big responsive frameworks: Twitter Bootstrap ZURB Foundation (version 2 and 3) Skeleton Where are the pages we created? Our comparison actually isn't page specific but we did test real client designs including a recent website launch for Campaign for Action. The surprising results It wasn’t obvious beforehand, but responsive CSS frameworks fall into two categories: Twitter Bootstrap
Seeing the Picture « Thoughts on digitization & libraries while working on Hardin MD The essence of Flipboard is well-captured in the headline of the press-release when it was launched in July 2010: Inspired by the beauty of print and designed for iPad, Flipboard transforms the social media experience With many rave reviews when it came out, Flipboard was chosen by Apple as the best iPad app of 2010, and selected by Time magazine as one of the top 50 inventions of 2010 (along with the iPad). Flipboard: “Twitter Cleaner-Upper” As @alex says in an early review, Flipboard takes the raw, text-based Twitter stream, filters out the chatty, “what I had for breakfast” tweets, and presents the user with an elegant, graphic screen of news and articles that are linked in tweets. The shrunken screen shot at left has my tweets as they appear in Twitter on top, and the corresponding tweets in Flipboard below (click image for large view). The Elegance of the Experience: “A Ballet-Like Flow” A Ballet-Like Flow, Flipping, Scanning, Touching … Graceful with Rhythm
Responsive webdesign : adapter un site à toutes les résolutions Le Responsive webdesign (conception adaptative ou réactive en français) représente un ensemble de méthodes et techniques permettant d’universaliser un site Web. Qu’il soit consulté sur ordinateur, tablette, e-reader ou mobile, le site ainsi conçu s’adapte automatiquement à la taille de l’écran. Cette évolution très séduisante du Web pose néanmoins certaines questions d’ergonomie et oblige à repenser la conception des sites. Nous abordons dans cet article les objectifs du responsive design, les critères qui doivent décider à le mettre en œuvre, les recommandations de conception et les considérations techniques. Objectifs du responsive webdesign Pour commencer, rien de tel qu’une démonstration. Entrons dans le vif du sujet. Les sites Web sont aujourd’hui consultés sur une multitude d’appareils ayant des résolutions différentes Proposer une seule version du site Web censée s’adapter à tous ces terminaux est utopique. Le site ifttt n’est pas adaptable. Responsive ou versions séparées ?
Responsive Design Sites: Higher Ed, Libraries, Notables « Seeing the Picture [Note: The original introductory paragraph is now at the bottom of the list] Disclaimers: With Responsive Design becoming increasingly popular, I don’t make any claims for this being a complete list (I AM happy to add new sites, so send them along). Also, the list is biased toward sites that are closest to home for me – Libraries (especially medical libraries) and Univ of Iowa. Higher Ed Other Library Related Non-Profits Other notable Responsive Design sites Other Lists If you have additions, please tell me on Twitter (@ericrumsey). Related articles: Original introductory paragraph: Responsive Design (RWD) is a new way to make web pages look good on any size screen, from mobile to desktop.
7 Essential Books on Responsive Web Design You Do Not Want to Miss For those of you who want to depeen your knowledge and development of Responsive Design technique, we recommend a selection of 7 reference books about it, which you can purchase via the Internet. Of course, the first one we would like to emphasize is the origin of Ethan Marcotte, "Responsive Web Design", published by A List Apart. Smashing Magazine has also undertaken, as always, a great job of editing and reporting with its fantastic collection of books on responsive design techniques. Finally, also noteworthy is Cristian Darie's guide to developing this technique for mobile applications with AJAX and PHP. Responsive Web Design From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Mobile First Our industry's long wait for the complete, strategic guide to mobile web design is finally over.
Responsive Web Design : un nouvel outil pour les développeurs dans Firefox « Responsive Web Design », trois mots que certains développeurs craignent de voir apparaître dans leurs cahiers des charges, mais qui initient une nouvelle façon de penser le design des sites, afin de les adapter automatiquement à tous les écrans possibles. Il n'existe ainsi plus des versions différentes en fonction du périphérique utilisé, mais une gestion globale que Firefox semble bien décidé à vous aider à mettre en oeuvre. En effet, la semaine dernière Firefox 15 faisait son entrée dans le canal Aurora (pre-Beta) qui est l'occasion pour Mozilla de mettre en place de nouveaux outils dédiés aux développeurs, ce qui devrait largement plaire à ces derniers. Vous pourrez la tester sur ce site dédié aux personnages principaux de l'univers de Sherlock Holms ou sur celui-ci rassemblant des informations sur la disparition des tigres, mis en place par la WWF. Un nouvel outil de Debug du code Javascript est aussi désormais intégré (CTRL + MAJ + S / CMD + OPT + S). David Legrand