Blogiversary IV: 9 Blog Coding & Site Design Tips

Since a bunch of you have requested it, I’m going to attempt to dole out some technical blogging / coding advice. I’ll admit I’ve been very hesitant to write this because I am very much an amateur myself. Asking me for web design advice feels a bit like asking your waiter to teach you how to cook. I can tell you the basic ingredients of what we’re serving, but things might get hairy if I’m asked to put together a menu. It’s really all just trial and error and a decent amount of googling around for answers. Note: yes, the following visual is a coding joke, hence the brackets.

Now that I’ve let my insecurities do a lot of the talking, I will say that I’ve mustered up enough technical prowess to design and operate this blog (of course Sherry has input when it comes to the look/function of things) with virtually no outside assistance (the only exception being our host’s customer service line and the occasional help from a friend or two when we can’t figure out why the heck we’re crashing). So I must be doing something right not totally wrong. But if you’re reading this as someone more amateur than me, please take my advice with a grain of salt. And if you’re more of an expert, please try not to laugh. And feel free to offer up other helpful suggestions for anyone looking for technical/coding tips.

With that said, let’s dive in.

MY BACKGROUND: This blog wasn’t my first dance with coding. Computer Science was a required course at my high school, so at age 15 I was taught C++ and a smidge of HTML (try if your high school wasn’t as geeky as mine). I don’t remember a lick of C++, but it did give me the basic understanding of how code works (and, more importantly, how it doesn’t work when something as little as one end bracket is missing). I used my minimal HTML skills to throw together some casual websites in high school (like this hilariously-embarrassing and hilariously-still-available Geocities site for my high school band French Horn section) but was never formally taught more complex languages like CSS, Javascript and who knows what else. So if it’s not already obvious that I’ve got some geek in my DNA, this photo should make it abundantly clear. Why yes my Dilbert sweatshirt does say “Technology: No Place For Wimps.”

THE CODE-FREE WAY: The beauty of blogging platforms like WordPress, Blogger, and Tumblr is that you don’t have to know any code to use ’em. Most of them make it easy enough that if you can write an email and upload a photo, you can blog. And that’s exactly how we started. We spent our first five months on a free account (screenshot below) where the extent of our “blog design” was sizing a header photo. So if you absolutely fear coding and designing, this may be the way to go for you.

BE FIND A GOOD HOST: We moved to a self-hosted blog in February of 2008 in order to have more design flexibility. That meant having a find our own host, meaning that our site no longer lived for free on WordPress’ servers but instead on a server that we found and paid for ourselves. We went to the WordPress-recommended BlueHost (that’s an affiliate link) who charged less than $30 a year at the time. Our site lived on a shared server with about 99 other small blogs (meaning that other sites lived there with us, which is why it was so affordable) for about a year. Until we grew too big (i.e. regularly crashed the entire server… taking all 99 other sites down with us… oops). So BlueHost gave us the boot and we did a fair amount of research and landed at LiquidWeb (that’s an affiliate link), where we have our own dedicated server and some great customer support. It’s a far cry from that $30 a year price that we started with (try adding two zeros), but it’s all part of the deal when you’re as fortunate as we are to grow like we have.

OH YEAH, HOSTING IMAGES TOO: When we switched to LiquidWeb, we took some advice from others and also decided to host our images elsewhere – which reduces the load on one single server and can defray some of the cost. We briefly tried Flickr and Photobucket (since they were free or nearly-free, and we’re cheap) but after several complaints about those sites being blocked at certain workplaces (not that any of you read blogs at work, right?) we decided to transfer to a paid host: Amazon S3 (which we saw some other larger sites using successfully). Over time our number of photos grew along with our traffic… and so did our cost for image hosting (this sounds crazy to type, but we pay tens of thousands of dollars a year just to host our images). But again, hosting expenses are just part of the whole full-time-blogging thing, and we’re always grateful to “see” you guys… so we wanted as many people as possible to be able to access our pictures. You know, since they’re kind of the best part.

ESTABLISH A THEME: A theme is what dictates the look of your blog (colors, layout, fonts, etc). WordPress has lots of built-in themes, or you can go find your own (they’re not always free, though). And if you’re really ambitious, you can make your own. But I’m not that ambitious, so we just found a theme that we liked and tried our hand at customizing it. Ours is a free theme that’s called “WP Premium” and we learned of it through Nicole at Making It Lovely. Our two sites are examples of how one theme can be customized to create two totally different and unique looks (we both still use the same template with different customizations). So find a theme that has the basic functions that you’d like in your blog – something with a certain number of columns, a specific kind of navigation, a traditional look that you like, or even a magazine-style theme (like Layla & Kevin’s blog) and start there (that way there’s no coding from scratch involved).

STYLING: If your theme is like ours, it relies on Cascasding Style Sheets (aka CSS). It’s a file (or files) that dictate how your site looks when it loads. So rather than me having to manually code our blog titles to be a certain size and color each time, the theme knows to reference my style sheet each time and follow those guidelines. Our theme has two style sheets, one that guides the size and placement of elements on the page (i.e. make the sidebar this many pixels wide and this far to the right of the main content box) and one that dictates images and color (i.e. all embedded links are blue). I didn’t know CSS before blogging so my technique to customizing the style of our blog was basically “change some code, see what happens.” A lot of times it would have wonky results (“woah, the menu bar suddenly disappeared”), but gradually I figured out the cause and effect of my coding tweaks. And slowly but surely I worked towards a custom look. There are some great CSS lessons at if you want to learn some coding specifics.

AN IMAGE IS WORTH A THOUSAND CODES: Obviously not everything on a website is number and code. Actual graphics (like a headers or sidebar icons) are a big part of the design too. Giving advice on Photoshop is a whole ‘nother topic, so I leave it at this: get yourself some good photo editing software, specifically one that makes it easy to adjust colors and sizes (in pixels, specifically) and save in a variety of formats (like web-reduced JPG and transparency capable GIFs or PNGs). Obviously we’re fans of Photoshop (we own Adobe Creative Suite), but we hear that sites like Picnik are good alternatives. Beyond that, just be sure you’ve got a way to upload your images. Your host may have built-in FTP software or you can Google for a version to download.

TRIAL, ERROR, AND GOOGLE: The “change some code, see what happens” is pretty much my best advice for coding as an amateur. Sometimes the easiest way to understand what a bit of code does is to alter it, and observe the consequence. Just be sure to save the original code somewhere so you’re able to undo it easily. When I get really stuck, I turn to Google. Just Googling the mystery code (and I mean literally copying the code into the search box) can turn up some enlightening results – message boards, support forums and even sometimes literal definitions of the code in question). WordPress itself has some great forums and even a Codex that breaks down what all of their code and functions mean, including some tips on altering them.

PLUG IT IN, PLUG IT IN: You can also amp up the function / customization of your site with Plug-Ins, which are free add-ons to a WordPress blog that you can usually download from right within the WordPress dashboard. They can add cool widgets to your sidebar, increase the functionality of your posts, and even help your site run faster (like our much relied upon W3 Super Cache plug-in which keeps us from crashing all day, every day). But plug-ins can also bog down your site too (like when yesterday’s polling plug-in overwhelmed our site to the point of ahh-we’re-craaashing four frustrating times in a row). So it’s always preferable to hard-code these types of functions where possible (if we knew that plug-in would fail ahead of time we would have tried to hard-code something else). If hard-coding is too hard (har-har), just learn to live with less of them (the ones that really matter) to avoid gray-hair-inducing emergencies like unexplained loading errors and full-on site crashes.

GET HELP: At some point you’ll get stuck. Everyone does, no matter how brilliant they are. So it’s always good to have some places to turn. These are my favorites:

  • Google (as I already mentioned)
  • Support Forums (specifically WordPress’ – though responses aren’t always quick)
  • Technical Support (I rely on LiquidWeb for help with my server since we pay them a pretty penny and they’re known for their hands-on customer support)
  • Twitter (there are lots of smart people out there if you’re willing to make a public cry for help)
  • Other Bloggers (if you see something you like on someone else’s site, try asking how they did it – sometimes it’s as easy as sharing the code, but other times it’s not really something that can be easily passed along)
  • Paid Support (sites like WP Help Center can give you some paid help, or – in my case – I’ve hired some local experts/friends when I’m really stuck on why our site is inexplicably crashing).

So, there you have it. Hopefully that was helpful for those of you who were interested. I’m sure there are lots of specific questions floating around that I didn’t cover (my answer would probably be “try changing some code and see what happens, or google it!” since that’s usually my go-to method). But again, if you’re an expert – feel free to weigh in with advice for anyone interested! Wait, but one question first: who had a super sweet Dilbert sweatshirt like mine? Come on, I know somebody did. And I hope you also took the opportunity to rock it with stonewashed jeans and a bowl haircut a la Ninth Grade John.


  1. says

    John, that horns page is the cutest thing I’ve ever seen. Penquins. Aw.
    Thanks for the tips. Glad to see everyone else learns things from a bit of trial and error plus a lot of google too!

  2. says

    Ah… I remember my middle school days when it was cool to have a website on Angelfire or to have an online diary (I think that was live journal, but probably not). I was a nerd, too. I used to have so much fun playing with HTML (basic, of course) but this all seems pretty advanced now. I sort of want to upgrade my blog so I can edit the HTML but that’ll be post wedding.

    For your polls, do you make the coding for those yourselves or do you use another site to generate them??

    • says

      We used a plug-in called WP-Posts that we’d been using for a couple of years, but something about yesterday (maybe higher volume that before?) made it not work so well.


  3. says

    Did we already know you went to TJ? It’s probably a bit of an exaggeration to say that I almost married someone from there, but not enough of an exaggeration that I don’t feel like I seriously dodged a bullet (not because of TJ itself — great school, obviously — but because of the specific person). Just thinking about it makes me a little queasy. And not in a good way.

    • says

      I’ve probably mentioned it vaguely before, but since I’m sure it’s not a universal reference I don’t “name drop” it very often. :)


      PS: Sorry about the bad seed / dodged bullet.

    • says

      Yeah, I knew a handful of people from TJ because I went to college in Virginia (Sweet Briar, near Lynchburg), but it probably wouldn’t mean anything to me otherwise.

      [FYI, fellow readers, it’s a really, really good magnet school, and the fact that John went there means he’s REALLY smart. And despite the picture above, there’s a good chance he was only of medium geekiness relative to the rest of his class.]

      As for my dodged bullet…I don’t think I’d go so far as to call him a bad seed. More like a not-right-for-me seed. But he seems to be happily married to someone else, as am I, so all’s well that ends well, right?

  4. says

    Oh man. Coding. The word alone makes me shake in my boots. I had to take a fair number of coding classes to get my degree and if it weren’t for some really helpful friends I never would have made it.

    That being said, thanks for the tips! I’ve been dabbling in CSS for about a week now in order to make the Little House a little more personalized and was stuck on one line of code. I just tried Googling the exact line (can’t believe I didn’t think of that before)and viola! It worked.

  5. Anya says

    I did not have a Dilbert sweatshirt.. I actually only became a fan of Dibert when I became an engineering working in a cubicle.. I love Dilbert now.

    And I love your bowl-style haircut. That’s the same style my brothers had from Grade 1-8, I think.. the only way they liked my mom cutting their hair. Hilarious! I’m glad you’ve all stopped rocking the bowl haircut.

    • says

      Here are my best guesses: fishing or biking imagery, typography jokes, website logos, Justin Bieber (since he seems to be taking over the world) or back to comics.


    • says

      Ugh! I had a student wear an “I Want To Marry Justin Bieber” shirt today during school pictures. Seriously, 20 years from now, is that what you want people to see? :-P Other than that, loving your style guesses!

  6. says

    When I started customizing my CSS, CSSEdit (a Mac app) was a lifesaver – you click on buttons instead of writing the code, and then see the code right there on the left so you slowly learn. It’s a pretty cheap app, too! (about $30 I think, totally worth it for me)

  7. says

    A company I used to work for sent me to a day seminar on html coding since I like design and was working on their internal website. Then when I got my own blog and it was css I went “what the what?!” but it was such a good background to have. I’m with you, I just sort of code and see what happens. I also use Firebug to mess with the code (without actually messing with my code). Then, if I like what I did I save my original stylesheet.php first and then copy over the new stuff and boom – done.

    I limit how much I upload straight into my backend of the ftp because it weirds me out. I’m looking more and more into it though.

    As far as other editing software, people should check out the freeware Gimp (like photoshop) or Inkscape (like Illustrator). I’m a diehard Inkscape fan since I love designing in vectors (at a total beginner level) and it’s free. Just know if you want to use .eps in it, you’ll need Ghostscript which is a whole different bag of tricks to install and change some hard code on your actual computer. It’s not as scary as I just made it sound though.

    My one question is, when you redesigned your site, how did you do it without the entire redesign showing up as you played around?

    • says

      We made a test site (I created a test subdomain on our site that other folks couldn’t see because it was a hidden sub-url) and just copied the theme and played around with stuff on the test site until we liked it and then transferred it over to our real blog late one evening after a few weeks of playing with it. Hope it helps!


    • says

      You can also use what’s called a localhost. You download one itty bitty program (different for mac and windows) so you can play with your site normally but it’s all local (not truly online.) The url would look something like this – http://localhost/younghouselove. All the files you use are the same so when you’re ready you just upload it to your server.

    • says

      Thanks guys, I appreciate it. I looked into both options and I think the sub-domain one will be easier for me. For some reason the localhost just looked more complicated (though maybe if a pro explained it to me I’d get it in no time, I’m sure it’s not as difficult as my brain is expecting it to be). In the mean time I’ll do the sub-domain, copy my files over, and mess around.

      Here’s to crossing your fingers I don’t crash my entire site. Speaking of that, I think I’ll back it up before I do anything.

    • says

      Ha! So cleverly disguised, eh? You probably won’t see much going on there. We used it to make our big site change and probably won’t do much to it ’til its time for another site redesign… maybe in four years? :)


    • LauraC says

      Oh my! Hilarious test site! Favorite test post is, ” . . . One, two, three, . . . Can I get a four?”. Don’t know why it’s so funny, but it just struck a funny bone . . .

Leave a Reply

Your email address will not be published. Required fields are marked *