new and improved, for your web-surfing enjoyment

posted in: technical things | 0

I have a habit that might seems strange to a lot of people. In the past six years, I’ve moved four times. And every time I move, one of the FIRST things I have to do before I can relax and feel at home in my new place, before I even unpack clothing and kitchen utensils and whatnot, is dig up the boxes with all of my wall art, photos, paintings, candles, knick-knacks, etc and decorate the house. My priorities may seem completely wacky to the casual observer, but to me it makes total sense. To be happy, and relaxed, and sane, I need to like my surroundings. I need my environment to feel like it’s MINE. Until that happens, I can’t properly focus.

What does that have to do with anything? Well, in the last week since I posted on International Talk Like a Pirate Day, I’ve been hard at working giving megandowntherabbithole a mini face lift. I had been keeping a list of things on my site that I wanted to tweak when I had time, and the list started getting too long for me to happily ignore. After a couple weeks of nice steady artistic output and putting up images on my RedBubble site, I wanted to “decorate” the space that is my website. If I didn’t, all the little things I wanted to fix would seize up my brain and leave me unable to function. Or something like that.

A couple of the changes I made (if this kind of thing bores you, feel free to skip this part):

  • Revamped the header a bit. I took the name of my site out of the area above the header, and incorporated it into the header artwork itself

  • Jazzed up my links page to make it more visually interesting. Who wants to read a long boring link list? The best part about doing this was that I learned how to do image mapping, which has been on my personal “to learn” list for quite a while

  • Standardized the site’s color palette

  • Redesigned the link buttons on the sidebar. After three days of blood, sweat, and tears (I’m almost kidding), I figured out how to make the buttons change when moused over. I can’t even TELL you how many online tutorials I read, and how many different methods I had to plod through before getting this to finally work. I don’t know if it’s WordPress or what, but it was NOT easy so please, please, PLEASE play with those rollover buttons and revel in their transparency-changing glory, so I can feel like all the time I spend was worth it. Okay?

  • Adjusted various spacing issues throughout the site

  • Redesigned the Facebook and RSS icons to better match my overall look

  • Jazzed up the photo on the “about me” page (this may be changing again soon. I want to find an actual photo of myself to use instead of a painting, but I can’t find one I like. I much prefer being behind the camera to in front of it, but I may just have to suck it up and take some new photos)

I’m finally starting to feel like each page of the site has something interesting and unique on it, and that it’s doing a much better job of reflecting me and who I am. It’s looking like I site that I would want to spend time looking it. As much as I complained and stressed out through both semesters of web design, tweaking this site on my own, without the pressure of deadlines or grades, is a great learning experience. I feel like I’m finally getting a decent handle on CSS, and I’ve discovered that through online tutorials and forums, you can discover the answer to almost any website dilemma out there if you’re willing to look long enough. The thing is, not every solution works on every site, so it really is a lot of trial and error until you get it right. It’s a lot of work, but I’m not ashamed to admit how deliriously happy and fulfilled I felt when I finally got those rollover buttons to work!

One things I want to mention for anyone else out there who might be struggling with their own website design, is Firebug. It is the Best. Thing. Ever.

screen shot explaining Firebug's features
Here are just a few of the many helpful features...

Maybe I’ve been living under a of rock, but I had no idea how great and easy to use this tool is. I’d seen it mentioned before in the WordPress forums, but I never bothered to actually Google it and see how it works. All Firebug is, is a Firefox plug-in that takes only seconds to download. Once it’s installed, you can look at the HTML and CSS of ANY website by right clicking on an element (let’s say, a navigation bar) and selecting “Inspect Element” from the menu. Then it breaks down for you CSS and HTML for that element in an area at the bottom of the page.

You can even go into that space and experiment with making changes to the code which then shows up right there on the page! These changes aren’t permanent, and you do have to actually go into your own page files to save them, but it’s a FANTASTIC way to experiment. You get to see what potential changes will look like without the risk of messing up your entire site, and without hour upon hour of trial and error trying to target that bit of code you have to change to get your desired change. If you want a better explanation than I can give, check out this. I WISH I had known about Firebug when I was in school…you have no idea the amount of crying, swearing, and sleepless nights I could have spared myself (I wish I was kidding).

Just another helpful PSA, from yours truly.  :)