After nearly a year with the previous web design, it was time to refresh our website with a new look.

Still built on top of WordPress, our favorite content management platform, this new web design contains a some new features, such as a brand new custom photography portfolio display for our McAllen Photography pages.  What started out as an experiment with Galleria (a Javascript image gallery written in jQuery) and NextGEN Gallery (a WordPress photography gallery plugin) turned into a very easy to manage, and cool-looking (non-Flash based), photography portfolio.  The best part is that it is all controlled through the WordPress administration.  It could probably use some additional tweaking to be a truly great feature, but it does a good job right now.  You can see an example running on our McAllen Wedding Photography portfolio page.

It’s always a welcome challenge in web design to find the perfect balance between function and form.  Over the 12+ years that I’ve been developing websites I’ve found that I really love to make a website as simple as possible for the end user, while retaining powerful features and functions for a site administrator.  That’s one of the primary reasons I love WordPress so much.  It’s very balanced in terms of it’s power and simplicity.

I hope you find this website visually appealing and intuitive to use.  Please feel free to comment on anything you see here!  And as always, think of A Divine Studio for your Pharr, Edinburg, Mission and McAllen web design, development and creative needs.

First off, as of this writing, the website is not launched yet.  It is scheduled to go live on February 16th.

Websites with a lot of content need to be optimized to perform well.  This website for the City of Pharr is certainly not a huge site, but it’s got a couple hundred pages with a fair amount of content.  More importantly, it has a fairly large hierarchy of pages that has created the need for an intuitive navigation system.

The current (or old) site used a vertical navigation with practically unlimited levels of sub-pages.  Some of these were over five levels deep!  I don’t know about you, but those pop-out navigation menus with so many levels annoy me tremendously.  By the time you get down to the third or fourth level, if your mouse moves off of the menu for a moment the menu disappears and you are forced to start over again.  Yuk!

This large menu issue was resolved through the use of large horizontal drop down menus, driven by jQuery and CSS, and a little hoverIntent goodness to give the user a better experience by delaying the mouseout event long enough for the pointer to leave the menu and come back within a few milliseconds without closing.

Functionally, it is great and looks beautiful.  However, I encountered a problem with performance and load times due to the number of queries needed to retrieve the different page lists.  Originally, I used the standard wp_list_page() function, passing in a child_of parameter based on the pages I wanted.  The largest menu was for the City’s departments and used eight function calls to wp_list_pages().  In conjunction with the other menu items, this turned out to be unacceptably slow.  Every page would load sluggishly and (in Firefox) I could see the navigation menu bar rendering slowly with each page load.

So I removed all of the calls to wp_list_pages() and opted for a temporary hard-coded navigation menu.  What a difference!  Now what I plan to do is build a custom function that will generate the navigation structure that I want without using wp_list_pages().  This way I can have fine-grain control over the query and pull out all the pages I need with a single function call.

I’m not into writing tutorials, so if you are interested in the code, feel free to check out pharr-tx.gov (after Feb. 16th) to see how the menu system works.  If you are interested in the WordPress/PHP side, just shoot me an email.

Cheers!