Possibly doing a site redesign in the near future. Probably will get rid of all the ads and look something like this: http://t.co/4dnMNJ1V
— SixPrizes (@SixPrizes) October 11, 2012
I don’t normally like to give news updates like this, as I like to keep the site as content dense as possible, but welcome to SixPrizes version 3.0.
I had mentioned on Facebook several months ago that I might do a site redesign sometime this coming winter (as I get bored when it’s too cold to play outside). Well, come early October I was already feeling the effects of cabin fever and needed some way to channel my energy.
First I recoded/redesigned my personal site with a new and more professional WordPress framework (Genesis, if anyone is interested), which went smoother than anticipated, so I then decided I might as well have a go at redoing this site and its massive inner-workings.
I began recoding the old design right around Regionals earlier this month (as documented by the above tweet). It took me about a week to churn all the existing PHP code into something a little prettier (I barely knew how to code HTML when I started SixPrizes, and any PHP I was able to string together was pretty lame).
With the foundation of the site solidified, I really had nothing better to do than go ahead with the redesign, which I sort of (really) dreaded. I am more of a left-brain person, so doing artistic right-brain activities can be draining on me.
I forged ahead though, and started off creating a prototype of the new header:
Started working on the site redesign today. Here's a preview of the new header. pic.twitter.com/fJxzUfyi
— SixPrizes (@SixPrizes) October 22, 2012
Obviously I decided to ditch the black background, but I felt good about the direction I was heading with the aesthetics and I rolled with that momentum the past 9 days. A key point was when I stumbled upon a front page design I felt really good about:
I've made some progress on the site redesign the past couple days. Here's where I'm at right now with the front page. pic.twitter.com/aOrNWlhg
— SixPrizes (@SixPrizes) October 27, 2012
A few more days of cranking out code, one last-minute typeface audible, and voilà. You’re looking at the finished product.
Some things to note…
No Ads
Believe it or not, I hate advertising and really do wish I never had to use Google ads on this site. But it was a necessary tool for SixPrizes to survive and allow me to put time into it.
I may put an ad in the footer at some point if I need to hit the payment threshold to receive any dough Google is holding from me, but I’m really hoping we can make this work without third party advertisements. I’m going to take an immediate hit though.
(You should check out AdBlock for Chrome, by the way. I started using it a few weeks ago and it’s awesome.)
Smart Phone and Tablet Friendly
I used to have a plugin which generated a “mobile” theme, but it didn’t look anything like the regular site and didn’t have as much functionality (I’m pretty sure you couldn’t rate posts with it). It probably loaded slow too. I wouldn’t really know though since my phone is from 2007.
(Gino Lombardi couldn’t believe I run a website and have a phone which can’t even take a picture.)
Anyway, I’ve ditched that approach and instead the site now has a “responsive design.” I doubt it’s perfect at the moment, but it should be usable. If you’re on a desktop or laptop computer reading this, try resizing your browser to a narrower width and you’ll see that the site is fluid and adjusts depending on how much space is allowed.
Store
You should see a “Store” link in the navigation menu. My plan is to sell a few 6P branded items and hopefully make up some of the lost ad revenue. A lot of suggestions were made on the forums, but I’m 99% going to start off with dice.
The 6-side of the die will have the 6P logo. Cute, right?
I’m aiming to have those ready by the holiday season. New t-shirts might come later.
Let Me Know What You Think!
And finally, let me know what you think! I’m expecting a bug or two to be found as you guys and gals start playing around with this new design, so please let me know if you come across anything that seems weird. Assume I have no idea anything is amiss.
Also if you have any ideas on how to make it even better, let me know too! The next few days I’ll probably be tidying things up and want to make the site as great as possible. My goal is for it to continue to be a really cool place to submit, read, and discuss Pokémon TCG articles.
One thing in particular I had trouble with was figuring out good margins, line-height, and content width for posts, so if you’re a typography guru, let me know if you have any suggestions to improve readability.
6P of the Past
To conclude, here’s what SixPrizes looked like in 2009 (version 1.0):
Here’s a screencap from 2011 (version 2.0):
And today is Halloween 2012. Boo.
Very nice Adam.
Thanks!
I dig it, Adam! Very slick.
Thanks Frank!!
Holy crap this is really cool.
I couldn’t put it any better myself. Hah.
Wow, this is cool. Sent you a message about a scrolling glitch on my iPod touch.
So slick!
Thanks Josh!
Anyone know how to change your Discus name?
Looks pretty cool. Props for getting rid of the ads!
Thanks coolestman!
Looks good I can’t wait till the dice/dice bags are availble
Dice should be ready December-ish!
Looks great on my ipod touch, don’t even have to scroll left and right, that can be a problem though…
Thank you for this great site Adam. I love reading all of the articles from everyone here on 6P! I find reading articles about cards/decks/strategy a lot more informative than just looking at deck lists online, and the articles often spark different ideas in my head just by suggesting something else.
Anytime that a site can get away from advertising, it is a huge plus!
Thanks for continuing to try to improve you great site! Your efforts will keep 6P growing!
Phil
Thanks Phil! I really appreciate the kind words.
I love the random articles at the bottom
Thanks! I thought it might be neat to include that since there are a LOT of articles on the site now and seeing some old ones would be cool.
I’m not a graphic designer, but it feels like the new icon clashes a bit with the new layout (it being “low-res” while the rest of the site is very polished), and I’d consider reskinning the scroll bar on the Recent Discussion box. Other than that, really great work!
I may have the logo smoothed out at some point. I’m turrible at graphic design and pixels are the best I could do without it looking amateurish.
And thanks for the tips about reskinning the scroll bar! I’m going to write that down.
Love the new design. I found the old one to be pretty cluttered to be honest but this is beautiful. Didn’t expect it to be responsive! Going to be great for when I get to an event early and need to kill some time on my phone. Congratulations!
I think some of the issues people are having comes from having all three columns be of similar width. If the left and right columns were slightly thinner (maybe make those thumbnails smaller too), more focus would be on the article column helping the eye focus on the most important content faster.
For underground, I didn’t like the old black bar due to how many bars were in the layout. Something a bit more distinct than now, but more subtle than the bar would be best. Quick example using this article as an underground one: http://i.imgur.com/pG9SY.png
Nice
Another idea would be to lower the left and right columns slightly, to emphasize the centre column. At the moment, it reads like a paragraph so you look indiscriminately from left to right. But if the centre column appeared higher than the side columns, your attention would be focused to the centre first and then the sides.
Thanks! That’s one of the nicest comments I’ve gotten.
I’ll experiment with the column widths/thumbnail sizes at some point, thanks for the tip!
And here’s what I drew up yesterday for the UG tab which is pretty similar to what you came up with! (Great minds this alike, right?)
https://sixprizes.com/forums/attachments/2012-11-01_2054-png.384/
I’ll probably add it in a week or two, but am experimenting right now to see if it makes a difference in article pageviews without it.
I like the formatting! However, I prefer Underground to go before the title. That way the eye hits the thumbnail, then underground, then header, then lead-in text. If you put it at the end, then the eye hits the thumbnail, moves to the Underground box as it’s the next most noticeable element, then has to jump back to header, and then the lead-in.
Also I think it’s prettier ;D
True, good point. I’ll probably add it before then!
I know that with any website design change, I’ll get used to it within a week or two. I didn’t see ads being a bad thing (I’m very much in support of websites using ads to help keep things afloat).
One comment I would add is that I rather appreciated the decklists being “boxed in” with distinction of each column being made with a vertical line, and the whole list being surrounded. The current decklist background feels like it lacks definition.
Yeah… essentially I rather like borders to define the edges of each section. And I might agree that I appreciated the Underground Exclusives being in a black tab. I think UG articles need a way of being highlighted on the front page.
I know what you mean about the deck lists, I noticed that at first too. My idea was to try and make it seem like a handwritten list on a piece of paper. We’ll try it out for a couple weeks and if I don’t like it, I’ll add columns.
And the UG tab might come back later. Right now I’m experimenting to see if it makes a difference in pageviews and which articles people gravitate towards.
I’d be interested as well. I have to assume without an up-front way for the eye to distinguish UG articles from regular articles, that views will be evenly dispersed. Which actually may be what you’re after? I know UG articles often got less views than FP articles. And I’d imagine you’re looking to get more people reading the previews of UG articles so as to entice them. So if that’s the logic, I’d support the UG articles not being obviously defined.
I think it was the other way around actually, UG articles got more views on average.
From a business standpoint, yeah it’s probably better to make Underground articles more noticeable. I do want all articles to get spotlight though because everyone puts time into them and should get views. I’ll keep it this way for a week then add the UG tag back and see what happens.
Looking back through the past few articles, yeah certain UG articles definitely hit higher total views. And you don’t see any sitting at only 2000 or less. But I’d say the median is probably similar between UG and FP from the old site design. Interested to see!
You can see my Shuppet article in the screenshot of 6P 2.0!
Anyway, fantastic job Adam!
Hah, I’m glad you noticed that! I had 2 screenshots saved and went with that one because Shuppet is cool.
Really loving the new design. The new logo has the pixelated charm to it.
Everything is so neatly organized and simple.
And I like how easy it is to see when Articles are being released at the top.
Good job! A great improvement to the last design!
Thanks Nintendan, I’m glad you like it! I may smooth out the logo at some point, but I have like 0 graphic design skills, so pixels are the peak of my abilities. haha
Don’t mean to keep jumping on stuff, but I just really love SixPrizes and want to help if I can. :X
I can make you a vector logo of the current pixelated version and a smoothed out version if you want. This could help you out for future merchandise endeavors too, as having high res artwork will get you the best quality printed product!
That would be incredible! Only if it’s something that’ll be pretty easy for you to do, then I’d really appreciate it. :)
You’ll need to explain to me how the vectors work… mail me adam@sixprizes.com whenever you have anything ready!
will love the dice and do love no ads…but I don’t like 3.0 at all(a.k.a. 20 was boss!)
Dice should be ready by December if all goes according to plan. (I actually don’t have a plan yet, but now I have to keep my word…)
I liked version 2.0, at least the layout and separation for the articles. They now seem to be mashed together too much..
I liked version 2.0, at least the layout and separation for the articles. They now seem to be mashed together too much.
I’m experimenting with more whitespace with this design as I’ve seen white used effectively on other websites. Hopefully you get used to the change (or I make an adjustment) and thanks for the honest feedback!
I know that with anything that gets updated it takes a little getting used to. I do like the new logo and the idea of where you’re going with the new sleek look, however, I do miss the shadowboxes behind all of the images on page one… as well as the big black underground tab above the underground articles that were posted!
good job though!
Thanks for the feedback Andrew! I might add the Underground tab back – right now I’m monitoring pageviews to see if there is any difference between having it and not.
The new design is too messy for my taste. Prefer 2.0. Like the logo though.
After strolling on 6Ps on my iPad I’ve realized the new changes aren’t that bad really. Good job! :D
Haha, I’m glad the change of opinion. Thanks!
This post makes me all excited, as I’m a graphic designer and WordPress developer by trade. :)
I enjoyed you working through the process with us on Facebook and Twitter. I like see progress things like that! I think the end result came out super slick. I am sooooo happy to see the mobile version of the site gone. It was irritatingly buggy (sometimes it wouldn’t redirect to the mobile site, sometimes you could click things, forget about even try to click the a menu item–it would bring you to the Google ad that was below it). This design responds great. :)
I think some slightly contrast between the columns would help (giving the sidebars a light gray background might help them pop from the main list of posts), but that’s a personal thing… It looks kinda “Pinteresty” right now, and I personally have a hard time figuring out where I should be focusing on a layout like that.
Again, it looks great, and this a definite improvement!
Oh sweet! You’re exactly the type of person I was hoping to hear feedback from.
Yeah I’m really stoked to get rid of the old mobile version. The plugin I used (WP Touch) was pretty buggy. I don’t know if it was the plugin’s fault or something I did, but regardless it wasn’t ideal.
I was very much intimidated by having to learn responsive design, but it’s a lot easier than I expected. You just resize stuff with CSS at different widths basically. Simple!
I’ll experiment with giving the sidebars a light gray background this weekend – thanks for the tip!
(And I’ll have to check out Pinterest… I SWEAR I’ve only briefly visited it, but maybe I did subconsciously copy it!)
I think it’s safe to blame it on the plugin. It’s great that WordPress has such a wide array of plugins at your disposal, but you can’t always trust the programmer behind it. ;P
I’ve just recently started to jump into responsive design, now that I actually have projects that allow me to do it. I’ve been learning myself some SASS and using the Susy framework to have Compass do all my math for me. I’m the opposite of you–I’m more right brained than left. Haha. Math is hhaarrrdddd.
And awesome! I like Firestorm’s suggestion as well–just maybe playing with the percentages of the columns to give the middle column more emphasis would be great. His underground tag idea is good too–or you can simply conditionalize a class onto the underground posts to have a different background color or a nifty underground watermark (ooo i like that idea).
I gotta look into that CSS management stuff at some point. I’ve heard of LESS and Bootstrap and I’m guessing they’re similar to SASS, Susy, and Compass.
I’ll try to play around with some ideas this weekend (or at some point… I might need a break from staring at this site for a few days). I want to try dimming stuff like this if it’s been viewed already: https://sixprizes.com/forums/attachments/2012-11-02_2140-png.385/
But apparently there are vulnerabilities with the a:visited class and all you can really do is change link colors. I have a workaround in mind which would work for logged in users (save which posts they’ve viewed then apply a class if they’ve seen it), but gotta decide if it’s worth the effort/extra CPU resources.
looks good! :D
Thanks!
Version 1.0 made me feel all nostalgic.
The new design is very clean and clear though.
Version 1.0 made me shudder. I was so bad at design back then!
Love it!
Thanks!!
This is a-MAZING. :D
Thanks Dane! I’m glad you like it.
The design is clean but I think is slightly too sterile looking. As of now I feel like the last design was a tad stronger.
The biggest thing i think needs to be addressed is how at a glance it’s hard to visually distinguish underground articles from the regular ones. Maybe just bold out the UNDERGROUND text next to the article a bit, or maybe put it in a banner/text box type of thing like in the old design.
I think that’s a pretty good assessment! That’s sort of what I’m going for with this design; more subdued.
As far as the Underground articles blending in, that is intentional. I’m kind of curious if:
A. People who aren’t UG members avoid reading UG articles, and conversely if UG members avoid non-UG articles.
or
B. Everyone looks for UG articles because they are least have a free preview.
So I’m going to monitor pageviews and see if I notice any difference from before. I want to make all articles more or less on the same playing field, so to say.
I do have an easy fix to make Underground articles stand out a little more which I’ve attached.
Thanks for all the comments everyone! I’ll respond to you all individually when I have a chance, but just a heads up I installed something that delays the loading of images until you scroll down.
I know some articles are long and have a lot of pictures, so I’m hoping this speeds up page load times for some people (mainly those on mobile devices).
Just LOVE the new design!
Thanks Eduardo!
I’m liking it, but it looks a bit… full. The colors all seem really similar because it’s white and light grey, and I think maybe a little bit of 6P blue would go nicely for contrast and separation.
Thanks for the feedback! Yeah I’ll admit it’s a little dry. I’ll play around with different colors at some point and see if I can improve contrast.
Looks good! so slick, And modern. Love the paper background. I like the new features too! @adamcapriola:disqus Found the tagger system, NICE!
Took me a while to figure out how to submit an article without the “submit” button but i figured it out :D
But yeah man, it looks cool. AND it works a LOT better on my ipad than the old one!
Hah, yeah I sort of camouflaged the link. Glad you figured it out!
And I’m glad it looks better on your ipad! That’s one key thing I was trying to fix since I know lots of people have them and more will probably be getting the mini in December.