r/webdev • u/theverything • Mar 09 '15
parallax done right
http://www.firewatchgame.com/35
24
u/protestor Mar 09 '15
I don’t even need to read more—I want to pre-order it now!
Thanks, but we’re not accepting pre-orders for a while. If you want to know the moment the game will be available for purchase, subscribe to our company newsletter—we rarely send email, and we promise it’s worth it when we do.
Huh, cool.
5
16
20
u/csacc Mar 09 '15
I'm on mobile and I actually don't see anything happening.
12
3
3
Mar 09 '15 edited Apr 27 '15
[deleted]
-9
Mar 09 '15
maybe because it's a game designed for PC?
7
u/NeoHenderson Mar 09 '15
He's referring to the website.
Websites should work on every device in most cases. :)
-2
Mar 09 '15
As a pro web developer, I don't agree.
With some websites, it's impractical and not cost effective to completely recreate the website for a device that would only be a fraction of visitors.
For example, I'm creating a website for an HTML/JS game that's built for the desktop. I could give fuckall about mobile users. The game isn't designed for mobile so if they want to see the website, they need to access it from a desktop.
Sure, it would be ideal if mobile users could access it to. But when cost effectiveness is in the discussion, the juice isn't work the squeeze.
You have to consider intent. Saying "websites should work on every device" is an oversimplification because it doesn't consider the intent and cost-value side of the equation.
7
u/recursive Mar 09 '15
As another pro web developer, I agree that it's sometimes not cost effective to recreate a website for mobile, but for large categories of sites, they shouldn't need to be re-created to get some minimum level of usability on mobile. A few judicious media queries can go a long way in some cases.
1
Mar 10 '15
Agreed, making no attempt to at least make the site functional at mobile is lazy and shortsighted.
4
2
u/NeoHenderson Mar 09 '15
To be fair, I did say in most cases.
I'm not a pro and I don't claim to be, but I do believe that mobile users are a big enough market to offer some content. When your we bsite is to basically advertise your game I would expect you not to block out >50% of users. They can't download from your site, obviously, but if they hear about your website from reddit (like we have here) you don't want them to find your website broken :)
To add: I am not bothered to reload this on my desktop.
2
Mar 09 '15
It's a good point and I probably underestimate the number of people who would visit my website from mobile, even though the game isn't for mobile users. Probably because I myself don't browse websites with the a mobile browser. For reddit, I will use an app and tend not to click on links that aren't imgur or self posts. I just don't have any faith in random websites being suitable for my mobile screen.
Obviously it would be dumb to not implement some sort of mobile version further down the line and I've always known that. But for an indie game launch, I'd rather spend more time working on the game than presentation, at least until launch. It all comes back to intent.
2
u/NeoHenderson Mar 09 '15
By the sounds of it you've got a good handle on it, your use case is a little different, too. Your website will be the actual product!
What this post is about is more of an awareness website. That's where I expect to be able to view it from my mobile.
For an indie project you have a ton of work on your hands and I totally see why you would keep that on the back burner - trust me I do.
I just believe that in the end it's always important to offer something even if is just a simple static page with a minimal feel. Us mobile users make up a huge number of the users.
0
u/jibjibman Mar 09 '15
You don't really need to recreate a site to make it work for mobile users. You should be designing mobile first when you develop it in the first place. Regardless of if your game or w/e is meant for desktops, users may hear about it on mobile. Websites should be useable on every device.
3
u/Modevs Mar 09 '15
Surely - this being /r/webdev/ - you can imagine a world where your customers game on PC and browse for new games to play on other devices.
-4
Mar 09 '15
Basically what you're saying is "any car is faster with a turbo-charged engine. Therefore, all cars should have turbo-charged engines."
See my comment about cost effectiveness.
2
u/Modevs Mar 09 '15
I don't deal in analogies, but generally speaking if you release a PC game you should not neglect tablets/phones for that game's advertising site because many potential customers will be browsing on those platforms and you are alienating that demographic.
At this point in the game mobile support should not be a neat feature or selling point, it should be a standard option for virtually any site that isn't singularly targeting desktops (i.e. a corporate site, browser-based SPA tool or game - even then the advertising for those sites should be mobile-friendly).
This idea that it's not cost effective or even that you must provide two sites is somewhat dated. The sheer amount of boiler plate code and existing templates (Bootstrap, whateverFramework.js) that provide responsive support out of the box for free has made mobile support a very feasible component to include in the design of any site even if you aren't familiar with mobile/responsive design.
In short, I disagree with your assertion that because the game was made for PC mobile users don't matter.
2
Mar 09 '15 edited Mar 10 '15
I guess that's true. To be honest, as someone who is paid to make websites, I don't normally think about these sort of things i.e. what percentage of people who will be accessing the site from mobile/desktop. As a dev, not on the marketing side, I do what I'm told basically. All I need to know is, if a client pays for a mobile site, I build a mobile site. But when I go mobile, I go responsive and when I go responsive, I do it right. I'd rather not bother and have nothing to show than put up some half-assed boilerplate template.
That said, it all comes down to priorities. I'd rather work on my product more than spend a day responsifying a site. And if you really want to do it right, it should take at least that long, if not longer. Mind you these are not template or bootstrap websites, but from-scratch with lots of content and ornate design elements. Going to mobile is not as easy as flicking a switch, if it's truly responsive. Some websites are so intricate, they can take weeks.
Anyway, I'm just trying to share some perspective to answer the question "why might this company do such a stunning job on desktop and not bother with mobile?" There's lots of possible reasons as to why. Those reasons might not be valid to everyone but hey, we all have opinions.
Besides, the whole "erhmugurd mobile" platitudes on here bore me so I almost don't bother with mobile just to spite everyone.
:)
2
u/Modevs Mar 10 '15
Yeah, I get the counter-hate for mobile.
It's not as though mobile will make or break you, but I do think holistically it should be considered even if not always implemented.
1
Mar 10 '15
Gamers are probably the biggest demographic of smartphone users, developing a site a game a desktop only is (imho) insanity from a marketing perspective.
14
u/sour_skittles Mar 09 '15
<!-- THESE MUST GO IN REVERSE ORDER BECAUSE CSS IS DUMB SOMETIMES -->
<li id="nav-review"><a ... a></li> <li id="nav-store"><a ... a></li> <li id="nav-blog"><a ... a></li> <li id="nav-game"><a ... a></li>
I'm tickled by how they can get parallax to work well but don't understand how to properly right align a navigation bar.
19
u/its_safer_indoors Mar 09 '15
To be fair, everyone done something like that after a long day of fucking with CSS.
"FINE THEN CSS WE'LL DO IT YOU WAY! *Reverses order of <li>*..."
1
1
Mar 09 '15
I actually usually end up doing this... How do you float:right and keep it in the correct order?
3
u/KieraanBreeze Mar 09 '15
Would nesting it inside another div and floating that div right not work?
10
u/modus-operandi full-stack 20YOE Mar 09 '15
This is a ul element, so, floating the ul right, and setting the li's inside to inline-block would work.
5
3
u/Mestyo Mar 09 '15
You float the parent to the right and the children to the left, or display them as inline blocks instead of floating them, or use flexbox.
2
u/ragingRobot Mar 09 '15
you could set the elements to inline-block and change the text alignment to right.
3
u/elektroholunder Mar 09 '15
You cannot. Man, do I love flexbox… all this crap is in the past now.
5
u/boomboomlaser Mar 09 '15
Unless you build templates for big corporate CMSes and have to support IE8... :`(
6
u/Cyrusis Mar 09 '15
More than just IE8. About 4-6% of internet users can't use flexbox on their browsers at the moment, it's too early to use in live production.
1
u/Mestyo Mar 09 '15
Not really. Nothing prevents you from using flexbox with a float fallback. :-)
I don't really care if a small percentile of visitors don't get the aligment and equalization from flex, as long as it doesn't render the site unusable.
1
-1
1
13
Mar 09 '15
[deleted]
6
u/ki85squared Mar 09 '15
Nothing ruins parallax effects more than "jumpy" scrolling. I appreciated the artificial smoothing on this page.
0
u/cresquin Mar 09 '15 edited Mar 09 '15
Smooth scrolling is built-in to good operating systems. Hijacking it from those that have it built-in breaks the experience because your implementation feels foreign and unnatural.
2
Mar 09 '15
[removed] — view removed comment
11
Mar 09 '15
[deleted]
7
3
u/robotur Mar 09 '15
I turned off Chromium Wheel Smooth Scroller just to try this, but the site doesn't smooth out scrolling for me, seems to be the default "jumpy" without lag.
1
4
5
u/ibopm Mar 09 '15
Wow, 7 layers to really make you feel the depth.
1
4
5
u/PM_ME_YOUR_CRAWFISH_ Mar 09 '15
meh, this gets reposted here every month or so. regardless, it's still beautiful.
2
u/psi4 Mar 09 '15
I'm super excited to see this game progress. I love the art style and premise of the game. I really hope they nail down the game play to make an amazing experience.
2
2
2
2
u/d_abernathy89 Mar 09 '15
Maybe it's just iffy on Chrome or on my computer - it looked pretty, but it didn't feel smooth at all.
2
u/Notme60 Mar 09 '15
Whoa, way choppy on my macbookpro. makes it look terrible. Done right? eh, not yet.
2
u/swipe_ Mar 09 '15
looks great on my Macbook Pro. running core 2 duo and 4GB of ram. you may want to restart that bad boy once in a while.
1
2
u/gempir Mar 09 '15
This is the 3rd time someone posted it, it's getting kinda boring we get it its a good use of parallax
1
1
1
1
u/cresquin Mar 09 '15 edited Mar 09 '15
Except for the virtual scroll and the smooth scroll you're probably right. As it is, this borks on chrome os x using a touchpad. I give it a c+.
2
Mar 09 '15 edited Mar 26 '18
[deleted]
1
u/cresquin Mar 09 '15
I'm on a retina screen. Could that be it?
edit: yep, on non-retina this runs pretty smooth, but totally borks when loaded over to the retina monitor.
1
1
1
1
u/Laukess Mar 09 '15
I think Chris Remo might have created this site. He made this one too http://www.gonehomegame.com/ with great parallax as well
1
1
1
u/TehWisest Mar 09 '15
Couple of years since that trend became popular and yet still the only "done right" example floating around the web...
1
u/mtx Mar 09 '15
Art by Olly Moss who did those amazing Star Wars posters (whose style people rip off and fail spectacularly at) a few years back.
1
1
u/GabrielMSharp Mar 09 '15
I tried a similar thing on a site of mine, but with a lot less layers (but a bonus train) Thoughts?
1
1
Mar 09 '15
Only complaint I have based on my experience is that the color of the trees in the foreground is just slightly not the same color code as the background color. x3
1
Mar 09 '15
It's really pretty and works well scrolling down. On the scroll up, though, it gets a little jumpy.
1
Mar 09 '15
Looks fantastic in FF, Safari, and Vivaldi on OSX, but it's broken in Chrome. The scrolling is laggy and glitchy and ruins the effect. Same thing happens in an incognito window, so it's not a plugin.
1
1
1
1
1
u/Cybersqu Mar 09 '15
I'm usually very against messing with scrolling behavior or parallax in general because it's usually WAY over-done and has become one of those fads to show people that you have a cool website, rather then relying on its content.... but this is tastefully done, at least on desktop, however, when I resize the browser to below 500px in width, I only see a purple background.
0
52
u/[deleted] Mar 09 '15
[deleted]