title: Responsive Design
category: page
slug: responsive-design
sortorder: 0418
toc: False
sidebartitle: Responsive Design
meta: Responsive design is a method of using media queries in Cascading Style Sheets (CSS) to ensure a site is usable on all screen sizes.


Responsive design is a method of using media queries in 
[Cascading Style Sheets (CSS)](/cascading-style-sheets.html) to ensure a 
site is usable on various devices with different screen sizes, from very
small to very large.

<img src="/img/visuals/responsive-design.jpg" width="100%" alt="Three different screen sizes and devices with the same website that uses a responsive designt." class="shot outl rnd">

Full Stack Python uses responsive design to improve readability across
a broad range of devices that people use to read this site.


### Responsive design resources
* The [Responsive Design podcast](https://responsivewebdesign.com/podcast/)
  and accompanying 
  [email newsletter](https://responsivewebdesign.com/newsletter/)
  interview web designers who've dealt with creating responsive designs
  from both a blank slate and retrofitting into an existing site.

* This [site is entirely on responsive design](https://responsivedesign.is/)
  and has many articles on how to achieve readability across devices.

* [Using Media Queries For Responsive Design In 2018](https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/)
  contains a bunch of great examples for how to use media queries to
  achieve a responsive design.

* [Making Tables Responsive With Minimal CSS](https://uglyduck.ca/responsive-tables/)
  steps through a couple of ways to responsively handle tables.

* Smashing Magazine's article from 2011 on
  [responsive design - what it is and how to use it](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/)
  remains a definitive source for understanding why sites should be
  responsive.

* [Fundamentals of responsive images](https://www.lullabot.com/articles/fundamentals-of-responsive-images)
  shows the code behind several ways to make your web images resize according
  to browser window size.

* [ResponsiveViewer](https://chrome.google.com/webstore/detail/responsiveviewer/inmopeiepgfljkpkidclfgbgbmfcennb)
  is a Chrome plugin in that allows you to view multiple sizes and devices in the
  same browser window. This is a handy tool to avoid constantly flipping between
  tabs or resizing the same tab to see the changes you are making to a design.
