September 19, 2012 - Floating Pirates

A place to discuss things that were on our weekly Web Wednesdays show

September 19, 2012 - Floating Pirates

Postby raw10 » Wed Sep 19, 2012 5:47 pm



Ahoy, me Mateys! It's International Talk Like a Pirate day, so what better to talk about than floating? Boats float, so there you go. Last week we talked about anchors, which don't float in general, but you could probably make them float pretty easily:

Code: Select all
<a class="bob" name="Bob" href="#">This is a floating anchor named Bob</a>


The corresponding CSS would be:

Code: Select all
.bob {
  float: left;
}


We could go into the specifics of how floats work, but here's a link over to an article on CSS-Tricks that covers things pretty well: http://css-tricks.com/all-about-floats/.

Preventing Individual Pages from Indexing

Sometimes you want to prevent search engines from indexing pages, or even the whole site. We talked about two methods: rel="nofollow" and the robots.txt file.

You can read more on robots.txt here: http://www.robotstxt.org/robotstxt.html

Some interesting things to note:

  • Prevent indexing of the whole site by using "Disallow: /"
  • You can't use wildcards in the disallow selector. You have to explicitly state files or folders you want to target. "Disallow: /sandbox/" or "Disallow: /indexNew.html".
  • Use new lines for each item you want to disallow.

You can use rel="nofollow" on links like this:

Code: Select all
<a href="temp.html" rel="nofollow">Temp file</a>


This will generally prevent search bots from following and spidering the linked page, but note that if the page URL gets out there some other way it could still be indexed, which may be detrimental. The robots.txt file is probably your best bet for staging sites.

If you're using MagicEdit and want to prevent links or sections of a page from showing based on various scenarios, check out the documentation here: http://www.magicedit.com/ShowingandHidingStuf.cl

Form Submissions

Next we talked about forms, and what happens after a form is successfully submitted. In general, it's good to show some feedback to the user that the form was submitted successfully. One way to do this is with a AJAX, so the form is submitted and the server response displayed and nary a (full) page load is seen. I've used the jQuery form plugin to accomplish this: http://www.malsup.com/jquery/form/. If you are interested in a sample implementation let me know and I'll cook something up.

Placeholder Text?

A couple of sessions ago we talked about marrying form inputs and labels. Sandy H. brought up an interesting point. HTML5 now has the "placeholder" attribute for text inputs, so does that mean we don't need a label anymore? Well, lots of web designers seem to think so. But what about accessibility? Here's a discussion on the topic that you might find interesting: http://www.paciellogroup.com/blog/2011/ ... attribute/

The long and short of it is this, and this is a direct quote from the W3C specification for placeholder text: "The placeholder attribute should not be used as an alternative to a label."

Googling around on the subject reveals a great deal of discussion on the topic, and the general consensus is that you should use labels and not rely on placeholder text alone. I don't think that will stop the hipsters from doing it, but if you want a best practice, use the label, matey!

That's it!

Fare thee well, me hardies! May the web winds blow ever in yer favor, and may yer floats never inadvertently drop!
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Return to Web Wednesdays

Who is online

Users browsing this forum: No registered users and 1 guest

cron