When I started blogging, I knew nothing about HTML or web design. So I decided to teach myself.
It took me about six months to redesign my website. During that time, I taught myself HTML basics, researched design, and learned how to make a cohesive look. (Note: you can probably teach yourself faster if you don’t have a child under the age of 1 sitting on your lap.)
I am not a web designer nor an HTML expert. But, with some patience and time, anyone can learn some basics. Here are a couple things I learned.
1. Go for a white background. Now, this is not a set-in-stone rule, but if you are like me and don’t have much experience in web design, I find that a white background is easiest to work with. Plus, I am a huge fan of white space. Looks clean to me. So no matter if you’re selecting a template or designing you site from scratch, you can’t go wrong with a white background.
2. Select a couple main colors. You will need a handful of colors (probably three) to use as your text color, blog post title color, link color, header color, etc… Choosing colors that look well together on the web is no easy task. At first, I thought, really, how hard can this be? I get dressed everyday, I match, how much more difficult could it be to select colors that coordinate? Well, it turns out, really hard. So, let the Internet help you. There are a variety of color pickers out there. Google something like “color combinations for web.” I used this tool here. These tools are incredibly helpful because they generate a pallet of colors that work together, providing you with some options.
3. Go for a two column layout. At first, I was all about the three column. Oh, I needed those three columns. Because…well…I didn’t know. I saw other bloggers with three columns, so I thought I should also create a three-column layout. Laying out three columns is hard. It can look messy faster than Kate can unroll a roll of toilet paper. And she is speedy. Go for the two-column layout instead. It automatically looks clean. Plus, your blog takes up one column, so there’s only one remaining column you need to worry about, rather than two.
4. Find a good template. If you are interested in building your own blog rather than using a template from Blogger or WordPress, find a template you like from Open Source Web Design. Now, just find a site with the layout you want – don’t worry about the colors, fonts, etc…you can change all that. I found my current design on OSWD, and I altered it from there. Since I am new to HTML, it helped me to have something to work off of instead of starting from nothing. Once I found the template I liked, I downloaded it and started messing around with the HTML. (For Windows users, you can use Notepad++ and for Mac users, you can use Komodo Edit to mess with the HTML code.)
5. Find a book book and a website. I started teaching myself HTML much the same way I teach myself most things. Through a book. I checked this book out of the library, and it provided me with a great foundation. Once I knew HTML terms and the basics, I knew what to Google to find more answers. That landed me on this site, which is great for refreshers. HTML is easy to learn, so flip through some manuals and Google some YouTube videos. Trust me, you can do it.
6. Don’t over design. Less is more, really. Especially for newbie web designers. You can always go back and add stuff in. Think about how someone brand new to your page might react. If a new, potential reader stumbled across your blog, would he or she be overwhelmed or intrigued? Along those same lines, no crazy fonts. Ugh, nothing is more frustrating than small or otherwise unreadable fonts, especially for the posts. Sure, use a fun (but still readable) font for your header. But keep your post text to something like Arial, Times New Roman, Currier, Calibri, or something along those lines.
7. Use web developer tools. There are no secrets on the Internet. Are you wondering what code I used to make portions of this site? Or the colors? Or the font? You can find out! And not just on my site – on any site! In Firefox, click “Tools,” “Web Developer,” and then “Firebug.” From there, you can open the Firebug in a new window, open the site you like in another window, and use the Firebug tool to call up the code for any website. In Internet Explorer, hit F12 to bring up the Developer Tools. No, I am not saying you should steal anything. Stealing is bad. But using the web developer tool is not stealing. These tools will help you learn more about how code works. Most of the time, you will be sad because what you once thought was a mystical Internet trick is nothing more than an image with a link inside it. Secrets of the Internet, demystified!
8. Think logically. When you think about what should go where on your page, think about what you want readers to see first. Prominently display your “about me” and “contact me,” as those are mostly likely the first things readers will be interested in reading. Then group other pages depending on content, like your “readers favorite posts,” “archives,” etc… Think about how you click through blogs and what you read first, second, third so you layout your blog accordingly (keep in mind, we read from left to right). Make sure no to burry something you really want people to read or else they’ll never find it.
So don’t despair, non-designers. You, too, can teach yourself and design your own site. Any other questions? Anyone else out there teach themselves HTML and design? What advice do you have?