Responsive web design

Today I decided it was time to join the revolution and do some redesign of my site so that it renders reasonably well on a mobile device or a small screen. My old design had some issues when the horizontal resolution of the viewport got below 960px or so, which is not a good limitation to have when we seem to be fast approaching the point where more users browse the web on a device than on a PC.

I used the techniques described in Shay Howe’s guide here: http://learn.shayhowe.com/advanced-html-css/responsive-web-design to add some custom CSS for the case where the viewport is less than 975px wide, and some even more extreme handling for viewports less than 650px:

/***********************
*** MOBILE TRANSFORM ***
***********************/
@media all and (max-width: 975px) {
	#sidebar {
		width: 100%;
		position: relative;
		top: 0px;
		right: 0px;
	}

	html {
		word-wrap: break-word;
	}

	img, .mceTemp, .wp-caption {
		max-width: 100%;
	}

	#page {
		margin-left: auto;
		margin-right: auto;
		width: 95%;
	}

	.narrowcolumn {
		width: 90%;
	}
}

/* on very narrow devices, collapse the margins completely*/
@media all and (max-width: 650px) {
	body {
		margin-left: 0px;
	}
	#page {
		margin-left: 0px;
		margin-right: 0px;
		width: 100%;
	}
	.narrowcolumn {
		width: 99%;
	}
	.post {
		margin-left: 0px;
		margin-right: 0px;
		padding-right: 0px;
	}
}

What this does is basically:

  1. Move the sidebar to the bottom of the page
  2. Cap the width of images at 100% of their parents’ width
  3. Set the post content to fill 100% of the page width, instead of just being centered

I struggled for a while with device pixel density and trying to get fancy with different sets of styles for “retina” devices, but it turned out to be a dead end. I think I was mistaking issues with viewport width for pixel density issues, and manually setting the viewport width=”device-width” was the best fix I found (fortunately I have control over the markup in PHP).

Leave a Reply