Pleasanton Web Design

I ran aross this problem with the way Internet Explore 7 (IE7) handles the background-position css property, and thought I’d post it just in case I could save someone some time. I was working on a layout, and it looked great in IE8, Firefox 2, Firefox 3 & Google Chrome 2. When viewed in IE7, however, the background-position of one of the elements was off.

After a bit of experimentation, as is a normal part of cross-browser testing with Microsoft Internet Exploder, I narrowed down the problem to the fact that I had overflow hidden for this particular element. All other browsers used the declared dimensions of the element to position the background. The problem is that there was some overflow, and all browsers but IE7 properly ignored it. IE7 used the dimensions including the overflow to determine the background-position.

In this situation I was able to size the element in such a way to eliminate the possibility of overflow, and then was able to remove the overflow:hidden declaration.

admin css, internet explorer, web design, web development

Page titles in Joomla 1.5 are not particularly configurable. I prefer to use an SEO extension, which gives me total control of my page titles and metatags, but I understand the reluctance to rely on a non-commercial extension. Will it be around for Joomla 1.6? Who knows?

The problem with Joomla 1.0.X page titles was that they insisted on putting the site name in the page title. Joomla 1.5 cured that disease, but some people would still like to have their site name in their page title consistently across the site. For that, the perfectly simple solution is the Title Manager extension for Joomla 1.5 (native).

Download, install and activate this plugin, and you will have your Joomla site name, or another text string of your choosing in all page titles. You can even configure whether or not the page title goes before or after the original page title, as well as the seperator character. Here’s a peek at the configuration screen:

admin joomla, joomla extensions, search engine optimization, seo, web design

This is an intesting glitch in Adwords I just experienced when testing an ad I have running. The search for “Bay Area Web Design” results in a mix of swimming pool ads, then appropriate ads for web design. I wonder how often this glitch occurs, and how many bad clicks are charged because of it?

admin adwords conversion, web design

I manage clients’ search engine promotion on a regular basis, and every once in a while see some natural clicks in Google Analytics from a search engine called “Search.” I had assumed that “Search” was “Search.com.” Since the traffic from “Search” was very minimal, there was never a need to dig any deeper into the subject.

This month was different. In analyzing the data for one of my clients, I saw a spike in hits from “Search” for one of their important keyphrases. A check “Search.com” showed no position that warranted the traffic for that keyword. A little bit of research revealed that other webmasters were seeing the same thing and asking the same question. What is the “Search” search engine in Google Analytics. Some evidence pointed to http://search.ovguide.com, which is a video search engine that has been gaining popularity.

Sure enough, a search using my client’s keyphrase put them right at the top of the search, however ONLY with a sponsored “Adwords” result. So it looks like Analytics was counting Adwords clicks as natural clicks. Mystery solved, however confirmation is still required from Google. I bumped an existing thread on the Google Analytics forum on the subject. The thread was started a month and a half ago, but still no reply.

admin web design

I received a big traffic spike a couple of days ago, and my logs say 94 unique visits came directly from a network named Kintiskton LLC. Obviously it is some kind of spider. Upon further research, it appears to be a company looking for trademark infringement. Unfortunately their excessive crawling is a nuisance for those of us who use our traffic data. Another blogger posted this suggestion – block the IP addresses of the Kintiskton spider using your .htaccess file like so:

Deny from 65.208.151.112/29

Sounds like a plan. I’ll see if it works to keep these pests away.

admin web design

1. If I simply build a website, it will show up on page one of the search engine results.
   Many people have no idea how search engines work, and consequently don’t understand how websites get listed,  or consider that it may be difficult to get seen. Search engines are “free” advertising, and there is a lot of competition. If the terms you want to rank for are very unique, then chances are there is little traffic for them. If the terms are not unique, then you have a lot of work ahead of you to beat the competition.
2. Just put the right words in the magical meta tags, and my web site  will show up on top
   Meta tags had a lot more weight when the Internet was young. Then webmasters figured out how to game the search engines, and all that stopped. You still need to know how to use meta tags properly on your web pages, but working on meta tags alone will get you nowhere.
3. It’s relatively easy to get on top of the search engine results if you know a few tricks.
   A lot of SEO companies make promises like “guarantee top ranking in 1 week or your money back.” The catch is that you can’t have top ranking for any term you want. Getting on page one of Google for “Used car with red paint in Hayward California” is easy. Getting on page one for the term “Car” is just not going to happen for a small or even medium size business. If a company makes it sound easy, they either don’t know what they are doing, or they are trying to scam you!
4. If I’m on top of the search results for the terms I have chosen, I’ll be getting traffic and making money.  
   Being on top of the search engine results doesn’t make you money in itself. You need targeted traffic, and to convert that traffic in to sales, or whatever your objective for the web site is. If you rank highly for keywords that aren’t searched for, you won’t get traffic. It may sound obvious, but targeting the right keywords is a step that is often overlooked.
5. Once my website is published to the internet, it should show up in the rankings right away.
   It can take from 2 to 4 weeks for your site to show up in the search engine index, and another 4 to 8 weeks for it to be completely crawled and included in a way that you will achieve optimum results. Also, most major search engines factor in such variables as domain name age, so it may take a matter of years before you can break on to page one for competetive keywords, especially if your competition has been around for a while.
6. Submitting a site to many search engines will result in traffic to my website .
   SEO companies that say they will submit your site to 300 search engines are trying to scam you. There are at most 10 major search engines that will bring all of your traffic.You certainly want to submit your website to them, but if you take other necessary steps, such as obtaining incoming links to your
   site, search engine spiders will find your web site even if you don’t submit. And just because the search engine knows about your site, doesn’t mean that it considers it important enough to rank highly in search results.
7. Pay per click (PPC) is an easy and inexpensive way to get search engine traffic quickly.
   When Google Adwords and it’s copiers came out years ago, it was pretty easy and relatively inexpensive to get good traffic. This is no longer true. It is very easy to waste a lot of money trying to learn how to run a pay per click campaign. It may not even be cost effective to run a PPC in certain niches, and it can be very costly to find that out the hard way.
8. The web designer is the expert, and I don’t need to get involved in the web site design process to obtain great search engine performance.
   Web designers are experts in making your Internet business plan a reality. To do that, we need to know as much as possible about your business, products, and customers. It is not uncommon for different departments in one company to use different terms to refer to the same thing. It is also not uncommon for people inside a company to use different terms than do customers when referring to the same thing. Maybe you offer a service, but it isn’t that profitable and would rather not push it. Not communicating this kind of information to your web designer can result in a website that is less effective than it could be.
9. Search engine optimization is something that can be tacked on after a website is built.
   Web design is more than graphic design for web pages. Even more important than making a website look pretty, is creating an information design that will make the website user friendly. Since search engines should always be considered as a user in the design process, that means making the website search engine friendly. And since the information design is the foundation on which the graphic design is built, it necessarily comes before the graphic design.
10. The website alone determines ranking in the search engines.
    External factors are what makes the difference between page 1 and page 100 of the search results, especially for competetive search terms. Search engines want to serve up the most authoritative and important results to their users. They determine the authority of a website based on the number and quality of relevant links pointing to that site. A related misconception people often make is thinking that linking out to many sites will improve your authority. In reality, linking too much to other sites can bleed the authority from your site and hurt your efforts.

More SEO Articles

SEO Services

admin search engine optimization, web design, web design process, web development, web promotion

Time for a bit of self-promotion – it’s my blog after all. Pleasanton Web Design Company – TP Designs creates Websites for businesses in the Bay Area, and is based in Pleasanton. In fact most of my current customers either reside, or do business in Pleasanton. If you have a project in mind, give me a call at 925 485-0050, and we can discuss it. If downtown is convenient for you, I prefer to meet at Tully’s (free internet), but can do Starbucks near Ruby Hills if you are in that part of town.

Here are some of the services I have to offer:
Web Design
Print Design
E-Commerce
Search Engine Optimization and Promotion

I’m currently working on a new website that details and demos the most popular web applications, so I can show you how to get up and running within your budget and time frame. I’m not a salesman, so if you’re impressed by slick talk and pie in the sky, I might not impress you. I do know how to get the job done, so if that’s your goal, give me a call of visit my Bay Area Web Design site.

admin Pleasanton, web design

I’ve had a request to expand my css navigation tutorial to include a horizontal navigation. This is an extention of my previous css navigation menu tutorial.

To create a horizontal navigation menu in the header, you’ll need to create two horizontally stacked divs within the header. The way I normally code it is to create a div in the header named header top, and under that I’ll put the nav div. Make sure to size them both to the header width so they can’t appear side by side. You’ll also need to add a clearing div after the header so that following divs will begin in the correct place:

<div id=”header”>
 <div id=”header-top”></div>
 <div id=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Nothing</a></li>
</ul>
 </div>
</div>
<div id=”clr”></div>

As a convention I started the naming of the navigation styles starting with the nav div. This change will need to “cascade” to all of the other styles within the unordered list. As you can see below, the key to making the nav list horizontal is adding float:left to the li tag. The header-top now displays the header image as a background, and the header div is now just a container to hold the header-top and nav divs. I added a background color to it for aesthetics.#header{
width: 780px;
height: 84px;
background: #333333;
}

#header-top{
width: 780px;
background-image: url(‘images/header.jpg’);
background-repeat: no-repeat;
height: 50px;
}

#nav{
width:780px;
height: 32px;
}

div#clr{
clear: both;
}

div#nav ul li{
float:left;
}

div#nav ul{
list-style: none;
padding: 0px;
margin: 0px;
}

div#nav ul li a{
display: block;
padding:5px;
margin: 1px;
border: 1px solid white;
width: 100px;
height: 20px;
background: #333333;
color: white;
text-decoration: none;
}

div#nav ul li a:hover{
background: #666666;
}

Here is how it looks.

admin css, navigation, web design, web development

In the first tutorial of the series, CSS Positioning, we build a basic, table-less structure for a two-column webpage. In this post, we’ll add what every webpage needs: navigation.

Some designers prefer to add an additional <div> and identify it as “nav” or “navigation” using a class or id. Since almost all navigation bars I’ve seen styled with CSS use an unordered list, <ul>, I like to style that directly, rather than adding the additional <div>.

From the first tutorial, we have the following page structure:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 strict//EN”>
<html>
<head>
<title>CSS Test</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”test.css” rel=”stylesheet” type=”text/css”>
</head>
<body>

<div id=”wrapper”>

<div id=”header”></div>

<div id=”column1″>
</div>

<div id=”column2″>
</div>

<div id=”footer”></div>

</div>

</body>
</html>

Now we will add our unordered list to column one, between the <div></div>
tags:

<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Nothing</a></li>
</ul>

Now to style our list into a standard navigation menu. First we’ll take the unslightly list attributes from the <ul> tag itself:

ul#nav{
list-style: none;
padding: 0px;
margin: 0px;
}

Setting the list-style to none removes the bullet, and setting padding and margins to 0px removes the indent.

I’m going to ignore the <li> tag and style the link <a> tag directly. I do this to take advantage of a:hover to change the links background on rollover:

ul#nav li a{
display: block;
padding:5px;
margin: 1px;
border: 1px solid white;
width: 100px;
height: 20px;
background: #333333;
color: white;
text-decoration: none;
}

First we style the link as a block, so the browser will treat the element like we want it to, as a rectangular button. We style the appearance of the element as we would any box. Finally we remove the link’s underline by setting text-decoration:none.

All that’s left is to set the rollover using a:hover. The only thing we want to change is the background color, so all we have to do is this:

ul#nav li a:hover{
background: #666666;
}

Now fill your content column with text, and you have a table-less, two column webpage, displayed using css.

Here is the design in action.

admin css, navigation, web design, web development

I was asked by an aspiring web designer to tutor him in basic Web design techniques. He is working on a Webpage in tables, but is aware that he should probably start working with CSS instead. He had tried Dreamweaver’s “layers,” but was having a hard time.

In preparation for the 1 hour session I put together a page with a really basic two column layout using CSS positioning. Since I went to all this trouble, I thought I would go ahead and share it with the World Wide Web as well.

Doctype

The first code on the page, and the first thing to be aware of is the Doctype declaration. I use this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 strict//EN”>

Using the “transitional” declarations, rather than “strict” puts the page into “Quirks Mode.” This was necessary to get older browsers to display CSS correctly back in the day, but using today will cause you headaches from all the quirks that will be coming your way.

Basic Structure

The code for implementing a CSS page layout should be divided into two parts: HTML for structure, and CSS for formatting. I break the CSS out into a seperate page and link it to my HTML page thusly:

<link href=”test.css” rel=”stylesheet” type=”text/css”>

This goes somewhere between the <head></head> tags.

In the body of the HTML document, you can declare the structure very simply using nested <div></div> tags. I use the “ID” attribute to identify them, but “Class” works too. Here’s the code for my basic two-column page:

<div id=”wrapper”>

<div id=”header”></div>

<div id=”column1″></div>

<div id=”column2″></div>

<div id=”footer”></div>

</div>

That’s it! That’s the basic HTML structure of the page; a wrapper enclosing the other page elements. The size, color, borders, and structural images are all declared in the CSS. The page content, such as navigation and text, will go inside the appropriate <div> tags.

CSS

Next, we’re going to format each <div> on our page. I also like to remove the margins from the body like so:

body{
margin:0px;
padding: 0px;
}

Next we’ll set the width, postion and background of the “wrapper.” This will set the basic page size and color, as well as center the page in the browser. Centering is achieved by setting the left and right margins to “auto.”

#wrapper{
width: 780px;
margin-right: auto;
margin-left: auto;
background: #cccccc;
}

The header is nested inside the wrapper div. The header image is set as the background.

#header{
width: 780px;
height: 50px;
background-image: url(‘images/header.jpg’) ;
background-repeat: no-repeat;
}

The left column is going to contain the navigation, which I’ll add in the next CSS tutorial. Notice that I have set the background color to the same color as that of the wrapper div. This is because we want this column to appear to extend to the bottom of the page. In reality, it will shrink to contain the content. Floating the div left will allow the column to sit side by side the column 2, which will float right.

#column1{
width: 130px;
padding: 10px;
background: #ccc;
float: left;
}

#column2{
width: 610px;
padding: 10px;
float: right;
background: white;
}

Lastly, I position the footer. Note the “clear” declaration, which tells the browser not to position the previous divs beside this one. Also note that the left and right padding are added to the overall width of the div, so you need to subtract those amounts from the total width to match the width of the wrapper and header, which have no padding.

#footer{
width: 770px;
background: #333333;
color: white;
clear:both;
padding: 5px;
}

Next time, we’ll fill our page with some navigation and content.

admin navigation, web design, web development