August 6th, 2008 / 1 Comment » / by pisakec
Coding and setting up your site to be SEO friendly can improve how well a search engine can access your website, it doesn’t guarantee you’ll end up at the top of the search engine result page (SERP). There are many factors in determining the search result position, but here are the basics:
PageRank
Some professional SEO’s pay attention to Google’s PageRank and some don’t. In my experience it doesn’t hurt to have a high Google PageRank. It’s a nice little benchmark to let you know how important Google sees your web page as. You can improve your PageRank by following the tips above and building-up quality backlinks. If you want to learn how PageRank works, Smashing Magazine has a very good article.
Domain Age Before Beauty
You might be surprised to learn that domain age is also a factor in the search engine algorithm. Older domains have a history, and their content is looked at as more credible than the website that got started last week. Older domains sometimes get the edge in search results.
Be Patient
You may have done every single thing right., but your site is still not showing up in the search engines for your target keywords. Why? Because everything takes time. It takes time for the search engines to index and rank your site (especially for new domains). So, be patient.
Another reason — it could be the keywords that you’re trying to target are very competitive. Try altering the keywords on the page and you may have different results. Remember, you are competing with millions of web pages on the internet.
Posted in: seo
Tags: PageRank
August 6th, 2008 / 1 Comment » / by pisakec
Splash Page
I’ve seen this mistake many times where people put up just a big banner image and a link "Click here to enter" on their homepage. The worst case — the "enter" link is embedded in the Flash object, which makes it impossible for the spiders to follow the link.
This is fine if you don’t care about what a search engine knows about your site; otherwise, you’re making a BIG mistake. Your homepage is probably your website’s highest ranking page and gets crawled frequently by web spiders. Your internal pages will not appear in the search engine index without the proper linking structure to internal pages for the spider to follow.
Your homepage should include (at minimum) target keywords and links to important pages.
2. Non-spiderable Flash Menus
Many designers make this mistake by using Flash menus such as those fade-in and animated menus. They might look cool to you but they can’t be seen by the search engines; and thus the links in the Flash menu will not be followed.
3. Image and Flash Content
Web spiders are like a text-based browser, they can’t read the text embedded in the graphic image or Flash. Most designers make this mistake by embedding the important content (such as target keywords) in Flash and image.
4. Overuse of Ajax
A lot of developers are trying to impress their visitor by implementing massive Ajax features (particularly for navigation purposes), but did you know that it is a big SEO mistake? Because Ajax content is loaded dynamically, so it is not spiderable or indexable by search engines.
Another disadvantage of Ajax — since the address URL doesn’t reload, your visitor can not send the current page to their friends.
5. Versioning of Theme Design
For some reason, some designers love to version their theme design into sub level folders (ie. domain.com/v2, v3, v4) and redirect to the new folder. Constantly changing the main root location may cause you to lose backlink counts and ranking.
6. “Click Here” Link Anchor Text
You probably see this a lot where people use "Click here" or "Learn more" as the linking text. This is great if you want to be ranked high for "Click Here". But if you want to tell the search engine that your page is important for a topic, than use that topic/keyword in your link anchor text. It’s much more descriptive (and relevant) to say “learn more about {keyword topic}”
Warning: Don’t use the EXACT same anchor text everywhere on your website. This can sometimes be seen as search engine spam too.
Common Title Tag Mistakes
Same or similar title text:
Every page on your site should have a unique <title> tag with the target keywords in it. Many developers make the mistake of having the same or similar title tags throughout the entire site. That’s like telling the search engine that EVERY page on your site refers to the same topic and one isn’t any more unique than the other.
One good example of bad Title Tag use would be the default WordPress theme. In case you didn’t know, the title tag of the default WordPress theme isn’t
that useful: Site Name > Blog Archive > Post Title. Why isn’t this search engine friendly? Because every single blog post will have the same text "Site Name > Blog Archive >" at the beginning of the title tag. If you really want to include the site name in the title tag, it
should be at the end: Post Title | Site Name.
Exceeding the 65 character limit:
Many bloggers write very long post titles. So what? In search engine result pages, your title tag is used as the link heading. You have about 65 characters (including
spaces) to get your message across or risk it getting cutoff.
Keyword stuffing the title:
Another common mistake people tend to make is overfilling the title tag with keywords. Saying the same thing 3 times doesn’t make you more relevant. Keyword stuffing in the Title Tag is looked at as search engine spam (not good). But it might be smart to repeat the same word in different ways:
“Photo” and “Photography” are the same word repeated twice but in different ways because your audience might use either one when performing a search query.
8. Empty Image Alt Attribute
You should always describe your image in the alt attribute. The alt attribute is what describes your image to a blind web user. Guess what? Search engines can’t see images so your alt attribute is a factor in illustrating what your page is relevant for.
Hint: Properly describing your images can help your ranking in the image search results. For example, Google image search brings me hundreds of referrals everyday for the search terms "abstract" and "dj".
Unfriendly URLs
Most blog or CMS platforms have a friendly URL feature built-in, however, not every blogger is taking advantage of this. Friendly URL’s are good for both your human audience and the search engines. The URL is also an important spot where your keywords should appear.
Example of Friendly URL: domain.com/page-title
Example of Dynamic URL: domain.com/?p=12356
Posted in: seo
August 5th, 2008 / No Comments » / by pisakec
http://thedesigned.com/
Posted in: bookmarks
July 28th, 2008 / 1 Comment » / by pisakec
Have a look for your self at the at the script.aculo.us reflector and the script.aculo.us reflector demo.
Posted in: bookmarks
July 27th, 2008 / 1 Comment » / by pisakec
<script language=”JavaScript”>
function changePage(list){
window.location.href = list.options[list.selectedIndex].value;
}
</script>
<form name=”cvsLINKS”>
<select name=”cvsDEPARTMENTS” onChange=”changePage(document.cvsLINKS.cvsDEPARTMENTS)”>
<option value=”http://webmd.cvs.com/catalog/otchome.asp” selected> Shopping Aisles
<option value=”http://webmd.cvs.com/catalog/otcdeptlisting.asp?deptid=6″> Occasions & Gifts
<option value=”http://webmd.cvs.com/catalog/otcdeptlisting.asp?deptid=1″> Health & Wellness
<option value=”http://webmd.cvs.com/catalog/otcdeptlisting.asp?deptid=3″> Personal Care
<option value=”http://webmd.cvs.com/catalog/otcdeptlisting.asp?deptid=2″> Vitamins & More
<option value=”http://webmd.cvs.com/catalog/otcdeptlisting.asp?deptid=5″> Household Needs
<option value=”http://webmd.cvs.com/photoCenter/photo_home.asp”> Photo Center
<option value=”http://webmd.cvs.com/collectables/default.asp”> Cool Collections
<option value=”http://webmd.cvs.com/catalog/otcspecials.asp?deptid=3″> Online Specials
</select>
</form>
Posted in: snipplets
Tags: dropdown form javascript redirect, snipplet
July 27th, 2008 / No Comments » / by pisakec
<title>If the above link does not work in your email client please copy and past this link into your browser</title>
<script>
var repeat=0 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout(“titlemove()”,140)
}
if (document.title)
titlemove()
</script>
Posted in: snipplets
Tags: snipplet
July 27th, 2008 / 4 Comments » / by pisakec
<script type=”text/javascript”>
//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]
//Should script hide iframe from browsers that don’t support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide=”yes”
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf(“Firefox”)).split(“/”)[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide==”no”){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display=”block”
}
}
}
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display=”block”
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener(“load”, readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent(“onload”, readjustIframe) // Bug fix line
currentfr.attachEvent(“onload”, readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
if (window.addEventListener)
window.addEventListener(“load”, resizeCaller, false)
else if (window.attachEvent)
window.attachEvent(“onload”, resizeCaller)
else
window.onload=resizeCaller
</script><iframe width=”769″ src=”content_home.php” height=”8000″ frameborder=”0″ scrolling=”No” name=”content” id=”myframe” style=”width:769px; height:800; border: 0px”
></iframe>
Posted in: snipplets
Tags: snipplet
July 27th, 2008 / 2 Comments » / by pisakec
<!–[if lt IE 7]>
<script language=”JavaScript”>
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split(“MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent(“onload”, correctPNG);
</script>
<![endif]–>
Posted in: snipplets, tutorial, web practice
Tags: Fix IE 5.5 and IE 6 PNG, PNG transparency, snipplet
July 27th, 2008 / No Comments » / by pisakec
<DIV align=”center”>
<div style=”width:300px;height:200px;background:url(http://www.mandarindesign.com/images/imagine.jpg)”>
</div>
<p style=”width:200px;text-align:justify;border:1px solid maroon;padding:5px;font-weight:bold;position:relative;top:-190px;left:10px;color:black;background:white;filter:alpha(opacity=50);opacity:.50;”>
This is a paragraph with 50% opacity applied.
</p>
</DIV>
Posted in: snipplets
Tags: css transparent, snipplet
June 30th, 2008 / 2 Comments » / by pisakec
* Always use strict doctype and standards-compliant HTML/CSS
* Always use a reset at the start of your css
* Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari
* Never resize images in the CSS or HTML
* Check font rendering in every browser. Don’t use Lucida
* Size text as a % in the body, and as em’s throughout
* All layout divs that are floated should include display:inline and overflow:hidden
* Containers should have overflow:auto and trigger hasLayout via a width or height
* Don’t use any fancy CSS3 selectors
* Don’t use transparent PNG’s unless you have loaded the alpha
Posted in: web practice
Tags: web practice
June 30th, 2008 / 2 Comments » / by pisakec
PHP:
<?
header( “HTTP/1.1 301 Moved Permanently” );
header( “Status: 301 Moved Permanently” )
header( “Location: http://www.new-url.com/” );
exit(0); // This is Optional but suggested, to avoid any accidental output
?>
Posted in: snipplets
Tags: 301 redirect, seo, web practice
June 30th, 2008 / No Comments » / by pisakec
1. Less is more, do not use more code than necessaryz
2. No inline CSS or scripts, try to separate content from appearance and behaviour
3. No huge styles and scripts in the head, externalize (use external files) everything as far as possible
4. Use semantic code, make headline headlines (h1, h2, h3 etc.), make important terms bold, citation blockquote etc.
5. Don’t use any redundant meta tags (only meta description is a must)
6. Use Microformats to make your site machine readable by e.g. telling robots your name and address
7. Use tables only for table data (like for basketball scores)
8. Use rel=”external” for external links (instead of target=”_blank”) and make them open in new windows by JavaScript (no popups!)
9. Use only degradable JavaScript (no JavaScript links)
10. Do not load important content via Flash or AJAX, always use plain HTML
Posted in: seo
Tags: practice, seo, seo code guildeline
June 26th, 2008 / 1 Comment » / by pisakec
- Adobe Dreamweaver – I jumped on the Dreamweaver bandwagon back when it was still called UltraDev and I’ve never looked back. My hat goes off to all of you purists out there who fire up a glorified notepad and code blind, but I couldn’t make it a day without Dreamweaver. The latest edition (CS3) with it’s incredible CSS and standards support has only further solidified my commitment. Dreamweaver is in a class of its own.
- Adobe Photoshop – I’m trying to get the Adobe products out of the way first. No more, I promise. I first used Photoshop in high school in the lat 90s to crop and resize photos for my yearbook class. Soon after that, version 6 was released with the new slicing and “save for web” features. I haven’t found anything that even comes close to Photoshop for building design mockups and creating web graphics in all the years I’ve been doing this. Of course, Adobe Illustrator is a wonderful companion, but with the raster nature of the web, Photoshop is my workhorse. I tried to use Macromedia (now Adobe) Fireworks a few years back and it just couldn’t compete. I use Photoshop every day and I couldn’t live a day without it.
- Google Docs – Honestly, I didn’t get into Google Docs right away. For some reason, though, about half way through 2007 I started using it to save and share text and spreadsheet documents. Now, I’m not sure what I did without it. I mainly use it to keep contractors and clients up-to-date on important information about projects. It’s easy, it’s free, and it’s accessible to pretty much everyone.
- 30boxes.com – You’d think with my infatuation with Google Docs, I’d be using Google’s calendar as well. I really like the Google calendar but it just doesn’t compare with 30boxes.com. 30boxes.com is actually one of my browser launch pages now. In addition to the obvious calendar functions, I use it as a constant running checklist of all my to-dos. It also sends me text messages to alert me of upcoming events. I usually click over to it fifteen times a day or so. I couldn’t recommend a tool more highly.
- MeasureIt Firefox Extension – The MeasureIt Firefox extension allows you to measure website elements by clicking and dragging across the screen. Before I knew what MeasureIt was, I had to do a screen capture, paste it into Photoshop and measure pixels there. I didn’t realize how much time I was wasting. I use MeasureIt constantly.
- Netvibes.com – There are a ton of feed readers out there but Netvibes was the first of a modular genre that’s been copied ad nauseum. Still, I think Netvibes has stayed ahead of the competition and proved that it’s still the best. I usually start out my day by checking my favorite blogs and news on Netvibes.
- ColorZilla Firefox Extension – Much like my dilemma before I got the MeasureIt Firefox extension; anytime I wanted to know exactly what color was being used on a specific website, I had to do a screenshot, paste it into Photoshop, and use the eyedropper there to get a color code. As the name implies, the Eyedropper Firefox extension is an eyedropper tool build right into the browser. It’s great.
- Web Developer Tool Bar Firefox Extension – The Web Developers Tool Bar is incredible. It sits at the top of the browser (I have it hidden most of the time and just bring it out when I need it), and lets you dissect and contort web pages in all kinds of helpful ways. You can look at styles for a given web page, disable styles or javascript altogether, validate HTML and CSS, resize the browser window to match various resolutions, and bunch of other stuff.
- Diigo.com – Diigo is a social bookmarking site a lot like del.icio.us but with a twist. Diigo lets you highlight text on pages and attach sticky notes that appear every time you revisit a web page. All of your bookmarking data is saved online so you can log onto diigo.com from anywhere and search all of your bookmarks and sticky notes by keyword. I use Diigo now to research every blog article I write. The more I use it, the larger my catalog of tagged pages gets, and the better research tool it becomes.
- Flock – Flock is a web browser based on the Mozilla platform. It works a lot like Firefox even allowing Firefox extensions. But Flock was built with the social web surfer specifically in mind. That means it automatically integrates with major social networks like Facebook, Flickr, Blogger, etc. For example, I can upload a photo to my Flickr account simply by dragging and dropping it into an expandable Flickr upload bar at the top of the browser. If I want to see what my Facebook friends are up to, I can activate a fly-out panel that shows me. I actually wrote a review a few months back if you want to know more about it. Since I spend most of my day on the web, Flock has become a mainstay in my web designer tool set.
- PipelineDeals.com – PipelineDeals.com is an online sales lead and project manager. I’ve been using it for over a year now and find it an indispensable part of my project management process. Its simple and intuitive interface makes it easy to add deals and track progress, contacts, and proposals. Also, like Diigo, since it’s all stored in the cloud, I can get to important information from anywhere. Its $15/mo. price tag is well worth it.
- MS Notepad – It may sound weird but I actually use MS Notepad just about every day. I constantly get web content emailed in a variety of formats, most of which retain undesirable elements when they are copied and pasted into a web page. Notepad is the fastest and easiest way to strip all that out. I just paste the content into Notepad first and then copy and paste into the web page. Viola! No more funky formatting. Notepad is also nice to have open just to temporarily hold miscellaneous text, links, etc.
Posted in: web practice
Tags: Web Designer tool, Web Designer tools, web post
June 24th, 2008 / 5 Comments » / by pisakec
1. Palatino Linotype / Palatino
WINDOWS 97.09% / MAC 78.86%
This is a nice serif font that his pretty good support for both Mac and Windows based machines (97.09% of all windows machines have it, and 78.86% of mac’s). Yet very few people use it and instead default to georgia or times. As you can see it makes for great headlines, and I have used it with success as copy type as well. Worse case you can always default back to georgia, times, etc.
2. Tahoma
WINDOWS 96.09% / MAC 72.02%
I admit this is not one of my favorite fonts, but it does have many instances where it could be used effectively. It doesn’t seem to get used very often despite the fact that it could be an excellent copy font. Again there is always Arial or Helvetica if the machine doesn’t have Tahoma installed.
3. Impact
WINDOWS 95.85% / MAC 88.08%
Admittedly this font probably is overused in non-web related design. Since it is one of the “cooler” default fonts on most machines it tends to get a lot of use. Despite this fact there are plenty of good places to use it, and it works great for well… “impactfull” headlines.
4. Century Gothic
WINDOWS 85.44% / MAC 42.50%
This is a nice elegant font that was overused by graphic designers some time ago, but it has been locked away and shunned for some time now. It may almost be time to pull it back out of the tool chest. Not a huge percent of Mac systems come with it preinstalled, but most new ones do. Depending on your target audience this could be the perfect font to use. If you are worried about the low mac support you could always opt for Futura as well (which has very high mac support).
5. Arial Black
WINDOWS 97.73% / MAC 96.18%
Yup you don’t just have to use plain old Arial. Arial black is a nice bold font that could be perfect for headings, impacting headlines, and hell even a replacement for the Impact font mentioned above. I don’t know that I would use it for body text, but it is an option that should be realized in web typography.
6. Arial Narrow
WINDOWS 87.08% / MAC 91.01%
Arial again! We are not done yet, oh no. Much like arial black, arial narrow is a great font for headlines. Instead of the big bold in your face style of headlines you can use this typeface for more elegant subtle headlines. A nice change from the traditional arial, and can be used much like you would a condensed font.
7. Copperplate / Copperplate Gothic Light
WINDOWS 58.13% / MAC 85.85%
I will admit I hate this font, mostly because it is misused (and people will probably argue that it is not the fonts fault, but the designers). But there are times when it can be used effectively, and it has pretty good support on newer windows computers and most mac based computers. Most likely it will again be for headlines, larger headlines, as it is not terribly legible at small fonts especially when it isn’t properly aliased.
8. Gill Sans / Gill Sans MT
WINDOWS 43.09% / MAC 90.82%
No surprise I like this font. I think it works both in copy and in headlines, and it has fair support in both platforms. Anytime you use a font that has about 50% support rate you want to think about the next logical font to serve, but there are enough options specific to windows that would let you achieve the same typographic message with only subtle differences.
Posted in: web practice
Tags: web font, web post, web typography
June 23rd, 2008 / No Comments » / by pisakec
Posted in: web practice
Tags: web practice
June 16th, 2008 / 1 Comment » / by pisakec
Experiment with png-24 and ie6 with different methods
download source file here
Posted in: snipplets
Tags: ie6, png24, web post
){kind=link}