Beyond the Misty Mountains

A few months ago I was surfing around on my phone and noticed a few blogs with nice mobile layouts. That got me wondering what my site would look like on the phone. It was a bit lame. So I decided to build a mobile look for the site.

Originally my plan was to use a combination of the Carrington Mobile WordPress theme and jQuery Mobile. I started down this road, but I wasn’t satisfied with having to build another theme. One that would have to match the look of the full site but also make sense for a mobile device. The idea of needing to update two themes every time I made a change didn’t sound too appealing. Thus the project got put on the shelf.

Then recently I heard of and started learning about Responsive Web Design. A technique where a website provides the look for any size screen. This sounded exactly like what I wanted. So while at WordCamp SLC 2011 I did what I did at the previous WordCamp, add new features to my site.

So how does it work? The majority of the magic comes from CSS3 Media Queries. Media Queries allow you to define rules that only apply to certain screen sizes. Here’s an example.

.content {
    width: 960px;
}
@media screen and (max-width: 320px) {
    .content {
        width: 300px;
    }
}

This sets the item with class content to a width of 960px unless the screen size is under 320px then it sets it to 300px. Another important piece is the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

On mobile phones like the iPhone and Android phones the browser will tell the page that it is ~1000px wide. This is so that it can render full site pages properly and then you can zoom in. The viewport meta tag tells it to use the width of the screen as the width of the webpage.

Once I figured out how it all worked and the sizes I wanted to target it only took 65 lines of additional css to have a size independent site. Just one problem: images. I have a fairly image heavy site and I didn’t want to force a phone to have to download a bunch of 800px images. After looking around for what the responsive way to do it might be I found a couple of options. Filament Group’s Responsive Images, Adaptive Images, and a number of custom one-offs.

Responsive Images requires you to define both the small size and large size images in the <img> tag. This didn’t sound appealing in a preexisting site with generated pages. Adaptive Images on the other hand used a bit of JavaScript to set a cookie, a server rewrite rule, and a php script that generates smaller sized images on the fly, caches them, and serves them as if that was what was asked for. I configured it to serve a mobile friendly, tablet friendly, or the full size image depending on the size of the client.

So how’s the support from browsers? Well CSS3 Media Queries are supported in all the latest versions of the browsers. I’ve tested all browsers, including Android and iOS devices, and everything looks great. So go ahead and resize the width of your browser up and down to see how the site adapts. Here’s some shots of how it looks at different sizes.

Desktop Look

Tablet Look

Phone Look

Welcome to Version 3.0. That refers both to having upgraded WordPress to version 3.0 and creating version 3.0 of my theme. Less than a month after my last rewrite, WordPress 3.0 was released. It had some features that I really wanted to take advantage of; like the improved custom post types, custom headers, and custom menu management. So I set out writing a new version of my site. Now a handful of months later I’m finally done. Since I setup this site there’s been features I’ve wanted on it but had never gotten around to. So what’s new?

Gallery

I always wanted some way of showing off some of the photos I take. With this new version I took the time to setup the theme to support image galleries. I’ve gone back and uploaded almost 600 pictures from the last 5 years so head over to the gallery page to check them out.

Portfolio

Another thing I’ve always wanted was a portfolio section to show off some of my creative work. With the new custom post types of WordPress I was able to set this up. This concluded in the writing of 3 plugin’s. The first plugin is the plugin that sets up the custom post type stuff to allow portfolio posts. I then stepped back to my HTML5 video plugin adding support for custom encoding and custom HTML5 video players. While working on the video encoding I set it up to add a watermark to the videos and decided I would like to be able to watermark images. I wasn’t able to find a suitable plugin for this so I wrote my own. I hope to release these plugin’s soon. Some need more cleanup than others. Head over to the portfolio section to check it out.

Theme Design

While working on the theme I took the chance to make some alterations. In addition to gallery posts I’ve added an aside post type that can be used for short micro style blogging. I’ve also tightened up the design to give it a more uniform look.

I think I’m finally happy with this site. I hope to start using it more and already have ideas for some future posts. Now that I’m done with changes I imagine WordPress 3.1 will be released any day now.

A little while back a friend of mine was telling me about a project he was working on. One of the things he mentioned was how he was using some of the new styles CSS3 offers. Around the same time I discovered a script that would enable some of those CSS3 feature in Internet Explorer. That got me thinking about things and one day I was looking at this site and decided to overhaul things.

Initially my plan was to to replace the complex use of images to do the rounded corners and drop shadow effects. But once I got going I ended up changing large chunks of the CSS, converting to HTML5, and radically altering IE support.

CSS3

I started out only intending to use the CSS3 styles border-radius and box-shadow to replace the way it was currently done. Previously in order to achieve the rounded corner effects, it required the use of some complex html, several images, and a large chunk of CSS. I decided with all current browsers but IE supporting border-radius (either border-radius directly or by extensions like -webkit-border-radius and -moz-border-radius) that I would use that. So I set out and deleted the complex html and replaced large amounts of CSS with just a handful of new properties. The results were great. Side by side the old way and new one looked identical. I then did the same thing using the box-shadow property. Doing this removed about 900 lines of CSS, 100k worth of images, and reduced the page size about 10k.

The old way

The new way

Now this had the site looking the same in all browsers but IE. The solution for this is a behavior file for IE that adds support for border-radius and box-shadow. After a short time fighting to get it to work I figured it out and had the site looking the same in IE…. Well mostly. The behavior file only supports border-radius so all 4 corners are rounded. The boxes in the right side bar only have the top corners rounded and the script didn’t work for those. After exploring possibly using something like DD_roundies to support this I decided that I was ok with that little bit of the site looking square in IE.

HTML5

After that I started wondering about other new browser technologies out there. With HTML5 being the main one. I started testing out the water by replacing the doctype with <!DOCTYPE html>. Ah simplicity. Then I reduced the html tag to <html lang=“en-US”>. Liking it so far. But there’s a lot more to HTML5 than just shortening a few tags.

One of the more notable changes is new input types. Types like email, url address, search, date, color picker. Now being a blog the only input box on my site is a search box to search the archives. So I changed it to be type=‘search’. Now what does this do? In most browsers, nothing. It just acts like a plain old text input. But in Safari and Chrome when you enter something into the box a little x appears on the right that you can click to clear the box. I know right, it’s awesome. Another new input feature of HTML5 is the placeholer attribute. This attribute allows you to define text that will show up in the input when no text has been entered. So in browsers that support it (currently just Safari and Chrome) you’ll see ‘Search Archives’ show up as place holder text in the search box.

HTML5 comes with a new set of semantic tags. Those tags are: <section>, <nav>, <article>, <aside>, <hgroup>, <header>, <footer>, <time>, <mark>. Now when I first saw those tags I think I reacted like everyone else did. “Well those are stupid. Why not just use div’s.” But then I got to thinking about it and what HTML is really for. HTML is the Hyper Text Markup Language. It’s meant to mark up text on the web in some meaningful way. We’ve just been using div’s cause we needed a way to style things. So then it made sense to use specific tags to markup the different bits of content.

As a result I’ve taken to using the header, footer, nav, article, aside, and time tags in their respective places. Now this brings up the question of how browsers handle these unknown tags. It comes down to 2 issues, how are unknown tags styled and how are they placed in the DOM tree in relation to the other tags. Most browsers just don’t style unknown elemets but allow you to with CSS. Also most browsers place the nodes in the DOM tree how they are defined. The exception here is IE. It doesn’t allow styling of unknown elements and it places them as empty nodes in the DOM tree, thereby breaking the structure. There’s a fix for this though. By using JavaScript to create dummy elements, IE will then recognize them and do the expected thing. So we add basically the following code.

<!--[if lt IE 9]>
<script>
  var e = ("abbr,article,aside,audio,canvas,datalist,details," +
    "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
    "progress,section,time,video").split(',');
  for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
  }
</script>
<![endif]-->

This code creates all the new HTML5 elements in IE so that they will work. I am using the html5shiv script to do this. Another thing to add is this bit of CSS that will give these new elements a sensible default.

header, footer, article, section, hgroup, nav, figure {
    display:block;
}

With all that in place we can use the new HTML5 tags like we want.

The final stop on the HTML5 tour is video. I’m not really a fan of Flash and have never really gotten it to work for playing videos on the site. So I was excited about having the browser be able to handle the video. I decided that I wanted to make use of the Video 4 Everyone code that would make it so HTML5 video would work using H.264 or Theora depending on the browser, but also drop down to using a Flash player if HTML5 video wasn’t supported.

I searched for a WordPress plugin that would do this and found a couple, but upon trying them out found that they had problems and just didn’t quite do what I wanted. One of them had a feature that allowed you to upload any video and it would convert it to the H.264 and Theora versions for you. This was something that I thought was nice so I started with that as a base and started writing my own plugin to handle HTML5 video. Pretty quickly I started running into hurdles.

Time for a side rant. Currently the HTML5 spec doesn’t define what codecs are to be used for video. As a result it’s currently split between the proprietary H.264 codec and the open source Theora codec. Whatever I thought because I can provide support for both with ffmpeg encoding to both formats and the broswer can use the one it supports. Problem came when I tried to do this and found out my ubuntu server doesn’t support encoding to H.264 due to its licensing restrictions. From a technical standpoint I like the H.264 codec and the results it gives, but the patents and legalities that surround it are very scary. End rant.

So side stepping the encoding problem and converting to H.264 on a different machine and uploading it later, I got my plugin functional. Now all current and future videos on the site use HTML5 video and dropdown to Flash if that’s not supported. I hope to clean up the plugin code and add a couple features so that I can release it sometime soon.

Internet Explorer Support

Previously I maintained IE6 support using a separate IE6 only CSS file. This stylesheet file was 679 lines long of tweaks for just IE6. After having changed so much HTML and CSS and seeing how poorly IE6 supported a lot of it, I decided it was time to end support of that browser. I’m not alone on this. I searched around a bit and found a script I liked that would alert an IE6 user that their browser is old and unsupported. One of the requirements I had for this script was that even though it alerted them that the browser was old and unsupported, it would still allow them to use the site if they chose even though the experience was going to be a little ugly and maybe even a little broken. The sevenup script did just that.

Upgrade IE6

Wanting people to still be able to use the site in IE6 if they chose to meant I still needed a small amount of fixes to make it bearable. I added in the DD_BelatedPNG script to add in transperancy support for images in IE6. I replaced the IE6 stylesheet with just a handful of rules so things don’t look too terrible. All in all I hope anybody using IE6 would upgrade but if they choose not to at least it’s mostly usable for them.

As far as support in IE 7 and 8 goes, using the scripts mentioned above for HTML5 and CSS3 support they pretty much look the same as other browsers. There’s a few styles that don’t look as I intend, but I’m ok with the look deteriorating slightly in a browser with lackluster support.

Simplifying WordPress

After having changed all this HTML and CSS I began wondering if I could simplify the code used as part of my WordPress theme. Previously in order to add the complex HTML for the rounded corners into things like comments and the sidebar widgets required some equally complex and hacky code around the WordPress functions. I began removing this code and found that for the most part I could go back to using the default HTML produced by the WordPress functions and style them to look the same using just CSS. In the end I’ve ended up removing 168 lines of php code, and 100KB of images.

In the end I had a lot of fun with the changes I did to the site. Hopefully things like better video support get me posting more often. I have a few plans for things in the future. Stay tuned.

-Dexter-