Archive for December, 2008

CSS – Controlling Copy aka Text

In a recent post, CSS – Back To Basics, I discussed the purpose of CSS and how to use tags, classes, and IDs to create style definitions. In the last post, Setting Up Your First External CSS File, I discussed generic tags you should define right away in your main CSS file. This time around, for you beginners out there, I’m going to write specifically about all the different options you have for controlling the look of text in your website (or as you should call it, “copy”).

When writing your CSS files, you should always define your standard tags (as discussed in Setting Up Your First External CSS File). Included in that list are your copy tags. Copy tags include anything that can define the style of your copy. Most notably is the <p> tag. You also have <a> for links and <h1>, <h2>, <h3>, et cetera for headers. You also may want to consider defining the generic style for copy in your <body> tag and because of cross browser compatibility issues with Internet Explorer 6, your <div> tags. You see, if you define what you want all your copy to look like in your body tag, say font-size, font-family, color, et cetera, then IE6 will not apply this to your copy if any other tags interfere with it. So when you define your generic tag styles, it would be a safe move to define your copy style in your body, div, and p tag, and if you want to be even safer, your html tag as well!

So here are your options for defining the look of your copy in your CSS file (as always, w3schools is a great source for all of this):

  • font-family: times, georgia, serif;
    you can list one font name, multiple with commas, or a generic name
  • font-size: 14px;
    you can use px, em, %, or a size such as small
  • font-style: normal;
    normal, italic, or oblique
  • font-variant: normal;
    normal or small-caps
  • font-weight: normal;
    normal, bold, or a scale from 100-900
  • color: #444444;
    color name or color hex code preceded by the pound sign
  • line-height: 16px;
    using a pixel size larger than your font-size will yield extra space between lines. This definition is actually a great hack for centering text vertically in a div. If your div is 100 pixels high and you have one line of text in it, set the line-height to 100px!
  • text-align: left;
    left, center, right, or justify

That is really the basics of what you need to know for your copy. You may also include background-color as something, especially if you want white text. But basically, there you have it, the best ways to control your copy!

You know, the best tool I’ve ever found for any web developer, beginner or not, is a firefox add-on called Web Developer. It allows you to do so many things, but right now, I am touting it because it allows you to edit the CSS of ANY website you are looking at! It is a great way to learn the ropes because you see changes instantly and accurately. Try it out! Until then, try to keep your copy clean.

Setting Up Your First External CSS File

In a recent post, CSS – Back To Basics, I discussed the purpose of CSS and how to use tags, classes, and IDs to create style definitions. This time around, I’ll chat about setting up an external CSS file and giving it some basic definitions that you should always include in your main CSS file.

So first, let’s explain how to make an external CSS file. The purpose in doing this is to keep all your CSS in a separate place from your HTML. But why is that important? Well, for one, it will speed up the load time of your page for your users. Probably infinitely more important is that it is much more likely that most of the CSS you write for one of your documents will apply to another one. Why repeat it in the head of every page if you can just write it once? That way, when you need to make changes, it’ll be much easier.

Alright, so here is how you make a reference to an external CSS file. In your head section, put the following line of code:

<link href="main.css" rel="stylesheet" type="text/css" />

You can replace main.css with whatever you want to name your CSS document. Main is a good idea if you plan on having multiple CSS files (for large sites). For smaller sites, you probably only need one (for example, my website, www.davidjrush.com, has only one external CSS file (actually, technically it has two, one for the blog, and one for the rest).

You can make your new CSS file (for now, we’ll just assume you are calling it main.css) in a text writer. Change the file extension from .txt to .css just like you would change .txt to .html for an HTML file. Inside the document, you don’t need any tags, in fact, you shouldn’t have any! All you should write in this document is the style that you would have put in the head (but without the <style> tag).

Now I’ll discuss some basics of what you should have in every main CSS file you ever write for a website. There are somewhere around 80 tags for HTML, but only about 30 of them are commonly used. Of these 30 you should think about defining these basic tags: body, div, img, table, p, ul, a, and a:hover. The reasoning behind this is safety safety safety! Different browsers have different default settings for some of these tags. So the smart move is to give them all uniform settings from the start.

You may want to start your main CSS document with the following:

/*--this is a comment, you can put anything inside the star and slash--*/
body{
   margin: 0px;
   padding: 0px;
}
div{
   margin: 0px;
   padding: 0px;
}
img{
   border: 0px;
   margin: 0px;
   padding: 0px;
}
table{
   margin: 0px;
   padding: 0px;
}
p{
   margin: 15px;
   padding: 0px;
}
ul{
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 35px;
   padding: 0px;
   list-style-image: url('image location');
   line-height: 20px; (gives spacing between list items)
}
a{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
}
a:hover{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
   /*make sure to change at least one thing from your a tag definition*/
}
a:visited{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
   /*make sure to change at least one thing from your a tag definition*/
}

Anything in red is just a comment to help you out. The first several definitions really just look at margin and padding. This is where cross browser compatibility comes into play. For example, Internet Explorer and Firefox have different default settings for margin on p tags. This will cause pages to render differently. It always seems like a safe bet to define your margin and padding for most anything. In an upcoming post, I’ll discuss defining your copy/text (which will include more specific information on p tags, a tags, and other similar issues.

You’ll notice in the links section, there is a definition for an a tag, an a tag being hovered on by the mouse, and an a tag that has been visited by the user. The latter two are called “pseudo-classes”. There are others, and they can be applied to tags other than the a tag, just so you know.

If you have any questions about this starter file, post a comment, or send me an email. Stay tuned for further CSS related posts.

CSS – Back to Basics

So, trying to get into the world of CSS eh? Well trust me, you’ll never regret this decision. CSS, or cascading style sheets, are the absolute best way of laying out your site while still providing an easy ability to completely change the look of your site with little work. So here is the lowdown on CSS:

CSS is a simple addition to any HTML file that you have. HTML tells the browser what to display with tags (<p>, <h1>, <a>, etc.). CSS, tells the browser what that content should look like by describing it with “style”. For a great rundown/tutorial of CSS, try w3 schools… and always, when in doubt, google it!

So let’s just give a basic example HTML file with some very simple CSS. This document shows you the style tag where you can put all of your CSS (this goes in the head tag). There are three ways of identifying what tags in your HTML get what styling, tags, classes, and IDs. Use a tag definition if you want all of one type of tag (such as a p tag) to be the same. Use a class if you’ll be using that same style for multiple items (i.e. if you want all the links in your header to look the same then use a class). Use an ID if you only plan on having one item with that style (a specific link needs to look different to have emphasis so it has different style). So this example is as simple as it gets. It shows you how to define the style of a paragraph tag, then change a group of paragraph tags using a class, and then uses an ID to make a specific instance of that paragraph tag.

The CSS and HTML

<html>
 <head>
  <style type="text/css">
    p {
      font-size: 13px;
      font-weight: bold;
      color: #000000;
    }
    .red {
      color: #A60000;
    }
    #blue {
      color: #1240AB;
    }
  </style>
 </head>
 <body>
  <p>This is a bolded, black, size 13 paragraph</p>
  <p>This is another paragraph with the same style</p>
  <p class="red">This is styled red using a class</p>
  <p class="red">This is another red paragraph</p>
  <p id="blue">This is styled blue using an ID</p>
 </body>
</html>

The Outcome:

This is a bolded, black, size 13 paragraph

This is another paragraph with the same style

This is styled red using a class

This is another red paragraph

This is styled blue using an ID

So you’ll notice in the inside the style tag there are three definitions: one for the p tag, one for any tag with a class of redText, and one for a tag with an ID of blueText. You use a period before the name for a class, and a # before the name for an ID. Don’t mix them up or your browser won’t read them.

Safe CSS practice will encourage you to put a p in front of your .redText or #blueText definitions. This tells the browser that that specific definition for redText and blueText only applies to p tags. Then if you gave a class of redText to a link, it would not follow that styling. Sometimes however, you want to apply the same styling to different types of tags. In that case, it is alright to leave it out. Basically, use your best judgment. If you are working with a huge website, then you will have a lot of CSS, so be specific and purposeful in your naming of classes and IDs (and probably use the tag name before your definition (i.e. use p.redText instead of just .redText). If you are working with a smaller site, then you can be a little more lenient in your CSS naming efforts.

Coming up, external CSS files with a step up in CSS.

Questions? Post a comment!

SEO Simplified

SEO or Search Engine Optimization is a very complex process. People make a living doing SEO work for other individuals. Entire companies exist that tout the best SEO practices. Well, for the simple minded, for the not so wealthy, and just for the interested, let’s break down what SEO really is and what simple steps you can take to help out your own site.

Okay, first a definition. Simply put, Search Engine Optimization is an attempt to get your website higher up on search results run by Google, Yahoo, et cetera. Why is this important? Don’t you want visitors!?! Search engines are the best marketing tool out there. You’ll never come close to getting more direct or referral traffic than search traffic to your website (unless you are as big as say facebook.com for example). Even the biggest of businesses such as Amazon.com still rely very heavily on search traffic. So how can you push yourself higher on those results?

Well, there are countless articles out there trying to tell you how to perform SEO. I’m not saying you should listen to me, in fact, I consider myself a novice when it comes to SEO, but I do have a few easy suggestions that just about anyone can do.

1. Make sure to set up a redirect between the www and non-www version of your website. Search engines see http://www.example.com as a different site than http://example.com. If you set up a permanent redirect, then search engines will bump you up higher, links to your site will be consistent. Here is a great tutorial on it.

2. Register with sites like dmoz and yahoo and zoominfo. These sites are essentially listings of websites and companies and people. Being listed on these helps show search engines that your website is essentially more reputable than websites not listed there. Yahoo costs money, but dmoz is free. Hurry up though, it can take months for them to get you on the list!

3. Write a BLOG!!! I know, ironic right? The reason that I started this blog in the first place was to drive more traffic to my site. Sites with blogs have tons more content, and because the content is constantly changing and updating, it is much more likely to pop up in search results. Even more than that, people might start bookmarking your blog posts on sites like del.icio.us and digg.com. Bookmarks on these sites can drive hundreds of visits in under an hour once they are posted. Also, when there are bookmarks to your site from these websites, search engines use that as another form of validation that your content is useful, just like being listed in those conglomerate sites mentioned above.

4. Get lots and lots of links to your site. The more links that exist on the web to your site, the better. Search engines see those links as even more validation for your content. Try establishing relationships with other businesses you work with on a regular basis and get them to link to your site in return for a link to theirs. Make a facebook page for the website with a link. Anything that will add more links to your site out there in the web is good!

5. Lots of content, that you update, with good header tags. Google is known to use the content of a website to determine what is on it. Go figure right? In the past, all search engines used the Meta Keyword and Description tags, but then people started stuffing their tags with thousands of unrelated words in hopes of landing on tons of search results. As a result Google, and many other search engines have followed suit, do not use them anymore. Stick to under a dozen keywords, and then just pay attention to your content. Having useful header tags (h1, h2, h3, etc), lots of good content, preferably that you update, and purposeful images will do wonders.

6. Check out Marketing Grader. This site will help you keep track of your progress. As with any of these tools, take it with a grain of salt, but so far, this is the best one I’ve found on the web. The same company previously ran Website Grader which was solely focused on SEO, and then they expanded that tool to including other marketing techniques like social media. They can offer some good ideas toward better SEO and marketing though, so check it out.

Screen Resolution: Size Matters

800×600 or 1024×768 or 1280×800 or 1280×1024? I could keep going, but that won’t do any of us much good. One of the first questions you should be asking yourself when you set out to design a website is what screen resolution are you shooting for? The easy answer as of December 6th, 2008 is 1024×768 (that is width by height for those who are confused).

However, it does get a bit more complicated than that. There are two things you should consider, your target audience, and your future website. Based on the age and demographics of your target audience, the distribution of screen resolutions will change. Young and hip audience? Targeting upper class users? Assume that a larger percentage of your audience will be using larger screens. As for your website, you may have a dire need to shoot for a larger screen size because you need the space. Or perhaps you think you can sacrifice screen size because you really don’t have much content and you’d rather accommodate everyone. These are all things you should think about.

However, the bottom line is, around 30-40% of your users (again, as of December 6, 2008) are using 1024×768. Another 30-40% will be using 1280×800 or 1280×1024. Those are your two to pick from, but again, unless you want to inconvenience 30% of your users, 1024×768 is your sweet spot. You’ll have about 5% of your users still with a 800×600, but honestly, they need to upgrade. By the time a group drops to around 5%, it is worse to inconvenience 95% of your users to help the other 5%. Lastly, whatever is remaining in your percentage will be even larger resolutions.

Keep in mind that these things change over time. Within a few years, 1024×768 will be outdated, and we’ll be shooting for 1280×1024 or something else. Always track your users. I highly advise using Google Analytics. This tool allows you to gather information on everything to enhance your user experience. There will be another post on this topic in the next few weeks.

Now, another quick lesson. With 1024 as your target width, you actually need to be designing for about 990px. At least, that’s what I’ve always shot for. This is to take into account a scroll bar when your content goes below the fold. Also realize that 768px is a huge overestimate. After you factor in a windows bar, browser title bar, menu bar, URL bar, bookmark bar, and tab bar you’ve lost anywhere between 100 and 200 pixels. I’ll be writing another post on wrapper divs and sticky footers to help center your content regardless of screen resolution, as well as a post on sticky footers, which will keep your footer at the bottom of the screen unless content pushes it down further.

Thanks for reading, stay tuned!

HTML – Getting Started

So, just getting into the game huh? Well let me leave the scolding for later. Let’s pretend that your mother’s dog doesn’t have its own blog and personal myspace page. Let’s pretend that your grandpa didn’t make a facebook account last week. Let’s pretend that every small business out there hasn’t realized that having a website is always an improvement over the yellow pages… Oh wait, they haven’t gotten to that point yet…

At least you’ve caught on. Getting into web design is no easy task, but it isn’t all that difficult either. I am about 98% self taught in everything I know about web design and coding. So here are a few tricks you can use that will help you learn:

1. The best way to learn is by doing. Try making your own site. Open up a good old text file, and start writing. If you save the text file as .html instead of .txt, then any web browser will read it (assuming you wrote it correctly)!

2. Imitation is the sincerest form of flattery. If you see something you like on another website, then be inquisitive! See how they did it. If you go to your browser’s menu screen, click on View, and then View Source. This is the code that the browser reads to display the website.

3. Use the resources that have been provided to you. There are tons of great websites out there that can help you. What are you struggling with? Code? Try w3schools, the place that helped me learn most of what I know. They have a tutorial for every web language you could imagine. Start with HTML and CSS. Difficulty with design? Find other sites that you like the look of. Try the CSS Zen Garden which shows the power of CSS or CSS Beauty which shows… the beauty of CSS. There is a ton out there, just google it!

4. I guess you could take a class, but that didn’t do crap for me.

5. When in doubt, Google it! If there is ever anything I’m not sure how to do, or something that is broken that I can’t seem to fix, I Google it. Someone has written about it somewhere. You can always try asking someone that does it for a living… cough cough… and hopefully they might have the answer!

6. Get the greatest tool EVER! If you don’t have firefox as your default browser, fix that problem first. Then, download the add on entitled “Web Developer”. It has the best tools for web developers including tools to outline your divs and tables, resizing your window, viewing source, and even editing the CSS for other people’s websites! That’s right, you can edit the CSS for facebook or google or cnn. I know right?!

7. Still not sure how to get started? Well stay tuned, I’ll be writing more about HTML and CSS basics. I will interject with other topics like special CSS tricks as well, so you’ll have to bare with me…

Thanks for reading. Questions? Just ask!