Responsive Web Design (RWD)

Context: frontend-dev-bookmarks / Compatibility
RWD responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device.

• Data Tables: Tables filled with data don’t behave well on small screens. Here are some resources to tame them.
  • Responsive Data Tables: Several ideas by Chris Coyier on how to deal with responsive tables.
  • stacktable.js: jQuery plugin for stacking tables on small screens.
• Future Friendly Thinking: We want to make things that are future friendly. The following ideas have been on our minds recently. Help us explore them further or suggest new ones.
• How to make a Responsive Newspaper-like layout: The article describes several approaches for creating multi column websites.
• Images: Images pose a set of problems on responsive websites: scaling, performance, retina screens and file size.
  • Adaptive Images: Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images.
  • Choosing A Responsive Image Solution: This article leads you through the basics, and then arms you with the information you’ll need to pick the best responsive image solution for your situation.
  • Clown Car Technique: We can use media queries within SVG to serve up the right image. The beauty of the “Clown Car” technique is that all the logic remains in the SVG file.
  • How to Use Responsive Images…: Engineers at Shutterstock describe different problems and solutions around responsive images.
  • Picturefill: A responsive image polyfill for , srcset, sizes, and more.
  • Riloadr: The goal of this library is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions in order to improve page load time.
  • Why We Need Responsive Images: Tim Kadlec talks about page weight and responsive image solutions.
  • imgLiquid: A jQuery Plugin to resize images to fit in a container.
  • jQuery Picture: jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format.
• Monitoring Breakpoints: Triggering JavaScript events on different breakpoints.
  • Breakpoints.js: Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.
  • Harvey: Harvey helps you monitor and manage behavior changes by firing an event whenever your media query is activated.
  • enquire.js: enquire.js is a lightweight, pure javascript library (with no dependencies) for programmatically responding to media queries.
• Navigation: Adapting the website navigation to different screen sizes.
  • Complex Navigation Patterns: The article describes some emerging patterns for dealing with complex, lengthy and/or multi-level navigations.
  • Responsive Navigation On Complex Websites: To illustrate the techniques involved in implementing responsive navigation on a large website, author refers to two actual clients.
  • Responsive Navigation Patterns: The article describes some of the more popular techniques for handling navigation in responsive designs.
• Responsive Design Workflow: In this video, Stephen Hay explores at a content-based approach to design workflow which is grounded in our multiplatform reality, not fixed-width Photoshop comps and overproduced wireframes.
• Responsive Elements: Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It’s a tiny JavaScript library that you can drop into your projects today.
• Responsive Patterns: A collection of patterns and modules for responsive designs.
• Text: Working with text in a context of different viewport sizes.
  • FitText: FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
  • Out Of Words!: The responsive typography framework behind Words App.
  • Responsive Font Sizing: Making your font size respond to your screen size, easy & maintainable.
  • Responsive Measure: A jQuery plugin for generating a responsive ideal measure.
  • Truly Fluid Typography With vh And vw Units: This article describes viewport units and other technics to achieve typography which resizes smoothly with the screen.
• Viewport Component: Viewport is a component to ease viewport management. You can get the dimensions of the viewport and beyond, which can be quite helpful to perform some checks with JavaScript.

License

This work is licensed under a Creative Commons Attribution 4.0 International License.
Please provide a link back to this repository. This is not necessary for GitHub forks.