In the past, I haven’t done a lot of CSS work; my interests lie more in the areas of SEO and content. We needed a WordPress programmer, though, and before I could start programming WordPress themes, I needed to brush up on my CSS and PHP. Fortunately, I had a decent book sitting around: O’Reilly’s CSS: The Missing Manual. After a few hours reading the book and playing with the CSS in some WordPress themes, it all makes sense; my only hesitation in recommending the book comes from the fact that, because it was released last year, it contains less than a hundred pages on CSS3.
I’ve probably mentioned this before, but if you’re not familiar with what Cascading Style Sheets can do, you need to run, not walk, over to the css Zen Garden and play with it a bit. Good programming practice for the web these days, and what HTML5 is built on, is the separation of style from content. HTML5 holds the content; CSS should be used to indicate to the browser how to display it. What’s really nice about this is that by using an external style sheet for your website, if you decide to change the look and feel of the site you can immediately alter every page (drastically, if desired) simply by editing one file.
CSS is really pretty simple. Suppose that I wanted to change how the text in each of these posts is displayed. Let’s say that, for some reason, I wanted the text to appear in bright orange. In WordPress, the posts are contained in the following tags: <div id=”content”></div>. Thus, I would simply add the following code to my style.css file:
#content {
color: #FF7F00;
background: #FFFFFF url(‘images/background.jpg’) no-repeat;
}
So what does all that mean? The hash mark before the name of the div means that this is an ID, which is something that should appear at most once on each page; something that can appear multiple times should be a class and is indicated using a period. Everything between the brackets is CSS code that will apply to the contents of the content div; in this case, #content is called a selector because it selects this particular part of the HTML. Inside the brackets I can have any number of declarations; in this case I just have two. Each declaration is a property followed by a colon and then a value; some properties can take on multiple values. For example, here I told the browser that it should render the content area with a white background, use the file background.jpg in the images directory as a background image, and that that image should not repeat. If I later decide to use a less hideous color combination, all I have to do is edit this one file.
Aside from making my life a lot easier when I have to change something, this can also reduce the amount of space the code for a site takes up, as the formatting only has to be stored (and downloaded) once, rather than once for each page. This helps speed up the process of loading your site, which helps to keep Google and your customers happy.
You may have noticed that we don’t run advertisements on this blog. The main reason for that is that we don’t think it looks professional on a business website; also, we don’t want you to click an ad and go elsewhere. We want you to stay here and hire us!
That said, we do own other websites which are monetized with adsense and make about a buck fifty per click. This brings us to another reason we wouldn’t want to put adsense on this blog: it could drag down what we’re making elsewhere! Why? The answer lies in Google’s “smart pricing” policy. Read the rest of Google Adsense and Smart Pricing »
Web World by .
You may have heard people speak of the Google Sandbox as a dreadful place to be avoided. But what is it, exactly, and how can you avoid going there?
Google’s goal is to return the best possible search results. They have a number of rules for webmasters that basically boil down to: don’t screw with the search. For example, Google will penalize your site if they catch you buying or selling paid links.
Suppose you have a brand new site, just registered within the last few months, and it has thousands of links to it. What’s the most likely explanation – that this site is so incredible all these people have found out about it already, or that someone is trying to manipulate the search engine results? Google will assume the second, and they’ll put the site in the sandbox, which generally means it’s not going to show up when someone does a search for the targeted keywords. Considering Google’s share of the search market, this is a Bad Thing.
While the sandbox can be triggered automatically, Google employs people who actually go out and look at sites. If you have a new site that’s been growing so quickly that it got put in the sandbox, but not so quickly that it couldn’t just be the greatest site ever built, eventually someone from Google will come out and see if the site really does have the content the links say it has. For example, if One Ear Productions was a new site and suddenly had thousands of links talking about our awesome web design, someone might come check that the site really is talking about web design and doesn’t just have some crappy computer-generated articles and a bunch of advertisements. Google isn’t going to decide whether this really is the greatest web design company ever or whether we really are offering extremely informative articles on web design; they just want to know that this is a legitimate site and we’re not trying to jerk them around.
Cliff notes? Publish high-quality content. Don’t buy or sell links, don’t give Google a reason to think you’re doing that, and don’t put a link to your brand new site in the footer of your 10,000 page site. Otherwise, you may find yourself sitting in the sandbox all alone..
Web World by .
Having installed a number of WordPress blogs lately, one thing I frequently find myself doing after a new installation is editing the .htaccess file. What is .htaccess all about?
On an Apache server, .htaccess files allow you to make configuration changes to a directory (and its subdirectories); multiple .htaccess files can be present in your directory structure, with lower ones overriding higher rules where they conflict. They’re often used for access control, helping to keep the wrong people from poking around in your files. Today we’ll talk specifically about how they interact with WordPress.
Aside from the basic WordPress functions, I’ve mostly used the .htaccess file to force my webhost to use the correct version of PHP. My preferred host offers both PHP4 and PHP5, but defaults to PHP4; this tends to cause issues with WordPress plugins. The solution? Just add the following line to the .htaccess file in your WordPress directory (or a higher directory):
AddType x-mapp-php5 .php
This tells Apache to use PHP5 when interpreting a .php file, and all is well. Of course, this assumes that your host actually has PHP5 installed; given that it’s been out since 2004, if your host doesn’t support it, it’s probably time to find a new host.
What else can we do with the .htaccess file? WordPress uses it to store the rewrite rules for permalinks. Be careful editing the .htaccess file that WordPress uses; if you put your code in the wrong place, it will be overwritten next time WordPress updates the file. I often prefer to simply go up a directory, where feasible.
Often the default amount of memory allocated for PHP is insufficient; you can increase it with the following line:
php_value memory_limit 64M
The above line is hopefully fairly self-explanatory; other attributes you can set include upload_max_filesize and post_max_size, which often default to 2M each.
Host a site with a lot of photos? Find people stealing your bandwidth? Try this code:
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]
Obviously, replace “mysite” with your own URL and “/images/nohotlink.jpg” with the image you want to display on the site that’s attempting to display your image. (Thanks to WPRecipies for this tip) You may want to host the second image on a different server to avoid the possibility that your host will get into an infinite loop.
Next time: using .htaccess to prevent spam.
Web World by .
In case you missed the notice in the upper right, One Ear Productions is closed for the next two weeks. Sorry, folks – that means no emails being answered and no updates to the blog! We’ll resume our regular schedule after we get back.
As with any technical field, online advertising has its own terminology and set of TLA (three letter acronyms). Today let’s review some of the more important ones.
CPA: Cost Per Action. In this case, you get paid (or pay someone) when the user takes a predefined action, such as signing up for a credit card.
CPC: Cost Per Click. Self explanatory. This is the model under which Google Adsense generally operates.
CPM: Cost Per Thousand (page views). M is the roman numeral for 1000.
CTR: Click-Through Rate: how often do people click on your ads?
PFP: Pay For Performance; you get paid if your advertising is successful. See also CPA/PPL/PPS.
PPC: Pay Per Click
PPL/PPS: Pay Per Lead/Sale
PV: Page View
SEO: Search Engine Optimization; this is the process of getting your website to rank highly in search engines, particularly Google. A similar term is SEM, Search Engine Marketing, which also includes paid advertising.
It seems obvious, but many sites seem to have a problem with it: if you want your users to keep coming back, don’t annoy them! Here are a few common-sense things to avoid.
- No unsolicited windows. If you use pop-ups on your site, half your users will be using a modern browser that blocks them, and you’ll annoy the rest. Find a better way to get attention.
- Arrange the website logically. Don’t make the user think about how to find something; it should be obvious. Read the rest of Website Usability, Part V: Don’t Annoy the User »
One aspect of designing an effective webpage is to make it easy for users to find what they’re looking for. Overly cluttered pages, for example, tend to confuse users.
Users anticipate where things will be; don’t surprise them! Users expect that important items (such as the navigation bar, as we discussed in part 2) will be in the same place on every page, near the top. Never put important items “below the fold”! Users should never need to scroll to find navigational items, such as search boxes.
Read the rest of Website Usability, Part IV: Arranging Page Elements »
One website that I tend to avoid if at all possible is MySpace; too much of it seems to be pages composed with horribly clashing colors, backgrounds that don’t contrast well with the text, and other things that make them difficult (and annoying) to read. I would go so far as to call the typical MySpace page an excellent lesson in what not to do. What can we learn from them?
Read the rest of Website Usability, Part III: Text »
By law, all websites owned by the US federal government must comply with the Section 508 Federal Accessibility Standards. For private sites, such compliance may not be legally required, but it’s still a good idea; adhering to standards ensures that all of your potential customers can utilize your site.
Read the rest of Website Usability, Part II: Accessibility »
Web World by .