Breakpoints Pt. II

Responsive Web Design Fundamentals >> Lessons >> Building Up >> Breakpoints Pt. II

 

A Visual Comparison of Each Breakpoint

 

SKINNY TIES

Mobile Design

  • Smallest size
  • 1 column

Screen Shot 2016-05-31 at 11.07.58 AM.png

 

488 x 605

  • 1st breakpoint
  • 2 columns

Screen Shot 2016-05-31 at 10.53.26 AM.png

 

> 690

  • 2nd breakpoint
  • 3 columns

Screen Shot 2016-05-31 at 10.54.03 AM.png

 

> 915 

  • 3rd breakpoint
  • still 3 columns
  • text size larger and clearer to read
  • images grow larger and easier to see

Screen Shot 2016-05-31 at 10.54.09 AM.png

 

 

CNN

  • more complicated responsiveness than Skinny Ties

 

Mobile Design

  • Smallest size
  • Hamburger icon drop down menu in top right corner
  • Social media icons under main story

Screen Shot 2016-05-31 at 10.54.24 AM.png

Screen Shot 2016-05-31 at 11.15.18 AM.png

 

> 725

  • Social media icons gone, unless hover
  • Minor breakpoint (only a slight layout change)

Screen Shot 2016-05-31 at 10.54.30 AM.png

 

> 800

  • Hamburger drop down menu disappears
  • Navigation items appear as more room on page

Screen Shot 2016-05-31 at 12.14.51 PM.png

 

>935

  • Huge layout change
  • Added sentences on right side
  • Description moves to right

Screen Shot 2016-05-31 at 10.54.48 AM.png

 

>960

  • Now can see more top stories listed on right side

Screen Shot 2016-05-31 at 10.55.17 AM.png

 

> 1024

  • Ad appears on right above additional stories

Screen Shot 2016-05-31 at 10.55.38 AM.png

 

Advertisements

Author: ajoannaproject

Studying Udacity's Full Stack Web Developer program and passing on my improvements, hints, hacks, and updates to other students via ajoannaproject.wordpress.com.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s