Releasing: Comatose WordPress Theme

This has been in the pipe a long time, it started simply as a set of experiments playing with HTML 5, layouts, responsive design, page structure, typeography, displaying images on mobile screens, the mobile web, minimalism, and my own dislike with the previous design(s) of my site. Finally, I decided to turn it into a full fledged WordPress theme. This is the result. It powers my site, and the InterKnowlogy development blogs where I work.

So here is the low down:

  • HTML 5 layout with CSS 3 styling
  • Responsive Layout
  • Clean, minimalist design
  • Print style
  • Clean, readable, and consistent text styling.
  • Clean and readable typography.
  • Clean display of code.
  • Beautiful images
  • Images display at native resolution on Regular and High Density screens
  • Widget enabled sidebar support
  • Nested comment support
  • Gravatar image integration for comments (High resolution images for High Density screens)
  • Custom menu support
  • Nested sub-sub-sub menu support
  • Graceful degradation in older browsers

But don’t take my word for it. Download links, versions and release notes are all on the project page:
http://www.paulrohde.com/development/comatose/

And all of the source code is hosted on GitHub.

Desktop Screenshots

Comatose Windows with Chrome showing Sidebar

iPad Retina Screenshots

Menu

Comatose iPad Retina Menu

See more screenshots

Fluid Grids

One of the first things that has to be addressed when designing a site is the layout. Historically, because of the limitations in browsers, most sites have been built in some variation of what I’m calling “poster format”. One width, variable height, and you have the following problems:

  • On large monitors, content appears tiny and hard to read, and you always come away feeling like there was a lot of wasted space on the screen.
  • On small monitors (or if you have a site snapped to the side of your screen) the content doesn’t scale down, and your left with scrolling back and fourth to be able to read everything.

Over the years one of the principle solution to address this, if someone addressed it at all, was just to never center your content and just let it fill your entire screen. Although this almost works for lots of content, it’s difficult to read as paragraphs will stretch across the screen and you constantly lose your place as your eyes try to find the beginning of the next line. The other problem that arises is that if your designer has a large screen, theres a tendency to continue to add content to ‘fill in’ the space so the main content area isn’t as large. All in all, the only solutions were hacks on a broken system.

With the mobile smart phone market exploding over the last several years, and the browser wars providing an exponential increase in speed and standards complacence, we have a unique opportunity to re-evaluate how we build our sites. A beautiful example of this is this site:

http://goldengridsystem.com

No matter what browser you visit it on, or what size your browser is at, the content will be sized appropriately, the typography is readable, and everything will feel right. No insane urges to re-size your browser window.

This, to a limited degree, is how I want the Comatose Theme to look and behave. Fluid layouts are hard, and getting everything to work correctly while still maintaining a standard html5 layout hierarchy is going to be tricky.

Here’s a link to the demo: http://www.paulrohde.com/demo/html/layout-demo.html

And a video of the layout in action:

Since I currently don’t have access to a scanner, I will be scanning in and posting up images of the layout brainstormings with commentary soon.

Until next time.