It looks modern yet very readable thanks to great typography. Loads fast. Fully usable on mobile as well. E.g. Gets a hamburger menu on Mobile. The featured client animation is simpler. The spinning globe icon is replaced by a static image. They have absolutely top notch front end engineering talent.
This is in huge contrast to the current trend where they want to hijack browser's scrolling behavior for absolutely no gain to the end user.
More than likely that developer checked it in IE9 after seeing the great front-end design, and does not primarily browse the web in IE9 (what sane person would?)
Edit: he commented below saying it was IE11 with the IE9 emulation enabled.
IE11 has a feature, Emulation: Document Mode = IE9. No JS errors, so I assume it's a difference of how the "Document Mode = IE9" fails to actually emulate true IE9. Sorry for the false positive.
I recommend you look at image optimization. Loading the /nl flag page from NL takes > 9 seconds. On a connection with 20Mb/s down with one of the best ISPs available.
There are 3MB of images on the page; the problem seems to be the high-res map, which weights in at 1.5MB. This image is 2290x798 and it's in an element of 1145x399. I've halved the resolution and converted it to a JPEG, now it's 0.2MB. To make it even easier for you to show the designers I've uploaded it here: http://imgur.com/XcGllGz.
EDIT: it's worse, almost every image in the carousel is double-sized and unoptimized.
You are talking about the home page, right? Images are double size for retina displays. Your JPEG version is pointless, the flags are placed on top of the background and need an alpha channel. The page is indeed a bit heavy but not enough to impair the experience, first paint is still under 3s. Remember the audience for this page is 90% software developers, with powerful machines and high bandwidth.
I tend to use a combination on pngquant and optipng on most png based graphics. I'm sure there are builds for OSX out there (probably homebrew recipes even).
This will bring the color palette down to less than 256, some images will work better than others, in this case I didn't notice a difference and the size went from 434KB to 133KB in size using the batch file I normally use for this[1]... I haven't checked recently to see if there are newer tools/versions for use, I keep several utils inside my dropbox for windows usage.
> flags are placed on top of the background and need an alpha channel
Ok, that explains the huge PNGs; can't they be rendered as-is (i.e. include part of the background in the foreground picture?
> first paint is still under 3s
That's really slow. The jankey animation (yay Apple) and rasterized image rendering is horrible; it's a throwback to the late-90s internet.
> the audience for this page is 90% software developers,
> with powerful machines and high bandwidth.
I.e. me, and I find it horribly slow. I'm using a year old rMBP and I have a pretty good internet connection (20MB/s, 10x what I could get in the UK and I actually get pretty close to the max all the time; for a comparison: http://www.webanalyticsworld.net/2014/08/internet-speed-gap-...).
Sure, I'd love fiber, but that's not exactly broadly available (though if I could move my house 1km to the east I'd have it).
I'm on a late-2013 rMBP running Yosemite. The page looks nice and animates smoothly in both Chrome and Safari. There may be some deeper problem on your system.
1. Forced waiting for transitions everywhere. For a page I'll probably only ever visit once. You want to ease-in to things. I get it. But you shouldn't hide them. If you want a dithering transition as you scroll, do that. Don't fade-in. There's almost never an excuse for that.
2. What's the point of the "meteor"? To look cool? Is there any point at all to the businesses scrolling in it? Because I don't know how many there are. There's no link to view them all. There's no points to click to go back a pin and re-read one that caught my eye.
I don't know. It just feels like people are obsessed with having the coolest Flash splash screens again.
Forced wait is definitely an irritating practice in web today. Not only is is distracting and usually valueless, it's delays what is important: information transfer.
I am not sure why i need to scroll through 6 screens to see the price instead of just being able to click an icon on the first screen and jump to where i want to jump to.
Maybe there is a way that I just couldnt figure out. Why is it folks would never today implement a 6 or 7 step wizard with a bunch of next buttons. but its considered a good idea to do so with scrolling is involved...
would also like to see a big down arrow or some kind of standard indicator when a desktop page has this scroll behavoir... i was waiting a the starting screen for quite a while and then clicked on the 4 little icons before i figured out i just had to scroll down forever.
It's running at 5 FPS for me on Chrome. 2013 MBP driving 2 non-retina monitors, lid closed. Seems to work a fair bit better on Safari for whatever reason.
I recently implemented a site with a feature similar to the spinning-globe in the International section[1]: a video element overlapped by text in an adjacent element. I ran into a vexing problem in some browsers where the the text that intersected the video appeared somewhat degraded, as if it were a lighter weight than what was actually specified. In Firefox, only the text directly overlapping the video was affected. But in Safari all text in the entire intersecting div showed this effect, even that not over the video. AFAICT, this is some kind of compositor bug, but I haven't been able to dig up any decent information about it.
I do note that Stripe's page isn't exhibiting this issue, but don't see anything that appears to be a workaround or otherwise unconventional.
Anyone have any color on this? Is this a font-specific rendering issue, e.g. so Stripe's fonts don't exhibit this problem? Or perhaps the presence of a background image on the li tags forces the compositor to behave? TIA!
Usually happens when the text is above a section of the page that's being hardware accelerated. The browser basically rasterizes the text, which changes the aliasing properties.
Either move the text off to a separate sister div, or move the animation to a div with a higher z-index. Or you can set -webkit-font-smoothing: anti-aliased - that will set all of the text to same antialiasing settings as GPU accelerated text.
I was waiting for half an hour thinking that image will change and tell me something more. Then I figured out that I can scroll down. Stupid me.
Then it occurred to me that we do the same thing on our home page: we have animation which makes people (stupid like me) wait a little thinking that we will tell them more info - even that info is available only if you scroll down. Stupid me x 2.
Looks very good. I just don't like how mesmerizing the meteor animation is. I wasn't even paying attention to the content. Also it could use a navigation bar once you start scrolling?
