Metamicron Part I: Responsive and Retina-Ready
Two months ago, I created an empty folder in my themes directory called “Responsicron”. I had been itching to redesign the website ever since I completed the first design over a year ago. There was not a lot of thought behind last year’s design. When I sat down to write the theme, the first thought I had was a cross, and I rolled with it. Considering it was my first excursion into CSS or HTML, I am frankly surprised it went so well.
Over the past year, Defomicron has slowly evolved. At one point, I trashed the whole CSS file and rewrote it from scratch. I added support for webfonts, added quotations posts, and at some point along the way completely mangled my RSS feed. I also learned a heck of a lot. When I sat down to think over a redesign, the project quickly grew beyond a new theme. Now, while the experience is fresh in my mind the design fresh on your eyes, I’ll talk about the process. I’ll try to be as interesting as possible.
First things first, what do we call this? Is it a 2.0? While the new theme’s version number is 1.0, this is Defomicron’s fourth new look. Swiss Cross1, my old theme, was on 2.1 when retired. Including two themes from Defomicron’s time at Tumblr truly convolutes things, so let’s be simple, possibly illogical, but simple, and just call it Defomicron. Sound good? Good.
The Fifth Desk
Defomicron is responsive. The layout now adjusts itself for desktop, tablet, and mobile browsers. If you are reading this on the desktop, drag one of the corners and watch the site magically2 adapt to different sizes. While the desktop version of the site is the best looking, Defomicron was designed first for phones and provides an ideal reading experience, with proper font sizes and margins and such, on smaller screens. Zooming is no longer necessary to read from your iOS devices.
A theme I tried to follow during this redesign was doing things “properly”. Before responsive design, making a mobile site meant having a separate site like “mobile.defomicron.net” or “m.defomicron.net”. Even when that was the best way to do it, it never seemed like the way it should be done. Reponsive, however, is exactly how it should be done. The same webpage, the same HTML, reformatted to fit your screen.
Defomicron is properly retina-ready as well. Previously, I had made my site “retina” by uploading a giant version of the logo and scaling it down in HTML. While that works OK, it wastes bandwidth and causes some pixelation on some older devices. Now, the logo dynamically switches between 1x and 2x resources depending on your device’s display density. To accomplish this, I created an empty
<div> container in my header and set the background image in CSS to the logo. This allows the use of media queries to change the resource image based on pixel density. In the future, I am sure there will be better ways to serve retina images, right now this is the best method.
The site’s favicon has also been updated as per John Gruber’s excellent tutorial. Previously I had been using a 32x32px favicon and scaling it down for non-Retina.