using WordPress and Photocrati to build a web site

I thought I’d talk a bit about the infrastructure I used to build my web site. My blog has been self-hosted on WordPress for a number of years, and for this kind of web site, I really like that as a foundation. It uses Apache, PHP and MySQL as it’s foundation, and it has been a solid and stable platform for me for a while. Perfect? No. Sometimes it could be faster. Sometimes it feels a bit bloated — but given my day job is in Drupal, relatively speaking it’s hard to claim WordPress is doing a bad job in managing the bloat. (see the end for a digression on this).

In older generations of this site, I would typically search for a free theme, or go to a site like Themeforest and but an inexpensive theme that I would install, beat with a stick until I thought it looked okay, and then move on. A year or so later, I’d be tired of the theme, and go look for a new one to refresh the look. When I redid the site about a year ago, I went looking for a theme that would give me more power and flexibility, one that I hoped I’d be able to live with and adapt to my needs better than the ones I’d been using. 

After doing some research and seeing it in action on various sites around the net, I decided to try Photocrati. At $89 it’s not inexpensive but it seemed like it had the flexibility i needed to customize it down the road, and out of the box it looked pretty good. I installed it, whacked it with a stick until I thought it looked okay (baby blue background and all… what WAS I thinking?) and set it aside again. Over the last couple of months, I’ve come back and torn things apart and done some more serious customization and design against it, and that’s left me with my new site that I’ve just completed. 

So I’ve actually used Photocrati two ways — as a simple “install and press buttons” theme, and as a framework for a more custom design. Photocrati isn’t the same as a base theme like Thematic, but for me that was a good thing: I could use Photocratic for the heavy lifting, and then put my energy into the parts of the site that I wanted a specific look on — in my case, specifically, the front page. 

After building two designs and living with Photocrati for over a year and having gone elbow-deep into it a few times, what do I think?

I like it. As a “plug and play” theme, it’s got a nice, clean look and it has a fairly simple set of designs that you can build around with a lot of flexibility. You can build an acceptable site by installing Photocratic and poking at its customization until you like how it looks, without any significant HTML or CSS experience. It does a pretty good job of helping you tweak all of the details, and the admin and customization is nicely thought out. 

With this new design, I needed to address two significant weaknesses to Photocrati, plus I wanted to put together a photo gallery area that and a nice distinct look and was maintainable without having to hand-code everything. I also wanted to improve how the site worked on mobile devices, both because that’s an increasingly important part of the web traffic to sites like mine, and, well, with my history working in the mobile space, it’s always been a bit embarrassing that my sites aren’t better at it. 

The two things I couldn’t do with Photocrati out of the box:

  • Fonts: The supported fonts in Photocrati are, to be honest, fairly weak. Typographically, the selection is limited and not terribly exciting. Fortunately, I found an easy fix for this with the WP Google Fonts plug-in. It let me override the Photocrati fonts and use the Google Font library for my typography. This worked once I installed and activated the plug-in — the site now uses Libre Baskerville for the text font and Open Sans Condensed for the headline font. I could also have done this by using custom style sheets to override Photocrati, but this is actually quite painless and I’ve found no compatibility issues. 
  • My custom front page: Photocrati doesn’t support a page that doesn’t display the site’s header and footer. I wanted a front page that was completely distinct from the rest of the site, not just with different material in the content area — a different treatment for the logo and a different menu structure, plus a completely different look and feel.  The solution to that was building a new page template called ‘blank’, because it loads in all of the WordPress and theme infrastructure, but no content except the copyright in the footer. That left me an empty page I could build out any way I wanted. With some careful use of the existing Photocrati CSS I could even adopt in changes through their theme customization without having to recode the front page by hand, although in practice, I couldn’t for most of it. 

Photocrati also has a way to let you write and publish custom CSS into the theme. This gives you the ability to override their CSS or write your own custom extensions that can be used anywhere you write your own HTML. To add in the “blank” page template involved adapting three PHP files in the theme. My custom front page is (I kid you not) under 25 lines or HTML, and my custom CSS is about 200 lines. That’s pretty much it. 

The photo galleries are a series of WordPress pages, each with a hand-crafted HTML that’s themed by classes in that 200 lines, but each section within the galleries is a boilerplate of about four lines of HTML. They interface with a couple of WordPress plugins that implement the galleries and do all of the heavy lifting. Once you get those installed and running, it’s about customizing the look to your design and loading in the pictures. 

Planning the new design and how I was going to restructure the site took me about five months of part time, intermittent work. Implementation took about a month, also part time and intermittent until the last couple of weeks, when I just dug in and decided to get it finished. There’s probably 60 hours of time in the implementation itself, and about a third of that goes to design and building graphics and the look of the site, a third to writing or rewriting content, and a third to actually whacking on WordPress and Photocrati with my stick until it behaved. Not a huge time investment compared to some WordPress projects I’ve done. 

So I found that Photocrati scales nicely as your needs get more complicated. If you just want to install the theme and change a few colors, you can end up with a perfectly usable and nice site. If you want to dig in and write your own HTML and CSS, Photocrati supports that nicely. And if you get to the point where Photocrati just doesn’t do what you need it to do, there’s a chance an existing WordPress plug-in might solve the problem, and if not, you or your PHP hacker can dig in and customize the theme and solve a lot of problems without having to worry too hard about upgrades (in my case, I’ve added three files to the theme and changed none of the core theme files; as long as I don’t overwrite them in an upgrade, I’m fine. If I was smart, I’d make this a child theme and isolate my changes — and I may. Someday)

Plug-ins are an important part of the WordPress infrastructure and ecosystem. Where themes adapt the look and feel of a site, plug-ins add functionality that isn’t in the base WordPress installation.  My belief is that you need to use plug-ins with some care, because they can cause compatibility problems and crashes of the site, and they can slow down the site’s response to the user significantly. That said, finding the right plug-ins and using them appropriately can really enhance a site and save you a lot of the pain of custom coding. 

For my web galleries, I ended up using three plug-ins:

  • NextGen Gallery: This is the image management back end. WordPress has a media manager in it, and it’s okay, but nothing special. Photocrati comes with a media manager that, honestly, I’m not that thrilled with. It’s got some better functionality than the standard one, but also some eccentricities that annoy me. They seem to annoy the Photocrati folks as well, since they bought NextGen and have announced it’s going to be integrated into Photocrati this year. NextGen, so far, has been nice to work with, and is a good base to layer other things on top of. 
  • Justified Grid: This  is the tool I decided to use to manage the galleries themselves. I’ve become a fan of this gridded look and I think it can really be used to show off images in a compact and flexible format. This isn’t a free plug-in, but it’s powerful and flexible, and I’m really happy with the results. Even better, all I need to do is define a gallery in NextGen, point Justified grid at it with a few options, and magic happens. No hand coding, no maintenance hassles — you DO design your sites for updates and maintenance, right? 

 So these three plug-ins drive the imagery and graphical look for my photos, and after installing them and getting it all running, I wrote the pages and styled the look around them. The pages are pretty literally cut and paste clones of each other, so the amount of work I need to do to build and maintain the galleries — or change them to add or replace images — is easy. No more galleries that are six months out of date because updating them is painful… 

I’m using a few other plug-ins to help add some functionality to the site. Here are the key ones:

  • Advanced Recent Posts Widget: displays the recent posts in the sidebar. Much more flexible than the one WordPress offers by default.
  • Akismet: spam protection
  • Disqus: drives the comments on the blog.
  • Google XML Sitemaps: keeps the search engines informed about content and updates on the site.
  • Jetpack: the WordPress ‘kitchen sink’ of functionality enhancements. I have mixed blessings here. There’s some nice additions — and I wish they were individual plug-ins and not this mass of features welded together. It seems “not WordPress” to distribute them this way.
  • RSS Digest: creates the nightly “things you might find interesting” blog posting. 
  • Safe Redirect Manager: Allows me to create redirects from within WordPress when I move content around, which I’m going to do more of in the future now that I have this feature available.
  • Shortcode Exec PHP: This allows you to write PHP code and turn them into short codes. Where this really comes in handy is that it means you don’t need to dig into the theme itself to customize it in many circumstances, you can write the customization as a short code and avoid infecting a theme with your hack — making future upgrades a lot easier. 
  • Shortcoder: does the same with HTML and CSS, turning them into a short code. This is very useful for hunks of code you want to re-use in multiple places, and in fact, I will likely re-implement my galleries using this down the road. 
  • w3-total-cache: performance optimization. 
  • WordPress Database Backup: You do back up your site, right? RIGHT?
  • WordPress SEO: to help optimize what you do to look best to the search engines.  
  • Yet Another Related Posts Plugin: shows the “other articles you might be interested in” area on the blog entries. Much nicer than trying to do this manually.

And that’s pretty much it. This is one of the nice things about the WordPress ecosystem: there are a lot of things it does well at first install, but by careful choice of a theme and the addition of a few key plug-ins, you can really create something interesting and pretty. And save yourself hundreds of hours of work custom coding or tweaking HTML and CSS and all of that fun stuff we all love to do… 

And that’s one place where I think Photocrati shines: it does the heavy lifting of creating a pretty, readable site, but gives you the ability to extend that in maintainable ways to the degree you need to get your job done. My history with other themes is that many of them aren’t so good at the extension and enhancement part — that’s why in earlier generations I used one, threw it out and replaced it after a year. Photocrati looks like it’ll handle what I want to do for the next few generations of my site as it continues to grow and extend to support what I’m trying to do as a photographer — without sucking out all of my time in coding or maintenance so I no longer have time to do photography… 

It’s a big win for me.

(Digression on Drupal, since i know I’ll get asked/challenged: I use both. I like both. I use wordpress on my personal blog because I was using it before I took on working with Drupal for my real job, and the time and energy to migrate platforms properly simply hasn’t made sense. I prefer Drupal for larger projects, I think WordPress is perfect for an individual blog like this. There are times when I wish I had it in Drupal because it’d make certain projects easier, but Drupal is also more complicated to maintain and upgrade. I do think WordPress has done a better job of making the admin aspects of WordPress easier and more intuitive than Drupal has; Drupal still has that “adventure game and I’m lost in a maze” aspect to it for me at times. But they both are useful and stable tools that I use depending on the type of problem I’m trying to solve.)

Posted in Working on Web Sites

Wondering why the Mac Pro update is missing?

I know some people have been wondering why Apple hasn’t updated the Mac Pro. Well, I think we know what they were waiting for…

Intel announces next-gen Thunderbolt with 20 Gbps throughput, 4K support:

Here at NAB, Intel just introduced the next generation of its Thunderbolt interface, which promises a data rate of 20 Gbps in both directions (on each of the two channels) as opposed to 10 Gbps for the previous version.

Posted in Computers and Technology

Walking through the new chuqui.com

I think I’ve got the last plug-in conflict debugged, all of the pieces in place, and most of the site content rewritten. Which means that the heavy lifting is done and this phase of the blog redesign project is finally winding down.

I started this back in October when I finally decided of looking at the site and going “one of these days, I have to do this right”. My history with this web site has been to tweak it over time until it gets to the point where it’s driving me crazy, then toss in a new theme and whack at it until the worst design problems go away, and then say to myself “one of these days, I have to do this right” and move on to some other project. 

Well, this is “one of these days”, or at least I hope so. 

This turned into an extremely complex project, because it wasn’t just about changing the fonts or putting in a new logo — for the first time since I left Apple.  I didn’t expect it to take six months, to be honest, but I realized I had to commit to however long it took, or I’d just end up with another half-assed collection of stuff I wasn’t happy with. 

 I had to sit myself down and decide what I wanted this site to be about, how I wanted to represent that — and myself — and what the intent of the site should be. Those questions were actually rather difficult to answer, not in the least because I’ve been ducking them since I left Apple. But it was time to either give it up or get serious about it. Honestly, I considered both options.  Get serious won.

SafariScreenSnapz001

I spent a lot of time looking at web sites and researching what current design trends were being talked about. I put in a lot of thought what made me like certain sites and what made me dislike others — which is where Things I Hate About Your Web Site came from. I then vowed not to do things on my site that I hated on other sites, and I’ve tried to stick to that. 

When I boiled down what I liked about other sites, certain things kept showing up: Clear focus; Clean design; White Space; Simple navigation. Simplified design. 

When I looked at my old site? I saw lots of clutter. lots of widgets and trinkets and trivia. It felt grey, there were too many menus and navigation alternatives; no clear direction on where to look for things and what to find on the site. The supporting documentation materials spread out across too many pages, were too long, too rambling and worked too hard at not having an opinion. And ultimately, the site wasn’t about anything — it was just a collection of stuff I put on it. No focus, no direction, no purpose. 

Which, in retrospect, pretty much sums up things when I left Apple. And which very definitely isn’t representative of life today. 

So, with my marching orders, time to dig in and start fixing. 

I started with the logo. Done properly, it defines the essence of whatever the logo represents — in this case, myself, and the site (as my online virtual me). Laurie and talked about the logo a fair amount and she did the design, handing off the heron in outline holding the camera. It should not be difficult to come to this site and realize that a photographer lives here, and that there’s a strong emphasis on wildlife of some sort — whether or not you recognize that as a egret (or even as a bird). I reinforced that by making sure the front page put photography front and center and that the imagery you see on the front page of the site is a strong mix of both landscape and wildlife images with a good emphasis on birds — but not exclusively so. 

I tried a number of treatments of the logo — it started out larger with an image kicked into the interior, tried textures and colors and color spots and various treatments. What I realized was that it was really easy to make the logo too busy and distracting, and it’s job was to identify the site on the page, not be the focal point. So I shrunk it down and went to the silhouette in a single color. It’s there, but it really shouldn’t be drawing your eye away from the content to the logo by being bright or busy. 

Branding. Almost a dirty word now, especially when talking about personal sites instead of corporate ones — but in reality, it’s an important set of decisions that drive a lot of other decisions. Do it badly, and you drive them off a cliff. Is the site about me? Is it about my content? or what. My decision?

Google ChromeScreenSnapz001

The site is really about two things: my photography and my writing. They come together in my writing about my photography, but the writing isn’t JUST about photography. The site needed to be able to handle both. So the branding, such as it is, is me. I used my name, not “Chuq’s nature photography” or “up way too early in the morning but oh my god the sunrise photography” as some not-personal entity. 

Stories Told Here

Google ChromeScreenSnapz002

Google ChromeScreenSnapz002

I’ve talked a bit about the new tagline “Stories Told Here” already. I will likely talk about it in more detail down the road as plans come together. But in many ways, it’s my stake in the ground. It’s a reminder that the site isn’t about an image, but about helping people become interested and involved with that is represented within that image. It’s not about a pretty photograph, but the story that is told by that image and about the place that image describes. And down the road, I’m looking to do a lot more than ‘just’ still photography as I work to get a handle on adding in audio and video and telling a larger story through words and image and sound and movement and whatever else helps me help you understand what it was like to be there. Some of that philosophy got written about in my Beyond ‘Vacation Snaps’ piece recently, and that will help explain the direction I hope to travel, with this site as base camp. 

Menu Design

The menu on the front page is different than the menus on the rest of the site. (why? soon. soon…). That decision created some interesting challenges because the theme I use, Photocrati, doesn’t lend itself to that kind of customization too easily. I ended up going in and creating a custom page type by hacking a few files in the them, one that fully supports the infrastructure of the theme but none of the content. That allowed me a blank canvas, but one that could use all of the support tools of WordPress and the theme, including the site-wide CSS so that the front page would fit in with whatever design choices went into the site (like background color for pages) without requiring the front page to be hard coded for everything. It’s actually a neat hack and one I hope Photocrati adopts in a future release, and yes, I’ll go into detail on it as I get deeper into this new site.

Google ChromeScreenSnapz001

The menus are single level and simple by design. The visitor to the front page is likely brand new to the site. Too many choices intimidates and confuses and leads to site abandonment. I wanted to tear down the front page navigation to the bare essentials, and I think this is it: pictures, blog, writing, me, contacting me, and image licensing. Don’t confuse a new person with a zillion options, keep it simple and help them find what they came here for. 

PreviewScreenSnapz001

On the right side of the menu are contact points. Making it easy for someone to connect to you is increasingly crucial — you want them to be able to find you where it’s convenient for them. But not, as I noted in the article on why I hate your web site, beating them over the head and holding them hostage until they agree to stay connected. My philosophy is to make them want to come back with good content and a friendly site, and then make it easy for them to via easy to find and use contact points. Again, though, not too many — the secondary contact points are available, but off on the Contact page. Six months ago maybe the “Subscribe via RSS” would be enough, but with the pending death of Google Reader, I won’t assume that people who used to use that service will just move to another RSS reader — so I think it’s important they know how to create that contact point on the service THEY plan on using. Therefore, your twitter, your Facebook, your G+ all need to be on page one and above the fold. Don’t hide. That’s as bad as holding them hostage until they sign up. 

This is another reason I wanted the front page menus to be unique to the site; there’s zero reason this much screen space needs to be taken up on every page on the site. That’d be a waste and it’d add to site clutter. But here? 

Don’t hide. 

The Pictures

And the pictures. Front and center, literally. What you should see. On the old site, I tried to make the front page serve two masters, the images and the blog/writing, and it failed at both. So the front page now is all about images. The front page of the blog is where the writing serves as lord and master (and we’ll talk more about that soon). Each is dominant in its domain, and so we remove that conflict and the clutter it created. 

Google ChromeScreenSnapz001

And deciding how to present the images is a story in itself, but not today. But I spent a long time trying to decide how I wanted this to look. It’s fairly unusual in that I’m not using a carousel/slider and instead it’s a gridded display. That’s actually the point, not being like everyone else, but only if it works. I think it does. Being about version 15 of the new!improved! home page, I have to say I really like it. (And yes, if you select an image, it’ll bring up a slideshow).

By the way, this site, for all my testing, works great on an iPad or other tablet. And should look pretty good on an iPhone or mobile device. That’s increasingly crucial if you want people to see your stuff. And all it takes is some care and thoughtful adoption of the right tools. The last version of the site? It, um, didn’t really take mobile devices into consideration, even though I’d recently spent three years of my life trying to build them. It was on the list, as soon as I had the time… Sound familiar?

The Footer  

Google ChromeScreenSnapz003

 The old site footer was a disaster. Used up huge amounts of space on the screen, and had way too many things because it was trying to serve many masters with a single layout. I ended up removing everything but the copyright notice, which goes on every page of the site. Everything else found homes elsewhere where it was appropriate — or went away. 

Onward

So the new site is finally settling in. I still have work to do on some pieces, but the “figure out what needs to be done” phase is done, and the “fix all of the back end tools and infrastructure” is as well (I think. I hope). And now I’m winding down on the “fix all of the stuff that’s already there” phase, which means I can get back to what I want to do, which is create new images and write new words, rather than fix the old broken words and maintain the technology that spits them out onto your screen when you ask for them. 

Or at least, that’s the plan… 

And if I’ve done this right, I won’t feel like I have to do major surgery again for a couple of years. At least. Time (and your feedback) will tell. I am curious what you think, what you like, what you think I got right — and what you hate and think I got wrong. 

Hoping that’s a short list, actually… 

 

Posted in Working on Web Sites