Entries tagged: Meta
I’m up all night to get meta. Up all night to get meta. Up all night to get meta.
I’m up all night to get meta. Up all night to get meta. Up all night to get meta.
The palette of emotional design for flatlanders is instead temporal. Temporal beauty lives in state-change animations, nuanced timing effects, strategically placed user feedback, and other “interesting moments,” not drop shadows and Photoshop layer effects. Flatlanders build all kinds of emotion and depth combining these moments with delightful microcopy, personality, and typography. All honest—all web—all good.
With the redesigned Defomicron I launched early this year, I focused on the reading experience. I tried my very hardest to focus on good, clean typography and cutting out the unnecessary. I’m proud of what I’ve done so far, and it keeps getting better. Granted, my focus might change if this site ever brought in revenue, but right now I want Defomicron to be accessible in as many mediums as well as can be done.
That’s why Defomicron has an RSS feed, a Twitter feed, and an App.net feed. Today, I’m happy to announce I’ve added a Tumblr feed to the mix. For those of you that swing that way, you can head over there and follow along with all the latest and greatest.
Defomicron has a new RSS feed. Last year I struggled with getting the feed to update quickly with Google Reader. I thought I had found a solution when I switched to FeedBurner, but then Google announced that service had run its course. I switched away from it, the feed went down, and I never bothered to fix it. Yeah… sorry about that.
I’m sort of thankful all of that happened, actually, because it forced me to buckle down and really figure out this RSS thing. Most importantly: the feed works now. Please resubscribe in your favorite feed reader with the following URL:
To those familiar with things, yes, that is the default WordPress RSS 2.0 feed. It validates as such. However, I am also running a few clever functions to modify the feed to my needs.
First, I am modifying the RSS link of Link posts to point to the link in question, just as it works on the site and just as most popular blogs in this sphere handle their RSS feeds. Second, I appended a permalink in the form of the familiar hash to the end of every single entry. And finally, I added Vias where Vias are due. In the end, you get exactly the same content whether you read Defomicron in an RSS reader or on the website. That’s how I wanted it.
As a part of the future-proofing, I went ahead and bought
defomicron.com. It simply redirects to the
.net1, because that is of course the preferred URL.
I used to cache the site using WordPress plugins, but no more. For one thing, they are irritating to use. For another, I figure if I ever get enough traffic to this site to bog down my server, I’ll have some source of revenue coming in to afford an upgraded server. Most importantly, though, is that most caching plugins just don’t work with HTTPS.
That’s the new Defomicron. I hope you enjoyed reading about it as much as I enjoyed the construction of it. More importantly, I love it.
Metamicron is a series of articles about Defomicron. It’s very meta. If you haven’t already, read Part I.
Before I turned on the new design, I quietly enabled HTTPS, or HTTP Secure. HTTPS does two things: first, it ensures you, dear reader, that you are indeed connected to
defomicron.net and not some low-life spoofing me; second, it encrypts all data sent between your computer and my server using a complex 2048-bit key. This prevents anyone with sinister intent from peeking at the traffic between your computer and my site, even if they have your WiFi password1.
Banks and social networks, and pretty much every login form you’ll encounter on the internet, have been using HTTPS for awhile now. In theory, that sounds great. All the data you want private is encrypted, so you’re safe, right? Right? Unfortunately, there is no such thing as an unbreakable encryption. There are steps we can take, sure, but we cannot assure ourselves of absolute safety. If one is dedicated enough (and with requisite resource), one can hack anything.
So here’s the rub: if we turn HTTPS on only for private stuff, we are effecively labeling which connections would be worthwhile for hackers to break into. Sure, it’ll be a challenge. But the payoff has a far greater likelihood of substantiality. By turning on HTTPS here, I am keeping your data just a little bit safer. While there is nothing you’d like to hide being sent between my server and your machine, hopefully we can confuse the seedier among us as to which connections are truly sensitive. If you’d like to read more about this theory, please read Tim Bray’s excellent article on the subject (which turned me on to it in the first place).
In the future, I think it will be standard for every website to use SSL. I wouldn’t be surprised if, in five years, our browsers warn us against visiting any site without a certificate. This is the second theme I tried to follow with the new Defomicron: future proofing.
I have also turned on HSTS2, which further protects you by informing your browser to always use the HTTPS connection when accessing Defomicron, even if someone unpleasant were to trick it otherwise.
I have moved away from webfonts, mostly because they are a bandwidth hog. From now on, Defomicron will display in Gill Sans (if you have it installed), or Times New Roman if you don’t3.
While I’ve experimented with image-posting before, ultimately I’ve decided that posting images inline with the text on the homepage of Defomicron simple doesn’t look nice. I’ve now switched to Cabel Sasser’s excellent (and free for private use) FancyZoom. I plan to start using it regularly.
defomicron.com, and it now redirects to the
.net. Just a little bit more future proof.
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.
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.
As my regular readers1 will have noticed, Defomicron has been going through some changes recently. The first thing you’ll notice is the change I’m probably most excited about: web fonts. The body font has been replaced by “PT Sans”, a typeface originally designed for Cyrillic text that nevertheless does a beautiful job displaying English. Header text has been replaced by the slab-serif “Kreon”, a typeface with just the right amount of fun in it. Finally, I have web-font-ized the “Futura” in the title, and now it’ll appear consistent on all systems. I think these fonts make Defomicron even more beautiful then it already was. I hope you like them, too.
The second change you’ll notice is the introduction of quotation posts. Quotation posts are meant to emphasize short, interesting or witty quotes and as such appear in large type to draw your interest to them. This format has been done many times before, but I’ll give credit for my inspiration to The Brooks Review’s “Quote of the Day” posts. In addition to appearing on the main page and in the RSS feed, quotation posts have been given a special section in the archive, alongside “Editor’s Picks”.
There are also many smaller updates, including the removal link posts from the archive. The archive page is now much more manageable with fewer and more important items listed. Additionally, the exact time and date of each post (links, articles, and quotations) is now located on the permalink. Finally, many server side, admin features have been introduced that make my job a heck of a lot easier.
I hope you enjoy Defomicron 1.5 as much as I enjoyed coding it.
Then, over two months later, I received an unexpected email from Paula at A Small Orange. Doug had wanted to thank me for my feedback and had sent a parcel of goodies to my address in St Catharines, Ontario. It had been returned, and ASO would like my new address so they could ship my reward. Yesterday, at my old/new home in the UK, I received a package containing an A Small Orange T-shirt, a Moleskine notebook and a handwritten note from Doug, thanking me for “helping keep our copy elegant.”
A Small Orange is straightforward and elegant — and excellent. That’s why Defomicron is hosted on their servers.
This is Defomicron. Welcome.
I hope you like what you’ve seen so far. Over the coming months and years, I plan to bring you interesting and analytical content and commentary on Apple and the rest of the technology world. Enjoy.