Layout Teardown: Episode 2 - TimeAndDate.com's Success: Mastering Functionality & Monetization

Layout Teardown is a video series where Ben and Brock breakdown the ad strategy and website layout of popular publishers. In this week's episode, we're taking a look at Timeanddate.com, a transactional website where users can calculate dates, check the time, weather and dates across the world. Ben and Brock talk through the reasons behind timeanddate.com's page RPM strategy, the advertising layout on desktop on mobile, and their ad loading setup.

Key Takeaways

• People stare, they don't scroll. Users treat this site like a calculator. They come in, check a time zone, and leave. Most don't scroll at all, but they do end up sitting on the same screen for about two minutes straight.
• The sidebar is a missed payday. The best ad slot on desktop is a big sidebar that stays visible the whole time the user is there. But incredibly, it never refreshes. One ad just sits there for two minutes instead of rotating through new ones, which is a surprising amount of money left on the table.
• Slower auctions actually make more money. Most sites rush ad auctions to keep pages loading fast. But because users here aren't racing down the page, there's no urgency. Giving advertisers a few extra seconds to bid consistently pulls in much better prices.
• The top ad is practically invisible. The main desktop banner lives above the navigation menu, which puts it so high that people look straight past it. Dropping it down next to the search bar, where attention naturally lands, would make a real difference.
• Mobile ads vanish the moment someone uses the tool. There's a banner pinned to the very top of the mobile site, but it slides off screen the second a user scrolls to interact with the clock. The bottom ad stays put, though since it runs through Google Auto Ads, custom refresh triggers aren't an option there.
• Video is a desktop-only play. There's unused space in the desktop sidebar where a small video player would slot in cleanly, pulling strong rates without getting in anyone's way. On mobile it's a different story. Heavy video slows the page down and sends frustrated users straight to Google's own widgets.

What makes TimeAndDate.com different from a typical publisher, and why does it matter for ads?

Ben: I am Ben.

Brock: I'm Brock.

Ben: And today we are going to walk you through the layout and ad strategy of some of the largest publishers globally. We picked TimeAndDate.com — they're one of the biggest publishers globally, but they're in a very different category to large editorial publishers like the New York Times and those kinds of websites, where users are going there to browse and read content. The game there is really recycling those users, getting them to read as much content as possible. For sites like Time and Date, really the users go in there to complete a task — they're going to complete a defined action. In this case they're trying to understand time zones, calendars, those kinds of things. So really user attention is focused in a specific location. They're going there for a specific reason — so we've got less scroll depth, and we've also got a lot more competition. A lot of people can make these sites, so it's a highly competitive area to be in. Generally it's just a very different strategy, layout, and setup than you would see on a big editorial site. So we want to walk you through why it's different, what we would do differently, and walk you through it on desktop and on mobile.

Brock: Okay. So we're going to jump into a bit of the data. Obviously we don't have any insider data here, so we're using a few Chrome extensions — shout out to SimilarWeb — to get a bit of an insight into what's happening before we jump in. Brock, how would we as publishers categorise this type of site?

Brock: Yeah, we draw a pretty heavy distinction between transactional — which is what Time and Date is like — and editorial written content, your major publishers around the world. So for transactional sites, this is all about being efficient with your users. Users are coming to Time and Date and various other sites like this for a very specific reason. They're there to get a result. They're trying to understand — you know, we have to do this all the time, we're doing our calls around the world — we're trying to figure out: all right, what time is it in London, what time is it in New York. Very much an in-and-out interaction with the site. The need and the ability to linger drops away with transactional sites. However, you're getting people that are there for a very specific reason, and you can tease out intent because of that.

What does TimeAndDate.com's traffic look like, and what does it mean for CPMs?

Ben: Definitely. Looking into SimilarWeb, obviously we can see they've got really strong monthly visits — we've got 44 million people coming here. Visit duration is pretty good, at about two minutes. Key thing there is that's visit duration in a pretty small area of page. So what that means is we've got high view time on those units — you can't really scroll past them, they're in view for you know the whole time you're really on the website. So we've got a full two minutes on that unit. That's pretty strong. Looking a little bit further at the kind of traffic split they've got — generally all high CPM regions. We've got the US, UK, Canada, Australia in there. India is generally a lower CPM — kind of you know, max maybe 20 cents — whereas the others could be two to three dollars on a site like this. But overall it's a really positive kind of traffic setup. And then within the sources, it's interesting — it definitely fits with what we'd normally see, but they've got quite a bit of direct coming in for a transactional site. About 60% search. Generally for something that's like a tool, I'm expecting to see kind of 70 to 80% in there. What do you see in there, Brock?

Brock: Well, I think to your point, that's probably market dominance and keyword dominance to get that higher direct. And very likely return users coming back to this site — they're not just competing with other publishers on the keyword. They're competing with the search engine itself. I'm sure we're all familiar with what Google is able to provide — you can go and book your flights without actually going to a website these days. You think converting time is out of their realm? Absolutely not. So they've really got a battle — not only from a user experience point of view to get the user to actually convert from the search query they might have put in, but also to compete with the traditional players who are going to be there and try to offer a better user experience. And there are plenty of publishers that have been completely pushed out of the game by Google creating a nice little widget that pops up under your search bar and just makes them irrelevant. So the fact that Time and Date is holding on — clearly they're bringing some value. Personally, they're one of my bookmarked sites. I'm going direct to this site probably three times a day just to figure out when I can actually have a call with somebody. Really great site, and a great transactional site as an example for us to walk through.

What does the desktop layout look like, and what are the ad optimisation opportunities?

Ben: So we will jump into the desktop layout. It's pretty simple — there's not a lot going on, predominantly just because there's very little scroll depth and they're getting users to exactly what they want straight away. Great user experience, and it just means that we've got a little bit less space to work with. First up is the top unit that they've got there above the menu. Brock, what are your thoughts on the placement there?

Brock: Yeah, it's interesting. Obviously above the fold you get the lift-and-effect there. But we often wrestle with where we put units above the fold — and then again, above the content or menu bar section — because of the scroll. Time and Date have done a good job of keeping it so that the need to actually scroll to use their content is nearly zero on desktop. So moving that unit doesn't make a whole lot of sense. However, as an A/B test candidate, that'd be almost number one. Really what we're saying is: on some sites users are going to scroll before the ad even loads, so quickly that it's not in view anymore.

Ben: Yes, depending on the site. So in this case it might not be the case. But because they've got a nice logo and they've put a lot of effort into making sure the UX looks pretty clean and quick, they are not opening themselves up to 970x250 demand, which you can do by bringing it beneath that menu bar. Now that's a huge trade-off in this case — you will be pushing your search bar, which is the key piece of this whole page, below the fold on a smaller laptop. So that's a huge thing to trade off on. But I guess it could also be placed just above the actual search unit here as well. So if we've got it within here, we're closer to where the user's located. I guess it's all A/B tests on where best it's placed. But the idea here is we're trying to get away from that quick scroll that we get from users at the top. And the rule of thumb you inferred is definitely correct — we want to get the ad units around content that is interacted with, that's in view for longer. Moving your units into those positions makes a lot of sense.

Brock: Yeah, and you always have to have a finger on the pulse when it comes to UX. Definitely make sure that we're measuring the impact of these A/B tests. They do have a nice little stick for a few pixels that they're trying to combat that with — it's not super long, but I'm sure that's helped them a little bit.

Ben: Okay, moving on to our second unit. So we've got our right-hand sticky unit here. Brock?

Brock: Yeah, so this is bread-and-butter stuff in my opinion. I think they've done a nice job at keeping it starting where the content actually starts, or where the interaction layer starts. It's a 300x600 which is great. If you can get 300x250s and your skyscraper units in there it'd be even better. And then you can also play around with the width of the page as well. So anyone who's using a tablet or a small screen — you can change your size mappings if you're using GPT, like these guys are.

Definition — GPT (Google Publisher Tag): the JavaScript ad tag used by Google Ad Manager to request and render ads on a page. It supports size mapping, which lets publishers serve different ad sizes based on the user's viewport width.

Brock: That's a very small change to make, but you're able to have customisable widths for these kinds of positions. But yeah, this is a normal position and I think they've done a good job at placing it. It sticks well, it's right where you're engaging with content, so it's going to be in view the whole time. If we were to make some optimisations — I'm not seeing refresh here, which seems like a big miss.

Ben: I'm sure it is. Without diving into how they've constructed their GPT, it might be there. You've got a nice Mercedes-Benz ad there.

Brock: That's true — I don't know if that's retargeting for you, but you might want to refresh that one.

Ben: Yeah, that's true. If I was to add something else — we do have a little bit of scroll depth here, they've kept it sticky. But conceivably we could stick in another unit below to get a little bit more density on here. If we could get a 300x250 in that position — maybe it's not quite enough space. There are a few strategic things to think about.

Brock: Right. We need to be measuring the value of a page, which is more or less the sum of all the ads that are on it. And what we could be doing is having a smaller unit set in here — like a 468x60 in this empty space — which might be okay for proximity to clickable content. Obviously we don't want to be inducing accidental clicks or anything like that. Or you could do a native product in that position. Alternatively, they might do a double MREC — maybe test on the right-hand side — or even a nice 970x250 beneath the fold. So when I say that, I'm all about getting size variability into a page. We'd like to see that we've got a nice set of sizes even if they are on different units and different viewability spectrums, even if they are in a different position to the key units — we still want to get the benefits of having multiple different sizes on one page.

Definition — MREC: a 300x250 medium rectangle ad unit, one of the most common and high-performing display ad sizes.

Ben: Yeah, so overall they've kept it nice and clean, it looks really good. Definitely a few wins there in terms of potentially placing units a little bit closer to the area where users are going to be engaging. I think that idea of the 468x60 unit just where there's a scroll bar — it's right in front of you but it's not impacting any of the usability of the site — would be a really nice one.

How should TimeAndDate.com be thinking about auction setup and loading strategy?

Ben: All right, that's our desktop side of things. We will now have a look at what we might do on a loading side of things.

Brock: Yeah, looking at loading — it's fairly simple. Thankfully they've only got the two ad units on this page, and when you navigate the site they don't have much more than that. So this is really going to be about: how much time do the users spend with the key content, and how much does the ad unit follow suit? My guess, without looking at their GAM account or otherwise, is that these units are highly viewable. So they really can elongate their auction time. There doesn't seem as if there's a huge need on desktop, at least, to really load things nice and quickly — there doesn't seem to be a logjam with many ad units or video or anything like that. So we can have a nice open auction and try and get as many bids in as possible, because we don't have to restrict how much time we wait for a response.

Ben: Yeah, and we have control here. Any auction we have to give an end time so people can get a response in, but also so that we load it. The classic or standard timeout rate we call it is normally set at kind of 1,000 to 1,200 milliseconds. But we have full control here. The theory is: the shorter you make it, the less opportunity there is for people to get responses back — so you've got a little bit less competition. The more you push it out, the more opportunity you give people to get a bid back, a higher bid back, and so you should generate more revenue. So the idea here is: we've got people on this page, they're completing an action, it's going to take them one to two minutes. We don't have to rush to get that ad in place. If, let's say, on another section of the site where users are quickly flicking through time zones — it's a page that interacts a lot quicker — we might want to shorten that up, or even adjust the auction to something quicker. Server-side bidding is kind of a 500-millisecond auction rather than client-side Prebid, which is a lot longer. But yeah, controlling that and trying to optimise that would be important for a site like this.

Definition — Prebid timeout: the maximum time (in milliseconds) that Prebid waits for demand partners to return bids before the auction closes and the ad server is called. A longer timeout means more bids but slightly slower ad loading.

What does the mobile layout look like, and what would you change?

Ben: Okay, cool. We're going to run through the mobile setup here now for Time and Date. So again they've kept things very simple here. A few things that we have noticed as we're running through the website — there's not a consistent auction across all pages. We're pretty sure they're doing some kind of experimentation across the auction on the number of partners and even what they're running on the page. From what I can see, Brock?

Brock: Yeah, it makes sense. When you're on mobile, it's a fairly safe inference to make that you're likely on 4G or even worse internet, and making a whole bunch of calls out of the browser is never an easy thing for Chrome or Safari to deal with. So reducing the number of partners in this example, at least, is sensible.

Ben: Definitely. The first ad then we've got is their head unit on mobile. They've gone for just a fixed size — it's a 320x50. They've actually also got a 320x100, so they're kind of your standard banner sizes. Good that they've got a little bit of multisize in there. We probably think that the placement there isn't great, though — they've put that basically above the whole website. They've just left space above where the actual website is. Users are going to scroll away from that extremely quickly. So the viewability of that unit, unless it's loading extremely fast, is probably going to be pretty low.

Brock: The real point to that, in my opinion, is they have a sticky footer here as well.

Ben: That's true. Yeah. So on desktop they've done a really good job of making sure that you don't need to scroll to use the content. But on mobile I feel like I need to scroll on this page. And as soon as I do scroll, that unit disappears. And that's where you lose the chance of clicks, more interaction, refresh — those kinds of things. Really that needs to be towards where the user is going to be. So I guess below the first heading, or even somewhere closer to within where the user is going to be. We could push all this text down a good bit and try to get it kind of towards that area. But we want to be closer to where users are actually going to be using this content.

Brock: The sticky is interesting because as that's running through AdSense Auto Ads — it looks like it, you can tell by the close button that it has — this is very common across any AdSense-using website.

Definition — AdSense Auto Ads: a Google product that automatically places and optimises ads across a publisher's site based on its own signals. It handles placement, sizing, and refresh rules automatically, which limits the publisher's control over those settings.

Ben: Yeah. The other point there is: which content is there for SEO purposes and which content is there for actually using the tool? You've got a few things — like the "please note" piece, if you scroll up a little bit — you can see that that seems like it's actually relevant to using the tool. So pushing that content down, I can see why that might get a few frowns around the office.

Brock: True. That being said, you move an ad unit down and you open yourself up to the 300x250 — or even using interscroller-type positions as well. So there's always going to be a UX vs revenue conversation to have on this kind of page.

Definition — Interscroller: a high-impact mobile ad format that reveals as the user scrolls, typically occupying the full viewport briefly before the user continues scrolling past.

Ben: Yeah. I mean, fundamentally they've kept it extremely simple with basically two units. So we want to try and make the most of those two units on site. Getting it a bit closer to where that content is, if it could be a bigger size — I think that would have a big impact. Again, I'm not seeing refresh, and the fact that they're using AdSense for that sticky means you can't get refresh there. So there's definitely a lot of opportunity on that side.

Brock: For me it begs the question on what their user strategy is longer term. Like I know you're an avid Time and Date user, Ben — would you ever pay for Time and Date? That would be the question. And if that is the case, or if that's the strategy they're taking, then it might make a bit more sense to push a little bit harder to get people to sign up. Even just a free sign-up — get the data in a privacy-safe and compliant way and do the right thing with it. You'll be able to drive direct and PG in that kind of way.

Definition — PG (Programmatic Guaranteed): a type of programmatic deal where inventory and pricing are pre-negotiated directly between a publisher and an advertiser, combining the automation of programmatic with the certainty of a direct buy.

Ben: Yeah, personally — and I think I speak for the majority of internet users — these kinds of sites, it's hard to see what you would be paying for. You can get so many for free. So I think you're always kind of stuck in an advertising strategy here. People try their best to diversify, but yeah, we need these types of sites and we don't want to pay for them. I think they're stuck with the advertising strategy there.

Brock: If I was to give a few more ideas of what could be done — potentially implementing something like an interscroller on a unit within the circulating modules they've got at the bottom here that get people to other areas of the site. They could swap one in for a unit that's got an interscroller functionality, so it kind of has a bit of interaction with it. Or native as well — we could actually probably design it to look a bit like that tile as well. So there are ways of trying to fit in with the user experience they've got whilst getting a little bit more ad density. But clearly they've made a business decision to keep user experience really simple — to have that almost as their competitive advantage amongst their competitors. And it looks like it's working for them.

Is video a viable opportunity for TimeAndDate.com?

Ben: All right. So we've looked through it and obviously we're all on display at the moment. Can you see any opportunity here for video?

Brock: Look, I can. I think it might sit a bit more comfortably on the desktop side — I think you're going to have a bit more of an engaged user in that case. On mobile, you might be pushing a bit too hard on your user experience. And in these kinds of transactional sites, that's all the difference between keeping the user and not.

Ben: Yep. Okay. And that's a wrap on episode 2 of Layout Teardown, where we went through TimeAndDate.com. If you enjoyed the video, please like and subscribe. And if you have any feedback for us, drop it in the comments. For any publishers watching — if you would like your own free layout analysis, there will be a link in the description. Please reach out to us — we'd be happy to provide that for you. We'll see you back here next time. Thank you.

This is an edited transcript of Layout Teardown, Episode 2. The words are Ben and Brock's own — lightly edited for readability (filler words, false starts, typos, punctuation). No claims have been rewritten or generated by AI.

‍