Today while working on a site, I ran into a really frustrating bug in IE7. While trying to stack absolutely positioned elements on a website, IE7 would not pay attention to z-index what-so-ever. The solution to this problem was to change the z-index of the parent element of what you want to display on top to a z-index higher than that of what you are trying to display underneath. I have no idea why this is the case, but since we’ll be supporting IE7 for a long time to come, it’s something that web developers need to be aware of.
I found a pretty good example of this bug in this article – Squish the Internet Explorer Z-Index Bug | Brenelz Web Design Solutions
I’ll be updating this article shortly with an example of my own.
About 1.6 billion people use the Internet every day. Out of all of those people, about 70% of them use Google as their preferred search engine. My question for you is a simple one: What would happen if Google ceased to exist? This thought came to me today when a Google outage brought the Internet to a crawl.
I’m sure the first answer that comes to mind is “Omg, the world would implode!” Well, I’m here to tell you that the world probably wouldn’t implode, but it would have serious repercussions. Almost every major website on the Internet relies on Google in some way. Many sites receive almost all of their traffic directly from Google searches while other use Google services such as Gmail or Adsense for their business. If something critical happened to Google, what would these businesses do? What would the end-users do? What would we all do?
Today some of us caught a small glimpse of what the Internet would be like if Google suddenly disappeared. Every website that used any Google service almost completely shut down because the external scripts hosted on Google’s servers were inaccessible (this site included). I personally found myself lost and confused. My Gmail was down and Google was down so I couldn’t ‘Google’ what the problem was. I couldn’t get on Google Talk to ask any other web heads what was wrong either. I tried using Live Search and Yahoo to no avail. My only savior was ‘poor man’s email‘, Twitter. Twitter was running rampant with people twittering about the Google outage.
On that note, I think the answer is clear as to what we would do without Google: Twitter.
As you may or may not have noticed, the Internet ran into a few complications today. Apparently the problem has been linked to an AT&T routing problem somewhere in the Midwest. Some people didn’t experience any problems, while others were unable to access many large websites, most notably, Google. Several other large website such as Wal-Mart, Apple, and Microsoft were unreachable by people in certain locations.
I first noticed the problem while at work, trying to Google something. Google was down, so I used begrudgingly Yahoo!. Afterward, I noticed the website that I went to was also being extremely slow. I figured it was just our terrible T1 connection, but then used my Firebug to inspect the website and see what the problem was. It turned out that the problem was loading the analytics script from Google. Right about that time, I began to get worried. I tried a few trace routes and pings to Google and they all returned a bit dodgy. I then tried to ping other websites such as apple.com and microsoft.com and they too were unreachable. It was about this time that I began to wonder what would happen if Google ceased to exist.
I decided to check out Twitter to see exactly what was going on as there was no way to find any relevant information on what was happening. What I found was an abundance of news related to ‘googlefail’. You can see a stream of Twitters related to googlefail at the bottom of the post.
Now of course the problem wasn’t on Google’s end, but as Google is probably the most visited site on the Internet, when it goes down, people know it. Unfortunately, websites that use Adsense, Google API, Analytics, or any other Google service, became almost unreachable by people who could not reach Google.
11:30 AM (CST) Google appears to have fixed the problem on their end. They obviously disabled the route that linked the problem with AT&T. Shortly after that, the previously unreachable website began to come back up. This may be because AT&T fixed the problem on their end, or the other websites are taking the same approach as Google and disabling that route. On a side note, the problem seems to be linked to more than just problems at AT&T as keynote is showing packet loss in multiple places.
In this tutorial, I’m going to be teaching what mod rewrite is and few examples of its uses. Mod rewrite is a powerful tool and one of the simplest ways to make your website more SEO friendly.
What is Mod Rewrite?
Mod rewrite is a part of apache servers that can rewrite requested URLs on the fly. As it supports an endless number of rules that in turn have unlimited attached rule conditions it is very flexible and an important URL manipulation mechanism. It can be used for internet users and for search engine friendly URLs. This increases the chance of the database driven website to be indexed.
Enabling / Installing Mod Rewrite
The first thing we want to do is make sure that we have mod_rewrite on our server. By default, Apache has mod_rewrite installed, but not enabled. The easiest way to test if mod_rewrite is enabled on your server is to create a .htaccess file in a test directory such as /modrewrite-test/.htaccess with the following inside:
Options +FollowSymLinks
RewriteEngine On
Now attempt to browse to the subdirectory. One of two things could happen:
- No errors Congrats mod_rewrite engine is now enabled.
- 500, Internal Server Error If you get this message then mod_rewrite was not installed/enabled on your server.
If you found that mod_rewrite was not installed on your server, follow these steps.
- Find the httpd.conf file (usually you will find it in a folder called conf, config or something along those lines)
- Inside the httpd.conf file uncomment the line LoadModule rewrite_module modules/mod_rewrite.so (remove the pound ‘#’ sign from in front of the line)
- Also find the line ClearModuleList is uncommented then find and make sure that the line AddModule mod_rewrite.c is not commented out.
After these steps, restart your apache server with the following command.
/etc/init.d/httpd restart
You should now have mod_rewrite successfully enabled. Be sure to test mod_rewrite again once apache server has been restarted.
Using Mod Rewrite To Always Remove / Add WWW
One easily fixed problem that many websites have is duplicate results in search engines. In any given search engine, http://www.example.com/ and http:// example.com are two completely different websites. This is a big problem because the content in your website is identified as duplicate content, and that brings your search engine rankings down. Using our new friend, mod_rewrite, we can assess this issue.
At the top of any .htaccess file, you need to turn Mod Rewrite on. This should always be at the top of your .htaccess file. You only need to turn Mod Rewrite on once.
RewriteEngine On
Additionally, you need to set your Rewrite Base. This is normally the directory in which the .htaccess file is located. If your .htaccess file is located in your root folder, your Rewrite Base would look like this:
RewriteBase /
Now then, there are two options to choose from. You can either choose to always remove the www, or always keep it. To always remove www (my preferred method), create a .htaccess file in your root directory. Inside of that file, add the following:
RewriteCond %{HTTP_HOST} ^www.example.com$ [NC]
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]
Likewise, if you would like to always add www, add the following to your .htaccess file:
RewriteCond %{HTTP_HOST} ^example.com$
RewriteRule (.*) http://www.example.com$1 [R=301]
Be sure to change example.com to your domain.
Using Mod Rewrite to Clean Up Your URL’s
The most popular use of Mod Rewrite is using it to clean up your website’s URL’s. As you may or may not know, search engines don’t particularly care for URL’s with a lot of arguments like many websites serve. Example:
http://www.example.com/index.php?p=about
With the power of the mod_rewrite apache module, we can make this URL much cleaner.
http://www.example.com/about.html
To accomplish this, we get to see our good friend regular expressions. I know you’re really excited now. To accomplish the rewrite above, I added the following to my .htaccess file after the add/remove www lines.
RewriteRule ^([^/]+).html$ /index.php?p=$1 [QSA,L,NC]
Let’s take a closer look at this line so that we can really understand what it’s doing.
([^/]+)
This is the regular expression to match anything except a forward slash. This is the easiest way to match anything that will fall between two forward slashes when dealing with rewriting URL’s.
.html
This rewrites the url to have .html at the end. This gives the appearance of a regular .html file to your php file.
/index.php?p=$1
This is the part of the rewrite which is the originating location. Each time you have a regular expression in the first part matching a certain string, you should have it referenced in this part. The $1 references the first regular expression in the first half of the line. So any value that is assigned to the variable p is placed where the first regular expression is in the first half of the line.
If you wanted your URL to look like a directory, you would use this line instead of the one given previously.
RewriteRule ^([^/]+)/?$ /index.php?p=$1 [QSA,L,NC]
This would return URL’s like this:
http://www.example.com/about/
Adding a Trailing Slash To Your URL’s
The main point of adding a trailing slash to your URL’s is that it increases server performance. When a trailing slash is added to the end of a URL that does not end in a file extension, it tells the server to only make on call to itself, thus decreasing server traffic.
To always add a trailing slash to a URL that does not end in a file extention, such as http://www.example.com, add the following to your .htaccess file in your root directory.
rewriteCond $1 !/$
rewriteCond %{REQUEST_FILENAME}/ -d
rewriteRule (.+) http://www.example.com/$1/ [R=301,L]
The first line checks to see if there is no trailing slash. The second line checks to see if a directory exists with the given URL if the trailing slash is added. The third line adds the trailing slash and redirects the user.
There are many techniques that web developers use to better their SEO. If you follow these simple steps, you will be ranked very high on every search engine except Google. Google is the ONLY search engine that is difficult to rank high on unless you have a very unique name to your website that people will search for directly.
1. Place keywords everywhere except the keywords meta tag. Say what? Yeah, that’s right. Only Yahoo! uses the keyword meta tag now. Not a single other search engine does. Honestly, Yahoo! is so easy to rank high on, there’s no reason to even use keywords anymore. Instead, place your keywords in places that truly matter. The URL is quite possible the best place to put your keywords. For instance I did a website for work and its purpose is to sell heavy duty truck parts. Guess what we called the site: heavydutytruckparts.com. Guess where it ranks on every search engine except Google when you search heavy duty truck parts’: Page numero uno. If you can’t manage to get keywords in your URL, place them in your title tag, description meta tag, and/or your header tags (preferably your h1.)
2. Organize your Title tag. Search engines look at titles in order from specific to general. Most people type out their title tag like this: ‘Site name > Page title’ or something similar. This will in fact drive less traffic to your website in the case of an informative website. If you have pages with tutorials or blog posts, you will want the more specific title of the page to be first so that it will rank higher when people search for those keywords.
3. Use a different description for every page. The worst thing you could do is use a static description for all of your website’s pages. With each page of your site, describe exactly what that page is about. If you’re like me and run a blog, writing a description for a specific blog will bring search enginge users when they are searching for content that relates to what you’re writing about. If I described my site as “Mike Ems’ blog,” nobody would ever find it because nobody cares about what I have to say.
4. Use valid X/HTML and CSS. Just do it. Search enginges like it. When crawlers inspect your site, they pay special attention to your header tags and classify parts of your page based on what heading they fall under. Therefore, your primary content should be under an h2 (as the title of your website should be the h1) and then have sub-menus and side navigation (if you have it) should be in h3′s or lower. This will help the search engine clarify what is more important on your website.
5. Ensure that your website is accessible. Ensure that your website is safe for screen readers and uses shortcut keys. This does help your SEO, but more importantly it helps your users. There are many other techniques to increase the accessibilty and usability of your website. Another example would be to use buttons that can increase and decrease the font sizes on your site. Just because you can read the font at 0.8em doesn’t mean the next guy can. Alternate stylsheets are also a very big priority. If you have a website with a dark background and light text, this can hurt the eyes of some users. You should always have an alternate stylesheet for these users even if it just a minimalistic black and white stylesheet. If you don’t offer this option, it could easily drive users away from your website.
6. Use SEO friendly URLs. This is most important when you begin using aserver-side programming language such as PHP to create web pages. If you use techniques like me and your URL’s end up looking like this: ‘http://www.example.com/index.php?p=about’, then there needs to be some changes. Search engines really don’t like URL’s like this and sometimes won’t even follow them. Using apache mod rewrites, you can easily rewrite your URL’s to be more SEO friendly. The link above could be changed to look like ‘http://www.example.com/about.html’ or ‘http://www.example.com/about/’. Either one of these URL’s would make the search engine much happier and they don’t even require any changes to your current pages (other than changing your links to match the new URL format.)
7. Check cross-browser compatibility! This doesn’t really help SEO, but you just need to do it. Yes, that means checking in IE6 for the time being. It’s nothing short of a pain in the ass, but there are still a few people out there using it. The best thing to do is use something like Google Analytics to track visitors to your website and make an assessment after a few months of the site being public. From there you will be able to tell if a considerable portion of your users are IE6-tards. Don’t forget about checking your stie on a Macintosh. The resolutions and fonts of a Macintosh are very different from a PC. If you want to see how your site looks in Safari on a Macintosh, you can use the free sample service of Browsr Camp. They offer many more browsers, but you have to pay to use the rest.
There are also a few other things that help SEO, but they are out of your control such as the seniority of your website. More times than not, a site that has been around at least a year will rank much higher than a new website. There have been cases where a new website will have many links to it from very popular websites that drive the ranking of the website much higher than a new website usually is.
As many of you know by now, the attribute ‘target’ will not validate in an XHTML document. This creates quite a few problems for us because we don’t always want people leaving our site entirely. With a simple JavaScript code you can easily open external links in new windows unobtrusively!
First, make a link with the class ‘external’.
<a class="external" href="http://www.mvied.com/">MVied Designs</a>
Now apply this to an external JavaScript file named external.js and upload somewhere on your site.
function init() { var links = document.getElementsByTagName('a'); for (var i=0;i < links.length;i++) { if (links[i].className == 'external') { links[i].onclick = function() { window.open(this.href); return false; }; } } } if(document.childNodes) { window.onload = init; }
And link to this javascript in your header with a script tag. Don’t forget to change the location of the javascript file to where you uploaded external.js.
<script type="text/javascript" src="http://example.com/js/external.js"></script>I’ve seen a lot of functions out there that handle the much adored input clear on focus. This is a nice feature to have on your site especially on search boxes. Also, according to usability standards, you are not supposed to leave any input field blank. The value of your input fields and textareas should describe in detail what it is the user should be putting into the form field.
There are many ways to go about accomplishing this feature. The best way to accomplish this is with this code that I found at Perishable Press. Many others have chosen to do this by adding inline JavaScript to their HTML markup, and we all know that that is a big no-no in today’s world. Today, with the use of the powerful Document Object Model, or DOM, we are able to manipulate our markup without actually changing anything.
Let’s get down to business. Now if you’re like me, you’ve found this article from Google and you’re working on a project and you’re in a rush, so here’s the code so you can continue your project. Put this into an external file named inputclear.js and upload it to your server.
function init() { var inputs = document.getElementsByTagName('input'); for(var i=0; i < inputs.length; i++) { inputs[i].setAttribute('rel',inputs[i].defaultValue); inputs[i].onfocus = function() { if (this.value == this.getAttribute('rel') && this.getAttribute('type') != 'submit' && this.getAttribute('type') != 'reset') { this.value = ''; } else { return false; } } inputs[i].onblur = function() { if(this.value=='' && this.getAttribute('type') != 'submit' && this.getAttribute('type') != 'reset') { this.value = this.getAttribute('rel'); } else { return false; } } inputs[i].ondblclick = function() { this.value = this.getAttribute('rel') } } } if(document.childNodes) { window.onload = init; }
Afterwards, add link to this javascript in your header with a script tag. Don’t forget to change the location of the javascript file to where you uploaded inputclear.js.
<script src="http://example.com/js/inputclear.js" type="text/javascript"><!--mce:0--></script>
This code can also be used to clear textareas by changing this line:
var inputs = document.getElementsByTagName('input');
To this:
var inputs = document.getElementsByTagName('textarea');
