Bootstrap: When A Shortcut Isn't Short

Recently, I've been working on a website for a client.  No big deal, right?

Here's the problem:  I'm not a great coder.  I can design fairly well, but the actual implementation is a weak point of mine.  So, after warning my client that it will be slow-going while I brush up my coding skills, I started to tackle the process of updating my knowledge of HTML and CSS.

Starting, as so many apparently do, with W3Schools, I quickly reached a point where I wanted to go faster than I should.  I was getting impatient.  And, as impatient people often do, I started to look for shortcuts.

Enter Twitter Bootstrap.

Over and over again I read testimonials from website professionals who claimed that Bootstrap only requires a basic knowledge of HTML and CSS.  Bootstrap would get rid of the repetitive elements inherent in building a site from scratch.  It saves you from having to reinvent the wheel by providing modular elements like buttons, carousels and a grid-based system that anyone can learn quickly and easily.

All of this is true.

But, I quickly learned as I experimented with the framework that it didn't replace or accelerate my understanding of how to actually build a website.  I still found myself frequently asking "Why didn't that work?" when I previewed my code.  Ultimately, I realized that Bootstrap wasn't saving me time because I didn't fully grasp the fundamentals of website development.

This brings me to my point:  don't take shortcuts when it comes to learning.  Learn everything you can about the topic at hand.  Often, shortcuts are designed for people who already know the limitations, quirks and benefits inherent in whatever it is they're trying to do.  Shortcuts don't help you learn... they actually prevent the learning process by skipping over the mundane, repetitive or fundamental elements in favor of getting to the good stuff.

I've gone back to straight HTML5 and CSS3.  I've been making nice breakthroughs here and there by studying and experimenting all the time.  My client's site is coming along nicely.  And, I'm guessing that I'll probably understand Bootstrap a heck of a lot better by the time I've finished coding a whole site from scratch.

Does Responsive Design Have To Be So Boring?

So, I've been tinkering with responsive web design for the last 10 days.

It's not that difficult to pick up the concepts.  In fact, HTML5 and CSS3 seem to be much easier and more semantic than past iterations ever were.  Not that HTML was all that difficult to begin with.  Throw in the Bootstrap framework and suddenly I'm feeling pretty accomplished!

Unfortunately, I'm noticing that all of the responsive and flat designs out there seem to look very similar to one another.  It doesn't appear to be the fault of the tools.  It seems like there's something else going on.  I'm still an amateur at all of this responsive stuff, but am I the only one who's noticing the cookie cutter look?

It seems like designers are shying away from using images as design elements.  Boxes don't have textured borders or gradients.  Decorative image elements are few and far between.  Images seem to stand alone... big, fat images that span the entire screen, or slideshows that highlight portfolio items.

Even logos on these websites are often text only.  Selectable text provided by Google Fonts or Typekit... these aren't really logos in my opinion.

The better designed sites are the ones that use images to break free of the grid, or gracefully transcend it.  Grid design is obviously beneficial to web development, but it doesn't have to be so obvious.  Putting an image in a box doesn't mean that image has to look like a box.  We can still make overlay images the same color as our backgrounds to create irregular or diagonal shapes, wave elements or textured borders.  We can even allow those elements to scale so that they're responsive.

I'm going to try to create web designs that think outside the box.  I'd like to respect the grid but not be restrained by it.  Responsive design doesn't have to be boring.