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

Staying Engaged: User Experience Book Club

adas-safe

I try to keep how I learn to code varied so that I can stay engaged.  It can be a bit tough sometimes trying to stay motivated when you are learning online alone on nights and weekends.

Luckily I live in Seattle and there are plenty of opportunities for me to go out into the world and keep learning in 3D.  I am going to be trying one of those opportunities for the first time this month – attending a User Experience (UX) book club meeting at a local technical bookstore.  I have been to Ada’s several times to browse or work (there is a cafe inside the bookstore).  I really love the space and I was thinking that it might be fun to try out one of the book clubs they advertised.

Recently I noticed that the upcoming book for the UX book club is about responsive design:

responsive-design-safe

This is perfect timing because I’ve just started my second course with Skillcrush (Responsive Web Development).  Funnily this book is not available in the bookstore so book club instructions were to buy directly from A Book Apart.  They gave you a discount if you bought a second book so I took the deal:

adasbuytwo-safe

Because I am a sucker like that.

The book is short (160 pages) so I’ll be reading through that while I work along with Skillcrush.  If you’ve read this book or another book in the A Book Apart series (it has a tagline of “Brief books for people who make websites”) I would love to hear from you!