June 5th, 2009
Body Element Classes
One thing I’ve started doing somewhat recently is adding a unique class name to the body element of each page. This allows me to write page-specific CSS as necessary without creating an extra stylesheet. Ideally, there should be styles for common elements that make up the site, rather than style for each page, but this can’t always be avoided. One case could be that a particular page needs to have a slightly different layout than the rest of the site. Body element class to the rescue!
Internet Explorer 6
We all know Internet Explorer 6 is a regular pain in the neck, right? Fortunately, it’s easy to add IE6-specific style with this selector: * html [additional selectors...]
For example, the style * html p { font-weight: bold; } makes all paragraphs bold only in Internet Explorer 6. It’s valid, but no other major browser will apply it. This is useful because sometimes the style needed to make things in IE6 look one way is drastically different than what is needed to make it look the same in all the other browsers. A simpler solution, though, is to tell your client to upgrade his 8-year-old browser. 
“Navbars”
A site typically has a “bar” of navigational links. Vertically laid out navigation is easy to create and append additional links later. Horizontal navigation is sometimes desired instead, but it’s not always as trivial to append and can be a little trickier to achieve.
This tip will be focused on horizontal navigation. First, you should most definitely use unordered lists (the ul element) to organize your navigation links whether you’re using vertical, horizontal, upside-down, or anything-else-you-can-think of navigation. (See the W3’s excellent webmaster tips for more on unordered lists and their uses.) Once you’ve marked up your navigational links, jump over to the stylesheet and add a display: inline; line to your navigation’s li elements. Now take a step back and behold your now-horizontal navigational links!
If you find you need to set the width and height of your links, just set the display type of the a elements to inline-block, which I was surprised to find out was actually supported in Internet Explorer 6! Once you’ve set that, your links will behave like block-level elements as far as styling goes, but they will remain positioned inline. Sweet!
Well, that’s all for now. Make sure to check back occasionally for more random web tips from your Uncle Kyle!
Tags: CSS, random, standards, tips, Web Design, XHTML
Posted in Web Design, Web Standards | No Comments »
April 9th, 2009
Greetings! Many times we have clients that have trouble understanding the role of web standards and why they are important. So I created this high level explanation that I hope will suffice. It is, by its very nature, simplified and incomplete, so don’t stone me to death. Here goes…
The World Wide Web Consortium (www.w3.org) is the standards body for the internet. They define the standard “language” or markup that web pages are written in. All of our documents are written in the strict flavor of XHTML (eXtensible Hypertext Markup Language) 1.0 which is very intolerant of errors. Conforming to these standards has several practical benefits. First, the site is easier to update since all of the content is easy to read and logically organized. This reduces cost for updates to the site. The W3 provides a validator to check pages against the XHTML standard and report any errors that it finds.
Secondly, strict XHTML mandates that the graphical presentation of the page (how it looks) be separated from the actual content of the page. So there is a separate file we create called a “stylesheet” that determines how the page will look. All of the graphics, colors, and layout are determined by this stylesheet. This is a benefit because it makes for smaller, faster loading pages which can rank higher in search engines than bloated pages that are slow to load. It also makes it easier to update how the site looks. For example, as autumn approaches you could change the entire look of the site by changing the colors in the stylesheet to fall colors. This is much more efficient than redesigning a site in the old days when each individual page had to be changed at great expense.
Lastly, search engines look for unique, relevant content that is organized well. By keeping all of the content in a separate file, the content can be organized so that the most important information is close to the top of the document while repetitive elements such as the navigation links are closer to the footer. The major search engines find standards-compliant XHTML documents easier to index and typically they rank much higher than pages that have many errors.
There is a great FAQ on web standards and their importance at:
http://www.webstandards.org/learn/faq/
Good Luck!
Tags: CSS, SEO, W3C, Web Standards, XHTML
Posted in SEO, Web Design, Web Standards | 1 Comment »
March 9th, 2009
Congratulations, Alan Vickery on passing the Google Certified Advertising Professional Exam.
What is Google Adwords?
Tags: Google Adwords, Google Certified Advertising Professional
Posted in Internet Advertising, Internet Marketing | No Comments »
February 24th, 2009
Email marketing has been much maligned in years past due to the proliferation of spam by unscrupulous marketeers. There are few things more frustrating than sitting down to check your email only to wade through countless profane and inane messages sent to you without a single thought. So does email marketing have a legitimate purpose? Sure it does! In 2006, United States firms spent $400 million on email marketing and President Barack Obama would likely be heading back to the United States Senate if it weren’t for the shrewd use of email marketing in his 2008 campaign.
One of the primary roadblocks to effectively using email marketing is compliance with a federal law which can mean an $11,000 fine for each non-compliant email. Luckily this obstacle only takes a bit of common sense and an appropriate dash of technology to overcome. Compliance means conforming to the prescriptive methods of permission based email marketing set forth in the CAN-SPAM Act of 2003. A summary of the federal law can be found in the CAN-SPAM article on Wikipedia. The statute places restrictions on how email is sent, the content it contains, and prescribes methods for opting-out or unsubscribing from the email. One of the quickest and most cost effective methods of sending out massive amounts of email without getting blacklisted is to use a reputable email marketing service like iContact or Constant Contact. Prices for these services vary on the size of your email list and the features that you would like to use, but basically all these different services let you create custom forms for your website where your users signup to receive your emails. The user is then sent an automatic email to make sure they want to sign up, this is known as “double opt-in.” The client is then placed in your email database on the service which can be centrally administered. You then have a single place to track the performance of your email marketing campaign and see if you need to make any changes to your strategy. The dashboard shows how many people opened your email and also how many took action and clicked through to your website.
Getting back to the original premise, using an email marketing service like iContact can keep your customers, vendors, and friends aware of new products, services, or specials that your company may be offering. Studies have shown that customers that are consistently “touched” or contacted on a regular basis are more likely to make a purchase. So take advantage of their trial period and take your email marketing to the next level.
Good luck!
Tags: Branding, Email Marketing, Mindshare, Website Promotion
Posted in Internet Advertising, Internet Marketing, Technology | 3 Comments »
February 13th, 2009
Don’t know when to use the img element or when to use the CSS background-image property? Don’t fret; there is hope. Read further and all shall be revealed.
The img element is best used for pictures that are completely unrelated to the stylesheet. That is, pictures that would need to display no matter how much the look of the site changes. These would be pictures related to a news article or photos in a gallery.
The CSS background-image property is for images that make up the appearance of the stylesheet. These pictures on one stylesheet would be different or just completely absent on another stylesheet. They don’t add to the content of the page in any way and are only there to give the page its “look”. These image files would be stored in the stylesheet’s images folder. (See my last post for more on this.)
Just another tip from your uncle Kyle!
Tags: CSS, Web Design, web development, XHTML
Posted in Web Design, Web Standards | No Comments »
February 13th, 2009
When I create a web site, I like to organize my stylesheets and images into a specific folder structure. It keeps things tidy and separates presentation files (stylesheets and images) from content files (pages and images related to the content). It also leaves room for additional stylesheet “themes” for your site.
Here is an example of this folder structure:
/styles/
/styles/default/
/styles/default/images/
Default in this example would be the name of the “theme”. The sites I develop typically do not have multiple themes for the user to pick, so I don’t usually take the time to give them fancy names. However, if your site utilizes multiple stylesheets that the user could choose from (such as at the CSS Zen Garden), creative names would be helpful.
All stylesheets for the Default theme would be placed in the /styles/default/ folder. Likewise, images used by those stylesheets would go in the /styles/default/images/ folder.
This method keeps your styles consolidated and makes it easy to use them across multiple sites. All you need to do is copy the folder to the other site; you don’t need to pick through the images folder and figure out which ones are used by the stylesheet and which ones aren’t.
Technically, you wouldn’t even need to copy anything to another site. You could just specify the full URL in the link element or @import rule on the page, but I urge you not to do this. Your visitors may be using security software that sees cross-site references as malicious, thus blocking the stylesheet from downloading or, worse, blocking the entire page.
Tags: CSS, organization, Web Design, web development
Posted in Web Design | 1 Comment »
January 24th, 2009
Everyone wants to stretch their AdWords budget to get the best ROI for their money, but how do you know that you are performing at your best? Google includes a tool in standard Adwords accounts called conversion tracking. Put simply, conversion tracking allows you to monitor a user’s actions on your website and links that data to your AdWords stats in terms of budget. You can setup several different types of actions, which are goals that you want your user to accomplish, such as signing up for a newsletter, clicking on a button, completing a purchase, or submitting a form. The action types are:
- Leads
- Signup
- Purchase / Sale
- View of a Key Page
- Other
Setting up the conversion tracking is relatively straightforward. Once you create and name your action you are provided with a snippet of Javascript to place in your page. Results are tracked immediately and can be monitored at the campaign, ad group, and keyword levels. Once enough results are calculated, you will be able to see how much it costs you for a user to take an action. For example, in a week if you have 100 clicks at $2.00 / click and 15 conversions then each conversion will have cost you $13.33. Using this information can become a metric for performance. You canwork on decreasing your cost per click, increasing your Quality Score, and reducing you cost per conversion.
Good Luck!
Tags: Conversion Tracking, CPC, Google Adwords
Posted in Internet Advertising, Internet Marketing | 3 Comments »