To Respond or Not to Respond

Old school isn’t cool anymore

Back when I was 12 and making killer webpages (by killer I mean mediocre), it was so simple. The bar was set pretty low. Scrolling marquees were cool. So were sparkly homemade gifs. Should we unnecessarily put an iframe on this page? Definitely. If you were good with photoshop, your website was probably going to look “super kewl.”

I have been out of the web design game for a while now but always knew that responsive web design (RWD) was becoming crucial, especially since almost everyone now has a smartphone or an iPad. Plus about 5 years ago I was at this party in Cologne and was bored from stuffing my face with Mettwurst – literally raw meat – sandwiches because I didn’t feel like being social, and I ended up sitting in a corner reading a book about the importance of design responsiveness. I found the little book to be quite fascinating. I also learned that eating over five raw meat sandwiches is an impressive and disgusting feat.

Fast forward to today: responsive websites everywhere. And those who haven’t upgraded (let’s pick up the slack government agencies…) can stick out like a sore thumb. An outdated, awkward thumb that I’ve opened in Google Chrome on my phone and I have to zoom in to properly read the content. Our big awkward thumbs aren’t meant to click around on website links made for a laptop cursor! They have better and bigger things to do, like double-tapping on friend’s wedding photos on Instagram.

What exactly is RWD and why should we care?

RWD is a way of approaching web design so that all code and images can respond to screen devices of any size. That way your website can look fantastic on a 20-inch display or smartphone. This is achievable using CSS grid layouts and styling, flexbox, bootstrap, and media queries to name a few tricks.

It’s important because technology and design are constantly changing, and having a responsive website lets you change along with it, but with minimal effort. Plus, can you imagine have several different versions of your website for different devices? Instead of having one website to maintain, you now have at least three. That’s not only time-consuming but also extremely difficult to maintain. And let’s not even get into all the quirks between different web browsers and how you need your website to look good on all of them. It might seem totally overwhelming (I’m hyperventilating as I type), but I am learning it is possible and there are resources out there to help.

Teach me your ways

I don’t plan on summarizing everything here, but I want to compile a list of great resources that even I can come back to once I start creating my own website. Resources for the technical and design side of things. Get excited, arianaberger.com is coming soon!

CSS Grid examples
https://gridbyexample.com/examples/

Test a website on different device sizes across breakpoints
https://material.io/resizer/

Beautiful blog designs for inspiration
https://www.awwwards.com/websites/blogging/

Play around with bootstrap by growing a carrot garden
http://cssgridgarden.com/

Tips for approaching RWD
https://99designs.com/blog/tips/responsive-web-design-key-tips-and-approaches/

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s