Grey Matters' New Design!

Published on Sunday, January 02, 2011 in , ,

Happy New Year 2011!Here's the surprise I promised in my previous post - a completely new 2011 design for Grey Matters! This new design has been created largely to work with the growing number of touch-based mobile devices used to access the web.

If you're reading this on the main page, come on into the main post, and I'll detail the new features for you! How? Just click or touch anywhere within the grey box surrounding this post, and you'll be taken to the full post.

Oh, good! You made it inside! I'll start with the new features of posts themselves, and work my way outward.


First, on the main page, you can click on the post anywhere in its summary box to be taken to the main post. In the former design, you had to click exactly on the post title. If you're on a mobile device, especially one with a small screen, you'll quickly appreciate this larger target.

Also, since not all mobile devices play Flash videos or animations, the videos will display on those devices as an HTML5 video when possible. In cases where an HTML5 video isn't possible to play, a link will be displayed where the content can be seen on such devices.

For example, below is a YouTube playlist about several US states. Even though individual YouTube videos can be displayed on devices without Flash, they haven't developed the same capability for embedded playlists. If you're watching this on a device without Flash, you'll see a link to the video playlist, instead of the embedded playlist.

Among a few minor touches in the posts, the bubble up top with a number in it displays how many comments there are for the associate post. Also, the date and post labels are now displayed directly underneath the title. The post date and labels are also repeated at the bottom of the page.

Look down below, though, and you'll see plenty of major additions!

If you like an article, I've made it easier to share on your favorite social networks with just one click, in the new SPREAD THE LOVE, SHARE OUR ARTICLE section.

The new RELATED POSTS section allows you to see the top 5 most recent posts with similar tags. The more tags a given post has in common with the post you're currently reading, the higher it will rank among the related posts.

The comments and the ads follow the posts.


The sidebar now features a site search. Simply type in your desired search term, and you'll taken to the new search page which now searches every page of this site.

Below the store ad, you'll also find the full blog archive by month, and a complete listing of all the labels below that. Both the archive and the label links work just like the posts, in that you don't have to hit the text exactly, just anywhere in the same general area as the label or month you're trying to access will take you to the appropriate section!

Top Section

At the very top, immediately to the right of the new smaller logo, you'll see links to the various static pages of the site, including About, Contact, Downloads, Social (feeds and social links), and Memory Tools. These are great sections to explore, because there are lots of links and other free goodies there just waiting to be discovered!

The featured post slider on the main page has been enlarged, and made easier to use. Instead of numbers, the tabs now have meaningful names, and the start/stop button over at the right side allow you to pause or resume the slideshow as you wish.

Blog Areas

All your favorite areas of Grey Matters are still displayed at the top, but there are two changes. First, the areas at the top are no longer drop-down menus, but direct links to the main pages of each section.

The other change is even bigger, however - the other sections have all been turned into Blogger blogs! Each blog section is also color coded. The Mental Gym is highlighted in green, Presentation in red, Videos in pink, and the new Mobile section in white.

Much of the redesign effort was spent on improving the function and looks of these sections. For example, the original version of the Planarity game required Flash to play, but the new Planarity can be played on any mobile device!

Take a look at this tab in the new 400 Digits of Pi tutorial, and you'll note that the look and function of the tabs and the tables have been greatly improved!

That's a look at all the major new features. There are plenty of other minor improvements, but I won't rob you of the joy of discovery.

As with any new design, this is also a work in progress. If you have any suggestions or criticisms, contact me or let me know in the comments!

Spread The Love, Share Our Article

Related Posts

Post Details

1 Response to Grey Matters' New Design!

Dave R
7:06 PM

Thanks for constantly working on the site to make it better! Keep up the good work! This is still one of my favorite sites!