Thursday, August 15, 2013

My Journey with Mobile First: Hidden Superpowers
(Part IV)

Initially, as an outsider to the mobile first and responsive web design world, I thought those concepts would greatly increase my work load. After all, we're talking about designing for multiple devices, right?

The truth is, though, that I find mobile first web design so much fun. In addition, it possess certain aspects that give me some web designer "superpowers."

So without further adieu, here are three reasons why I love mobile first and responsive web design (RWD):

1. It's Just Dang Fun!

Why do I find mobile first so enjoyable? Well, until recently, designers would create a fabulous design for one medium - the PC. And that was all well and good. But now, via RWD, we can also create variations of that same design to shine on tablets and mobile phones as well.

Not to mention, people can now view our designs anywhere and anytime they choose!

I mean, come on a designer, that's just cool!

2. Responsive Design = Easier Design

When it comes to the mechanics of RWD, I've found that certain aspects actually make my job more simpler and more efficient:

  • All Hail the Fluid Grid

    Responsive platforms such as Bootstrap (my personal preference) are built on a fluid grid system. As you probably already know, grids are an age-old technique used to create a visual and structural balance within a design. Websites are no exception. However, with Bootstrap, your layout is literally coded using a fluid grid system.

    This might not seem life-changing. But, personally, I've found this technique to be so much smoother than floating columns and stacking divs. Also, because of the Bootstrap code, you can easily offset columns and make other changes.

    Which brings me to my next point...

  • Your Work Is Done For You

    The Boostrap files include all the basic CSS coding you need; you simply have to implement the proper HTML mark-up to get things rolling.

    To make things even easier, Boostrap offers a Customizer on their website, allowing you to adjust the basic CSS to include specific fonts, colors, and the like. Then you simply download the files and viola! Obviously, additional adjustments will still be required. But the Customizer is definitely a time saver.

3. Take That, Awful Design!

As monitor sizes have increased over the years, so has the width of websites. As a result, clients (and thus designers) have felt the pressure to fill every square inch of real estate - often leading to crazy, off-putting designs.

Designing for mobile first, however, requires considering what content is truly important. This naturally lends itself to a cleaner design. It also gives designers a firm foundation to stand on with clients when it comes to selecting content.

These are only a few reasons why I love RWD and mobile first. Coming up next week, we'll dive into the nitty-gritty and take a close look at top three RWD frameworks.