How to Create a Responsive, Retina-ready Website

September 12, 2012 | HTML/CSS, JavaScript | 30 Comments

My team and I at Dallas Theological Seminary just finished putting together a new site that has both a responsive layout and Retina graphics, and I thought it would be worth documenting the decisions we made along the way and some of the tools we used.

We are a pretty small team (we hired the awesome Chris Merritt to do the design and our 1.5 person team [including the awesome Michael Jordan] at DTS did the coding) and had a very tight window (2.5 months) and fairly large site (700+ pages and 2000+ videos and blog posts), so that led us to make some strategic decisions (i.e. compromises) to get it done.

Responsive Layout Plan

In the past we had a separate mobile site ( and I wanted to move to a single site with a responsive layout. We surveyed a lot of responsive sites and found quite a few approaches and ways we could go with it.

Some Great Options

Some have several very different layouts for each of the following: (1) desktop, (2) portrait tablet, and (3) mobile phones. A good example of this is which rearranges its content for each size. Obama’s site is an amazing achievement, but from my perspective there are two main issues. First, it requires an incredible amount of work and time which we didn’t. Second, I personally find that some sites are so different in each layout that its hard to remember or guess where anything will be. For example, in Obama’s case, the big three buttons under the header such as “Get the Facts” are missing in the tablet layout and the “Donate” button gets moved to a more prominent spot.

Other sites use a fluid grid to handle both desktop and tablet and then when the screen is small enough (like a phone), the layout collapses. A good example of this is I like this simpler and more straightforward approach, but a fluid grid layout wouldn’t really fit with what we wanted to do design wise on many of our subpages.

Our Modified Approach

About 5% of our users are on tablets and 5% on mobile phones, and it seems that tablet users seem pretty adept at pinching and zooming. This lead us to a pretty simple approach: (1) a desktop/tablet site, (2) a mobile phone site where our grid collapses (see above).

While changing responsive layouts for mobile devices gets a lot of attention, we also wanted to take into account different desktop sizes. This lead us to create a kind of “bleed” that allows the site to look good on older 1024×768 monitors, traditional 1440×900 laptops, and much larger screens. For our  90% desktop users, we now have a site that is “responsive” to their screen sizes without actually modifying the structural layout and placement of content.

Layout Sizes

Layout sizes Online Ed

Retina (pixel-density: 2.0) Graphics

Right now there are only three main devices that have “Retina” graphics (iPhone4+, MacBook Retina, and iPad 3), but I’m betting that the clones will be arriving very soon and over the life of this site Retina graphics will become an important distinctive, so I wanted to plan ahead to make things look good now and in the future.

Logos and arrows as SVG

Anywhere we have a graphic that’s not a picture (logo, arrow, symbol, etc.) I used SVG (with a fallback PNG). If you go to our site, you’ll see SVGs in our logo, the search icon, and even the social media icons in the footer (roll over the Apple logo for a fun surprise). On a normal computer, the SVG and PNG don’t really look much different, but the difference on an iPhone or MacBook Retina is quite noticeable.

Images vs SVG on Retina

To create the SVGs, I’ve been using Fireworks and Illustrator together. Illustrator can natively work with SVGs, but I couldn’t find a good way to work in pixels to produce the fallback PNGs I wanted for IE8. Fireworks is much better in my opinion for this kind of thing, but it doesn’t have native SVG support (seriously, Adobe?). Here’s the workflow I came up with:

  1. Use Fireworks to create an icon and save as a Fireworks PNG which retains all vector data (myicon.fw.png). Note: Sometimes I made simple vectors like arrows myself, but I also used some EPS and AI files or the SVGs on and elsewhere. The trick is that you have to open many of these in Illustrator, select the vectors you want, then copy them into Fireworks. Yuck, but it works.
  2. Save a flattened PNG for older browsers that don’t support SVG (myicon.png). Make sure you keep this separate from the original Fireworks file (myicon.fw.png) so you can work with the vector data later.
  3. Fireworks can’t natively save in SVG, so I used this amazing “Export SVG” script which does everything you need to create (myicon.svg). So far, I haven’t run into any problems with my images.
  4. I used the SVG/PNG combo as background images and relied on a class on the <html> tag to tell me which one I needed. I initially was going to use SVG detection in Moderizr, but I went ahead with the HTML5 Boilerplate’s approach of using IE’s conditional comments since I didn’t want to wait until JavaScript fired and possibly download twice. So I ended up with CSS like this:
/* SVG for modern browsers */
.logo { 
/* applied with IE conditional tags */
.lt-ie9 .logo { 

Pictures with HTML5-ish Markup and JavaScript

The W3C hasn’t quite come to a consensus on a new <picture> element and how the <source> elements should work, so right now you have to roll your own or choose a library. Here was my criteria: (1) Support everyone with a client side approach (no server-side logic), (2) Don’t force Retina users to download images twice (like does!), (3) Distinguish between Retina devices with large screens (MacBooks and iPad 3) from those with small screens (iPhones 4).

I decided to go with PictureFill.js by Scott Jehl and use the version that employs <div>s with data-* attributes and a <noscript> tag. On the the backend I created a simple function (in my case it’s in C#) that renders the markup (like <% WriteDoubleImage(“image.jpg”,”image@2x.jpg”) %>), so that I can switch to something like Wilto’s fork that uses <picture> elements or another tool later on when/if browsers start using it. I’m currently only using it for in-page images (not backgrounds) on some key areas of the site, but I hope to add more soon.

<!-- Scott Jehl's markup -->
<div data-picture data-alt="Alt text">
    <div data-src="image.jpg"></div>
    <div data-src="image@2x.jpg" data-media="(-webkit-min-device-pixel-ratio: 2.0)"></div>
    <noscript><img src="small.jpg" alt="Alt text"></noscript>
<!-- proposed W3C markup -->
<picture alt="Alt text">
    <source src="image.jpg 1x, image@2x.jpg 2x" />
    <img src="image.jpg" alt="Alt text">

On our homepage, the video thumbnails have a Retina (double-pixel) image for Retina devices and a normal image for everyone else. But the hero rotator only sends Retina graphics to large displays (iPads 3 and MacBook Retina) and sends normal graphics to non-Retina machines and Retina iPhones. On the desktop the hero graphic is 500px wide (1000px on a Retina desktop), but on mobile it’s only 120px (240px Retina), so the mobile Retina only needs the original 500px image to look good. Here’s one of the video thumbnails:

Retina image vs. non-Retina

For the Rotator, we also split the image into a JPG and PNG, so that the PNG is just the little sliver that pops above the rotator into the area above (see the top of Andy Crouch‘s head in the first image of this post). If I had made it one PNG it might be 300KB, but the JPG is only 40KB plus a 10K PNG, so this split approach vastly reduces the filesize. Finally, we made the move to Amazon S3 to better handle all the large Retina files.

Here’s the entire site on a Retina screen (click for 4MB file) retina

Room for Improvement, Abandoning Media Queries?

There are still some areas of the site we’d like to go back and add double-pixel images or SVG, and there are a few places where the mobile layout could be tightened up a bit. But the biggest consideration I have going forward is possibly abandoning media queries so that phone users can see the desktop site if they want to.

Here’s how responsive CSS works today (using a desktop first approach):

#container {
    width: 1024px;
@media only screen and (max-width: 480px) {
    #container {
        width: auto;

But if users hit your site with a phone looking for something that they remember seeing when on a desktop, they have no way of making their phone display the desktop version. One way to solve this is to selectively insert different stylesheets like using something like Nathan Smith’s adapt.js. This way you could turn it off and allow a phone to see a desktop site. Alternatively, you could add a CSS class to root <html> that the user could toggle according to preference. The CSS would look like (SASS/LESS would make this much easier)

/* default size */
#container {
    width: 1024px;
/* class applied to <html> tag */
.lt-480 #container {
    width: auto;

I’m not sure which approach we’ll go with or if we really need to make the change, but for now we have a pretty solid basis to work from as new devices come on the market. The final consideration I’d like to make is using a Facebook/ like side menu for mobile instead of a drop list.

If you have any other tips you’ve learned while creating Retina or Responsive sites, please share them!

And go check out !

HTML5 Audio Karaoke – a JavaScript audio text aligner

June 1, 2012 | Bible Tools, HTML/CSS, JavaScript | 23 Comments

What it Does

Based on some amazing work by my friend Weston Ruter, I’ve put together a little library that mashes together

  1. some text (usually some HTML)
  2. an audio source reading that text (usually an mp3)
  3. a timing file (in this case, generated by CMU Sphinx)

The result is that when you press “play” the words are highlighted as they are read, and you can click on words to navigate through the audio. The magic comes from data produced by the CMU Sphinx library (based on Weston’s work) which creates the word timing information.

I put together two demo versions, one of Martin Luther King, Jr.’s I Have A Dream speech and another one of the English Bible using the English Standard Version which has as great API. Unfortunately, the MLK speech didn’t align very well so the demo isn’t very good other than as an example of how dependent the process is on a good alignment.

(note: right now it’s Chrome/Safari/IE9 only since it requires MP3 playback)

How it Works

Although I wanted to use a “standard” format like WebVTT, I also wanted the filesize to be compact since my intended project involved large datasets of 48 hours or more of audio (i.e. the Bible). So here’s the basic JSON format:


Basically, it’s just an array of words with a start and end time. The array of arrays format is quite a bit smaller than using JSON and doesn’t require any processing like WebVTT (although that might change later). It would take quite a bit of time to produce something like this by hand, but Weston used the CMU Sphinx library to generate this data, and it’s probably been about 90% accurate for the entire ESV Bible.

Once all the data is loaded, the AudioAligner class searches through a DOM node for the words in the array, skipping over classes or tags you define, and then links those words to the audio player.


Again, the demo I put together utilizes the API provided by the creators of the English Standard Version (ESV) of the Bible. The API allows developers to request the text and the MP3 and then this is mashed up with the timing files generated with SMU Sphinx.

HTML5 Karoke Demo

If anyone’s interested in the library, please let me know in the comments and I’ll post it to Github.

Cross-Browser Native Get/Set Properties in JavaScript

May 2, 2012 | JavaScript, Video | 10 Comments

JavaScript Doesn’t Support Properties

When I first created MediaElement.js a few years ago, I wanted to make a JavaScript object that fully mimicked the HTML5 Media API, but under the hood it might have a true <video> tag or a Flash object doing the rendering.

The problem I quickly found was that the <video> tag has several properties like .src and .volume that can’t be replicated since JavaScript doesn’t have true get/set capability that works in all browsers (by “all browsers” I mean “IE6 and up”). So I had to create methods like .setSrc() and .setVolume() (or use jQuery’s .volume() syntax) to make it work correctly across browsers, but that resulted in a API that didn’t match the HTML5 spec.

Ah, But JavaScript Does Support Properties

A long time ago, in Firefox’s distant past there was a proprietary way to create properties, using the __defineGetter__ and __defineSetter__methods. Here’s what it looks like:

var myObject = {};
myObject.seconds = 22;
myObject.__defineGetter__('milliseconds', function() { return this.seconds / 1000;} );
myObject.__defineSetter__('milliseconds', function(value) { this.seconds = value * 1000;});

myObject.milliseconds = 1750;
console.log(myObject.seconds); // outputs 1.75;

It’s great because it allows you to easily define properties that can do additional calculation work (e.g., from milliseconds to seconds), but it doesn’t work in all other browsers. The method that is more universally available is Object.defineProperty which offers a slightly cleaner syntax:

var myObject = {};
myObject.seconds = 22;

Object.defineProperty(obj, 'milliseconds', {
     get: function() { return this.seconds / 1000;},
     set: function(value) { this.seconds = value * 1000;}

myObject.milliseconds = 1750;
console.log(myObject.seconds); // outputs 1.75;

Looks super useful right? So why doesn’t anyone use it?

The problem is that IE6 and IE7 don’t support it, and while IE8 does support the Object.defineProperty method, it sadly only works on DOM objects that are attached to the tree.

So, if you really, really needed an object that supported properties, you can create a DOM object, attach it to the document, and then use Object.defineProperty to give it some properties. That’s a lot of trouble just to support IE8, and you still don’t get IE6 or IE7 support, so I don’t know of any libraries that currently use the approach.

Hacking IE6 and IE7

I recently came across a technique that I haven’t seen demonstrated before from Jonathan Neal using the onpropertychanged event. IE will fire this event when any property, native or added by a developer, is changed. However, like IE8 this technique only works on a real DOM object, not a plain old {}.

Based on Jonathan’s work, here is a function that will add a property and work in IE6 and up.

// Super amazing, cross browser property function, based on
function addProperty(obj, name, onGet, onSet) {

	// wrapper functions
		oldValue = obj[name],
		getFn = function () {
			return onGet.apply(obj, [oldValue]);
		setFn = function (newValue) {
			return oldValue = onSet.apply(obj, [newValue]);

	// Modern browsers, IE9+, and IE8 (must be a DOM object),
	if (Object.defineProperty) {

		Object.defineProperty(obj, name, {
			get: getFn,
			set: setFn

	// Older Mozilla
	} else if (obj.__defineGetter__) {

		obj.__defineGetter__(name, getFn);
		obj.__defineSetter__(name, setFn);

	// IE6-7
	// must be a real DOM object (to have attachEvent) and must be attached to document (for onpropertychange to fire)
	} else {

		var onPropertyChange = function (e) {

			if (event.propertyName == name) {
				// temporarily remove the event so it doesn't fire again and create a loop
				obj.detachEvent("onpropertychange", onPropertyChange);

				// get the changed value, run it through the set function
				var newValue = setFn(obj[name]);

				// restore the get function
				obj[name] = getFn;
				obj[name].toString = getFn;

				// restore the event
				obj.attachEvent("onpropertychange", onPropertyChange);

		obj[name] = getFn;
		obj[name].toString = getFn;

		obj.attachEvent("onpropertychange", onPropertyChange);


// must be a DOM object (even if it's not a real tag) attached to document
var myObject = document.createElement('fake');

// create property
myObject.firstName = 'John';
myObject.lastName = 'Dyer';
addProperty(myObject, 'fullname',
	function() {
		return this.firstName + ' ' + this.lastName;
	function(value) {
		var parts = value.split(' ');
		this.firstName = parts[0];
		this.lastName = (parts.length > 1) ? parts[1] : '';

console.log(myObject.fullname); // returns 'John Dyer'

Pretty aweseome.

Real World Application

Mozilla’s April Dev Derby was on using the <audio> tag, so I thought it’d be a fun chance to try this out and make a native looking HTML5 API that could wrap things like a Flash Ogg player or the amazing JsMad library which can play MP3s using pure JavaScript (great for Firefox which can’t play MP3s natively).

The result is a fun little audio library called Shimichanga that has functional properties like .src. What’s interesting about the library is that when you set the .src property, the set method loads an appropriate renderer (HTML5, Flash, or JavaScript) depending on the browser’s capability and then sends the value to renderer to use, all seemless to the developer and end-user. Note: Mozilla didn’t allow the flash shim part, so to see a full working demo go to:

Hopefully, I can back port this into MediaElement.js and make the entire library more dynamic and usable. For now, go check out my hideously styled demo on Mozilla’s site (Shimichanga) and give me some likes!

Dev Derby

HTML5 Video Wrapper for YouTube and Vimeo API – MediaElement.js

November 28, 2011 | JavaScript, Video | 51 Comments

YouTube and Vimeo APIs

YouTube and Vimeo have nice APIs to allow JavaScript developers to control the playback of embedded content (oh, and YouTube has a new design). They’ve also updated the APIs to use the newer <iframe> embed style instead requiring <object><embed> flash tags. But as powerful as those APIs are, they are not consistent with each other and neither one conforms to HTML5 <video> properties or events so you can’t leverage your existing skills or code.

MediaElement.js HTML5 Wrapper

To make the YouTube and Vimeo APIs easier to use, I wrapped the MediaElement.js shim structure around their proprietary APIs to make them feel like HTML5. So for a YouTube video, you can use this <video> markup

<video id="youtube1" width="640" height="360">
	<source src="" type="video/youtube" >

Then to build a full-fledged player that is CSS skinnable on top of YouTube Chromeless , you can simply call the MediaElementPlayer like this:

jQuery(document).ready(function($) {


Or you can skip MediaElementPlayer’s controls and build your own player using just the MediaElement wrapper which does not require jQuery (MediaElement is the wrapper which shims HTML5 support into old browsers, MediaElementPlayer is the full-fledged jQuery-based control bar built on top of MediaElement).

new MediaElement('youtube#', {
	success: function(media, domNode) {
		// add HTML5 events to the YouTube API media object
		media.addEventListener('play', function() {
			console.log('yeah, it is playing!');
		}, false);

		media.addEventListener('timeupdate', function() {
// access HTML5-like properties
			console.log('current: ' + media.currentTime);
		}, false);

		// add click events to control player
		myMuteButton.addEventListener('click', function() {
			// HTML5 has a "muted" setter, but we have to use a function here
		}, false);

Once the success event fires, the media object is a JavaScript wrapper that mimics the HTML5 Media API, but under the hood is really a wrapper around YouTube’s API. Nice right?


There are a few things you should look out for if you want to try it:

  • This code is now in the official 2.4.0 release of MediaElement.js, but it should be considered experimental. I’d like to pull it out of the core and make it a plugin, but this will require some re-architecting.
  • The Vimeo API wrapper is not finished yet. It will simply display the default Vimeo controls. (Also, unlike YouTube’s chromeless option, only Vimeo Pro users can totally remove controls)
  • Some browsers (Chrome, IE) don’t allow HTML to be placed over an <iframe> with Flash inside which makes MediaElementPlayer’s controls not work, so I’m using the pure Flash version of YouTube for desktop browsers
  • Fullscreen: JavaScript can’t initiate Flash’s true fullscreen, and Firefox still has terrible Flash support (if you try to adjust the size of a Flash movie’s surrounding DOM nodes, Firefox reloads it!)

Demo Download

Pinbox.js – Photos Then and Now (jQuery plugin)

November 2, 2011 | JavaScript | 6 Comments

With the help of a colleague, I’m gathering images of an area of Dallas, TX just east of downtown around the campus of Dallas Theological Seminary where I work. I wanted to make the photos interactive like the animated GIF you see here.

Live Demo Download Code

Code Explanation

Continue Reading…

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by