Rethinking Web!!: October 2010

Sunday, October 31, 2010

15 CSS Tricks That Must be Learned

As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.

1. Absolute positioning inside a relative positioned element.

Putting an absolutely positioned element inside a relatively positioned element will result in the position being calculated on its nearest positioned ancestor. This is an excellent technique for getting an element to “stick” in a certain spot where you need it, for instance, a header badge.

Demo 1

2. Z-Index and positioning.

z-index can be somewhat of a mystery to developers. Often, you will find designers putting a very large z-index value on a div or element in order to try and get it to overlap another element. What we need to keep in mind, is that z-index only applies to elements that are given a “position” value. If you find an element will not adhere to a z-index rule you’ve applied, add “position:relative” or “position:absolute” to the troublesome div.

Demo 2

3. Margin Auto

Using margin auto in a theme is a fantastic way to get an element centered on the screen without worrying about the users screen size. However, “margin: auto” will only work when a width is declared for the element. This also means to apply margin: auto to inline elements, the display first must be changed to block.

Demo 3

4. Use Padding Carefully and Appropriately

One mistake I often made when starting off with css was using padding without knowing all the effects and the CSS Box Model. Keep in mind that according to the box model, padding adds to the overall width of the element. This can cause a lot of frustration with elements shifting out of place. For example:

#div { width:200px; padding: 30px; border:2px solid #000; }

Equals a total width of 264px (200 + 30 + 30 + 2 + 2). In addition, remember that padding, unlike margins, cannot contain negative values.

5. Hiding text using text-indent

Lets say you have an image you are using for your websites logo. This image will be inside an h1 tag, which is good for SEO, however, we also want to have our text title written in the h1 tags so the search engines can read it easily. Some may be tempted to use “display:none” on an element. Unfortunately, we would have to separate the image logo from the h1 tag if we used this technique. Using text-indent and negative values, we can get passed this like so.

h1 { text-indent:-9999px;/*Hide Text, keep for SEO*/ margin:0 auto; width:948px; background:transparent url("images/header.jpg") no-repeat scroll; }

This will ensure that all text is not visible on any resolution while allowing it stay inside the h1 element containing the logo. This also will not hide the text from screen readers as display none will.

Read more about using text-indent to hide text:

SitePoint-Using text-indent

6. IE Double Float Margin Bugs

I’m sure we have all dealt with this one, as this is one of the most common css “hacks” we need to use. If you haven’t seen this bug before, basically, a floated element with a given margin suddenly has doubled the margin in IE 6 and has dropped out of position! Luckily, the fix is super simple. We just change the display of the floated element to “inline” as seen below.

.yourClass { float: left; width: 350px; margin: 20px 0 15px 100px; display: inline; } Demo 6

This change will have no effect on any browsers since it is a float element, but for some reason in IE it fixes the double margin issue.

7. Using CSS to Fight Spam

This would be something you could include to really spice up your theme description. Alen Grakalic of CSS-Globe.com wrote a fantastic post on how to use css as a kind of CAPTCHA technique. A form is declared like so:

<label for="Name">Name:</label> <input type="text" name="name" /> <label class="captcha" for="captcha">Answer?</label> <input type="text" name="captcha" id="captcha" />

For the id “captcha”, we use a background image via css. This would require the spam scripts to find your html element, scan your css, compare selectors, find the certain selector and background image, and then read that background image. Its pretty safe to say most wont be able to do this. The downside is if someone is not surfing with css enabled, they wont know what to do.

Demo 7

Read more about using css to fight spam:

Fighting spam with CSS

8. PNG in IE 6 Fixes

I’m sure we could all agree dealing with transparent png’s in IE 6 is a real headache. The fixes range from complex Javascript techniques to just using a Microsoft proprietary filter, to using conditional comments to swap them out for a .jpg. Keep in mind, all of these but the conditional comments rely on the Microsoft AlphaImageLoader.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

Read more on how to fix IE 6 PNG transparency:

SuperSleight Fix

Twin Helix Fix

Google’s IE 7.js

9. CSS Cross Browser Transparency

Believe it or not, it is pretty simple to get decent cross browser transparency using css. We can cover, IE, Firefox, Safari, Opera, and old browsers like Netscape Navigator. Chris Coyier recently came to our rescue again demonstrating these techniques.

.yourClass { filter:alpha(opacity=50);/*Needed for IE*/ -moz-opacity:0.5;/*Older mozilla broswers like NN*/ -khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/ opacity: 0.5;/*FF, Safari, and Opera*/ } Demo 9

This wont validate, but its not really an issue and the ThemeForest staff is pretty understanding when it comes to techniques like this.

10. Use CSS Image Sprites

CSS Image sprites are a fantastic way to load many of your css images at one time, in addition to reducing http requests and the file size of your theme. In addition, you wont have to deal with any images “flickering” on hover. CSS Image sprites are achieved by putting many of your image elements all into one image. We then use css to adjust the background position, width, and height to get the image where we want it.

Demo 10

Resources for image sprites:

A List Apart-CSS Sprites

How to use image sprites

David Walsh on CSS Sprites

11. Use Conditional Comments to support IE 6

Far too often, web developers are forced to introduce new css rules and declarations that only apply to certain versions of IE. If your not familiar with a conditional comment, the code below would only link to a style sheet if the users browser is less than or equal to IE 7:

This code would go in the head section of your html file. If the css does not seem to be taking place in IE after you have linked to your specific style sheet, try getting more specific with your css selections to override default styles.

12. CSS Specificity

As mentioned above, CSS styles follow an order of specificity and point values to determine when styles override one another or take precedence. Nettuts recently had a nice article in which the point values for css were explained. They are like so:

Elements – 1 points

Classes – 10 points

Identifiers – 100 points

Inline Styling – 1000 points

When in doubt, get more specific with your style declarations. You can also use the !important declaration for debugging purposes if needed.

Demo 12

13.Achieving a minimum height in all browsers.

When developing, we often realize we need an element to have at least a certain height, and then stretch to accommodate more content if needed. Unfortunately, IE doest recognize the min-height property correctly. Fortunately, we have what is known as the min-height fast hack, that goes like so:

#yourId { min-height:300px; height:auto !important; height:300px;/*Needs to match the min height pixels above*/ } Demo 13

Simple, effective, and it validates just fine. This is also one of the few cases when the !important feature comes in great handy.

14. The * HTML hack

If you need or wish to avoid linking to IE specific style sheets, one can use the * html hack. In a perfect world, the HTML element will always be the root element, so any * before html would not apply. Nevertheless, IE treats this as a perfectly legitimate declaration. So if we needed to target a certain element in IE, we could do this:

* html body div#sideBar { display:inline; }

15. Sliding Doors Technique

One major problem with using images for navigation buttons, is that you run the risk of the clients text being too long and extending past the button, or being cut off. Using two images and the css sliding doors technique, we can create buttons that will expand to fit the text inside. The idea behind this technique, is using two images for each button, and applying the images via a background declaration in CSS. For example:

HTML Markup: Your Title CSS: a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Image height */ margin-right: 6px; padding-right: 20px;/*Image Width*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Image Height */ padding: /*Change to how you see fit*/ } Demo 15

Read more about sliding doors technique:

A List Apart on Sliding Doors

Dynamic Drive-an example of the sliding doors technique

And there you have it, a list of 15 css techniques to help you when developing a theme. CSS is great for designers as it allows us to be creative with code and use our own techniques to accomplish a job.

Wednesday, October 27, 2010

Joomla! Security – Ever been hacked? Sorting fact from fiction. Useful security tips for Joomla! users.

I think it is fair to say that Joomla! has received a lot of unjustified and misinformed criticism from many in the web hosting community. In my opinion the main reason for this is that when a Joomla! powered website is hacked on a host’s server then the vast majority of providers automatically assume the problem lies with Joomla! itself (because that’s what the site is running) and immediately tag it as a script with a lot of security problems without any proper research. Some hosts have even gone as far as banning Joomla! from their servers.

The vast majority of security issues that come up with Joomla! sites are nothing to do with the core code released by Joomla! themselves but due to poorly coded, insecure or out of date third-party extensions that are installed under Joomla. Even if your Joomla install is kept fully updated but you have a single insecure extension installed then this will allow your entire site to be compromised. Vulnerable extensions are lethal to your site security.

1. Host your site on a server that runs PHP in CGI mode with su_php. This means that PHP runs under your own account user instead of the global Apache user and you don’t need to set insecure global permissions like CHMOD of 777. Not having PHP configured in this way opens you up to cross-account attacks from other users on the shared server since you will need to CHMOD to 777 any directories Joomla! need to be able to write to. It also makes installing and managing extensions a real nightmare for the webmaster.

2. Providing you are hosted on a server that runs PHP as directed above then you should ensure all of your files are CHMOD to 644 and directories to 755. You should never CHMOD any files or directories to 777, especially your configuration.php file.

3. The Joomla! FTP Layer was developed as a work around solution in case a user was hosting a site on a server that did not run PHP under the account user. It allows for extensions to be installed under Joomla without running into file ownership issues. Unfortunately, it also opens up a potential security hole since your FTP details are stored in plain text under a Joomla! configuration file. If you are hosting in a secured and tuned environment, like we have here at Rochen, then you don’t actually need the FTP layer to be enabled as extensions will install out of the box without any hassle and you can manage them without running into file ownership issues. You should disable the Joomla FTP Layer and ensure it has not stored your login details.

4. There was a security issue with Joomla reported around a month ago that allowed an attacker to reset the Joomla administrator password for a site. Although it is not a complete solution a really simple thing you can do to help protect yourself if an issue like this comes up again is to change your Joomla! administrator username. Change it from the default “admin” to something else like “chris.admin”. Make it that bit harder for an attacker to compromise your site.

5. Although it might be tempting to install every extension under the sun (there are a lot of wonderful ones out there and some not so great!) only install the ones you need. The more you install under Joomla! then the more likely your site is to be compromised. You should also ensure you remove any components (including the files themselves via FTP) for any extensions you are not using.

6. It might seem like an obvious one but ensure your web hosting provider is keeping up with their responsibilities. Ensure they are keeping PHP and other software on the server updated (nobody should be running PHP4 anymore as it is now “End of Life” and potentially open to security issues), ensure they are running their operations in a secure way (PHP in CGI mode with su_php as noted above) and ensure they are taking steps to help ward off attackers by running modules like mod_security under Apache and open_basedir under PHP. Having mod_security on your server can help to stop a lot of XSS attacks against your Joomla! install getting through, but it can’t stop them all so you still need to ensure you keep up with your Joomla! security updates.

7. Ensure you are setting secure passwords for both your Joomla! administrator user but also your web hosting account control panel and FTP logins. It would be a real shame to have spent lots of time securing your Joomla! install to then let an attacker in through a weak password. I recommend a password that is at least 8 characters in length and containers letters (both upper and lower case), numbers and at least one symbol. Also ensure your passwords do not contain dictionary words. Using a password generator is a good idea.

8. Another useful tip I can share with you is to password protect your Joomla! /administrator directory. You can do this under an Apache web server using a .htaccess file and if you are a Rochen customer this can be easily configured using the “Password Protection” option within your control panel. By password protecting the /administror directory you will have to enter a username and password prior to reaching the Joomla! administrator login page. It means that even if your Joomla! admin password is stolen then your site is still largely protected since the attacker will not be able to reach your administrator login page. Remember, it is important to use a diffrent password on the /administrator directory than you do for your Joomla! admin password or it defeats the purpose of doing this.

9. Last but not least, and probably most important, you need to ensure you keep your Joomla install itself fully updated with the latest security patches from Joomla. You also need to ensure you keep all of your extension installs updated too. Remember, even if your Joomla install is updated having even one insecure extension can allow your site to be compromised. You should subscribe to the Joomla Security Mailing List as well as the mailing lists maintained by the developers of third-party extensions you have installed. If you are using an extension from a developer that doesn’t maintain a security mailing list, then question them why. It is something all developers should be doing.

One other thing worth mentioning. If your Joomla! site hosted at Rochen is hacked then you can easily roll your account back within a few minutes to points in time over the past 30 days using Vault recovery system (if provided by your Hosting service provider). Simply login, select the files you want to restore and boom – your site is rolled back to an unhacked state. You do of course then need to secure the site otherwise it will simply be hacked again, but if you follow what I have outlined in this post then your Joomla! powered sites being hacked should be a thing of the past.

Wednesday, October 20, 2010

Top 7 CSS Tricks for Better SEO

As most of us know it is often really difficult to build websites for both the user and Google.

Google still needs to be assisted in finding and assessing a website’s worth to such an extent that it can break the user experience altogether.

Of course there are plenty of CSS solutions to remedy Google’s weaknesses. Although I do not like the term tricks I have to refer to them as CSS tricks as in fact these are often workarounds to suit Google. Google spiders are still barely able to deal with most advanced web technologies like Flash or AJAX.

Google spiders are like little children, you really have to assist them to find stuff and understand it.

There are other search engines of course but they struggle even more so to keep it simple I will concentrate on Google, which is the by far dominant search engine in most of the western markets.

On a side note: “Trick” sounds like “black hat SEO” or cheating search engines. Well, take a look at them yourself and tell me whether I’m cheating or whether Google is making web development a pain in the back.

OK, then. Let me present to the top 7 CSS tricks for better SEO in no particular order:

1. CSS Pagination

Google has a serious problem with ranking long articles which are divided into several parts. Also long one page articles will outrank short ones usually. Apart from that the usability is key in making your visitors read the whole article so you don’t want users neither to scroll for ages nor to click a link and send a request each time they want to get to the next page of your article.

The solution is CSS pagination. Isn’t it hidden text though? Hidden text is one of the oldest “tricks” to cheat search engines, webmasters still employ it and my potential clients sometimes wonder why they don’t rank while using hidden text. So hands off hidden text! Anyways this way you can divide the content into easily digestible parts while still having it on one page. Take heed to another limitation of Google: The crawler might not crawl a very large page in its entirety.

2. Absolute Positioning

The higher your content is on a given page the more it counts for Google. Google does not see a page like a human being, it crawls the code. Thus the higher your content is in the code the better. So if you have a complex site with lots of menus, scripts and other gimmicks you should consider absolute positioning otherwise Google might even stop crawling your page before it reaches the main content. You can place the actual content high up in the code, at the top, while the users will see it in the middle of the page below the menus.

3. Styling h1, h2, h* Headlines

In HTML the h1 headline appears huge by default, the h2 is still much larger than the rest of the page copy etc. Many web designers thus used divs and spans for headlines for years to style them the way needed. Now Google won’t know what the headline is unless you tell Google by using h* tags. It’s like in 1999: You really need to use h1, h2 etc.

Of course you don’t have to make huge h1 headlines like in pre CSS times. Just style the h1 the size you want, also you can get rid off the line-height etc. which h1 headline force upon you by using the display: inline; attribute.

4. sIfr/Image Replacement for Headlines

Many people will argue that styling headlines with CSS is not enough for web designers. They are in fact right. I think it’s by now grotesque that we’re in 2010 and we still are quite limited to less than a dozen basic standard “web safe” fonts for web design. We were meant to have flying cars by 2000 and now we do not even have real typography on the web.

Many people have tackled this problem with image replacement techniques for headlines, which in short will hide the original headline and insert an image in it’s place. Some of them are fairly advanced , others are very simple. No isn’t it hidden text again? Yes, it is! Also some of these methods will hamper your SEO efforts more directly as the crawlers won’t recognize the headline anymore.

There is one popular image replace technique called sIfr which has been officially approved by Google. It uses Flash to display the headline in any font you wish but in code the h* tags are still recognizable.

5. Using Lists (ul/ol)

Most SEO experts agree by now that so called keyword density is not a major positive ranking factor. It means that mentioning your keywords 20 times instead of 5 will not make you rank better in Google. You may get penalized for so called keyword stuffing though. Now what to do in case where you really need to use the same words over and over?

Use an unordered or ordered list. Google allows repetition in lists without penalizing you.

With CSS you can style lists in any way you desire so that if you do not want a list to be clearly visible list style it accordingly. Some people do even a whole site design without tables and layers (divs) or even spans.

6. CSS Sprites

Now that site speed is an official ranking factor at Google even the webmasters who didn’t care about fast loading pages until now have to. One simple technique to use reduce page load and the number of requests is the usage of so called CSS sprites. CSS sprites are basically several small images merged into one big image.

Instead of loading each image by itself you can load just the CSS sprite and display only part of it depending on the user interaction. You use a background-image for that purpose and move the displayed area on click or mouse over then. In order to accomplish that you simply change the background-position in the CSS.

7. Pure CSS Menus

While pure CSS menues are not really a trick most people still assume that you need JavaScript or other enhancements to make dynamic menus. Well it’s not true, many advanced CSS only menus offer slick interactivitywhile being the best choice for Google and other search engine spiders.

Now can you use this methods for cheating Google? Well, I guess you can, but these techniques are so low level that Google won’t count it anyway. For all those who mistake SEO with spam: Spam works on a whole different level nowadays so using stuff like hidden text is ridiculous by now.

These CSS tricks can help you with legitimate SEO efforts.

I do not like the term white hat SEO as it acknowledges that there is another kind of SEO (I don’t agree with that premise, I rather divide: Either it’s SEO or it’s spam). Nonetheless: It’s all white hat SEO if you ask me.

Now you might argue this is not SEO 2.0, these are SEO basics known for years but it’s not really the case, the web developer community is rather keen on web standards to the point of dogma where for instance absolute positioning is frowned upon. So most people won’t use it.

Friday, October 15, 2010

Facebook and Microsoft partner on new social-search features

Microsoft and Bing are partnering to “make Bing search more social.” In Web 2.0 speak, the idea is search graph + web graph = better answers.

Microsoft and Facebook execs outlined their latest people-focused search work during an event on Microsoft’s Silicon Valley research campus on October 13.

The main idea is to improve Bing results’ relevance by using Facebook Instant Personalization. And to improve Facebook’s Web-search results that are powered by Bing. From the Facebook explanation of today’s announcement: “When you search for something on Bing or in web results on Facebook (powered by Bing), you’ll be able to see your friends’ faces next to web pages they’ve liked.” (Don’t worry: You can opt out.)

The actual deliverables from today’s announcement are two new social search features Microsoft and Facebook developed in tandem. They will begin rolling out to users on October 13 and will continue to populate in “the coming months.” The features are “Liked Results” (recommendations from their Facebook friends that are built on Facebook’s public “Like” feature) and “Facebook Profile Search” (which will provide user-search results based on their relevancy to the searcher’s Facebook network and friends.)

Microsoft researchers have been working on these kinds of social-search concept for a while. The first reference I could find was a Microsoft Research project codenamed “Nocturnal.”

“Nocturnal that aims to use an established online community to provide a mechanism for giving reviews and recommendations from your social circle a higher priority when you search the Web,” explained an article on the Microsoft Research web site from 2007.

More recently, Microsoft researchers published a white paper entitled “A Comparison of Information Seeking Using Search Engines and Social Networks.” (Microsoft shared the paper at the SMX East conference earlier this month.)

The Microsoft researchers conducted a study in which 12 participants posted a question to Facebook while simultaneously trying to find the answer to the same question using Web search. The result? “Search engines and social networks each provide value at different stages in the search process.”

I’d agree with that assessment. Some queries I wouldn’t mind asking my Facebook “friends.” What’s the best place for Dim Sum in San Francisco? Sure, I’d want to see what my Facebook friends think.

Some queries I wouldn’t trust to those friends. No offense to my “friends,” but my Facebook account is a work account and while it includes some people I would call “friends,” many of the folks I’ve accepted I’ve never met. I don’t know them and they don’t know me. They’re folks who follow my coverage of Microsoft. I don’t want to know which movies they think I should see or which iPad case I should buy.

From what the executives said at today’s press conference, it sounds like Microsoft and Facebook have other jointly-developed search tricks up their sleeves. (Facebook CEO Mark Zuckerberg made a passing reference to another maps-related one, with no details.)

I see today’s announcement as indicating even more clearly that Bing and Facebook are taking different paths with search. Bing is definitely optimizing for the everyday consumer’s search habits. ut I am not the typical search user: I typically use search as much, if not more, to find specific quotes at press conferences, technical articles and other general-search results. I still find the best results for these kinds of research queries on Google, not Bing.

Tuesday, October 12, 2010

SEO Pro Tip: Use Google Blogs to Find Fresh, Relevant Blog Posts for Link-Building

As I’ve mentioned previously, link-building is one of the most important aspects of SEO (Search Engine Optimization). It seems that there are SEOs these days who would like to see blog and forum commenting done away with completely, but I disagree with that (as I imagine most people actually doing SEO full-time today do as well). It can be a challenge to find good, relevant, non-spammy blogs to either guest post on or leave genuine feedback on, so I hope this method helps out a few of you who are faced with the timeless and inevitable challenge of building links. In order of steps:

1 - Visit Google Blogs.

2 - Type in one of the keyword terms that the content on your landing page focuses on. Don’t be afraid to use quotes around your keyword term if it contains more than one word. Ex. “Nickel Cadmium”

3 - On the left-hand column, you can sort your results by time/date. I usually like to start with “last hour,” then work my way down to “past week.” This will allow you to find fresh, hyper-targeted blog posts to browse through and cherry-pick the best-of-the-best!

When you do this, make sure that you’re not just picking spam-filled blogs that scrape content from somewhere on the Web. It’s pretty easy to figure out which blogs are spam/auto blogs due to how they look, how their content reads and how their content is formatted. Because the content you will be finding is so new, it won’t behoove you to check out any of the metrics that exist for gauging the strength of a page, so if you’re concerned about that, just go take a look at the home page of the site and gather all the metrics you typically do (PageRank, mozRank, mozTrust, Alexa Rank, Compete score, et al).

Additionally, if you want to see how that site’s content typically performs, try using SEOmoz’s Open Site Explorer to find the strongest pages and number of unique root domains linking to them. If you don’t know how to do that, then go to Open Site Explorer (sign up for a free account so that you can view stats for 20 pages), search for the domain you’re interested in (don’t forget to consider both www and non-www versions of the site if they don’t 301), then click the “Top Pages” tab in the results. Voila!

As for “nofollow” and “dofollow,” it’s your judgment call. Do you want to have a more natural-looking link profile? If so, then just go ahead and leave comments (not spammy, of course — always make your comments constructive and relevant) on some “nofollow” blogs. Do you only need “dofollow” links? If so, then your blog searching will inevitably be a bit more exhaustive (hopefully, you’re using something like the SEOmoz Firefox plug-in to quickly see which sites/blogs are “nofollow”). Although commenting will suffice, one of the best things you could do is ask to guest post on that blog and provide an article based on the topic you’re interested in; so, take that into consideration, too.

That pretty much does it for the method I wanted to demonstrate in this post. For your consideration, I’ve decided to add a few additional tips below that will play well with this method. I hope that you find them useful in correlation with the method above and/or with your other link-building endeavors. Good luck and have fun searching!

Bonus Tip 01: If you do decide to leave a comment on a blog, try submitting that blog’s home page and RSS URL to pinging services likePing-O-Matic and Pingoat. There’s no guarantee that the result will be Google’s bot revisiting that blog and finding your comment any faster than if you hadn’t submitted the blog, but it takes all of 15 seconds each to submit and you very well may be doing yourself a favor by doing so!

Bonus Tip 02: If you are curious as to seeing if/when Google has cached a page with your comment, simply search for that page in Google, click “cached,” then look up at the top where it says, “…a snapshot of the page as it appeared on…” The time and date you see will be the most recent cache of that page! If the time and date are later than the time and date you commented, then scroll down and see if your comment was cached along with the page.

Bonus Tip 03: Set up Google Alerts and have Google email you whenever they index a new blog post related to a keyword term you’re interested in! Simply visit Google Alerts, put in your keyword term, select “Blogs” from the type selection box, select how often you want to receive results, then select the volume of results you want and enter your email address and you’re all set!

Sunday, October 10, 2010

3 Truths of SEO

This post is something I feel SEO (Search Engine Optimization) desperately needs: A plea for its legitimacy. The following short list is comprised of three simple truths which I hope will aid in establishing the legitimacy of SEO for you beyond the shadow of a doubt — even if you do not yet understand exactly how or why. SEO has an incredibly tarnished image throughout many industries and schools of thought thanks to spammers and the black hat tactics often associated with the industry. Likewise, it doesn’t help that SEO is often thought to be unquantifiable, unqualifiable, and ultimately unjustifiable by many. So, without any further adieu, here are 3 simple truths to defend the integrity of white hat SEO.

Truth 1: SEO is an Acronym; not a Word

I can’t tell you how often I hear and see “SEO” spoken as a word in some cynical context. “SEO is just a bunch of hocus pocus used to pad search engine results.” It’s almost as if “SEO” has become a word synonymous with everything negative on the Web. Just so we’re clear, it stands for “Search Engine Optimization.” It is also used to reference a person as a “Search Engine Optimizer;” as in, “Jon Payne is one of the best SEOs in the industry.”

Anyway, just what exactly does “Search Engine Optimization” mean? In its most basic form, it simply means optimizing your Web site for search engines. It ranges from optimizing content and code on your Web site to optimizing content on other Web sites that are relevant to your Web site (more on this later). Yes, there are black hat SEO tactics (high-risk and excessively spammy tactics that can be leveraged to cheat your way to higher rankings) and white hat SEO tactics (the tactics I will focus on teaching and that many people build legitimate, long-standing businesses off of), but just realize that SEO is not a word defined as cheating search engines and spamming searchers.

Truth 2: Eating, Drinking, Breathing and Sleeping SEO

It’s important for you to realize that while there are plenty of “black hat SEOs” out there who lie, steal, and cheat their way to higher rankings, there are equally as many — if not more — who eat, drink, breathe, and sleep white hat SEO practices. Those people make this stuff their life because they’re interested in it and they’re interested in genuinely helping their clients to succeed! Some people run legitimate agencies, others take the role of consulting, and then you have the individuals who REALLY dig in and tread not-yet-trodden paths.

People do this for their livelihood and they earn an honest living doing as such. The problem becomes trying to flesh out just who is legitimate and who is not. Luckily, there are some quick signs to look for which will aid you in spotting the difference should you be in the market for hiring an SEO agency or consultant. For instance, anyone who guarantees top-rank results before ever speaking with you most likely isn’t worth hiring. I will dive much deeper into the topic of spotting shady SEO agencies/consultants soon in another post.

Truth 3: Good Enough for Microsoft and Google; Good Enough for You

If Google and Microsoft speak in terms of SEO, why shouldn’t you? My final and undoubtedly most compelling point; here are two of the most successful companies in the world with tremendous presence on the Internet who discuss and implement SEO — and not just in some minuscule capacity, either! Please reference the following links which help support this 3rd and final truth:

1 - Google’s Dedicated Site and Guide to SEO: Google has a page dedicated to what you need to know when it comes to hiring an SEO. The page also includes a beginner’s guide to SEO. ‘nough said! Click here to view the page and click here to download the guide (it’s a PDF).

2 - Google’s Face of SEO, Matt Cutts: Although addressing SEO is not his primary role, he spends a lot of time addressing it. In a lot of ways, he is our lifeline to a small fraction of Google’s views and mechanisms with search and SEO. Click Here to visit his blog.

3 - Microsoft’s SEO Toolkit: Yes, Microsoft has created a tool which will essentially crawl your site and provide a detailed report of areas needing some SEO lovin’. If you will, recall the context in which I defined SEO in truth 1. Optimized content and code are what Microsoft has based its tool on. Click Here to read all about it and download it. It’s FREE!

4 - Microsoft’s Face of SEO, Chris Moore: Less known in the SEO realm is Microsoft Program manager Chris Moore. He diligently posts about SEO in relation to Microsoft; the ways they implement it, places they discuss it, et al. Even if for nothing else, this just goes to show how a company like Microsoft chooses to invest in SEO. Click here to check out his blog on Microsoft’s MSDN blog network!

3 Simple Truths: Conclusion

I hope this post goes to show you just how legitimate SEO really is. As with many things in life, you have to take the good with the bad and SEO is not exempt from that. The points to take away from this post are clarification of exactly what you should mean from now on when you say “SEO,” the fact that plenty of positive forces out there live and breathe honest SEO practices, and the fact that companies as big as Google and Microsoft clearly invest in SEO (which means you should, too).

Thursday, October 7, 2010

Mark Zuckerberg on the “Biggest Problem in Social Networking” [INTERVIEW]

The new version of Facebook Groups has made its debut. The driving force behind it and two other new features the company launched today is Facebook CEO Mark Zuckerberg’s philosophy of personal data ownership and control.

Earlier today, I had a chance to sit down with the iconic Facebook founder along with Groups Product Manager Justin Schaffer at the company’s Palo Alto offices. We discussed everything from Facebook’s algorithms to Zuckerberg’s take on The Social Network; however, the meat of the conversation was Zuckerberg’s belief that Groups will change Facebook for the better.

The first thing I asked Zuckerberg and Schaffer was how they felt the new version of Groups would change Facebook user behavior. Zuckerberg responded that it wasn’t just about mapping the all the groups in the social graph. It was also about creating “the kind of interaction we want to make possible.”

Before today’s changes, interactions on Facebook were primarily one-on-one (messages) or interactions with all of your Facebook friends (status updates). From what I gathered, Groups is designed to solve that issue, something that Zuckerberg calls “the biggest problem in social networking.”

“I don’t think we’re done. It’s just the start of solving the biggest problem,” Facebooks CEO said when I asked him what he felt was the company’s next big challenge.

Zuckerberg believes that the Groups feature will be a hit with users. The original Groups feature had limited engagement, but Zuckerberg simply believes the new version of Groups is “fun.” The new one, focused around Group Chat, shared networks and notifications, definitely has a deeper array of engagement tools, but will users adopt them into their daily routines? “I wouldn’t be surprised if only 5% or 10% create groups,” he said. Still, he noted that’s 25 to 50 million people — not a small number by any standard.

The power of Groups though, in Zuckerberg’s mind, is that the 5% to 10% that do actually create groups will invite their friends and help define these subsets of the social graph. Being part of a group gives these users access to its notifications, which should drive up engagement and make Groups into something many people will use.
However, Zuckerberg cautions that it’s going to take months for Groups to fully evolve.

The Limits of Groups

We also discussed the design and function of groups. What if someone wants to create a group for all of San Francisco? How about a group for all of Facebook?

There are no limits to how many people can be part of a group, Zuckerberg said. However, he noted that the product’s functionality degrades after 250 people become members of a group. Two key examples Facebook’s CEO cited were that Group Chat is immediately disabled at 250 members and that e-mail notifications dwindle down from actions by all members to only actions by your friends in the group.

These triggers are part of the company’s attempt to limit information overload, something Facebook’s CEO touched on during the public Q&A session.

The key point I gathered from our entire conversation though was that Zuckerberg and his team felt that there was a major hole in Facebook’s functionality, one so serious that the company had to was on lockdown for the past two months to get the feature complete. It’s not the only thing Facebook will be launching during the next few months, but without Groups, the rest of Facebook’s plan couldn’t come to fruition.

Groups is not some one-off product in Zuckerberg’s mind; it will become a core pillar of the Facebook platform. As he told me during the course of our conversation, the issue of grouping friends is inherent to all social applications. He wants the Facebook Platform to be instrumental in helping developers solve this challenge as well.

“Right now, the world isn’t there yet,” he said about solving the problem of defining groups in the social graph. “It’s not as defined as it needs to be.”

Groups is certainly the company’s biggest step towards solving that problem, but don’t expect it to be the last.

Interviewed by : Ben Parr

Wednesday, October 6, 2010

Google Instant: What it Means for You and SEO

Since Google began rolling out Google Instant a week ago, the web has been dancing with all sorts of SEO (Search Engine Optimization) personalities coming out of the woodwork to claim everything from “the death of SEO” to “no impact on SEO whatsoever.” The truth is more on the side of the latter, but we’ll delve into that in a minute.

If you’re unfamiliar with Google Instant; in a nutshell, Google attempts to guess what you’re searching for as you type your query into the search box. The result is a near-real-time return of search results while you’re typing. Additionally, it provides a few suggestions in a drop-down box when you pause/stop typing (almost like Google Suggest did, but with far fewer suggestions now). So, just what does Google Instant mean for you, anyway?

What Google Instant means for you as…

…a searcher:

The primary consideration for Google Instant, searchers are now empowered to find what they want to find faster than they would have found it before Google Instant (by 2-5 seconds, according to the Google-created graph below). The idea is to allow you to leverage search in a much more productive way. For those of you who do intense research and make use of advanced Google queries, Google Instant may very well feel like more of a headache than making headway. Luckily, you can disable Google Instant either in your preferences or via a trigger just to the right of the search box.

…an SEO consultant/agency:

Put simply, Google Instant will not affect your rankings. Traffic, yes. Rankings, no. Google addresses this specifically in a Q & A section on the Google Instant home page (disregard the question’s typo currently residing on the page):

Monitoring your traffic should be your priority for a while and making adjustments to your keyword priorities as necessary. Usually, updates that Google implements are transparent to your clients, but if you see a significant drop in traffic for your monthly report and you accurately narrow it down to Google Instant, don’t scare your clients, but level with them. This is exactly the reason why your SEO work should *always* be done with the caveat that nothing is guaranteed — or guaranteed to last, at least! I know clients don’t want to hear that and to win business, you have to walk a fine line between making promises and being realistic, but I imagine some of you out there have churning stomachs because of what you’re going to have to report for September’s numbers. =)

Lastly, I want to direct you to an excellent post on SearchEngineWatch.com regarding Google Instant. The most interesting point to me is point 7 where they detail how to track Google Instant behavior through Analytics. Very helpful!

…a client implementing SEO:

If you’re paying someone to implement SEO for you and you’re in the habit of receiving monthly traffic/ranking reports, expect to see a dip in traffic and maybe even a wild fluctuation in relation to longtail keyword traffic. As I noted above, keyword rankings themselves aren’t affected by this, but the likelihood that someone will find you based on a longtail keyword search has most likely been decreased. Ask for an explanation, but don’t prod too much or immediately lose faith in your campaign goals or SEO if the explanation is something to the effect of, “this is because of something Google did.” As I noted earlier, it is for reasons like this that absolutely *NO* SEO can guarantee sustainable results. With that said, great SEO agencies/consultants will analyze, adapt, implement, overcome and contribute just like they always have.

Since my aim for this blog is to stay as SEO-centric as possible, I’m not going to delve into the SEM (Search Engine Marketing)/PPC (Pay Per Click) ramifications of Google Instant here. Chances are, if you’re reading this and wondering why I didn’t cover those bases, then you’re already up to par about as much as I am with the industry-wide discussion on those topics. If not, start here.

In conclusion, I’d like to say that although the exact ramifications of Google Instant are yet to be fully analyzed and documented, Google Instant absolutely is not the death of SEO. Nor was the “Mayday update.” Nor was the update before it or the update before it and so on and so forth. For every random opinion touting the death of SEO, there’s an SEO who analyzes, adapts, implements, overcomes and contributes. SEO just becomes more of a specialty due to requiring more focus and hard work to do it right… at least on the research and analysis end of things, that is.

Tuesday, October 5, 2010

Ten CSS tricks you would like to use

1. CSS font shorthand rule

When styling fonts with CSS you may be doing this:

font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif

There's no need though as you can use this CSS shorthand property:

font: bold italic small-caps 1em/1.5em verdana,sans-serif

Much better! Just a few of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.

2. Two classes together

Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like! For example:

<p class="text side">...</p>

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

3. CSS border default value

When writing a border rule you'll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.

If you were to write just border: solid then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!

4. CSS document for printing

Lots of web pages have a link to a print-friendly version. What many of them don't realise is that there's no need because you can set up a second CSS document to be called up when a user prints the page.

So, your page header should contains links to two CSS documents, one for the screen, and one for printing:

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

The first line of code calls up the CSS for the screen (notice the inclusion of media="screen") and the second line calls up the CSS for the printable version (using media="print").

So, what commands should you put in this second CSS document? To work it out, open a blank document and save it as printstyle.css. Next, point the screen CSS command to this document so that the command reads: <link type="text/css" rel="stylesheet" href="printstyle.css" media="screen" />.

Now just keep entering CSS commands until the display on the screen matches how you want the printed version to look. You'll certainly want to make use of the display: none command for navigation, decorative images and non-essential items. For more advice on this, read Print Different, which also mentions the other media for which you can specify CSS files.

5. Image replacement technique

It's always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.

Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you're a widget seller and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

<h1>Buy widgets</h1>

Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:

h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

Be sure to change "image height" to whatever the height of the image is (e.g. 85px)! The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule. Please note, this can cause accessibility issues as any user with images turned off won't be able to see the text.

6. CSS box model hack alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

#box { width: 100px; border: 5px; padding: 20px }

This CSS rule would be applied to:

<div id="box">...</div>

This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions on PC. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.

A simple alternative is to use this CSS:

#box { width: 150px } #box div { border: 5px; padding: 20px }

And the new HTML would be:

<div id="box"><div>...</div></div>

Perfect! Now the box width will always be 150px, regardless of the browser!

7. Centre aligning a block element

Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command:

#content { width: 700px; margin: 0 auto }

You would then enclose <div id="content"> around every item in the body of the HTML document and it'll be given an automatic margin on both its left and right, ensuring that it's always placed in the centre of the screen. Simple... well not quite - we've still got the pre-IE 6 versions on PC to worry about, as these browsers won't centre align the element with this CSS command. You'll have to change the CSS rules:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

This will then centre align the main content, but it'll also centre align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.

8. Vertically aligning with CSS

Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn't really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won't make a difference and the text will be pushed to the top of the box.

Hmmm... not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box - perfect!

9. CSS positioning within a container

One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It's also possible (and often desirable) to position objects within a container. It's simple to do too. Simply assign the following CSS rule to the container:

#container { position: relative }

Now any element within this container will be positioned relative to it. Say you had this HTML structure:

<div id="container"><div id="navigation">...</div></div>

To position the navigation exactly 30px from the left and 5px from the top of the container box, you could use these CSS commands:

#navigation { position: absolute; left: 30px; top: 5px }

Perfect! In this particular example, you could of course also use margin: 5px 0 0 30px, but there are some cases where it's preferable to use positioning.

10. Background colour running to the screen bottom

One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn't suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:

#navigation { background: blue; width: 150px }

Just one problem though: Because the navigation items don't continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?

Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:

body { background: url(blue-image.gif) 0 0 repeat-y }

This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can't express the left column in terms of em, as if the user resizes text and the column expands, it's background colour won't.

Using this method the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.