I’m Flexible, And You’re Not: Responsive Design, Take One

(This post is in reference to this site’s former design in 2013. And not it’s current design.)

It’s here! It’s here!

My new home is complete. Welcome.

I first registered my domain a year ago. That being prior to having any web design or coding experience, I used a premium wordpress template. I was ecstatic, thrilled, and ran around shouting “Oh Em Gee! You totes gotta check out my new site, yo!” Okay, not really (but kind of). Having your own website for the first time is pretty exciting. I don’t care who you are, you know you want to run around like a crazed schoolgirl, shouting, tweeting, facebook spamming, and mass texting the world so everyone knows about your newfound web presence. Admit it.

But moving forward, I finally took a web design course in the Fall of 2012. I thought I was such hot stuff since I “already had web experience” at this point. WRONG. My rinky-dink wordpress powered site was not “web design.” I didn’t create that template, I didn’t spend an insane amount of hours coding php. I paid for a template, installed it, uploaded some pictures and said “aww look how pretty.”

After the course concluded I was determined to eventually design my site, myself. The idea of walking up to someone and calling myself a web designer, but then immediately following that up with “buuuuttttt….. I kinda, sorta didn’t design my site you’re viewing right now. Hehehe,” just seemed completely shameful. As I prepared to design my new home, it hit me, RESPONSIVE (this is when a ray of light shines down on your face while doves gently float towards you and that ominous choir “ahhhhhhh” moment happens. Oh isn’t it beautiful).

For all of those who aren’t familiar with what responsive design is, I have a short exercise for you. Take the corner of your browser (and God I hope it’s not Internet Explorer, if it is, SHAME ON YOU! Download Google Chrome right now and do something nice for yourself for a change). Okay, so take the corner of your browser and slowly move it inward making the browser smaller and smaller. Watch the magic happen. Fun right?!

Responsive design is a major buzzword among designers and clients right now. And its core concept is something that should not be taken lightly. With the rapid increase in mobile internet users, it is important to be aware of how your content is viewed and received across various screen sizes. While some companies may choose to address this issue by having a standard site accompanied by a mobile site, responsive design is a more fluid approach and ensures the user will have the same experience across devices.

With that in mind, as I set out to redesign my site, I knew I had to tackle it head on. I knew a responsive site was something I would want to have experience with and to have in my portfolio. So, I ordered a book that would give me a strong foundation and understanding of CSS3 and HTML5.

Early on as I read through and tried out examples, the process was fun, new, and exciting. Widths were converted from pixels to percentages, text were converted from points, images became fluid, and media queries were set for specific dimensions. I was in nerd/graphic design/web design heaven. It all made sense and was coming along nicely.

I really wanted the site to have the best layout possible for each screen size. I tried various widths and various media query checkpoints before I found the combination that worked just right no matter what screen the site is viewed from. When designing a site that is under constant manipulation to accommodate the device on which it is being viewed, it is incredibly important to be certain that the readability of the content does not suffer as a result.

As the process went on, there were some factors that caused minor difficulties, but in the end were all resolved. Now that the site is complete (for now), I am so excited to share it with the world. The decision to make the site responsive was definitely a necessary one. And also now that my website is my own, I don’t have to walk around full of shame and sadness, so that’s fun.