Tony Thomas

Father to two, husband to one, web developer and musician.


Archive for the ‘web development’ Category


Media Queries for High Pixel-density Devices

Sunday, April 22nd, 2012

Images continue to be a major challenge for mobile web development. I’ve written about a technique to evaluate screen dimensions and pixel-density using JavaScript. I recently came across some vendor-prefixed media queries to evaluate screen density right in your CSS. (Hat tip to Erik Runyon.)

The technique involves creating two sets of background images. One standard-sized version and a double-sized version (@2x) for high pixel-density screens like the Retina display or Droid phone display. (more…)

Using Impress.js

Friday, March 9th, 2012

Update: There is at least one WYSIWYG impress.js editor available now.

I came across Impress.js a while back and I was, well, impressed. It makes sense to do presentations on the web, given the powerful animations and transitions available in modern browsers. Impress is sort of like Prezi improved. Improved because it takes advantage of 3d animation. It does require some technical skill however. You need to know a bit about HTML5 and you have to be able to code a web page and write styles.

Right now you can only learn how to use Impress.js by reading the comments and experimenting. I thought it might be good to go through each of the features here to give a sense of it’s capabilities. If you’re interested, there aren’t really any insights here that you can’t find in the source. (more…)

Fun With JQuery Tubular

Saturday, March 3rd, 2012

I came across Sean McCambridge’s JQuery Tubular plugin a while back and I thought it would be fun to experiment with it. So I set up a little demo and I thought I’d walk through it here.

I should say that it wasn’t until I came across Phil Plait’s amazing moon simulation that I was inspired to build the demo.

I should also say that my example is completely unnecessary given Sean’s documentation. It’s really as simple as this:

$('body').tubular('someYTid','video'); // where someYTid is the YouTube ID and wrapper is your containing DIV.

Once you have JQuery and JQuery Tubular linked in the head of your document and replace ‘someYTid’ with the id of your YouTube video, it will just work. The rest is styling. In the interest of explaining things all in one place, I’ll walk through what I did. (more…)

One Site

Tuesday, February 28th, 2012

I just did a little adjusting to this WordPress theme so that the site should render well on all devices now. It looked pretty good before on smartphones before, but I was employing some mobile detection to load some different styles and only render the sidebar for desktop browsers.

The main problem with this was that it messed with my cache. If a mobile browser visited the site, the mobile version was cached and served until the cache expired.

With a little more experience under my belt, it was incredibly simple to handle layout changes with media queries instead. In fact, it’s much simpler than the method I used before. (more…)

Responsive Images: Keep It Simple; Keep It Small

Thursday, February 16th, 2012

There’s a lot of excitement about responsive design in the mobile web development world. One of the techniques used in responsive design is responsive or adaptive images. There are a handful of techniques out there including CSS fluid images, using overflow:hidden to crop images and using a combination of .htaccess settings and PHP to deliver device-specific images.

The first two solutions are fairly simple, but ignore one problem: serving a larger-than-necessary image over a potentially slow network to a user who may have limitations on the amount of data they can receive. Keeping website size down is also important now because Google is using site speed as a criterion for search rankings. So, while I find the first two solutions interesting, I don’t think they’re the best we can do. (more…)

Substratum: Tiny, Semantic CSS Framework for Creating Columns

Tuesday, October 25th, 2011

I wrote about this a while back, but I thought I’d make it official since I’ve used it on the last few projects I’ve worked on. I’ve named my mini CSS framework for creating columns and put it in a Mercurial repository. It’s very small (412 kb minified), semantic and aims to stay out of the way. It also needs some thorough browser testing. Have at it folks.

New Theme

Tuesday, May 17th, 2011

I did a soft launch of my new WordPress theme last week. There are a few things I’d like to point out. First is the decision to go to HTML5. HTML5 (combined with the HTML5 Shiv) actually made writing the styles quite a bit simpler. It’s a bit of adjustment after writing XHTML for so long, but when it came time to write the styles the new tags meant fewer ids and classes. I found that very handy.

Also I’m using less JavaScript than I was before. Instead the hover effects are accomplished using CSS3 transitions. (more…)

CSS Scaffolding

Monday, April 18th, 2011

Last week I gave a talk at MinneWebCon along with Ken Loomis and Ethan Poole. My section of the talk dealt with the CSS we use at work. One of the main problems I’ve come to have with using CSS frameworks is that they put presentation back into the markup. Every CSS framework I’ve seen has classes like these:

  • ez-50 (ez-css)
  • container_12 (960GS)
  • grid_1 (960GS)
  • span-4 (Blueprint)

After years of adopting standards that keep presentation separate from the markup, frameworks like these (and others) put it right back into the code. Not only is that a bad practice, but it removes one of the chief benefits of CSS: the ability to change your presentation without touching the markup.

The most common problem these frameworks solve is laying out columns. So I came up with a handful of CSS classes that solve the same problem, but do so in a way that will allow you to alter the appearance of the pages without altering the markup.

These classes are applicable in a general way (i.e., within the content), so it’s useful to keep them named as they are for that purpose. You can also copy these same styles to your ids to get the desired widths and column layout. I encourage you to write these styles into page ids whenever possible as that will make your page markup more semantic. You should think of these classes more like scaffolding than a framework. You can get started quickly, then modify them to meet your needs. The minified file is only 412 bytes. (more…)

HTML5 Document Structure

Sunday, April 17th, 2011

Since I’ve started working with HTML5  a bit, I’ve had to adjust my thinking about page structure. HTML 5 page structure differs from HTML 4 or XHTML significantly. (X)HTML document structure should look like this: (more…)

Simple RSS Parsing and Caching Using PHP

Saturday, March 12th, 2011

I feel like I should begin by stating that my college degree is in English Literature. In other words, I am not formally trained to be a programmer. Still I’ve spent many years working in PHP. It can be liberating to find out that something you thought would be complicated, is actually not that hard when broken down into discrete steps.

This whole adventure started for me when I went looking for a way to parse an RSS feed. Contrary to those who proclaim that RSS is dead, at it’s heart, RSS is XML. As such it’s a useful method to access content. In my case, I wanted to parse my blog RSS feed as well as my most recent Tweets. That was revelation number one.

RSS is XML > XML has a structure that can be put into objects in PHP

To many of my friends and colleagues, this may seem incredibly simple. To me it was a revelation that opened up a new door. I’ve never tried to create an RSS parser before. Suddenly it was less daunting. (Aside: For me, simple truths often come as revelations. To know me is to know this.)
(more…)