Web Designer’s Corner: Responsive Web Design

Posted in: Web DesignLeave a Comment

Written by Andy Girard, Web Designer

I’m writing this piece which is called “Web Designer’s Corner” and this is funny to me because I actually sit in a corner. Not a corner office (that would be sweet!), but just a cubicle in the corner of the office. It’s pretty quiet over here, but it keeps me focused and allows me to not be distracted when I’m trying to keep up with the ever changing internet. Seriously, I’m pretty sure that article I read yesterday is already out of date… something about HTML5… and I’m pretty sure I just saw an article today about HTML6. What?!?

It’s nearly impossible to keep up, but we have to try. Reading new articles and constantly experimenting with different web design techniques is all that we can do to keep our minds fresh. Just recently I’ve been paying more attention to user data within Google Analytics for my web site. I’m finding that so many people are starting to view sites with phones and smaller tablet devices like iPads. How should we deal with this? Should we be creating sub-domains (ie. mobile.websitename.com) for each type of device/screen resolution, or is there a better way to do this? Yes, there is a better way… and even though I’m slow to catch on about this, it’s definitely changing my thinking.

Responsive Web Design

I’m not going to get into the exact details of responsive web design, because I would basically just be re-wording everything that you’ll find in the resource links I’ve listed below. Here’s the basics though… Using media queries in CSS you can create different style sheets that are used based on screen resolution. Do you have a two or three column site? Well, make it so that the columns stack on top of each other when the resolution width drops below 500 pixels. That’s just the beginning though! With responsive web design you’re looking to make sure that all aspects of your site respond to the size of the screen that’s viewing your site. Maybe you’re saying, “That’s what fluid design does, and that’s been around for years!” It’s true, but responsive web design can do so much more. Think “fluid grids” and stop spending so much time figuring out exact pixel widths for columns and images… use percentages!

Does this all sound a little confusing to you? It’s possible, but take a look at any (or all!) of these sites and get up to speed on responsive web design:

I’m currently in the process of redesigning my own personal web site, but I’m trying to learn as much about responsive web disign as I can before I launch anything. I’m designing a general template at this point that I can hopefully use going forward as I build out more sites.

These days you can find so much information on the internet to help you learn the basics of web design or even more advanced techniques. Over ten years ago I started playing around with web design and have pretty much been self taught since then. A few years ago I also took a two year program at The Art Institute of Pittsburgh – Online Division, where I gained a lot of valuable information that has helped me get to where I am now. If you’re considering an online degree, be prepared to work. It takes discipline and dedication to make sure you get as much out of the program as possible… remember, you are paying for it!

Find more schools offering web design programs »

Leave a Reply