The personal blog of a self proclaimed nerd and quite notoriously bad artist.
I apologize for the lack of posting lately, but as it stands, nothing much is happening on my front here. As soon as things begin to kick up once again, I’ll bounce back with some more for you guys.
Just hang in there. Something’s bound to happen soon.
It’s official: the beta version of my first tutorial is complete. Why is it a beta version? Because I’m not sure if it’s non-technical enough for a lot of people to understand what I’m saying. The test run will probably come tonight or tomorrow night when I show it to my wife and (hopefully) let her write her first web page.
In any case, it’s done, and at the moment, that’s relief enough. After completing the tutorial and fitting it to my own site’s design, the total size weighed in at 28 KB without loading the style sheet. I have to admit, that’s a bit lengthy even for me. Hopefully, though, it’s the kind of lengthy that’s good. I want to be sure that I’m thorough, and that what I’m saying can be understood by the average computer user.
That said, I’m going to try to post the tutorial here in its entirety. Seeing as it was originally written with my own site’s design in mind, it might look a bit odd here on WordPress. We’ll just see how that pans out. So, without further ado, here’s my tutorial in its current infantile state:
So, you want to design your own website, or maybe all you want to do is modify the website you already have. Perhaps you’ve made a site using Microsoft Word, or a similar product that doesn’t require you to know any code at all but wanted to know what’s going on behind the scenes. Over the course of this tutorial, I plan to show you how to write and modify your own basic HTML code.
But what’s HTML code? HTML is the basic building block of almost every website in existence. HTML is involved in some way, shape, or form in any website you view online. It’s even the building block for the majority of the help files contained in most commercial programs. But what is it?
HTML is a coding language. In a sense, HTML truly is a language in the sense that it tells the computer what you want it to do. You want to make your text bold? HTML tells your web browser to make your text bold. Or purple, or big, or small, maybe you want it on the right side of your screen instead of the left… HTML tells your web browser how to do all of these things and a whole lot more.
HTML is an abbreviation that stands for “Hypertext Markup Language.” Right now, you do not need to know what all of this means. All you need to know at this point is that HTML is a language that you use to tell the web browser what you want it to do, much like any spoken language is used to convey information. Now you just need to know how to speak it, in a sense.
Ah, but where to begin? Start by opening up any basic text application. In Windows, your ideal application would be Notepad. For Macintosh users, I recommend TextEdit.
FOR WINDOWS USERS:
To open Notepad, simply click the Start menu and select Run. A dialog box should open telling you to type the name of the program you want to run. Type in “notepad” and click OK. Notepad should open for you.
FOR MACINTOSH USERS:
Find the icon on your dock for Finder and click on it. On the left side of the Finder window should be a list of places for you to go. Click on Applications and find the TextEdit application. Double-click on it to open TextEdit.
So you have your application open. Now what? Well, now it’s time to start with the fun stuff.
The first thing you have to know about HTML code is that everything on your page should be contained in a tag. Tags define starting points and ending points for anything and everything on your page. HTML on its own does not know when you’ve started one paragraph or ended another; you have to tell it that you have. Notice that earlier I said everything should be in a tag… but it doesn’t have to be. HTML is very forgiving of small mistakes, but it’s still a good idea to go ahead and start building good habits now before the bad ones have a chance to sink in.
The proper syntax for a tag is as follows: a starting tag starts with a less-than sign (<), the name of the tag (html, for instance), and ends with the greater-than sign (>). Ending tags add a slash before the name of the tag. Let’s see what these look like:
<html> – Starting tag for the “html” element.
</html> – Ending tag for the “html” element.
The very first tag in any basic HTML document is the HTML tag. This tells the browser that you are writing a page in HTML. This should almost always be the first line of any HTML document that you write, and the HTML end tag (</html>) should always be the last tag of your document. Type these into your blank file and then save the file as index.html (for Windows users, I recommend saving your file in My Documents or for Macintosh users, saving it in Documents for quick reference). The .html file extension lets your operating system (Windows or Macintosh) know that this file is a web page. What you should have in your document right now should be the following:
<html>
</html>
Now open your file with your web browser. The easiest way of doing this is to double-click on the file. Not much there, huh? Actually, the page should be completely white. HTML tags are not displayed in your web browser. All they do is tell the web browser what you want to do with the information contained inside of them, and seeing as you have nothing inside of your <html> tags, there’s nothing to do. So the page is white. Now let’s experiment a little with the paragraph tag.
The paragraph tag is represented thusly: the starting tag is <p>, and the ending tag is </p>. Anything within these two tags is considered a paragraph. So, let’s write our first paragraph. Remember that this is HTML information, so it has to go between your two HTML tags. Now your document’s code should look something like this:
<html>
<p>This is my first paragraph written in HTML!</p>
</html>
Let’s take a look at our page again. First save your index.html file, and if you still have the page open in your web browser you can simply click in your web browser’s window to activate it and hit the F5 key to refresh the page. If not, double click on the file once again to open it. Now you should have some fairly ugly text on the screen that says what you wrote in your paragraph. Try writing a few more paragraphs this way, save your index.html file and refresh the page by pressing F5.
If you entered your code correctly you should notice that each paragraph is separated from the previous one; there is a blank line between them. If your paragraphs do not do this, make sure that you have started each paragraph with the <p> tag and closed each paragraph with the </p> tag. After fixing your code, save your index.html file once again and refresh your browser. Make sure that you save your index.html file each time you make a change to it so that your web browser knows that it has been changed.
Now you know how to start an HTML document (with the <html> tags) and write a few basic paragraphs with the <p> tags. But what more can you do with HTML? A whole lot.
But before I start diving into some more HTML code, there are a few things that need to be said about the general practice of HTML coding. Firstly, you may have noticed that all of the HTML tags so far have the same name for both their start tags and end tags (<html> and </html>, for instance). The only difference between the two is that the end tag has a slash in it before the tag’s name. This is always the case! There are only a few HTML tags that don’t have an end tag, but all of the ones that do have an end tag that matches their starting tag. The <p> tag is always ended with </p>.
Secondly, you may have noticed that all of the HTML tags are written in lowercase. This is technically unnecessary. You can write HTML in all capitals if you want to, but it’s a good general practice to write them in lowercase. You can even write them in any combination of lowercase and uppercase, but this serves no purpose and simply makes your code harder to understand and, more importantly for you, write.
And last but certainly not least is the fact that HTML is used to convey meaning. For example, technically the <p> tag is not necessary, but it’s important because it conveys the meaning of a paragraph. These days it is bad practice to use HTML to make your website look pretty; there’s another coding language for that called CSS. HTML is there to make your website organized, not beautiful. Until you learn about CSS I recommend that you not try to make your sites look really nice, but rather focus on their organization. Think of HTML as an outline, if you will. CSS is what makes it look good, so don’t even worry about what it looks like right now. Throughout these tutorials I won’t even cover the HTML tags that only exist for presentation to make things easier to understand.
Now that I’ve gotten that out of the way, I think it’s time for us to learn a little more HTML! As I said in my last paragraph, HTML is used to organize information. If all you have are paragraphs, it’s a little difficult to organize, don’t you think? So on that note I will introduce HTML headers.
Headers are used to name sections of your site, thus making them more organized. For example, let’s say that you want to make a personal website. Maybe you want a section for current events at home and work, a section for your favorite books and movies, and one last section for your pictures. This is what HTML headers were designed for.
There are six levels of HTML headers, and they are represented thusly: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The <h1> header should only be used on your site once! For this reason I recommend using the <h1> tag to name your page. Here’s how I might start writing a page for myself:
<html>
<h1>Welcome to my website!</h1>
<p>Hi there, and welcome to my website! My name is Kevin Owen. This is my personal website, so feel free to poke around and see what's going on in my life!</p>
</html>
Try writing a level 1 header for yourself and provide a short description of your site in a paragraph. Once you’re finished make sure to save your index.html file and refresh your browser so you can see the changes. The first thing you should notice is that the <h1> tag makes the text within it much larger than a normal paragraph! If all of your text seems to be bigger, make sure that you properly closed your <h1> tag with its end tag, </h1>.
Each level of header in HTML gets smaller and smaller in text size. A level 6 header (<h6>) is the smallest header, and is actually smaller than the normal paragraph’s text size. Please note that it’s generally good web design practice to only use the headers in order. You can use as many <h2> to <h6> tags as you want on your page, so you don’t have to feel restricted when using headers. Also make sure to remember that headers are there to keep your page organized. Going back to the example of a personal website, here’s how I might code mine:
<html>
<h1>Welcome to my website!</h1>
<p>Hi there, and welcome to my website! My name is Kevin Owen. This is my personal website, so feel free to poke around and see what's going on in my life!</p>
<h2>Current Events</h2>
<p>Here are the things going on in my life right now:</p>
<h3>Current Events at Home</h3>
<p>My daughter, Aidan, just recently learned how to use a straw. This is so wonderful, and certainly makes feeding her much easier now than it was before! She just amazes me every day.</p>
<h3>Current Events at Work</h3>
<p>I'm really starting to get a feel for the place now. I've only been working here for a couple of months now, but I'm already starting to feel like I know the place! It's a good feeling, I'll tell you that. Getting lost for the first two weeks was no fun at all.</p>
<h2>My Favorites</h2>
<h3>Favorite Movies</h3>
<p>My favorite movies right now are Black Hawk Down, Cold Mountain, American Beauty and End of Evangelion. Call me artsy, but I love them all.</p>
<h3>Favorite Books</h3>
<p>Lately I've been reading a lot of books on how to write better code. My favorites right now are Essential PHP for Web Developers and Fresh Designs for Web Designers. I'm a nerd, I know!</p>
<h2>Pictures</h2>
<p>Uh oh... I don't have any pictures yet!</p>
</html>
Whew… now I know that took a little while to do, but go ahead and save your index.html file and refresh your browser. Take a look at your page now! Looks a little better, right? Certainly more organized than if you didn’t have headers! If your page doesn’t look how you expected it to, make sure that all of your tags are opened and closed properly. The life of a web designer is one of trial and error, so make sure you save your pages often.
At this point you may have noticed that there’s nothing under the Pictures header, seeing as we don’t know how to add images to our web pages yet. You also may have noticed that all of our tags so far have both starting and ending tags. The next tag that I am about to show you, <img>, does not have an end tag. This tag allows you to add images to your web pages.
The <img> tag requires a bit of explanation. The more technical may notice that the <img> tag can’t possibly know what image you want. All it does is tell the web browser that you want an image, but there doesn’t appear to be a way to show the browser what image you actually want. Now it’s time to introduce attributes.
The simplest way to describe an attribute is that it supplies more information to a tag. Attributes come in many different forms, but all of them serve the same general purpose: to provide more information about a tag. In the case of the <img> tag, the src attribute points to an image to be displayed. The abbreviation src is shorthand for “source.” To make things simple, I recommend that you place any images you want for your web page in the same folder that you have your index.html file saved. In my case, I placed my index.html file in My Documents on my Windows XP laptop and in the Documents folder on my Macintosh. Place any pictures you want on your web page in the exact same folder that your index.html file is.
In order to display an image on your page you need to type in the <img> tag with the attribute src pointing to your image. Here’s an example of what the <img> tag would look like for a picture titled pic1.jpg:
<img src="pic1.jpg">
Notice the syntax for an attribute. It goes after the name of the starting tag (img) and before the less-than sign for the starting tag followed by an equals sign and, in the case of the src attribute, the name of the picture surrounded in quotation marks. Anything in between the quotation marks is referred to as a value for its attribute. In this case, the value for src is pic1.jpg. You could read the tag above as saying “the source of this image is pic1.jpg.”
Also notice that the <img> tag does not have a closing tag. There is no need for one, as there is no information to be enclosed. It’s simply an image. Try adding some images to your page now. Remember to make sure that the image source you type in is exactly the same as the image’s name in your folder, including spaces! Now save your index.html file and refresh your browser.
If you included more than one image in your page, you may notice something. Images don’t space themselves out like paragraphs do. Each time you start a new paragraph, a new line is automatically started for you leaving a blank space in between your new paragraph and the old one. Images don’t do this; in fact, they’ll display directly next to each other, no matter how you type it in your text editor. Press Enter as many times as you want, but those images will be right next to each other. Now we’re going to have to force a line break with, you guessed it, an HTML tag.
The <br> tag forces HTML to create a new line. When you start and end a paragraph HTML forces line breaks for you, but for some tags (like <img>) there is no line break. So, we have to force it down. The <br> tag is another HTML tag that does not have an end tag, as it does not require any information. It simply forces a line break. In fact, br is shorthand for “break.” So let’s try this out. If you only have one image for your page you can still try this out by simply using the same image twice. Let’s take a look at what the code might look like:
<img src="pic1.jpg"><br>
<img src="pic2.jpg">
Try this code on your page, save the index.html file and refresh your browser. That’s much better, isn’t it? You can use the <br> tag at any point in your page to force the line down, even in the middle of a paragraph. This comes in handy in those situations where you need fine control over the way your information is presented.
There are still a few things to show you about your HTML page before this tutorial is complete. Most notably, you may have noticed while viewing your web page that it has no official title; your web browser just shows the path to your HTML file instead of an actual title at the top of the window. There is a quick and easy way to add a title to your web page, but it requires a minor restructuring of your current page.
The tag for giving your page a title is the <title> tag; however, this tag cannot be used just anywhere on your page. As you may recall, the <html> tag is used to define HTML information. Within the <html> tag there are two other commonly used tags. These are the <head> tag and the <body> tag, used to define HTML heading information and body information respectively. The body of your HTML document is where all of your code that will be displayed is stored. The heading contains information that isn’t necessarily displayed, but is used by the browser nonetheless.
Knowing this, let’s restructure our page accordingly. The <title> tag belongs in the <head> tag, and everything else goes into the <body> tag. Let’s take a look at what our HTML might look like now:
<html>
<head>
<title>Welcome to my website!</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>Hi there, and welcome to my website! My name is Kevin Owen. This is my personal website, so feel free to poke around and see what's going on in my life!</p>
<h2>Current Events</h2>
<p>Here are the things going on in my life right now:</p>
<h3>Current Events at Home</h3>
<p>My daughter, Aidan, just recently learned how to use a straw. This is so wonderful, and certainly makes feeding her much easier now than it was before! She just amazes me every day.</p>
<h3>Current Events at Work</h3>
<p>I'm really starting to get a feel for the place now. I've only been working here for a couple of months now, but I'm already starting to feel like I know the place! It's a good feeling, I'll tell you that. Getting lost for the first two weeks was no fun at all.</p>
<h2>My Favorites</h2>
<h3>Favorite Movies</h3>
<p>My favorite movies right now are Black Hawk Down, Cold Mountain, American Beauty and End of Evangelion. Call me artsy, but I love them all.</p>
<h3>Favorite Books</h3>
<p>Lately I've been reading a lot of books on how to write better code. My favorites right now are Essential PHP for Web Developers and Fresh Designs for Web Designers. I'm a nerd, I know!</p>
<h2>Pictures</h2>
<img src="pic1.jpg"><br>
<img src="pic2.jpg"><br>
<img src="pic3.jpg">
</body>
</html>
Save your index.html page once again and refresh your browser. If you used the <head>, <title> and <body> tags correctly you should see that your page now has a title in your web browser’s title bar and all of your information is displayed correctly on the page inside of the <body> tag. If the page isn’t displaying in the way you expected, make sure that you have properly opened and closed all of your tags. Always be sure that the <head> tag is closed before starting the <body> tag, and be sure that the <body> is closed before closing your <html> tag. A basic template for almost any web page under the sun is as follows:
<html>
<head>
<title>This is the page's title</title>
</head>
<body>
<p>This is where the page's content goes.</p>
</body>
</html>
Notice that in the above example I made an extra space between the <head> and <body>. I did this to make the code slightly easier to read. HTML does not care if you have empty spaces like that in your code; it just ignores them. In some cases, such as keeping your code organized, this is great. In others, it’s not, such as when you really want that empty space there. This is where the previously mentioned <br> tag comes into play.
In any case, these are the absolute basics of HTML. There’s still a lot to learn, but now that you’ve read this tutorial (and hopefully understood it), you should know the essentials of how to write your own web page from scratch. The next tutorial, Linking Your Pages Together, shows you how to create a web site from any number of web pages by linking the pages together, as well as showing you more hints and tips about how to write correct HTML.
Thank you for reading!
Below I have some of my favorite monochrome web-safe color palettes for my own designs. I’m not sure if anyone will find this interesting or helpful, but I’m posting it anyway in the hope that someone else can use it to good effect.
Honestly, in this day and age, there’s not much of a reason to use the web-safe palette. So why do I insist on it? As I’ve said before, my motto is simplicity. The web-safe palette is very easy to work with and it condenses your CSS code, even if only just a little. For example, instead of typing in color: #FFCC99; you can code it like this: color: #FC9;. Like I said, it doesn’t condense much, but when you’re working with style sheets, every little bit of space you can save will eventually keep you from getting a headache.
In any case, here are my monochrome palettes. Enjoy.
Web safe shades:
#FFF #CCC #999
#666 #333 #000
Earth Monochrome:
#FC6 #C93 #960
Sun Monochrome:
#FC0 #C90 #F60
Crimson Monochrome:
#C33 #933 #600
Lavender Monochrome:
#C6F #93C #609
Steel Blue Monochrome:
#9CF #69C #369
Sky Blue Monochrome:
#39F #06C #036
Aqua Monochrome (honestly, I don’t like this one, but it’s here to be complete):
#6FC #3C9 #096
Grass Green Monochrome:
#9C6 #693 #360
Olive Green Monochrome:
#CF6 #9C3 #690
And there you have it, my top ten (if you include the grayscale) color palettes for web-safe coloring. These colors always appear the same on any monitor with the ability to use a color display regardless of OS. There are 216 total colors in the web-safe palette. Some people say that these colors are just plumb ugly, and while I agree with that on many points, I still think that the palette can be used effectively. Its use of highly saturated colors makes it pop out on the screen, which can be a great thing when used sparingly.
In any case, there’s my personal palette. This is just the monochrome palette that I commonly use, and by no means does it cover all of the colors that I use in my designs. This is simply a great starting point for me. I hope that it proves useful to someone out there.
As an example of my school of design, I present to you the code for a site that I designed in under two hours. Keep in mind that there are no images as of yet, and as such there is still a significant amount of work to be done on it, but having said that, this is how a lot of my code looks when I’m finished with a design. I follow the school of simplicity.
Edit – A quick note here: this site is currently only twelve KB in total size, five of which are used in the index.html and style.css code.
Here is the HTML code [index.html]:
<html>
<head>
<title>Natural Order, providing feeder and pet mice for sale in North Carolina!</title>
<meta name="Author" content="Kevin Owen">
<meta name="keywords" content="natural order, feeder mouse, pet mouse, feeder mice, pet mice, feeder mice in nc, pet mice in nc, mouse breeder in nc">
<meta name="description" content="Natural Order is a service providing both feeder and pet mice in Chapel Hill, NC.">
<meta name="robots" content="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=StyleSheet media="screen" href="css/style.css" type="text/css">
<link rel=StyleSheet media="print" href="css/print.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Natural Order</h1>
<p>Feeder and pet mice for sale in North Carolina</p>
</div>
<div id="nav">
<ul>
<li>[<a href="#">Home Page</a>]</li>
<li>[<a href="about.html">About Natural Order</a>]</li>
<li>[<a href="order.html">Order Online!</a>]</li>
</ul>
</div>
<div id="content">
<h2>Section 1</h2>
<p class="desc">Put a brief description of this section here.</p>
<h3>The <code><p class="desc"></code> Element</h3>
<p>Following this simple paragraph is a quick, down and dirty explanation of the <p class="desc"> element. Don't worry about how to do this just yet, I will explain it to you when the need arises (before the site actually goes online so that you know how to edit it before it goes live).</p>
<p class="desc">This type of paragraph can be used at any point for anything that you want to stand out on the page. It can even be used for images, although I'm going to create another class that centers those on the screen with footer text. For now, though, use this class for anything that you want to stand out or as a section descriptor.</p>
<h3>Section 1, Part 2</h3>
<p>Content for Part 2 of the first section (the second instance of the <h3> tag).</p>
<p><b>Sample content:</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Section 2</h2>
<p class="desc">Describe section 2 for a moment.</p>
<h3>Section 2, Part 1</h3>
<p>Continue with information about this part of the second section (Part 1 because it is the first instance of <h3> within the second <h2> section).</p>
<p><b>Sample content:</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><br>
<div id="footer">
<p>Site design © 2008 <a href="http://www.aavidesign.com/">Aavi Design</a>. All of our websites are validated by the <a href="http://www.w3.org/">W3C</a>. Content © 2008 <a href="#">Natural Order</a>.</p>
</div>
</div>
</body>
</html>
And here is the screen media CSS (located in the “css” subfolder) [style.css]:
body { color: #000; background: #FFF; font-family: sans-serif; font-size: 80%; text-align: center; min-width: 50em; }
div { width: 50em; text-align: justify; }
#wrapper { margin-left: auto; margin-right: auto; }
#nav, #header, #footer { text-align: center; }
#header p, h1 { display: inline; }
#header p { color: #999; }
#footer p { color: #999; font-size: .75em; border: 1px dashed #CCC; }
#footer p, p.desc { margin: 0 2em 0 2em; padding: .25em 1em .25em 1em; text-indent: 0; }
#nav ul, #nav li { display: inline; list-style: none; }
h1,h2,h3 { color:#C00; }
h1 { font-size: 3em; }
h2 { font-size: 2em; border-bottom: 3px solid #CCC; }
h3 { font-size: 1.5em; border-bottom: 2px dashed #CCC; }
p { text-indent: 1em; font-size: 1em; }
p.desc { background: #EEE; border: 1px dashed #CCC; }
a { color: #C00; text-decoration: none; }
a:hover { color: #F00; text-decoration: underline; }
Tell me what you think of the code structure and such, and please tell me what more I can do to make sure that the page stays the same in all browsers. The only one that I can’t really test is Internet Exploder 6, which I know can be a minefield for trouble. At the moment, this site works equally well in Mozilla Firefox, Internet Exploder versions 5.x and 7, Apple Safari, and Opera.
So, now that I’ve got about twenty pages worth of total crap written up here I’ve decided to network a little bit. So, what do I mean by that?
What I mean is that I’m trying to get in touch with people that have similar interests or goals, ones that match mine. It never hurts to know more people who are interested in the same things you are, which happen to be (at the moment) HTML, CSS, Javascript, and PHP for me.
At the moment I’m perusing the WordPress posts that have been published regarding web design in the hopes of finding other designers who share my concepts in terms of general web design. So far I’ve found two other users who have sparked my interest, and I’ve left comments in both of their blogs. Hopefully, they’ll get in touch with me sometime soon.
I don’t necessarily mean to shove myself onto other people, although I’ve found that I hand out my contact information on a fairly regular basis and still my inbox is empty every day. I’m looking for people who actually want to keep in touch, who want to network. Perhaps that wording is a little too nerdy; I want people to be friends with, to talk to about various things. Honestly, I don’t have too many in my personal life. It’s just my nature; I’m a hermit.
I didn’t mean for this to become some self-deprecating post about my social life. In all honesty, I’m much happier now than I have been for a long time. Things are going well for me, for my family in general. I simply need some other people to talk to about the things I’m interested in. As much as I love my wife, Kayla, she is simply not interested in code. She’s not that interested in computers in general, which leaves a large bit of my expertise out of the conversation. That’s not her fault in any way; that’s simply how it is.
But in any case, I’m just trying to get my name out there a little bit. Hopefully some people will get in contact with me soon. Hopefully.
I hate to say this, but I’m switching up once again.
I thought that I had found bliss in Google’s Blogger service, but once again I seem to have found something much nicer and far more elegant: WordPress. I have to say, I’m impressed, and as such, I’m moving once again.
I realize that it’s getting difficult to follow my tracks online, but I promise that this will be my home base for blogging from now on. I swear it. If I move again, kick me. Really, do it.
So, having said that, it appears that I have attracted an interesting web design opportunity. There is a small company head quartered in Cary, NC that specializes in dealing with environmental engineering and technology called VEETech, P.C. Apparently, part of their company was bought out and they got stuck with a website that they can’t possibly manage. You can tell just by looking at it how miserable it is. In fact, here’s a link to it. Check it out for yourself.
This design goes completely against absolutely everything I stand for in web design.
Now, at the moment VEETech is trying to attract the attention of other web designers as well as myself. There’s a kind of design auction
going around. Fortunately, I have something of an inside source. Anthony, my supervisor (and partner in crime), does IT work for VEETech, mostly hardware related. He’s on good terms with them, and as such has already put in a good word for us (we’re now partnered up for Aavi Design).
It looks like this may go somewhere. Hopefully, somewhere big.
So, that being said, I’ve already created a very basic layout for VEETech which is, I believe, much better than their current design. Legions better. An entire universe apart. Now all I need to do is get in contact with someone there at VEETech so that I can show them what I’ve done and what else I can do for them. Hopefully, I can actually visit them myself with my trusty portable hard drive (the one I store all of my web design projects on), plug it in, and have them navigate the site I’ve built for them right then and there.
Ah, but what’s the catch? The catch is that VEETech wants to be able to update and maintain the site themselves. They want to be able to upload their own files and use them, but apparently none of them know HTML. So, how should I go about enabling them to update and maintain their site? Currently, I’ve cleaned up the HTML code to the greatest extent humanly possible. I’m hoping that I can teach at least one of their employees how to modify the site to their liking, but if that’s not possible, my options start to become very limited.
At the moment, I can’t write a WYSIWYG HTML editor. That’s above my head, deep waters. What I was thinking was giving them my contact information and doing one of two things: option A, I can maintain the site for them for a given monthly fee; or, option B, they can e-mail me a Word document or Excel spreadsheet with what they want and I can copy/paste it into their site.
Neither of these options is particularly good for me. Sure, maintaining their site for a fee is a possibility. I’d much rather have that than having them e-mail me for the slightest change with an enormous Word document. But honestly, I think that I can teach at least one person how to code the absolutely minimal amount of HTML necessary to create their own content. Most of the code is in the CSS anyway. It should be fairly easy just to update the code required, and they can always e-mail me if they think that they can’t handle it.
But in any case, things are looking up from the design perspective. Hopefully I’ll have some more work to do in the coming months….
Lately I’ve been browsing the internet in the hopes of finding more useful information for my web design and programming. Really, I’m starting to notice more and more that I really do know more than I once thought I did. I may not be able to do extremely advanced coding, but I can write advanced HTML and CSS and I have an intermediate knowledge of Javascript and PHP. MySQL is a little bit shaky, but I’m looking to correct that.
So, in my searching, I found a design company called Roaring Aardvark which is also based in North Carolina. I decided to do a search for “web design in nc” on Google and theirs was the first site to appear. I noticed a few things about this site at first glance. First and foremost, I noticed that they are quite good at designing appealing layouts. Very good, in fact. Secondly, they’ve made their moderately sized site pretty easy to navigate for the average user. Third, I took note of the fact that they offer a ton more than I possibly could.
So I started thinking. How can I possibly compare to a design service such as this one? Sure, they actually have a development team which consists of more than two people, but how many people really notice that when they’re looking for a design? I’d be expected to provide just as much work as a five-person team. So, I’ve started thinking about how to focus on my strengths. I took a look at Roaring Aardvark’s source code, and immediately noticed that it’s not easily navigated, and once again, they use excessive Javascript for functions that can be performed with CSS (although with a little out-of-the-box ingenuity).
Now I know some of the things I should focus on in terms of selling myself. I write simple, easily modified code. Everything that I write is written for maximum accessibility, meaning that (hopefully) anyone with a web browser should be able to see it and have it make sense. Or hear it, even. I write code that can very quickly be changed on the fly either by my customers or by myself if need be. I don’t (or “won’t” I should say at this point) charge close to $1,000 for a website with graphics unless it really is that intense.
So, I plan to sell myself as a web designer for people who don’t have that kind of money but still want those kinds of results. I may not be quite as flashy, but really, is flashy what you want? Don’t you want people to stay with your site rather than just say “wow” and move on to the next colorful thing that flashes by their screen? This all comes down to content. I plan to offer web design that fits around the content, not replaces it.
Maybe it’s a lofty goal. Maybe not. At this point I just want to see what I can do for people, and if they’re satisfied enough with my work that I can make this into a real source of alternate income.
Anthony is going to be bringing me some contact information for a friend of his who wants a design tomorrow. I suppose this will be my first real test. Let’s see how I can do.
It’s been six days since my last post. Yes, I’m weak, I know.
Lately I’ve been perusing the internet for other websites offering design services (of which there are quite a few) and I’m starting to see more and more that a lot of designers really don’t know how to separate their content from their style. Many don’t even seem to have a solid grasp on HTML and CSS in general, or simply don’t care that their sites may be inaccessible to a fairly large number of people.
This is the number one most common mistake that people make when designing websites, in my own personal opinion. They fail to separate the content from the design, choosing to focus on how good the site looks rather than what’s actually on it. For this reason I’m choosing to focus primarily on the design of a page and allowing the client to choose their own content. After all, I’m being hired as a designer, and I want to make sure that my designs focus on the presentation of content rather than style. I can design pages that look great and still deliver all of the content desired in a quick, highly efficient manner focusing on the ease of the browser to navigate through the pages and find all the information that is required. Many sites like to hide information scattered throughout numerous subpages, whereas I like to keep as much information on one page as possible without making that page seem too large to read through.
It seems to me that many designers don’t adequately take into account the fact that most people are not web designers. They generally won’t gawk at your coding proficiency, they just want to get the information they need and go on. Many people skim websites instead of actually reading them, thus providing the importance of utilizing the header tags. People will skim down the page looking for the header that catches their attention, then proceed to read that section as long as it captivates their attention.
This is what I want to do for people: I want the client to supply their own site content, but allow me to present it in such a way that it becomes more readable to the average customer or browser to ensure that more people stay with the site longer (or, in the case of small businesses, ensure that the site and what it offers is “sold” to them). I want to succeed where numerous other designers invariably fail.
Essentially, I want to put less focus on how beautiful a page is and instead focus on how well its information is presented. By no means does this mean that a page won’t be beautiful; I simply want to make everything accessible. Some people still use 56.6 KBpS modems, so why litter your site with unnecessarily large images just to make it look pretty? Be conservative. Save as much bandwidth as possible and still make it look good.
Now, slightly off-topic (but still on it), I recently sent an e-mail to my dad, Dutch. I was just asking him for the same information I’ve been trying to get from everyone else: how, exactly, should I charge for my services? He answered it, and swiftly, I might add. It seems that for the moment what I’m going to do is price my services on an hourly basis rather than a fixed price. I’ve always thought this made more sense, honestly, but was told that some people don’t want to pay by the hour simply because it implies that the person doing the work will take a more leisurely pace just to earn more money. I can assure you, I wouldn’t.
Lately I’ve been testing my ability to make site designs on the fly, and I’ve found that I can design a decent website (without graphics) in under four hours, easily. Graphics, obviously, add to that time, though not as much as I first imagined. I’m fairly quick with Adobe Photoshop, and while I may not be an expert with it, I certainly know enough to get things done quickly and still manage to make them look good.
So, once again, this post is mostly rambling about bad design and what I can offer instead. Maybe I’m trying to sell myself a little here, getting used to the idea that I’m really not bad at what I do (I actually think I’m quite good at it, myself), and getting used to the idea of letting other people know that. I’ve never been too great at displaying my strengths, and so now I’m trying to do so. I’ve already sold myself to Anthony (who believes I’m perfect for his design ideas) and I’ve almost convinced Mr. Wood, another co-worker who happens to be quite picky.
Maybe I’m onto something here. Now I’m starting work on the design and content of my own website (pre-graphics, of course). Perhaps when I’m done I can post the code for it so others can see what I do and how I do it. One of the things I want to do is write tutorials for people who have never coded HTML and may not know much of anything about their computer so that they can design their own simple websites or modify the code that I’ve given them.
I really want to do this, and I really want it to work. And for once, I think that it will.
– Liverbones
I’ve just recently thought of something in terms of the design work that I want to eventually get into… how much money should I charge people? I don’t want to undersell myself, but at the same time I don’t want my prices to be unreasonable for my target group (mainly individuals or independent businesses). How should I charge them? Hourly? I know I’d hate to pay someone by the hour because I’d expect them to slack off a little just for the extra pay. On the other hand, if I charge flat rates, I might end up working on a site for a few days while earning the same exact pay as a site I designed in a few hours. Do I charge people based on their requests? That requires a more thorough understanding of pricing in general than I currently have.
I need to make it so that I can actually cover my own expenses while at the same time providing people with a relatively cheap service. I don’t necessarily want to become the flea-market of web design, but I don’t want to be the Nordstrom’s either.
This is a serious problem for me. I don’t understand very well how much other designers charge (though I often see figures in the thousands), and therefore don’t very well understand how I can sell myself. I understand marketing and Search Engine Optimization, at least to an intermediate level, but that does me no good if I can’t decide on what exactly I’m going to charge for my services.
Now, I have a lot of experience with HTML and CSS, and an intermediate knowledge of PHP and MySQL. I’ve handled domains before, more than a few times, and I know how to use FTP like a charm. I can set people up with their own sites, I can code and design for them, I can do a lot of things at a more advanced level than most.
You know, I’ve seen a lot of web design companies that just… aren’t good. Period. The company that I worked for before I came here to UNC Hospitals, Strawbridge Studios, has a website that was designed by a fairly expensive web design group. All they did was use one of their standard templates and paste in the site’s content, which was provided by Strawbridge’s marketing team. They didn’t have to do much work at all and charged the company roughly $2,000 for it (this was according to the IT manager). I thought that was completely insane. I took a look at the source code, and it was a total mess.
See, a lot of designers are still living in the “internet dark age,” as I like to call it. People still use tables to position the content on their sites, and the website for Strawbridge Studios is a good example of that. Completely pointless JavaScript is thrown all around the site where CSS could have provided the exact same functionality with a lot less confusing code and much cleaner page source in general.
People, wake up. Tables are for data, they are for tabular data, not to make your site look mighty spiffy. Use a combination of CSS, the <div> tag and the <span> tag for your positioning. Don’t use JavaScript for simple page navigation (which doesn’t work in all browsers, by the way) just expand the margins or padding of your anchors to cover the entire area you want to be a link. The Strawbridge website does all kinds of things improperly. When run through a validator, such as the one available through the W3C, each page comes up with roughly 100 errors. Sometimes more.
Now, when I was working for Strawbridge, I offered to redesign their site so that it would look exactly the same (polished slightly) but look much neater in terms of source code and load faster on older dial-up modems. The IT manager there, Max, agreed to let me redesign the site. I did this for free when the company that sold them the design charged them almost two grand.
They never uploaded my redesign (which had both the HTML and CSS validated to zero errors and was tested in IE, Firefox and Opera) and later in the year laid me off in the middle of December.
Alright, so I realize that this entry just became a long rant about my old job and bad web design. What I’m trying to get at here is that a lot of larger web design companies charge way too much money for the sub-par work that they produce. I want to be that web designer who designs for a relatively low price with a much higher quality of work. I want people to tell their friends about me and what I do.
Now I just need to find that golden number. How much money is too much? How little is too little? I used to charge $20 per hour. Now I don’t think charging per hour is such a good idea, so how should I go about charging?
I need some major help on this absolutely vital decision, and I need it as soon as possible so that I can start designing pages for people to build up my portfolio.
Honestly, I’m not expecting anyone to comment on this post but please, tell me, what would you pay to have a personal website made for you to your specifications? I need to know, for my peace of mind if for nothing else.
I went in to work today carrying nothing more than my black leather jacket and a yellow lunchbag filled with chicken noodle soup, and yet somehow left with a brand-new laptop.
Okay, so maybe it was brand-new when Windows 3.1 came out. But that’s beside the point; now I have a laptop with Windows 3.1 on it, and it works like a charm! Well, I have to admit, when the AC adaptor is plugged in it does. The battery’s completely depleted.
It’s like the nerd in me has awakened once more. I closed out Windows, and by God, there was a real DOS prompt, not the Windows XP DOS clone I’m so accustomed to now. Just to give myself that extra jolt, I decided to type C:\>win at the console just to see that lovely little Windows 3.1 splash screen. I am in heaven.
Now, the guy who gave me this laptop was going to throw it away. Apparently he got it super cheap from eBay or some similar site expecting to be able to connect to the internet with it. He loaded America Online and quickly found out just how futile that was. Moments later, he appeared at the Film Management window to talk to Anthony and I happened to overhear part of the conversation, primarily when the previous owner said, “man, I’m just going to throw this thing away.“
At this point, I had no choice but to chime in.
“Hey, I’ll take it if you’re going to throw it away.”
“Go for it, man.”
And now here I am, a working IBM ThinkPad 755C sitting next to me at my desk. I’m going to hug it, and love it, and call it George.
