Skip to content
April 7, 2011 / steve8

The New Look

This website runs on wordpress, always has.  I made the choice because the thought of writing a blog-like platform from scratch felt very daunting, and the vast library of plugins and themes available for wordpress made it seem like the obvious choice.  Indeed I was left impressed by the very easy installation and essentially turn-key setup.

Years later I can say the vast majority of the thousand or so themes have one of the following problems:

  • distracting graphics/colors ->

morning-coffee

The theme/design needs to get out of the way of the content.  The theme itself is not the content.

  • Narrow main content column ->

I won’t post samples, but almost all of the themes have this issue.  For years now the normal/minimum screen resolution is 1366×768 on laptops, and 1920x1080p on desktops, so why have the main content of your website be restricted to 600 pixels width?  Fluid width themes that adapt to the width of the window are few and far between.

  • Too much space dedicated to widgets and menus and offsite content/feeds/links ->

 

shinra-of-the-sun

 

Much of the visual noise is in the form of links and multiple ways to navigate content on the site.  Many themes expect you to use a calendar so people can access posts by day, and monthly links to content, and content by tag, and by category, and a tree of how the content is organized…

How many readers on a given blog want to look at any old post, let alone need multiple ways to navigate old content, especially when they could be looking through the content itself, rather than menus to navigate it.  Maybe a few visitors would want/need to navigate content with many options, but that certainly shouldn’t be a large part of every single page on the site.

 

 

The examples above are not hand-selected over the years, look for yourself here, how many would you consider viable options?

 

Anyway so the choice is to either design my own theme, or to try to hack away at one to mold it into something I would be happy with.  I decided on the latter this time, and chose this to start hacking.

http://thethemefoundry.com/paperpunch/

I have had a long running fascination with SVG as it allows for extremely light simple graphics, and now that IE9 is out, there’s no reason not to use it.

So I changed the main image for the theme to an embedded SVG document, but the shipping version of Safari choked on it, so I reference an svg document as an image and everyone’s happy.  Yes, even Internet Explorer (9).

 

This picture I created/wrote is only a few lines of code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" height="230" width="230">
<polygon points="0,10 0,230 220,230 220,10" style="fill:#fff;stroke:#dedede;stroke-width:1px"/>
<circle cx="115" cy="115" r="115" id="circ" style="fill:grey;"/>
<polygon points="0,10 0,53 115,115" style="fill:#eeeeee;"/>
<polygon points="0,53 0,85 115,115" style="fill:#8FB4FF;"/>
<polygon points="0,85 0,115 115,115" style="fill:#1463FF;"/>
<polygon points="0,115 0,145 115,115" style="fill:#0047D6;"/>
<polygon points="0,145 0,184 115,115" style="fill:#8400c3;"/>
<polygon points="0,184 0,230 115,115" style="fill:#ee1111;"/>
<polygon points="0,230 44,230 115,115" style="fill:#228822;"/>
<polygon points="44,230 79,230 115,115" style="fill:#FFCC55;"/>
<polygon points="79,230 115,230 115,115" style="fill:#000000;"/>
</svg>

 

Aside from the image, I modified the theme to fit my tastes:

I removed most images involved in the theme, making it lighter-weight.

I removed the menus below the title.

I removed the overly-large footer.

I added the search widget which was in the footer to the sidebar, and replaced the annoying (in code and function) search form placeholder text, with the new html5 placeholder attribute, (this doesn’t seem to work in IE9).

I removed the distractingly large comment image/count attached to each post in the index page.  Also removed the RSS images/links, made a single feed link (text) that links to the atom feed.

I also widened the main column and while viewing a single post, I made it even wider, at the expensive of the sidebar.  The site is now 1120 pixels wide.

I removed some funky scripting that modified the font for titles, this not only was clunky in general, it also didn’t work in IE9 without compatibility mode.

I made lots of little edits to the master css file, including adding visible lines in tables, removing most underlines from links and hovering over links.

The new theme broke the functionality of a Syntax Highlighter plugin, so I had to manually add the scripts to the header.

Added some spacing to fix alignment issues, and to create the illusion that part of my image on the top right is bursting out of its area.

added a “read more” svg/image icon so it doesn’t get obscured by the rest of the text/page.

 

In the end I like the results, I believe the site is now lightweight and extremely easy to read and navigate, there is little extra content trying to protrude, the single sidebar is narrow and only exists on the main page, while providing a fast way to click on past articles, no additional visual noise.

 

The next improvement I’d like to make to the site is to be able to log in with google/facebook/etc in order to post comments.  This is surprisingly not easy to do with any existing wordpress plugin that I know of.  There are plenty of plugins to allow people to log in elsewhere via openID with the accounts they created on your blog, but that’s obviously not the issue for most bloggers.  Most sites are not worth a new account/giving email address/ just to comment.

 

As someone picky about details,  I might say after my years with wordpress that I might have been better writing my own little CMS via django, and my own css/style to accompany it.  The advantages of having a mainstream CMS is nearly zero, many plugins don’t work as advertised, or only for certain themes or older versions of wordpress.  Most themes are unsuitable without lots of hacking.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: