The New SpyParty Homepage and Trailer

Ye Olde

Ye Olde

That long image there to the left is a picture of the current spyparty.com homepage as I write this. As you read this, there will be a new fancy doesn’t-look-like-a-default-WordPress-install homepage. Welcome to the 21st century, spyparty.com!

Plus, to go along with the new homepage design, we made the first SpyParty trailer! More on that below.

The development blog is staying the same old design for a while,1 but I wanted people who came to the site looking for information about or to play SpyParty to be able to find it easily, which was not the case with the old homepage.

So, I went with a design like most indie game websites, with the name, a trailer, a short description, some screenshots, and a “buy button”, all near the top of the page. Of course, since I am…well, let’s just say I’m never at a loss for words…you can keep scrolling and get more information about the game.  I wanted to highlight all the various ways to follow the game and get more info, talk about how cool the community is, call out some of the great quotes from the press, acknowledge that I have no idea when the game will be done but that I will keep making it cooler, and finally talk about John and Keith a bit. Oh, and proudly display the game’s laurels, as required by Indie Game Law.

I wanted to show some of the new art on the page, but also mix in the old art since it’s the art you actually play right now.

Also, there’s finally a link to the beta site login for existing players to find the forums or re-download the game, which has been requested a million times here and elsewhere, except I probably hid the link too well so no one will actually see it. I also think I might make the blog link a little more obvious. I’ve got a way to put a headline near the top of the page for important news, but I also might make a section for the latest headlines from the blog, and maybe even a list of live streams currently playing, kind of like the streams page.

One important goal of the website was to make it fully responsive,2 since apparently these mobile telephones and tablets are a thing now.  I got a bunch of help from the totally awesome Chris Remo with how to implement my design in HTML and CSS and make it use CSS media queries to work on small-ish devices.  You can resize your desktop browser window to see all the dynamic stuff happening as the width shrinks, I’m pretty happy with how it came out.

One thing I’m not happy with is how it appears to be basically impossible to write a javascript lightbox that doesn’t suck.  If you click a screenshot on the homepage (or most places on the blog), the lightbox will pop up.  I’ve used a heavily modified version of Lokesh Dhakar‘s lightbox script for a while, and given my effort to make the page work well on phones, I tried to update the lightbox to do touch interactions seamlessly. Well, as far as I can tell, it is basically impossible to implement a lightbox that does not allow the user to scroll the lightbox off the screen, allows native pinch zoom in the browser (not emulated crappily by javascript), and allows swipe to change images when at the edge or one finger scroll if zoomed in, and is cross browser and degrades gracefully.  Basically, I want a lightbox that acts like a native photo gallery app, but it does not appear to be possible.  I decided native pinch zoom was the most important feature because I’m always frustrated when a mobile site disables it when there are images on the page, so I prioritized that and ended up allowing the lightbox to scroll off the view, which is bad, but was the least worst of all the tradeoffs I found.

The Trailer

As part of this homepage redesign, we finally made a trailer for the game!  Keith did a great job with it. We’ve had trailers for specific features before, like the New Art Trailer, and the Replays Trailer, but never for the game as a whole.  Here it is:

YouTube Preview Image

I wanted this trailer to give the flavor of the game, but not explain too much. It should have a bit of a narrative arc and tell a light story, but nothing too distracting. In the end, I think it might be a bit confusing for complete strangers to SpyParty, but I hope people can figure it out from the video and the short description, and hopefully the trailer makes people who are just hearing about the game want to learn more.  I also worry that the trailer implies there’s a fixed character who’s the Spy, but it wasn’t clear how to correct that without a lot of exposition that would have messed up the flow.

You’ll notice this trailer is almost completely the old art and is completely in-game footage. This is intentional, because the last thing I want is somebody watching some super polished pre-rendered trailer and then loading the game and feeling misled. Of course, this means the Spy pours a drink down her face in one shot because the runtime code for taking sips from a drink isn’t aligned with the mouth properly in the old art. Oops.

The one place where we diverged from the game was having music in the trailer. The music was a relatively late addition; we were originally going only have the crowd walla, but in the end it felt necessary and I think it really helps tie the whole thing together.

We’ll be making new trailers every so often now that there’s a good place for them right there on the shiny new homepage, so as the new art comes in expect the new trailers to reflect that. I’m also thinking about inviting fans to make trailers to see what people come up with; I really liked it when Minecraft showed fan-made trailers on their homepage.

Also, here’s to the little details:

twitter-thumbnail

Bugs and Comments

Please post comments below if you have trouble with the new page on your preferred internet viewing device. It’s impossible to test all the different ways to browse the web, so I’m hoping my limited stochastic sampling found most of the big stuff, but I’m sure I missed some things. If you want to report a bug on the page, mention your browser and device and what you saw when things went wrong.

Thanks!


  1. mostly due to priorities and time constraints, not any particular love of the old design []
  2. which, the last time I made a web page, was called liquid, and also get off my lawn []

12 Comments

  1. James1221 says:

    Looks beautiful! Works perfectly on both my laptop and phone.

  2. Robert Walker says:

    I think it looks really nice! The only thing I would change is to add some explicit navigation for the most important links (Login, Dev Blog, FAQ) along with links to the social media sites. Right now, I have to scrub through the text to find them.

  3. Beepbep says:

    The “subscribe” text field does not resize.

    div.newsletter_signup div.row span.input input {
        width: 100%;
        padding: none;
    }

    • Beepbep says:

      Also, I should note that I use the zoom and font-size change features in chrome, which does various small things to mess up the flow. Most notably the font-size I use is set to “large” (I use a TV most of the time) and that affects the subtext in the header.

    • checker says:

      Hmm, could you mail me a screenshot to support at spyparty.com?  Or tell me how to repro in chrome?

  4. Varanas says:

    My one complaint would be that it’s a bit harder to get to the blog now. Take this page for instance, how do you get back to the list of articles without putting in the address yourself? The same goes for the beta forums, that big logo heads to the new page, which as someone who already owns the game isn’t really somewhere I want to go.

    Oh, and apparently scrolling through the lightboxes by swiping my macbook trackpad is way too sensitive. 

    Really nice work with the liquidness though. I also like how against that background even the old art look nice. And up to date screenshots of the old art! You should put them in http://www.spyparty.com/images/ . I noticed you felt it relevant to mention Cimino’s in-game name, does that mean he’s actually going to play the game or post in the forums at some point?

    Sorry about disappearing on the email front by the way, hope that didn’t inconvenience you.

    • checker says:

      Yeah, I’m going to put a BLOG link above, and probably have some kind of header thing with links on the main page soon.  

      Sadly, I doubt Cimino will be playing online more.  It could happen, but if you want to play him, you’ll probably have to go to a tradeshow like PAX or Evo where he’s on booth duty.  :)

  5. nine says:

    You want nitpicks? The background image:
    http://cdn.spyparty.com/wp-content/themes/spyparty/images/banker-bea.png

    Is over half a meg! Resaving as a high-quality jpeg would let you at least halve that number and significantly speed up loading.

    • checker says:

      Yeah, it had to be a png because of transparency (it’s not the only background, the swirls are the other background).  Also, it had to be one big image because we couldn’t figure out how to have them on either side with two smaller ones.  If you can figure that out in a cross-browser way it would help!

    • nine says:

      From what I can tell, the bottom layer is always present and the top layer is hidden by a CSS media query for small screens, right? Since the two layers don’t move relative to each other, you can bake banker-bea into verticalbackground (creating bg2.jpg) and swap between verticalbackground.jpg & bg2.jpg as your .outercontain background-image using media queries.

    • checker says:

      Actually, I think they both disappear at the same time, which makes it even easier.  I think we thought about baking them together, but I seem to vaguely remember there was a reason we didn’t.  I’ll have to try to remember.

      The other thing with the background (the big one) is that it’s > 5 megapixels, so it doesn’t display on iPad even if the media query works.  But, if I shrink it to just 5mpx then iPad 1 loads it but it’s so slow as to be unusable.  But, there appears to be no way to know if it didn’t get loaded, so I can’t change the background color to approximate it like I do with the media query.  Argh!  I decided it was better to keep it too big to fail on iPad 1 and give up on trying to set the background color in that case.

Leave a Reply


9 × = sixty three