Category Archives: Tutorials

Using CSS to Replace Content for JavaScript Disabled Browsers

Using CSS to Replace Content for JavaScript Disabled Browsers

If you’re like me, you love embellishing your projects with fancy JavaScript to give them pizzaz. But, chances are, you’ve also had some trouble finding a comfortable solution for replacing that JavaScript content for users who have (for one reason or another) disabled JS in their browser. After playing around with many possible fixes, I’ve come up with a standards-compliant, low bandwidth and easy to implement solution. And it’s probably something you weren’t expecting… CSS!

That’s right… by making use of the display:none CSS property we can serve alternate content to our non-JavaScript users without sending them to alternate pages on our site (a common, but outdated and clunky solution). So, get ready to turn off that JS in your browser (did I really just say that?) and start developing for true compatibility.

Continue reading »
IE Cleartype Fix – The Solution for Blurry or Pixelated Text

IE Cleartype Fix – The Solution for Blurry or Pixelated Text

We’ve all seen it. BLURRY TEXT. It can steal the beauty from even the best designed sites. Have you ever seen (or made) a dropdown menu using JavaScript and found that the text just doesn’t show up right in IE? How about a slick, fading menu that ends up having blurry, hard to read, pixelated text? Any WordPress designers ever run into this problem with plugins? Well, stop pulling your hair out. The solution is as easy as removing one little attribute from the troubling JavaScript code.

Continue reading »
Simple Server-Side Browser Detection with PHP

Simple Server-Side Browser Detection with PHP

Ever wish you could make a webpage behave according to the browser it is being viewed with? In many cases this can be done with some well-placed CSS code. But, how about those situations when CSS can’t help us out? CSS hacks and tricks won’t let you target Firefox, Chrome or mobile devices. So, do you just stay away from using custom content in those browsers?

Enter PHP browser detection! With just a little bit of code, your site can reach its maximum potential in every browser, and even in mobile devices.

Continue reading »
Using WordPress as a Simple Client Management Solution

Using WordPress as a Simple Client Management Solution

So, you’re looking to give your clients a secure way to access a client page (or group of pages) on your Wordpress powered site. There’s just one problem… there isn’t a Wordpress plugin that can do it for you with out-of-the-box functionality that we’ve grown accustomed to. But before you give up on client management (or Wordpress) altogether, let me assure you, it can be done. So, if you’re up for learning a new trick with some old programming knowledge and a little elbow grease, let’s get started…

Continue reading »
Easy Single Image Rollovers with CSS Image Sprites

Easy Single Image Rollovers with CSS Image Sprites

With the advent of Style Sheets came the promotion of standards-based code that functions seamlessly across multiple browsers and displays correctly on most every machine out there. But, I often come across high-end websites that are based on outdated (and somewhat unreliable) CSS methods to produce an effect as simple as the common image rollover. Most older methods can give an otherwise professional site an amateur feel because they:

  • use Javascript where not necessary
  • cause the image to flicker on the initial rollover
  • aren’t accessible to some mobile browsers or systems with JavaScript disabled
  • create a rollover by using multiple images, which take longer to load and uses extra bandwidth

No need to worry though– there is a standards-compliant way to use a single image to create that flicker-free, non-JavaScript rollover that will work on any system. It uses what is known as an image sprite and its easier than you might imagine.

Continue reading »

Subscribe via email