9 Journal Coding & Site Design Pointers, gathered in one list

Since a bunch of you have requested it, I am going to attempt to dole out some technical blogging / coding advice. I will admit I have been quite hesitant to write this because I am quite 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 are serving, but things might get hairy if I am asked to put together a menu. It is truly all simply 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 have let my insecurities do a lot of the talking, I will say that I have mustered up sufficient technical prowess to design and operate this journal (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 assist from a friend or two when we cannot figure out why the heck we are crashing). So I must be doing something right not totally wrong. But if you are reading this as someone more amateur than me, please take my advice with a grain of salt. And if you are more of an expert, please try not to laugh. And feel free to offer up other helpful suggestions for anyone looking for technical/coding pointers.

With that said, let us dive in.

MY BACKGROUND: This journal was not 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 W3Schools.com if your high school was not as geeky as mine). I do not remember a lick of C++, but it did give me the basic understanding of how code works (and, more importantly, how it does not 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 is not already obvious that I have 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 do not have to know any code to use ’em. Most of them make it straightforward sufficient that if you can write an email and upload a photo, you can journal. And that is exactly how we began. We spent our first five months on a free Wordpress.com account (screenshot below) where the extent of our “journal 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 Wordpress.org journal 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 is 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 whole 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 is an affiliate link), where we have our own dedicated server and some strong customer support. It is a far cry from that $30 a year price that we began with (try adding two zeros), but it is all part of the deal when you are 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 chose 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 are low-cost) but after several complaints about those sites being blocked at certain workplaces (not that any of you read blogs at work, right?) we chose 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 simply to host our images). But again, hosting expenses are simply part of the whole full-time-blogging thing, and we are consistently grateful to “see” you folks… so we hoped as many people as possible to be able to access our pictures. You know, since they are kind of the best part.

ESTABLISH A THEME: A theme is what dictates the look of your journal (colors, layout, fonts, etc). Wordpress has plenty of built-in themes, or you can go find your own (they are not consistently free, though). And if you are truly ambitious, you can make your own. But I am not that ambitious, so we simply found a theme that we liked and tried our hand at customizing it. Ours is a free theme that is 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 distinct and unique looks (we both still use the same template with distinct customizations). So find a theme that has the basic functions that you’d like in your journal – 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 journal) and start there (that way there is no coding from scratch involved).

STYLING: If your theme is like ours, it relies on Cascading Style Sheets (aka CSS). It is a file (or files) that dictate how your site looks when it loads. So rather than me having to manually code our journal 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 did not know CSS before blogging so my technique to customizing the style of our journal was in short “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 strong CSS lessons at W3Schools.com 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 straightforward 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 are fans of Photoshop (we own Adobe Creative Suite), but we hear that sites like Picnik are good alternatives. Beyond that, simply 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 fairly 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. Simply be sure to save the original code somewhere so you are able to undo it easily. When I get truly stuck, I turn to Google. Simply 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 strong forums and even a Codex that breaks down what all of their code and functions mean, including some pointers 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 journal that you can typically download from right within the Wordpress dashboard. They can add cool widgets to your sidebar, increase the functionality of your posts, and even assist your site run faster (like our much relied upon W3 Especially 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 are-craaashing four frustrating times in a row). So it is consistently 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), simply learn to live with less of them (the ones that truly matter) to avoid gray-hair-inducing emergencies like unexplained loading errors and full-on site crashes.

GET Assist: At some point you will get stuck. Everyone does, no matter how brilliant they are. So it is consistently good to have some places to turn. These are my go-tos:

• Google (as I already mentioned)
• Support Forums (specifically Wordpress’ – though responses are not consistently swift)
• Technical Support (I rely on LiquidWeb for assist with my server since we pay them a fairly penny and they are known for their hands-on customer support)
• Twitter (there are plenty of smart people out there if you are willing to make a public cry for assist)
• Other Bloggers (if you see something you like on someone else’s site, try asking how they did it – sometimes it is as straightforward as sharing the code, but other times it is not truly something that can be easily passed along)
• Paid Support (sites like WP Assist Center can give you some paid assist, or – in my case – I have hired some local experts/friends when I am truly 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 am sure there are plenty of specific questions floating around that I did not cover (my answer would likely be “try changing some code and see what happens, or google it!” since that is typically my go-to method). But again, if you are an expert – feel free to weigh in with advice for anyone interested! Wait, but one question first: who had a especially 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.

Update – Some of the most frequent requests that we get are for info about professionally blogging (how we made our site, how we grew our following, how we make money, etc) so we shared all of the details about how we began a journal, grew our traffic, and turned it into a full time job.