The Amazing Power of the BASE Tag

I’m not one to normally get excited about HTML tags, but I’m making an exception in this case.

Raise your hand if you’ve heard of the <base>  tag.
Anyone, anyone?

Don’t feel bad, I didn’t either until today – but I’m going to show you why I think it’s so flippin cool, especially for those of us who work with complicated root structures and CMS frameworks.

The humble little base tag is handy for at least 2 purposes that I know of.
If you use it for something else, I’d love you to leave a comment and let me know.

What does the <base> tag do?

1. Setting a default target for any links, including pdf downloads, etc.. that you place on the page. If you tire of putting the ‘target=”_blank” attribute after all your links, this baby’s for you. Creating a consistent experience for your users will help to give them piece of mind before they go clicking around…

2. Setting a default base path for any href on the page. e.g. if you include <base href=”http://www.w3schools.com/images/&#8221; /> on your page, you no longer have to link to your images with that ‘/images/’ path, instead you can simply put <img src=”myImage.jpg” width=”20″ height=”20″ alt=”blahblahblah” /> and the image will appear like normal.

Now you may be saying, big deal – and maybe it’s NOT  a big deal for many people. But when you’re dealing with a backend where your links references look like this: “/Portals/7/tabid/articlebin/posts/images/image.jpg” or something similar, you’ll probably appreciate it much, much more. I often find myself opening another browser just so I can look at the image properties for a site I’m working on, to make sure I’m correct.

How to implement-

simply put the <base> tag in between the <head></head> section of your page like you would any other script or meta tag. (note: you’ll need to self close the tag if you’re using XHTML)

Here’s an example as shown on the w3c site:

<head>
<base href=”http://www.w3schools.com/images/&#8221; />
<base target=”_blank” />
</head>

<body>
<img src=”stickman.gif” />
<a href=”http://www.w3schools.com”>W3Schools</a&gt;
</body>

According to google, the <base> tag works fine with the new ‘rel=canonical’ tag also.  Note that if you click the image properties, the complete pathway will still be

Mobile Search Info You Need To Know

Haven’t posted in over a week, so I wanted to make sure I offered up something worthwhile. Well fortune must be shining on me, because I just stumbled across this excellent post on mobile search ranking factors from Will Critchlow.

Without stealing all his thunder, here are some quick points to take away:

  • Google is currently dominating mobile search (no big surprise there), with around a 60% market share.
  • The emergence of new generation web-capable devices like the iPhone are driving mobile search – 35 million mobile searches in Q3 of this year (UK)
  • Page Rank is apparently NOT a major factor in ranking higher in mobile search.
  • Time and location are much more important than links for mobile search.
  • If you’re planning on targeting mobile search, it’s still pretty early in the game but you better get moving fast

Here’s my favorite part – How to build a site that does well in mobile search:

  • Small, lightweight and fast-loading site (< 20kb / page)
  • XHTML Mobile 1.0 Doctype
  • UTF-8 character encoding
  • JPEG / GIF images
  • Content including “mobile”
  • On-site keyphrase optimisation as usual (with a focus on short titles, and small amounts of body copy)

Will also spells out many of the factors that lead people to search differently when using mobile devices, but you’ll have to check out his post for all that! Definitely worth the read.

In case you missed it early on, here’s his mobile search factors post.

Geeky Developer Alert- Google to include cPanel with Google Sites?

Jonathon Dingman recently wrote a great blog post discussing the possible integration of cPanel with Google Sites.

In the event you don’t develop or work with websites for a living, you may want to skip this, because it’s kinda geeky. For all the other pocket pen protector wearing nerds, this could be pretty cool.

Google Sites, in case you didn’t know, is a free (well, there is a paid version too…see below) web hosting solution for people or companies that don’t know how or don’t want to waste time creating a site with HTML.  Pretty similar to blogger, except much uglier since you don’t have a ton of options for layout design. I like to think of it more as just a public or private wiki for throwing stuff up on, since it integrates pretty well with google apps. One big pet peeve- they no-follow every link you put up. Of course, you expected them to do that, didn’t you? still sucks, though.

They do offer a paid version ($50/yr per user) for 10gigs of storage space, hosted email with archiving, some support in the event you break something, etc… but no ability to load up other non-google apps, like wordpress, or joomla, or flash files. They are adding new apps and features though, such as the ability to include your company videos into the site, so you can watch your boss ramble on about ‘how neat the internet is’ or listen to him giving you a verbal video warning from the golf course.

Oh man, now I’m just rambling. Back to the point.

Since you’re still reading, you MUST work with websites, which means you MUST’ve run into cPanel before, since it’s at pretty much every hosting company. Well, Jonathon’s Inside Google blogpost uncovered some pretty nifty info the other day -After checking out google’s robot.txt file (hmmm, never thought to do that…) He writes:

I found this to be quiet interesting. Why does http://www.google.com/hosted/life/ redirect to http://www.google.com/a/cpanel/life/?

Disallow: /hosted/life/

I first noticed the /hosted/life/ string in the Google.com robots.txt file, which is always a fun file to look over. So the /hosted/life/ redirects to /a/cpanel/life/, but the /a/ normally means hosted apps. Does this mean that Google is going to be integrating with cPanel® and its Google Apps together to create a more complete web hosting solution?

Excellent question, Jonathon.

I checked the groups for Google sites and there was certainly a big enough demand for it, at least based on the functionality improvements that users were seeking. cPanel would be a great fit. Does this mean we might be able to run wordpress on Google sites? Doubtful, since their a direct competitor to Google’s own blog service.

Still, it’ll be interesting to watch.

New Yahoo Homepage Revealed – Big Fat Screenshots Within!

Well, I thought for sure that there would be more people talking about the Yahoo homepage redesign, but apparently there aren’t that many ‘testers’.

Lucky for you, though – I’m one of em.

So let’s take a look-see, starting with what you’ll get when you visit Yahoo.com:

Yahoo listens and cleans up their act. Or at least hides it.

Yahoo listens and cleans up their act. Or at least hides it.

One of the first things you’ll notice is how CLEAN it all is. They no longer fill up every available pixel of screen real estate like in the old days. Now the maximum width is 970px with the main content only dropping down to 750px. I did notice that the layout was NOT fluid though, but that could change I suppose.

Where has everything gone, you might ask? Well, actually – nowhere. That big fat ad in the middle right above, will slide down smoothly in jqueryish style, as seen in the picture below (click it for bigger view)

Where are all the Yahoo services links - OH! there they are!

Where are all the Yahoo services links - OH! there they are!

And what about that sidebar on the left, did it grow too? Why, yes it did.

Yahoo apparently has an afinity for ajax, cause this site is loaded with it. The hottest links are positioned to the left (we all know that’s one of the first places people look), and when you click on one of the selections, such as mail, stocks, or weather – as shown in the above pic, it Pops open, and presto -there’s the info you want.

You want additional information, beyond what you can see in the preview pane? Depending on the service, you may be sent to another page, such as yahoo finance, or you may be presented with an accordion view, like when I click on movies – click a new movie, it slides open to reveal show times, a link to a trailer, and a quick review rating (A-F). Click on horoscope and I get all 12 signs that I can click one after another, all without leaving the preview box.

Check out your mail in a flash with Yahoo's new layout!

Check out your mail in a flash with Yahoo

Clicking the mail button reveals your 10 most recent mail messages, and you also have the option to add gmail to the list. (note: I haven’t done this yet, so I can’t comment on that functionality). If you want to view more, you just click the link above the messages to go right to your standard mailbox.

And yes, I’ve had some issues with twitter lately, in case you haven’t noticed. But that’s a whole other story. Speaking of twitter, if you’d like to follow me, you can find me here – my twitter account.

After using the page for several days, I can vouch for how much of an improvement it is. The old page was overloaded and hurt my eyes to look at. The new layout, while smaller, is much less cramped. The larger icons for the main services are great, but it makes the tiny icons look outdated by comparison. I can live with that, though …

The real interesting thing though, is how much it relies on javascript. For those users that like to browse without it running, you’re out of luck. Your content won’t load into the panels, you won’t be able to get to the additional services either. Does this mean that web developers should stop worrying about whether or not that cool javascript functionality breaks their site? I guess they can if they work at Yahoo. That will be interesting to see how it develops.

Maybe Yahoo’s not dying after all. Or if they are, they’ll at least look good in the casket.

Flash SEO – Fact or Fiction? SEO Theories Tested…

Brian Ussery wrote a great post on Monday discussing the relatively recent notification from Google that they are beginning to index flash content. Instead of just talking about his theories, Brian actually puts them to the test – if you develop in Flash at all, you’ll want to check out his post, which you can find here – SEO and Flash.

I know from experience that you CAN rank high with a flash developed site, simply by optimizing your Title and Meta info, and of course getting inbound links…but if it’s a highly competitive market I’m trying to penetrate, I don’t even waste my time trying. I’ll develop the site in another format, such as simple html or php, etc…

Some quick points to take away from his post :

  • When it comes to text, “Don’t use it for something when there’s already a standard whose output can be easily parsed, easily processed, and whose openness makes its processing easier for browsers and searchbots.”….
  • Avoid text content and links in Flash
  • Don’t use text content in Flash supplied via third party file
  • If you must use text content in Flash and sIFR isn’t an option, create individual Flash files laid over each corresponding (X)HTML page via SWFObject
  • When using SWFObject, consider using absolute URLs in underlying (X)HTML and Flash files
  • When using SWFObject, be sure to include “alternative” images for users without Flash
  • Avoid using text content in Flash for pages employing “seamless transitions” where URLs don’t change, or, instead, include “pound signs”
  • Provide links to important pages within Flash files using absolute URLs for users who arrive at the Flash file via Google search engine results pages

I think flash IS an excellent tool for engaging the website visitor, and I DO recommend using it to enhance the feel of a website, or to demonstrate concepts that are better understood visually, video presentations, etc..as it can often increase conversion ratios, depending on the product or service.  For content that needs to found via a search engine though, stick with HTML.

Yahoo’s Shine – typography that rocks!

Working on the internet everyday is awesome. We’re constantly learning about the hottest trends, best practices for our industry (or any industry for that matter….),  and able to communicate with the big names in web design and internet marketing-I relish every day.

However, there is one area that seems to be fairly stagnant in the arena of web design. Typography.

This isn’t to say that there aren’t those out there that understand the importance of typography in web design- John D Boardley from I love typography has a TON of resources on their site for both web and print designers.  It’s just that 75% or more of the sites I see on the internet choose not to pay a whole lot of attention to this area.

Which brings me to Yahoo’s Shine. Being used to the overly crowded layout of the Yahoo home page, Shine caught me way off-guard. Beautiful headlines (well, beautiful might be stretching it a bit…) clean layout and separation between articles- just a great design. Well worth a look if your site offers many services, maybe it’ll spark some ideas. screen grab from Yahoo\'s Shine

It’s a shame that we’re still limited to a finite number of fonts for the web (unless you use flash, sifr, or images instead), and even with FF3 support for kerning, we’ve still got a long way to go. I say we should use this time to do the best with what we’ve got-want to experiment with typography layout without wasting a ton of time? Here’s what I use: Typetester. Excellent time saver, or time waster since it’s so easy to keep playing with.

 

If you’ve redesigned your site, but still feel like something’s just not right still – take a look at your font styles and general typography, compare it to what you see in your favorite magazines. A little change can go a long way.