A chance to get our new Source Monterey project for FREE

To celebrate Apple’s Monterey OS being released I have recreated several sections from the official webpage using Source ‘micro’ framework.

Here is the original and here is the Source version.

A couple of notes about the project:

  • 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.


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:)

1 Like

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.

FYI I see the correct header font in Safari 15.0 Catalina

@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.

Andrew, yes, I have the SF family installed on my computer. But then the page must be specifying it, even if it is not installed.

I think that’s what I said :)

Yes, you did — but RW4all wouldn’t let me make another reply to confirm this!

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.

1 Like

Perfect now!

1 Like

Out of curiosity, could you pick that font up as a system font on the assumption that only Mac users will view the demo page?

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.

1 Like

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.

They appear to be normal jpg and pngs to me. They seem to load just as quick or quicker on Stuarts site.

This doesn’t sound right to me. The exact same main hero image that Stuart is loading is 3008x798 and is 197Kb.

Apple are very experienced in NOT Serving images in next-gen formats.