The New SpyParty Homepage and Trailer
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:
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:
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!
Looks beautiful! Works perfectly on both my laptop and phone.
Awesome, that’s what I want to hear! Thanks! :)
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.
Yeah, I just wasn’t sure where to put them. I’ll probably make some kind of bar at the top maybe?
The “subscribe” text field does not resize.
div.newsletter_signup div.row span.input input {
width: 100%;
padding: none;
}
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.
Hmm, could you mail me a screenshot to support at spyparty.com? Or tell me how to repro in chrome?
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.
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. :)
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.
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!
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.
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.
Why can i not buy the game from Pakistan?
Does PayPal not work there? They have weird policies for different countries. I’m eventually going to add Stripe and Amazon Payments, will those help?
Can only use my visa debit card :/
i really want the game ..
need to get two copies of it
If it’s a VISA card, I’d think PayPal would take it? Ugh, sorry about that, hopefully Stripe or Amazon would work? If not, it’ll be on Steam at some point as well.
it’s been long said that it’ll be on steam D:
paypal doesn’t give the option for my country
Sorry about that, that sucks. Do you know if Stripe or Amazon will work?
i do know, they don’t work here.
i wrote the wrong email ID but bought the game, what do i do ?????!!!!
Send mail to support at spyparty dot com and I’ll fix it, no worries.
Just emailed
hey I purchased the game but accidentally entered the wrong email how can I change that or get refund
Hi, send mail to support at spyparty dot com and I’ll get it changed for you, no problem!
where exactly
I mean send an email to the support address. Doing support here in blog comments doesn’t work well, so when you send email to support at spyparty dot com (make the ‘at’ and ‘dot’ into @ and ., just trying to avoid spam bots) then we can fix it!
hey I purchased the game but accidentally entered the wrong email how can I change that or get refund. please help me
hey I purchased the game but accidentally entered the wrong email how can I change that or get refund. please help
Are you posting this multiple times or is the blog freaking out?
I didn’t realize I was posting it many times
But what do I do with my email I need the code to play the game but the email I put it the website was incorrect and I already bought the game
I found your account and fixed the email address, hopefully you got the confirmation code. If not, please send me an email at support at spyparty dot com, because doing customer support here in blog comments doesn’t work very well. :)
I don’t know how is hard to make a game, and live with tax or anything else, but…
I Find your curent price to mutch expensive for a small game that was playable from 3 years ! i’m interested but for the same price you can buy big preview like Ark, Conan exile, BeamNG, etc… I See you are Perfectionist, but when you watch a game like PUBG can be boring faster, or PayDay2 Faster the same party boring… for a so simple concept with only 2 players, i repeat is too expensive for a short game !!! i think you need to target more peoples for a lower price, because it can be easily an addictive game, but only played sometimes ! nothing block you to make a lite version exactly the same for new players, and transform all actual buyed versions to premium gamepass include all contents, and divide the lite version to a limited content version, with a gamepass additionnal price. because to be honnest, i prefer test before buy, but if you make a demo, you make the game ! and, i’m not a hater’s ! i come with a real sugestion, and idea’s ! i have an exelent concept : I look like you have included an action to pick up on shore, it’s can be a terrible hard concept start ! imagine if the sniper mooving too mutch, with a high chance to miss target, he have the choice to fire immediatly or concentrate fire but take 3 seconds ! for the other player (the spy) if the shoot was concentrated, the mooving laser be extrely stable and pointed to head center, is the signal from fire !!! that let’s a choice from spy to make an esquive action, by crouch for exemple ! but, because we need to have gain for both players… the sniper have the hability to concentrate without shooting :) and whoops… the spy crouching and expose himself ! but maybe is just the realy to take anything from ground ! we need to second testing this big coincidence :) maybe real shot this time, or not, but the way to escape faster from map with actives objectives, the time the sniper was terribly trembling after concentrae and have only 5% chance to strike good !!! oh… i miss… if the sniper trembling so mutch… is not for no reasons… is all in one, if he kill wrong target, he lost reputation ! then… is realy hard this times to find good spy’s with exelent reputation too ! the incredible down when bulet arrive is the best way to be jame’s bond, but when you never close an entirely mission with fast escape, because you are not patient or stress hability, make you a bad reputation. who is the best ? this is the hard mode ! and for this lite version of game, pls 11.99$ for 9.99€ was a good price, the perfect way is 5.99€ with any month discounts because we know us friends have the game because is not so expensive, i’mready topay it without discount (for exemple) and because all have it… all know it and want it, and youtube game make more videos on it ! last thing… is not because you reduce price, than you can’t sell more in future ! more people having game, more people way to sell a special VIP new character ! maybe a add on to choose the color of statues replacement to disturb experienced players. with steam, maybe is the way to separate casuals gamers ready to pay for some additive content to resume attraction of gameplay, with a lowest budjet, and complete game more expensive with all in one and update without steam for purist who don’t want to pay anything more when they pay, generalybuying directly from dev web store.
The game’s not for everybody, and that’s okay! :)
what are u create an account?
Hi, if you bought the game here then you created an account when you bought it, and if you bought the game on steam then it automatically creates the account. Apparently some people have been scammed by people selling them just the installer, which is not going to let you play online because you need the account.
Ivatuba, September 30,
Hi, my name is José Victor and I’d like to be doing a translation service for the SpyParty. I saw the proposal of the game and I really liked, it’s a very interesting ideia, and I thought opportune be doing improvements, so it can reach even more people, helping it futher to develop and promote the services, games and even your name.
Since I live in Brazil, and I have Portuguese as my mother tongue, I would like to talk to your company to be doing the translation of your game to Portuguese.
Here in Brazil, even by political issues, we did not learn much in the school period, nor a low level English, and here it’s a country with a great difficult to undestand the English language, further others. Such difficult that normally those who don’t know English end up not even buying games that don’t have the option of Portuguese in the menu.
With this translation, the buying oppotunities would increase, and the eletronic gaming market is a vertically growing market in Brazil.
I would love to talk more to discuss this opportunity to the develop of your company.
Thank you for your attention,
José Victor
Hi, I haven’t worked on localizing the game yet, but will at some point. You can send mail to support at spyparty dot com and I’ll put you on a list I’ll look at later. Thanks!
Hello, I purchased Spyparty today.
When can I get the code ?
Hi, where did you purchase it? If you bought it here you would have registered with a password, and if you bought it on Steam then it’ll automatically log in…those are the only two legitimate places to buy it, if you bought it somewhere else it was probably pirated.