📝Parsons S22 – Responsive Design and Media Queries

Responsive Design

As a class, let’s look at a few examples of how designs change when you resize the browser. Find a website and make a few notes on how the design adapts to the window, for example:

Design Changes
  • Grid reduces from 2 columns to 1 column
  • Margins on left and right are removed
  • Typesize reduces for headlines

Design Changes
  • Images and type get smaller to fit into smaller width 
  • Navigation bar changes into a hamburger menu
  • Portfolio images become stacked on top of description blocks (instead of side by side) 
  • grid gets smaller, from 3 columns to 1.
  • elements from 2 side columns go into the middle, left side content goes before the right column content.
  • images become larger in proportion to the screen size.

  • grid changes into 1 column
  • text & image becomes smaller 
  • header & text goes from left align to center align 
  • The illustrations composition changing and reduce some illustrations.
  • text aligns changes to the center align
  • changes from 3 column grid into 1
  • header alligns to the middle
  • body of texts/content alligns to the middle
  • The text bar on the top disappears
  • The images become smaller
  • The contact information moves to the bottom part
  • Video thumbnails change from a 4 column grid to a single column grid
  • The side navigation bar disappears completely when in mobile window and can only be viewed when hamburger icon is clicked
  • The top navigation bar’s search bar disappears and only appears if search icon is clicked
  • 2 column grid on both views (3 column grid when moving?) 
  • however, column scales gets smaller for both left and right side
  • padding between two columns is small 
  • right column stationary (static)
  • left column continues with information and auto scale imagery
  • margins get smaller as well all around
  • content on page is stacked into one column
  • menu on the left disappears completely and the top menu is organized into three columns
  • all typeface sizes stay the same
  • filter and search options are removed
  • 3 to 2 columns
  • Resized cookies bar
  • Condensed single line header on mobile
  • topic/format/typeface filter options disappear
  • Footer categories stack
  • As the user compresses the window, the text rearranges to squeeze into any available white space
  • Once the user clicks on a text element, the window compression displays different phrases, in a smaller font size