A Fresh Coat of Paint

It’s strange to think that I started this blog 4 years ago. I designed it myself in the summer of 2007 and started officially blogging on it in August during medical school orientation. I based the design on the Default WordPress theme, which was in-turn based on the venerable Kubrick theme. Last year, after many years of updates, WordPress finally retired its Default theme with the vision of creating a visually refreshed default theme, which they dubbed Twenty Ten. The idea was that WordPress developers should design a new theme every year.

It was about the same time that I began to notice some of the cruft in my own design. But my design had a personality to it that I liked. Plus, the design took a considerable amount of work on my part, and this was neither something I was willing to throw away haphazardly nor something I had time to recreate from scratch in a more modern fashion. And so the cruft lingered on and got even cruftier.

Encephalosponge New Design

Encephalosponge: New Design

A few months ago, a stunning theme called Duster appeared on WordPress.com. I knew this would be the theme that I based my next site design on. Little did I know that WordPress developers had the same idea, and they recently released their new default theme, Twenty Eleven, which is based on Duster. I couldn’t pass up the opportunity to visually refresh my site based on a WordPress default theme that I love. In the new design, I wanted to highlight some personal changes that I’ve gone through over the past 4 years, and I also addressed some things I learned along the way. The timing is right, too, since I am transitioning from medical school into residency.

Encephalosponge Old Design

Encephalosponge: Old Design

WordPress has changed a lot for the better over the past few years. I’ve been able to keep up with most of the major new features, but keeping up with new features can be a time-consuming job. Now using Child Themes, I can customize my WordPress theme without altering the original. When I created my last site design, I basically copied and altered all of Kubrick. This meant that when any fixes or upgrades were released, I had to do them manually, which usually meant they didn’t get done. With a Child Theme, the Parent is automatically kept up to date without messing up the customizations that you’ve made. Additionally, many WordPress themes now include easy ways to customize the theme’s background, header image, link color and fonts. This provides an easy way to make your site look unique without having to create an entire theme. By adopting a well-maintained theme, I will also get the benefit of having new WordPress features added without any additional work. These themes are also generally designed appropriately so that plug-ins work well and so that they work across multiple operating systems and browsers, including mobile browsers.

Over the past few years, I’ve embraced Free Software and the Creative Commons. With my old design, I used graphics and fonts that were licensed under restrictive copyright terms. This made redistributing my design impossible. I now use a free computer operating system, create graphics in a free graphics suite and choose images that are free to redistribute and remix. For my header image, I found a macro photo of some Brain Coral that I remixed to fit my color scheme. It doesn’t have as much personality as my previous design, but it works well with my new, more reserved one. It is also easily replaced if I come up with something better down the line. I also use Google’s Web Fonts project to bring my design to life with open-source typography and not embedding my non-traditional typography in images.

My final revisions are a work-in-progress. I am refining the content of this site to be my primary blog, but not my primary online point of contact. I set up my own site on Blackhall Family Sites, where I would like to host a more appropriate bio, contact page, and stream of personal news. I will continue to use this site for blogging about interesting topics and I will reserve that site for information about me. I would also like to continue to refine the content of this site to a more narrow set of topics and types of posts.

So as the content of this site undergoes revision, I thought it was a good time for it to get a good facelift as well. The archive isn’t going anywhere, but I thought everything could use a fresh coat of paint and a good buff to shine. Let me know how it looks.

Now with web fonts!

This site now utilizes the @font-face attribute included in the new Firefox 3.5. These fonts should be visible in Firefox 3.5, Safari 3.1, and Opera 10. They may be visible in IE (I’m not sure). Thanks to exljbris and RedHat for some cool fonts. Let me know if you think I went overboard or if something isn’t looking right on your screen now. I’m not done tweaking yet, but this is a good start.

Back to the roots of Firefox

I started using Firefox for pretty much one reason: it correctly interpreted HTML and CSS (the code that web pages are written in). When I was learning to design web sites in high school and college, Internet Explorer was annoying because it doesn’t conform to web standards set forth by the W3C. It was a fairly ubiquitous browser that set its own standards for how the web should work. Firefox was the first browser I had come across that took web standards seriously and did their best to interpret a website’s code properly. From a design perspective, it meant I could code my sites according to the W3C’s specifications and not have to cater them to individual browsers.

With the birth of Internet Explorer 7 and now Internet Explorer 8, Microsoft has taken some steps to conform with these web standards. At the same time, Mozilla’s Firefox browser has gained significant ground against Internet Explorer, especially with the younger generation. This is at least in part due to the fact that fun new websites are designed to work best when viewed in a browser that is standards-compliant. At the same time, Mozilla has worked on improving the browsing experience by adding fantastic new features to their browser. Now, over 10 years after the finalization of the HTML 4 specification, the W3C is hard at work ironing out the details of an HTML 5 specification. Firefox is first in line to implement some of these exciting new design techniques in their soon-to-be-released Firefox 3.5, as can be seen on the Mozhacks blog. I’m excited to see Mozilla getting back to the roots of what makes Firefox the best browser on the Internet. Their latest browser is not only blindingly fast, but it’s helping designers advance the web.

Curious what you have to look forward to in Firefox 3.5? My personal favorite things are being able to embed a font in my website so that I can type in any font I want, the ability to play embedded OGG audio and Theora video directly so that I can avoid using Adobe Flash, and some crazy SVG stuff. Check out more at hacks.mozilla.org!

Web site creation and standards guide

I’ve been reading the Free Software Magazine on-and-off for a few weeks now, whenever something looks particularly interesting. Some stuff is not incredibly impressive, but this article “Creating web pages, the right way” by Mitch Meyran offered a lot of incredibly insightful information as to some of the true considerations for designing a page. He touches on a little bit of theory and a little bit of practicality that made me wish there was more than 5 pages to read. It is a bit technical, so if you’re not at all familiar with web design or web standards, you can probably skip the article. This one is meant for the true designers and coders out there. It made me rethink quite a few poor decisions I’ve made that I can correct in the future.

Jonathan is naked

In honor of CSS Naked Day, my website is going naked all day. What does that mean? My website’s style sheet has been removed and all of the content will be displayed as regular old un-styled text, links, lists, and quotes. That means little or no pictures, almost no color, and no formatting. It’s amazing how one little text document can completely change the way a website looks without changing any of its content.

I have known about this since it started a few years back, and I’ve always wanted to participate, especially now that I designed my own theme. The purpose of this day is to remind everyone to appreciate web designers and what they bring to the Internet. Without them, we’d be staring at this clunky looking black-and-white text every day when we get online. I also feel like it’s a reminder of why we should all support web standards. This way designers are free to express themselves artistically and viewers are not required to use one particular browser in order to view it. If there were no web standards, artists wouldn’t even bother making nice designs because only a fraction of the world would be able to view them.

All this clunky text got you down? Refresh yourself with some of the eye candy at CSS Zen Garden and appreciate the artists of the web. Only don’t compare those designs to mine (even on a normal day) or you’ll quickly realize how much of an artist I am not. Thanks to Lorelle for reminding me about today!