-
To know the basic theory behind RWD,
click the icon. -
To see what Google recommends on RWD,
click the icon. -
To read articles and inspirational blog posts
about RWD, click the icon. -
To learn the difference between adaptive
and responsive web design, click the icon. -
To unveil Jeffrey Veen's (ex-Google) vision
of responsive web design, click the icon. -
To find out the correlation between
em and px widths, click the icon. -
To get some free PDF books on RWD,
click the icon. -
To find the quote of Ethan Marcotte (coined the
term "responsive web design"), click the icon. -
To see how Andy Clarke, a renowned designer,
shares his passion for RWD, click the icon. -
To find helpful tutorials on how to build a
responsive design, click the icon. -
To see what Google recommends on RWD,
click the icon. -
Click the icon to know Jeremy Keith's
philosophy of web thinking. -
To get into collection of sites using media queries
and responsive designs, click the icon. -
To get the toolkit for making RWD,
click the icon. -
For additional statistics on RWD,
click the icon. -
To discover what the initial concept behind
responsive design was, click the icon. -
To discover professional responsive
website templates, click the icon
-
Glossary
-
1
Responsive Web Design
Responsive web design is an approach that suggests that website design should respond to the user's behavior and environment based on screen size, platform and orientation.
Responsive design allows you to fill in the blanks within devices classes through the application of fluid grids, flexible images, and (where possible) media queries.
- Luke Wroblewski -
2
Fluid
GridsFluid grids refer to fluid designs where the grid units resize according to screen size. It is about defining your own parameters for various objects in code like columns, spacing and containers. Size and spacing are the two main components to focus on in creating your flexible grid system. Whether you're using a premade grid system or creating a custom solution, use percentages (or ems) rather than pixels as your units of measurement.
-
3
Flexible
ImagesFlexible images move and scale with the flexible grid. This means scaling down according to the HTML attributes of height and width for more text content on smaller devices. The other way to scale images is cropping them with the help of CSS overflow property. The containers around images will shift to fit new display environments. One more way is loading different image versions to a server and displaying the proper size version dynamically depending on the used device.
-
4
CSS Media Queries
Media queries allow designers to build multiple layouts using the same HTML documents by selectively serving stylesheets based on the user agent's features, such as the browser window's size, orientation, screen resolution, color. They act as conditional comments that are able to indicate the used device and serve up different code for different device attributes, in other words target different screen resolutions with different styles.
-
5
Screen Resolutions
Common resolutions include the 320px portrait width and 480px landscape width of smartphones, 768px portrait width and 1024px landscape width of tablets (and typical netbook resolutions) as well as various desktop monitor resolutions. A layout that only caters for preset resolutions is often referred to as being adaptive, whereas a truly responsive layout will be built using ems or percentages, allowing an infinite level of scaling.
-
-
Google Recommends
Google recommends webmasters follow the
Source
industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device. -
Articles & Inspirational Blog Posts
- Responsive Web Design by Ethan Marcotte
- 5 Really Useful Responsive Web Design Patterns by Joshua Johnson
- Be Responsive: A History of Responsive Design by Ashish Datta
- Responsive Web Design: What It Is and How to Use It by Kayla Knight
- How to Tune-Up Responsive Design Websites to Improve Mobile SEO by Sherwood Stranieri
- Recommendations for Building Smartphone-Optimized Websites by Pierre Far
- Responsive WebDesign - ultimate responsive web design hub by Scoop.it
- Responsive Web Design or Separate Mobile Site? Eh. It Depends.
- A Responsive Mind
- Responsive Enhancement
- Mobile-First Responsive Web Design
- Where are the Mobile First Responsive Web Designs?
- Responsive by Default
- Responsive Web Design: Standard or Feature?
- Why We Shouldn't Make Separate Mobile Websites
-
Did you know?
Adaptive (multiple fixed width layouts)Responsive (multiple fluid grid layouts) -
Quotes
Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we'll build websites for the decade to come.
- Jeffrey Veen -
Did you know?
Useful em widths that can be used as trigger points: 40em = ~640px 50em = ~800px 64em = ~1024px -
Free PDF Books
- Responsive Web Design with HTML5 and CSS3 by Ben Frain
- WordPress Meet Responsive Web Design by Michael Pick
- Delivering Web to Mobile by Mark Power
- Responsive Design Guide by Matt Crist, Alec Francesconi, Andrew Paradise, George White
- GoMobile by Jason Wilson
- Mobile-First Responsive Web Design
- Responsive Web Design by Tim Davison
- Responsive Web Design: Enriching the User Experience by Brett S. Gardner
- How to Build a Mobile Website: Know Your Options
- Responsive Web Design Increases Sales
- Responsive Design and Small Screen Optimization by Patrick Hamann
-
Quotes
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed
- Ethan Marcotte
standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. -
Quotes
Web design is responsive design, Responsive Web Design is web design, done right.
- Andy Clarke -
Google Recommends
Advantages of using responsive web design:
- it keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google's algorithms to assign the indexing properties to your content.
- Google can discover your content more efficiently as we wouldn't need to crawl a page with the different Googlebot user agents to retrieve and index all the content.
-
Quotes
Stop Thinking in Pages. Start Thinking in Systems.
- Jeremy Keith -
Did you know?
Media Queries Gallery shows different website views enabled in different contexts via media queries.
-
Responsive Web Design Toolkit
-
Mobile Browsing (May 2012)
* StatCounter,
Pingdom -
Did you know?
The initial concept behind responsive design was based on responsive architecture, in which rooms and spaces have the capacity to adjust automatically to the number and flow of people within it.
-
Responsive Website Templates
Responsive design turned from a hot trend into an emerging standard. Get into the gallery of TemplateMonster's responsive website templates. They are the best option to cater your site to any possible viewing device without worrying about screen resolution and specific platform support. One template will serve them all.
Available Template Types:Available Layout Options:- desktop 980px layout
- tablet 768px layout
- smartphone 480px layout
- smartphone 320px layout
Responsive WordPress Template for Business Company WebsiteResponsive WordPress Template for Business Oriented WebsiteResponsive Joomla Template for Architecture Company WebsiteResponsive Joomla Template for Hotels WebsiteResponsive Drupal Template for Construction CompanyResponsive Joomla Template for Designer Portfolio WebsiteResponsive WordPress Template for Consulting Company WebsiteResponsive Drupal Template for Business WebsiteResponsive JavaScript Animated Template for Interior DesignResponsive WordPress Template for Business WebsiteResponsive Joomla Template for Design Studio WebsiteResponsive JavaScript Animated Template for Business WebsiteResponsive Drupal Template for Business Company WebsiteResponsive JavaScript Animated Template for Interior Design
-
Guides & Getting Started Tutorials
This section will take you through the initial concept behind responsive web design showing some simple examples which you can follow along.
- Responsive Web Design
- Responsive Web Design: A Visual Guide
- Responsive Web Design, Most Complete Guide
- Beginner's Guide to Responsive Web Design
- Getting Started with Responsive Web Design
- Designing for a Responsive Web
- Responsive Design Tutorial
- Responsive Design in 3 Steps
- Responsive Web Design with HTML5 and the Less Framework 3
- Responsive Web Design
- Responsive Web Design Demystified
- Getting Started with RESS
-
Tips, Tricks, Patterns & Techniques
The following tutorials provide handy techniques, commonly used tips, tricks, approaches, sketch sheets, and navigation patterns along with sample cases for coding responsive designs.
- Five Top Tips for Building Responsive WordPress Sites
- Responsive Web Design: 5 Handy Tips
- 5 Useful CSS Tricks for Responsive Design
- Scalable Navigation Patterns in Responsive Web Design
- 7 Responsive Navigation Patterns
- Techniques in Responsive Web Design
- Exploring Responsive Web Design & Techniques
- Designing for a Responsive Web with Heuristic Methods
- The Goldilocks Approach to Responsive Design
- Responsive Web Design Sketch Sheets
-
How to Build a Responsive Website
These tutorials will teach you how to build a responsive design of a web page adaptable to different screen resolutions and how to style it accordingly to fit to the device it's being viewed on.
- Build a Responsive Site in a Week: Designing Responsively (part 1)
- Build a Responsive Site in a Week: Typography and Grids (part 2)
- Build a responsive site in a week: images and video (part 3)
- Build a responsive site in a week: media queries (part 4)
- Build a responsive site in a week: going further (part 5)
- Developing a Responsive Website: Background Images
- Developing a Responsive Website Part 2: Navigation and Content
- Developing a Responsive Website: The Homepage Portfolio Slider
- Developing a Responsive Website Part 4: Finishing Homepage Portfolio Slider
- Developing a Responsive Website: The Footer
- Developing a Responsive Website: Secondary Page
- Developing a Responsive Website: Secondary Page Part 2
- How to Design a Mobile Responsive Website
- Building Fast and Responsive Websites
- Build a Responsive, Mobile-Friendly Web Page with Skeleton
- How to Turn Any Site into a Responsive Site
- Improve Your Responsive Design Workflow with Sass
- Create a Responsive Web Design Template
-
Media Queries
These resources will demonstrate how to use CSS media queries to design responsive web pages that adapt their layout according to browser width. They will also cover the syntax for using media queries within a single stylesheet.
- Create a Responsive Web Design with Media Queries
- How to Use CSS3 Media Queries To Create a Mobile Version of Your Website
- Responsive Layouts Using CSS Media Queries
- Techniques for Gracefully Degrading Media Queries
- Responsive Design and CSS3 Media Queries
- Adaptive Layouts with Media Queries
- Create an Adaptable Website Layout with CSS3 Media Queries
- CSS Media Queries & Using Available Space
- CSS Transitions & Media Queries
- How to use CSS3 Orientation Media Queries
-
Flexible Images & Grids
The featured section combines two blocks: tutorials with several approaches to creating responsive images and resources on making a basic responsive grid and responsive data tables.
- Responsive Image Gallery with Thumbnail Carousel
- Responsive images Using Cookies
- Fluid Images
- CSS Effect: Space Images Out to Match Text Height
- Responsive Images: Experimenting with Context-Aware Image Sizing
- Responsive Images Right Now
- Responsive Images Using CSS3
- Responsive images with ExpressionEngine
- Better Background Images for Responsive Web Design
- How to Build a Responsive Thumbnail Gallery
- Responsive Data Tables
- A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter)
-
Content, Typography & Video
If you are creating a responsive design, see how to make the type scaling to fit all line lengths or screen widths and how to make the embedded videos elastic.
Click the button to copy the code of a .jpg version of this infographic and be able to incorporate it into your page.
What's behind?
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.
