Responsive web design (RWD) has clearly indicated that time of the one-dimensional Web is over once and for all and all variations of the modern Web are of equal worth for web designers and developers. Nowadays the web design community is actively mastering RWD. In this post we’ve collected some recent results.
- Responsive Web Design Basics
- Responsive Images
- Breakpoints in RWD
- RWD in Practice – Techniques, Tips and Experience
- Responsive WordPress Themes
- Thoughts, Opinions and Comparison
- Resources and Round-ups
- Tools, Plugins and Frameworks
- Collections for Inspirations
Responsive Web Design Basics
1). Responsive Design 101
http://speckyboy.com/2012/05/10/responsive-design-101/
by Eric Nacul: “A beginner’s introduction to responsive design.”
2). Responsive Web Design – Ideas, Technology, and Examples
http://www.onextrapixel.com/2012/05/17/responsive-web-design-ideas-technology-and-examples/
by Krishna Solanki: “One of the biggest trends that has hit this field over the past year or so, is the concept of responsive web design. ..It is clearly not going away. If anything, if you haven’t already got on board with it, it maybe it’s about time to start warming to the idea.”
3). Exploring Responsive Web Design & Techniques
http://www.craftedbydavid.com/exploring-responsive-web-design-techniques/
by David McKeown: “In this article I’m going to talk about a few things: what responsive design is, why go responsive, and how to design responsively.”
4). Principles of Responsive Web Design
http://snugug.com/musings/principles-responsive-web-design
5). Advantages of Responsive Web Design
http://www.instantshift.com/2012/07/17/advantages-of-responsive-web-design/
by Evan Varsamis: “…almost 57% of users will never recommend a company with a bad website. 40% of the people will prefer to use a competitor’s website rather than using a poorly designed one… Considering that more and more people are using mobiles to access internet, companies that do not have a good mobile website will suffer.”
6). Importance Responsive Website Designs in the Modern World
http://www.dzinepress.com/2012/07/importance-responsive-website-designs-in-the-modern-world/
by admin: “…if you have attractive and eye-catching theme you can also easily attract others. Mostly when we open any web page in mobile or tablet the whole look and feel of web page looks strange and odd because the content of the web page disturbed because the resolution of that page isn’t according to your device or mobile. For this purpose responsive website designs work perfectly.”
7). Why Responsive Web Design Will Revolutionize Your Process
http://www.howinteractivedesign.com/technology/why-responsive-web-design-will-revolutionize-your-process
by Patrick McNeil: “I would put responsive design on the short list of things that have shaped the way we design and build sites. It’s poised to be a game changer for many and presents one of the greatest opportunities in the industry.”
8). The top responsive web design problems … and how to avoid them!
http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
by James Young: “James Young recently surveyed his fellow designers about the biggest problems they face on responsive sites. Here, he reports on the results – and offers his solutions.”
9). Responsive Web Design vs Adaptive Web Design
http://www.b2bmarketing.net/blog/posts/2012/10/11/responsive-web-design-vs-adaptive-web-design
by Danny Bluestone: “There are 2 proven techniques that provide this idyllic solution; Responsive Web Design (RWD) and Adaptive Web Design (AWD). As their names would suggest they have similarities, yet are very different methods for optimising websites for mobile devices.”
10). Responsive Web Development as a Standard, Step-by-Step
http://www.onextrapixel.com/2012/09/20/responsive-web-development-as-a-standard-step-by-step/
by Kayla Knight: “In this article, we’ll go over how more of us can include responsive coding as a new standard in web development in order to push forward the next era of the web.”
11). Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples
http://www.hongkiat.com/blog/responsive-for-mobile-screens/
by Jake Rocheleau: “With such a fluid design scheme there are obvious benefits and drawbacks. Consider my examples below for how responsive web design can make the transition into mobile devices a smoother one.”
12). The Infinite Grid
http://www.alistapart.com/articles/the-infinite-grid/
by Chris Armstrong
Responsive Images
1). Adaptive images: solving the responsive image problem
http://www.webdesignerdepot.com/2012/07/adaptive-images-solving-the-responsive-image-problem/
by Dain Miller: “Responsive images have been a tough topic for years now, as there have typically been more than one ‘hack-around’ way to make your images responsive. Let’s go through this topic from the ground up, starting with how we used to do it.”
2). How to Choose a Responsive Images Tool
http://designmodo.com/responsive-images-tool/
by Christian Vasile: “…today we go a bit more into details and talk about one of the newest approaches, responsive images. Unfortunately not only the size of the websites is important, but also the size of the more interactive elements, such as images.”
3). Maintaining Image Hierarchy And Aspect Ratio In Responsive Design
http://www.vanseodesign.com/web-design/image-hierarchy-responsive/
by Steven Bradley: “…I came across a few more image related issues and thought I’d combine them in a single post and present them here.”
4). Which responsive images solution should you use?
http://css-tricks.com/which-responsive-images-solution-should-you-use/
by Chris Coyier: “There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques.”
5). The problem with adaptive images
http://www.netmagazine.com/features/problem-adaptive-images
by Christopher Schmitt: “Designer and developer Christopher Schmitt examines the problem of adaptive images and looks at issues such as screen resolution and Retina displays, bandwidth and browser width.”
6). The need for a responsive image format
http://www.netmagazine.com/opinions/need-responsive-image-format
“Christopher Schmitt calls for a responsive image format that’s a storage locker and similar to the MP3 format and explains its benefits and the main issues in its way.”
7). Responsive image proposals gather pace
http://www.netmagazine.com/news/responsive-image-proposals-gather-pace-122293
by Craig Grannell : “Browser vendors control fate of picture element and srcset attribute, free from HTML5 spec.”
Breakpoints in RWD
1). Overview of Breakpoints in Responsive Web Design
http://www.1stwebdesigner.com/design/overview-of-breakpoints-in-responsive-web-design/
by Jamal
2). Where And How To Set Breakpoints In Media Queries
http://www.vanseodesign.com/web-design/media-query-breakpoints/
by Steven Bradley: “…there are some decisions you need to make when using media queries, specifically how and where to set your breakpoints.”
3). Determining breakpoints for a responsive design
http://www.netmagazine.com/tutorials/determining-breakpoints-responsive-design
by Tim Kadlec: “We present an exclusive excerpt from Tim Kadlec’s book, Implementing Responsive Design, on adopting a future-friendly approach that determines breakpoints according to content as opposed to device.”
RWD in Practice – Techniques, Tips and Experience
1). Lessons Learned From A Responsive Design
http://www.vanseodesign.com/web-design/responsive-design-lessons/
by Steven Bradley: “One of the major goals of my recent redesign was to develop this site responsively. I’ve talked quite a bit about responsive design the last few months and don’t want to rehash it all, but thought I would share some of my thoughts and process along with some lessons I learned in building this site.”
2). Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency
http://coding.smashingmagazine.com/2012/08/13/coding-qa-with-chris-coyier-responsive-sprites-responsive-font-sizing-media-query-efficiency-more/
by Chris Coyier
3). Rundown of Handling Flexible Media
http://css-tricks.com/rundown-of-handling-flexible-media/
by Chris Coyier: “When you take the responsive web design route, part of the deal is fluid grids… Text can be resized and will flow nicely to fill a container. That’s not too hard. But media – images, video players, and audio players – demand a bit more attention (e.g. a video that sticks off the edge of the screen == bad). This post is to round up the methods of handling that.”
4). Adding Responsive Videos to your Design
http://www.developerdrive.com/2012/07/adding-responsive-videos-to-your-design/
by David Gitonga: “Responsive videos are elastic and are especially favored where web pages will be viewed on different screen sizes using a variety of browsers.”
5). Responsive Typography: The Basics
http://informationarchitects.net/blog/responsive-typography-the-basics/
by Oliver Reichenstein
6). A simple guide to responsive typography
http://www.webdesignerdepot.com/2012/10/a-simple-guide-to-responsive-typography/
7). 7 Responsive Navigation Patterns
http://www.vanseodesign.com/web-design/responsive-navigation-patterns/
by Steven Bradley
8). Build a smart mobile navigation without hacks
http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks
by Aaron Gustafson: “Aaron Gustafson explains how to build a progressively-enhanced, CSS-based dropdown that works as part of a responsive design.”
9). 10 Tips How To Handle Responsive Navigation Menus Successfully
http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/
by Sabina Idler: “Here are 10 tips how to effectively design your navigation menus both on big and on small screens.”
10). Forms in responsive site
http://webcodebuilder.com/forms-in-responsive-site/
11). Coding a Responsive Resume in HTML5/CSS3
http://www.hongkiat.com/blog/responsive-resume/
by Jake Rocheleau
12). Responsive Email Design (Guide)
http://www.campaignmonitor.com/guides/mobile/
13). How to Build a Responsive Thumbnail Gallery
http://designshack.net/articles/css/how-to-build-a-responsive-thumbnail-gallery
by Joshua Johnson: “Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works.”
14). 9 Valuable CSS Tricks for Responsive Design
http://smashinghub.com/9-valuable-css-tricks-for-responsive-design.htm
by Ali Qayyum: “Let us take a look at few of the most useful, valuable and simple CSS rules playing an important role in responsive designing.”
15). Setup to Build Responsive Websites
http://davidwalsh.name/responsive-css
by Eric Wendelin: “With this responsive design post, Eric flexes a little muscle and shares his process for putting together a responsive website.”
16). How to Use Responsive Web Design to Support Old Browsers
http://www.sitepoint.com/support-old-browsers-responsive-web-design/
by Craig Buckler
17). Really Responsive Design and the Frameless Grid
http://wail.es/post/really-responsive-design
by Pete Wailes: “…now we can do all sorts of incredible things thanks mainly to advances in CSS & javascript. However, whilst we’re now capable of doing far more, our methods of design are often still stuck in ways of thinking that evolved a few years ago. I’ll be deconstructing some of those in this post, and wondering whether it’s not time for a new way of doing things.”
18). Debugging CSS Media Queries
http://johanbrook.com/design/css/debugging-css-media-queries/
by Johan Brook: “I randomly created this during a project, and it’s a quick and dirty way of detecting different viewport widths.”
19). Responsive Line Breaks
http://danielmall.com/articles/responsive-line-breaks/
by Dan Mall: “I often come across the problem of widows and orphans when using fully fluid grids, so here are 2 techniques I use to avoid them as much as possible.”
20). Grids, flexibility and responsiveness
http://laurakalbag.com/grids-flexibility-and-responsiveness/
by Laura Kalbag: “This approach to grid design works for me. I’m not saying I will use it for every project in the future, but at the moment it feels like it has the right balance of flexibility and control with content – and experienced-based priorities.”
21). Website Conversion Basics: 5 Ways to Boost Response
http://www.sitepronews.com/2012/10/11/website-conversion-basics-5-ways-to-boost-response/
by Harmony Major: “3. Choose a Website Size and Layout Suitable for Your Audience.”
Responsive WordPress Themes
1). How to Build a Responsive WordPress Theme with Bootstrap
http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial
by Zac Gordon
2). 15 Free WordPress themes to get you started with Responsive Design
http://www.webdesignerdepot.com/2012/08/15-free-wordpress-themes-to-get-you-started-with-responsive-design/
by Kendra Gaines
Thoughts, Opinions and Comparison
1). Responsive Web Design is Your Responsibility
http://www.gonzoblog.nl/2012/07/25/responsive-web-design-is-your-responsibility/
by Teylor Feliz: “When I said to be responsible, what I meant is that is your responsibility to provide the best for your clients, thus RWD must be offered by default in your packets.”
2). Responsive Web Design: Is It Really So Good?
http://www.splashnology.com/article/responsive-web-design-is-it-really-so-good/
by Alex Bulat: “Anyone who can get three words in a line was trying to present the benefits of responsive web design, but what about its drawbacks?”
3). Responsive Web Design: Should users be forced into a responsive design (without the ability to opt out)?
http://www.quora.com/Responsive-Web-Design/Should-users-be-forced-into-a-responsive-design-without-the-ability-to-opt-out
4). Blame the Implementation, Not the Technique
http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/
by Tim Kadlec: “‘Responsive design is bad for performance;’ ‘CSS preprocessors shouldn’t be used because they create bloated CSS…’ If you create for the web you’ve no doubt heard at least a couple of these statements. They’re flung around with alarming frequency.”
5). I cannot design or code a responsive website
http://www.netmagazine.com/opinions/i-cannot-design-or-code-responsive-website
by Nick Jones: “Don’t listen to the voices in your head, advises frontend developer Nick Jones. Here he explains how he got stuck creating his personal site and learned to trust his instincts instead.”
6). Responsive Design – Good or Bad for Businesses
http://www.republicof3.com/responsive-design-good-or-bad-for-businesses/
by Zermenay: “The impact of responsive design on the online businesses.”
7). Luke Wroblewski on mobile first
http://www.netmagazine.com/interviews/luke-wroblewski-mobile-first
by Tom May: “The biggest design trend of the last few years has been responsive web design, and ‘mobile first’ has become an integral part of this methodology.”
8). Separate Mobile Website Vs. Responsive Website
http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/
by Brad Frost: “It just so happens that the two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Republican candidate Mitt Romney’s dedicated mobile website, and in the blue corner is incumbent Barack Obama’s responsive website.”
9). Mythbusting the Responsive Design Myth
http://www.zurb.com/article/1085/mythbusting-the-responsive-design-myth
by Ryan: “…To summarize, responsive design causes headaches, isn’t as simple as it appears and takes forever to do. Well, not exactly and here’s why, point-by-point.”
10). Reactive web design
http://www.netmagazine.com/opinions/reactive-web-design
by Dan Donald : “Dan Donald argues that responsive web design is only scratching the surface of how sites can adapt to meet their users’ requirements.”
11). The Thing About Those Media Types
http://blog.bearded.com/post/33656467094/the-thing-about-those-media-types
by Matt Griffin and Ben Callahan: “Is the best approach really just to not specify a media type (or specify ‘all’), and let everything get the responsive layout? Does this impact accessibility for types like braille, tty, or speech?”
12). Your mobile site is slower than you think
http://www.netmagazine.com/features/your-mobile-site-slower-you-think
by Joshua Bixby: “The world’s first study into mobile wait times reveals that a typical ecommerce site takes 11+ seconds to load, one-third of site owners don’t have a mobile-specific site, and LTE isn’t the performance saviour it’s been touted as.”
Resources and Round-ups
1). Readlist: Adaptive Web Design
http://readlists.com/7d414b24/
by Aaron Gustafson
2). Readlist: Responsive Enhancement
http://readlists.com/3b1c5439/
by adactio
3). This Is Responsive
http://bradfrost.github.com/this-is-responsive/
by Brad Frost: “Patterns, resources and news for creating responsive web experiences.”
4). Responsive Web Design Interactive Infographic
http://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.php
“This infographic is the first place to check when you need well researched information on responsive web design. With basic glossary, 15 blog articles, 5 quotes, 11 free PDF books, Google recommendations, as well as 65 tutorials, 20 plugins, 19 tools, and ready-made responsive website templates, this page is meant to classify a whopping amount of RWD content and give you exhaustive answers & tips to help improve your website designs. Use this, it will make you a better responsive web designer.”
5). 101 CSS and JavaScript tutorials to power up your skills
http://www.creativebloq.com/web-design-tips/css-and-javascript-1233101
by admin: “NOTE: most of these CSS and JavaScript tutorials are aimed at professional web designers.”
6). 10 Responsive Web Design Tutorials
http://www.theprintblog.com/10-responsive-web-design-tutorials/
by Luis Salazar
7). Getting started with Responsive Web Design 100 articles and tutorials
http://www.land-of-web.com/articles/getting-started-with-responsive-web-design-100-articles-and-tutorials.html
8). Responsive Design Weekly
http://responsivedesignweekly.com
“Responsive Web Design Weekly is a free weekly round up focused on everything and anything to do with Responsive Design.”
Tools, Plugins and Frameworks
1). Zen Grids: A Responsive Grid System Built on Sass
http://designshack.net/articles/css/zen-grids-a-responsive-grid-system-built-on-sass/
by Joshua Johnson: “…an awesome grid system that will help you set up your responsive grids with very little effort. It’s semantic, built for responsive design, completely flexible to the way you work, and powered by Sass.”
2). RWD tool Gridset launches
http://www.netmagazine.com/news/rwd-tool-gridset-launches-122159
by Craig Grannell: “Responsive design is challenging and we wanted a tool that would do all the hard maths for us, but allow us to rapidly prototype, and also build different types of grids to the ones we’ve been seeing on the web for so long now.”
3). Master Responsive Web Design With Gridset
http://designshack.net/articles/css/master-responsive-web-design-with-gridset/
by Joshua Johnson: “Whether you’re completely new to responsive design or consider yourself an expert in the area, the tool that we’re going to look at today will blow you away.”
4). Animated Responsive Image Grid
http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/
by Mary Lou: “A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.”
5). Skeleton – A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
http://www.getskeleton.com
6). 15 More Responsive CSS Frameworks & Boilerplates Worth Considering
http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/
by Speckyboy Editors
7). 12 Essential Plugins for Your Responsive Web Design
http://designtuto.com/12-essential-plugins-for-your-responsive-web-design/
by Hossaine
8). Responsive jQuery Image Slider Plugins
http://front-endmagazine.com/responsive-jquery-image-slider-plugins/
9). Responsive Web Design: Some of the Best Tools in the Game
http://www.splashnology.com/article/responsive-web-design-some-of-the-best-tools-in-the-game/
by Juliette Lancaster
10). Responsive IE6
http://responsiveie6.com
11). Responsinator
http://www.responsinator.com
Collections for Inspirations
1). gonzogallery: Web-Inspiration #04 [Responsive Web Design]
http://gonzoblog.nl/2012/10/17/gonzogallery-web-inspiration-04-responsive-web-design/
by Jan Rajtoral: “To see how other designers/developers deal with some of the practical problems designing fully responsive sites (content management, navigation menu’s, responsiveness of images/vids, etc.), I love to examine existing responsive sites.”
2). Responsive Web Design as the Demand of Time
http://smashinghub.com/responsive-web-design-as-the-demand-of-time.htm
by Design Addict: “…our cool, creative collection of the best responsive themes will become the crucial moment. View the websites, test them on different browser widths and perceive all pleasures of Responsive Web Design!”
3). 25 Examples of Responsive Website
http://acrisdesign.com/2012/08/25-examples-of-responsive-website/
by Vikas Ghodke
4). 21 Inspiring Unique Responsive Web Design Examples
http://medleyweb.com/inspiration/21-inspiring-unique-responsive-web-design-examples/
by Justin He
Please note:
To find more (the most fresh) links on responsive web design, follow our Pinterest board
Responsive Web Design.
Hi guys!
Thanks for including 2 articles of the gonzoblog.nl to this great roundup you’ve made!
Really excellent choice of resources and I’m not saying that because I got included ;-P
Have a great weekend guys, ciao!
Gonzo the Great
You are welcome! And we’re waiting for your new articles
admini
Pingback: RWD - Mastering Best Practices: Round-Up of Recent Results | Responsive WebDesign | Scoop.it
Pingback: Tweet Parade (no.42 Oct 2012) | gonzoblog
Whoa. Your roundup is pretty freaking incredible! Thank you so much for including my little tip within such an informative collection of resources. This is just awesome.
-HM
Harmony Major
Pingback: RWD – Mastering Best Practices: Round-Up of Recent Results « human being | #INperfeccion®
Pingback: Tweet Heat – The hottest Tweets of the Month [Oct 2012] | Web Dezining
Pingback: Blodhemn ! | Tweet Heat – The hottest Tweets of the Month [Oct 2012]
Hey there! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche. Your blog provided us valuable information to work on. You have done a extraordinary job!
Zackary