Archive for March, 2010

A JavaScript Content Switcher That Works Without JavaScript | impressivewebs

Tuesday, March 9th, 2010

Recently, while doing research/work on a completely unrelated topic, I came across the beautiful illustrations on Rype Arts, which are displayed inside of a JavaScript-driven content switcher. For some reason, I happened to visit the page with JavaScript disabled and noticed that the content switcher was still working (albeit, with a few flaws).

At first I couldn’t figure out how it was functioning. Normally, with JavaScript disabled, this type of content switcher (or content slider) will just display one item, or else display all items, without allowing any “switching” functionality. After some poking around, I realized it’s not a very difficult thing to do. The switcher utilizes in-page anchors and overflow: hidden to keep the switchability intact.

Visit Source

Tags: , ,
Posted in CSS, HTML, JavaScript | No Comments »

The Basics of CSS3 | webdesignerwall

Saturday, March 6th, 2010

Last week I posted a CSS3 dropdown menu and someone complained that I didn’t explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.

Visit Source

Tags: , , , ,
Posted in CSS3 | No Comments »

Pagination: Best Practices for SEO & User Experience

Saturday, March 6th, 2010

We’ve been getting a lot of questions in Q+A and on the road at events like last week’s Miva Merchant conference, Online Marketing Summit and the YCombinator conference about how to properly paginate results for search engines. In this post, we’ll cover the dangers, opportunities and optimization tactics that can best ensure success. The best part? These practices aren’t just good for SEO, they’re great for usability and user experience too!

Why is Pagination an SEO Issue?

Pagination, the practice of segmenting links to content on multiple pages, affects two critical elements of search engine accessibility.

  • Crawl Depth: Best practices demand that the search engine spiders reach content-rich pages in as few “clicks” as possible (turns out, users like this, too). This also impacts calculations like Google’s PageRank (or Bing’s StaticRank), which determine the raw popularity of a URL and are an element of the overall algorithmic ranking system.
  • Duplicate Content: Search engines take duplication very seriously and attempt to show only a single URL that contains any given piece of content. When pagination is implemented improperly, it can cause duplicate content problems, both for individual articles and the landing pages that allow browsing access to them.

Visit Source

Tags: , ,
Posted in SEO | No Comments »

CSS bar charts—styling data with CSS3 and progressive enhancement

Saturday, March 6th, 2010

Bar charts in CSS are neither very new, or very difficult. Using some pretty basic styling you can force lists etc into resembling graphs and charts fairly easily. Such charts, in their most basic form, work perfectly well in displaying and presenting the data they represent. However, using some rich CSS3 and progressive enhancement, you can really start pushing the display and presentation of these normally boring documents to the next level. They are also an ideal way in which to demonstrate the power and ability of progressive enhancement.

Visit Source

Tags:
Posted in CSS, CSS3, HTML | No Comments »

Button Height and a Broken Box Model

Saturday, March 6th, 2010

When I figured out the workaround for line-heights in form buttons last week, I also discovered an interesting discrepancy (feature?) across all major browsers in terms of buttons and the box model. Check out this article for a more in-depth refresher on the CSS Box Model, but here’s a brief summary:

Visit Source

Tags: ,
Posted in CSS, HTML | No Comments »