GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Responsive Design podcast
  • email newsletter
  • site is entirely on responsive design
  • Making Tables Responsive With Minimal CSS
  • responsive design - what it is and how to use it
  • Fundamentals of responsive images
  • ResponsiveViewer

This view

  • Original page
  • New address

GeezerVison is showing www.fullstackpython.com — Responsive Design

Full Stack Python
All topics | Blog | Supporter's Edition | @fullstackpython | Facebook | What's new?

Responsive Design

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

Three different screen sizes and devices with the same website that uses a responsive designt.

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 and accompanying email 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 and has many articles on how to achieve readability across devices.

  • Using Media Queries For Responsive Design In 2018 contains a bunch of great examples for how to use media queries to achieve a responsive design.

  • Making Tables Responsive With Minimal CSS 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 remains a definitive source for understanding why sites should be responsive.

  • Fundamentals of responsive images shows the code behind several ways to make your web images resize according to browser window size.

  • ResponsiveViewer 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.

What topic do you want to learn next?

I want to learn how to code a Python web application using a framework.

I've built a Python web app, now how do I deploy it?

How do I improve an app's user interface?

Table of Contents

1. Introduction 2. Development Environments 3. Data 4. Web Development Web Frameworks Django Flask Bottle Pyramid TurboGears Falcon Morepath Sanic Other Web Frameworks Template Engines Jinja2 Mako Django Templates Web Design HTML Cascading Style Sheets (CSS) Responsive Design Minification CSS Frameworks Bootstrap Foundation JavaScript React Vue.js Angular Task Queues Celery Redis Queue (RQ) Dramatiq Static Site Generators Pelican Lektor MkDocs Testing Unit Testing Integration Testing Debugging Code Metrics Networking HTTPS WebSockets WebRTC Web APIs Microservices Webhooks Bots API Creation API Frameworks Django REST Framework API Integration Twilio Stripe Slack Okta Security SQL Injection CSRF 5. Deployment 6. DevOps Changelog What Full Stack Means About the Author Future Directions Page Statuses ...or view the full table of contents.

Full Stack Python

Full Stack Python is an open book that explains concepts in plain language and provides helpful resources for those topics.
Updates via Twitter & Facebook.

Chapters

1. Introduction 2. Development Environments 3. Data 4. Web Development » Responsive Design 5. Deployment 6. DevOps Changelog What Full Stack Means About the Author Future Directions Page Statuses ...or view the full table of contents.
Matt Makai 2012-2022
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.