The whole ‘FaceTime’ section is built with a single Grid Plus Pro stack!
The interactions in the FaceTime section (i.e. clicking on the little red buttons) are powered by Limelight stack from Big White Duck
Some (optional) animations are powered by my Animate stack
The project file will automatically get sent to anyone that makes a qualifying purchase during the month of November. Qualifying products are: Source Addon pack, Source Grid Enabler, Animate, FAQ Toggle, Splider, Source Lifetime project deal and the Source Workbook.
Thanks,
Stuart
p.s. if you’ve bought any of these in the last few days please feel free to get in touch and I will pass on the project to you.
Great job. My only critisism is that the Source version is too fast and does not reproduce the slower performance of the Apple site. Can you please add a load of unnecessary code or scripts or old stacks to slow down the Source version down:)
Ha! To be fair I haven’t recreated the whole page just some key sections to demonstrate how each could be done in Source.
p.s. i should really make a note to run the projects through through the speed checkers before I release them. I think a lot of people run the projects though them to try and catch me / Source out :)
I should say too that this will be available for existing Project Bundle purchasers soon. I am in the process of moving the projects over to the Academy site so that all projects can be accessed / downloaded from there.
Stuart, I’m not seeing SF Pro Display for your headings in Safari (but am in Firefox) — its round dots being replaced by square being the telltale sign.
@jamessouttar@Webdeersign For what its worth, I don’t see it in any browser. If I change the fallback to serif they all go serif.
What’s more I don’t see an @font-face in the code so unless the search has missed it, don’t know how the font could have loaded for either of you in any case unless you have it installed on your system. The page certainly isn’t loading it though.
i moved the page from one RW file to another earlier today and forgot to copy across the RW resources - including fonts. Apologies for the confusion. Think it is fixed now.
Yes - i should probably have gone with that approach instead of embedding them. Here’s is an example that includes fallback for other systems: font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu; (copied from here).
i’ll take a look at adapting the project to do this actually.
The Apple version initial animation is so jumpy it looks horrible on my old Mac. I doubt Apple even test on older HW these days.
IMHO that type of scroll based full screen animation has had it’s day and can be a big turn off. However, the rest of the Apple design takes a very conventional and pleasing approach and possibly a new design direction for Apply.
Interestingly I counted 39 reasonably large images on that page (many of them showing screens with sharp details), yet Google says the page loads in 3.6 seconds and — having emptied my cache — I didn’t notice any images loading as I reloaded and scrolled. Having downloaded the ‘hero’ image, Preview tells me that it is 2724 × 1796 pixels and 2mb. That seems pretty hefty to me. So how are Apple doing this?
I see a different sized hero image to your’s, and when checking different width windows, I see more odd sized images, so they may be loading specific sizes for ranges of browser widths.
The Google PageSpeed Insights loading times are figures based on their complex algorithms and seem to show longerdownloading time than real world downloading with a decent internet connection. They are further reduced for the Mobile “insights” to factor in the use of poor mobile data performance.
However, they do provide good indications of where you can look to speed up your loading speed.
The thing here is how well Stuart’s and all Source sites score in Google PageSpeed Insights. Often with a Source build, you can get a desktop score of 100 with no effort, and then by applying best practices increase the mobile figure to 99 or 100%.
Yes, they may be loading some different images (I haven’t looked on mobile). My point, though, wasn’t about mobile or desktop, just that this is a very image-heavy page — with lots of detailed images, and yet it is loading so quickly. I was curious about how Apple have compressed the images (is this LZFSE?) and what they might be doing to get them to load so quickly.
