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).
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.
When 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.
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):
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).
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.
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:
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.)
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):
- Melissa Connors
- Michael Swart
- Derik Hammer
- Andy Kelly
- Andy Mallon
- Rob Farley
- Nick Harshbarger
- Monica Rathbun
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.
Aaron (@AaronBertrand) is a Data Platform MVP with industry experience dating back to Classic ASP and SQL Server 6.5. He is editor-in-chief of the performance-related blog, SQLPerformance.com. Aaron's blog focuses on T-SQL bad habits and best practices, as well as coverage of updates and new features in Plan Explorer, SentryOne, and SQL Server.