Fun Skillcrush Responsive Design Activity

As discussed in a previous post I am currently making my way through the second course of my online WordPress bootcamp (Skillcrush), Responsive Web Development.  After learning enough of the basics in the first course to launch a static site (melindagordon.online), I knew that I’d have to finally tackle responsive design next and I was (a bit still am but less so) pretty intimidated.  In the first week Skillcrush introduced a simple exercise that made the topic a lot more approachable for me, and I want to share that with you.

The Skillcrush explanation in a nutshell is that the current approach is to design a site “mobile first.”  Basically create a site specifically for the smallest screen your users will have.  Then, use “break points” representing a jump in screen size like mobile to tablet, tablet to laptop, and laptop to desktop.  You modify your design as needed for the new screen type, translate it to CSS, and then stick it at the end of your existing CSS for mobile.  Set that segment of your CSS to kick in only when the user’s screen size hits a specified break point.  Rinse and repeat.

If you want to know what I am talking about just minimize your browser window so it looks the size of your smartphone, then stretch it out and watch things happen (assuming you are looking at a responsive site of course).

Anyway so to make their point clear they had us to do an activity where we divided the web page into different colored blocks and then change the blocks to a different set of colors for each of the major breaking points.  Very simple but also very cool for a newbie to get to see.  Here is my example:

Mobile

mobile

Tablet:

tablet-safe

Laptop:

laptop-safe

See how the “site” goes from one column, to two columns, to three?  This is something I had seen many times before with actual websites but stripping out the content and just looking at the colors made it seem a lot less scary – hope it does for you too!

Advertisements

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