Web Design/Developmentarchives

Site Redesign Features

A redesign of my personal site has been long overdue, but I finally got the inspiration, motivation and the time to give the site a much-needed overhaul. Here’s what’s new:

  • Backend completely powered by WordPress, using a custom post type for my web development portfolio and traditional posts for the blog/linked list.
  • Linked list functionality achieved by custom post meta data, giving any traditional post the ability to not only have a source link, but have that source link be the default link for the post. I’ll write a post about that sometime soon!
  • A complete visual redesign. CSS3 everywhere, AJAX-ified for a more fun experience, and just all around easier on the eyes. I even threw in some webkit keyframe animations, so if you’re not using a webkit brewer, make sure to check it out in one (use the contact form to email me and you’ll see!).
  • A real photo portfolio, grabbing my photos from flickr and spitting them out on my site in a pretty neat way. On the photo page, you can not only see when and where the photo was taken, but you’re given a download link so you can use the image as your background without having to drudge through flickr.

AJAX + WordPress, made easy

One of the main reasons I redesigned my site – beyond the obvious facelift – was to give it a much needed new backend.  Everything is now powered by WordPress, which is awesome for control and simplicity, but isn’t exactly known for its AJAX prowess.

As a theme developer, I have been using a little technique to AJAX-ify WordPress themes for a while.  In the page template, you can use PHP to find out how the page was requested — was it an AJAX request, or was it a traditional page request? :

$isXHR = (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == "XMLHttpRequest"));

Then, with a few conditionals, you can customize your template so things like the header (get_header()), footer (get_footer()), and sidebar (you guessed it, get_sidebar()) get left out of the page request if it was an AJAX request.

For example:

if (!$isXHR) get_header();

This is a clean and efficient way of serving up just the page content without the headers, footers, and whatever other content you want to omit from the AJAX request.  Less content = smaller file size = faster load time = less waiting for your visitors.

See it in action in the individual photo pages of my portfolio.

Better Image Management with WordPress

Via SmashingMagazine:

Because the content of images cannot be parsed by search engines, making sure they are rich in meta information before publishing them is important. Here are a few ways to enrich your blog using some common sense, best practices and the power of WordPress.