SQLPerformance.com - same great content, new skin! - SentryOne Team Blog

SQLPerformance.com – same great content, new skin!

If you have been to SQLPerformance.com in the past few days, you might have noticed some changes. These were the culmination of a lengthy project, started late last year. The goals of the redesign were to:

  • get more posts on the front page, "above the fold"
  • give mobile users a better experience
  • offer our authors more exposure
  • provide better visibility into who sponsors and manages the site
  • align better with updated corporate branding
  • move to a less convoluted theme
More posts above the fold

This goal inspired a fresh take on navigation, which was mostly well received during beta testing. It was a bit of a shock to some – not unusable, just not like most blog sites out there. Which was kind of the point. The home page, archives, posts by author or category, and results of a search, are all presented with 11 "tiles" plus an ad, for a total of 12 tiles per page. The tiles are organized chronologically, left to right and then top to bottom, except for search results (which are ordered by relevance, according to WordPress).

The display uses flex, so the tiles will collapse to your browser width. The number 12 was not easy to arrive at, but it supported the widest range of even distribution depending on how many tiles your browser width could support (2, 3, 4, or 6 – meaning if you have a width that supports 5 tiles across, you'll have empty space at bottom right).

SQLPerformance.com front page

In addition to getting more post stubs on screen, another goal was sheer cleanliness. When you're trying to find an article – whether based on a time frame, an author, a category, or a search. This is why author and category pages were moved out of the sidebar and into the top navigation bar – they don't get in your way until you are looking for them.

Mobile experience

Mobile themeWhen viewing the old version of the site on a phone or tablet, you would just get a scaled down version of the desktop site. Everything was smaller, and reading required zooming in and scrolling around, often both vertically and horizontally.

The new mobile site uses WPtouch, which is very simple to implement and essentially acts as a different WordPress theme. The front page is an easier-to-use listing, a lot of the CSS trickery and visuals are completely ignored, and even the archive, author, and category pages are just simple bulleted lists. I hope this makes it easier for folks who just want to skim articles when they're not at their desk, without the desktop experience interfering.

Author exposure

Featured author in sidebar

The list of Authors is presented randomly, so that the same person isn't constantly presented at the top of the list just because they are alphabetically first, write the most, or any other arbitrary but relatively fixed choice. This caused a lot of strife during beta testing – even more than the mixed reaction to the front page. But the purpose, as mentioned above, was to give all authors equal visibility. We highlight our most popular authors (in terms of article visits) in a slightly different way; there is a rotating "featured author" sidebar panel. See an example at right.

Also, it's a small thing, but we've added thumbnail pictures next to the headline of any article, to give better association with the author (when the author isn't part of a group):

Article headline

Finally, while this has nothing to do with the design, I have expanded my efforts to bring on content from guest authors; primarily at this time they are coming from members of our Product Advisory Council (PAC).

Sponsor visibility

Well, the whole site is funded by SentryOne. For the amount of top technical content we provide, I think it's reasonable to expect a little bit of advertising for our company and products. We try to avoid being too intrusive with product ads, so you'll see one mixed into the top row of any results page (home, archives, author results, etc), and you'll see one at the top right of any full article or static page.

We also have company logos top right and bottom left, a banner at bottom right, and maintain a link to one of our esteemed partners who provide a good chunk of our content, SQLskills.

Other notes

We did a number of things to try to make the site more usable, too.

Take the Monthly Archives, for example. You can click on any year to go to all of the posts for that year, or you can narrow down to a specific month by clicking on that month's calendar icon:

Monthly archives

The sidebar for any page or article contains the ad and featured author, as mentioned, and in between these is a third panel that provides useful links to other free content, such as our newsletters and our eBooks. This sidebar tries very hard to not be too intrusive – content flows around it, so it doesn't eat up horizontal space throughout the entire article, and the entire sidebar actually disappears if your browser window is skinny enough.

I still have some nagging display issues to deal with in a few isolated posts; I'll get to the remainder of those this week. (If you spot anything out of place, please contact us; see below.)

Kudos

I do want to thank several people who were extremely helpful throughout this project. Some helped out at the very beginning, some at the 11th hour, and some all the way through. In no particular order, and admittedly not 100% exhaustive (especially internally):

(Humble apologies if I left anyone out. That was a lot of e-mail and Slack conversation to go back through :-)
Input

We are always interested in hearing your ideas for topic coverage, issues you have with layout and design, and anything in between; please e-mail Community@SentryOne.com.

Comments ( 0 )

    Leave A Comment

    Your email address will not be published.