Loading...

📝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:

Teacher	Website	Design Changes
Nika	https://www.typewolf.com/	Grid reduces from 2 columns to 1 column Margins on left and right are removed Typesize reduces for headlines

Student	Website	Design Changes
Shravani	https://ayakaito.com/	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)
Ira	https://www.newyorker.com	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.
Andrea	https://imissmycafe.com/ http://imissmybar.com/	grid changes into 1 column text & image becomes smaller header & text goes from left align to center align
Rachel	https://cabinofcode.com/	The illustrations composition changing and reduce some illustrations. text aligns changes to the center align
Leslie	https://www.behance.net/	changes from 3 column grid into 1 header alligns to the middle body of texts/content alligns to the middle
Jieun	https://addbranding.com.br	The text bar on the top disappears The images become smaller The contact information moves to the bottom part
Olivia	https://www.youtube.com/	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
Zoey	http://designingwriting.com/	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
Sofia	http://velvetyne.fr	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
Alexander	https://fontsinuse.com/	3 to 2 columns Resized cookies bar Condensed single line header on mobile topic/format/typeface filter options disappear Footer categories stack
Veronica	https://www.youtube.com/watch?v=NhGFomee9bs Also This: https://www.seamirror.com/?utm_source=extension&utm_medium=click&%27utm_campaign=muzli	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
Surya