HS Landing Pages Design Update

[00:00] Hey folks, happy Wednesday. Big update here on the landing pages. Hopefully this will be like the final pass for major design stuff and I can kind of move into

[00:10] building and kind of get this thing wrapped up, get these into use. So I've been keeping up with all three of the designs, I should say, because my plan is

[00:20] is to use codecs to build all of the stuff into the HubSpot code anyway. So it really doesn't, it's not like a, it's a bit of a lift to have like different

[00:30] versions of it in this case, mostly because the kind of agreed overall formatting and structure will be more or less the same across the board. We're

[00:40] looking at the sort of all of what I have here, so I'm going to kind of point a few things out, but this one is for basically an ebook. And I know that

[00:50] there's also requests kind of separately for a webinar sort of set up as well. It's pretty easy to kind of swap those pieces and plug them in, right? So

[01:00] to basically have this kind of layout instead. So that'll be basically a component. So the whole idea here is that there'll be one landing page template,

[01:10] this is kind of in theory it might end up having to be three, but I think it can be one, where there's basically a set of fields that are changing whether or not

[01:20] these things are visible and what sort of type it is. So you can imagine that there's, you know, I'm just calling this idea D for now, but we might have a better name where it's sort of like the light blue mode, dark mode, or kind of

[01:30] like hybrid or something, right? And that would set the colors of the different boxes, the background, and pick the hero kind of background, right? Then, beyond

[01:40] them, I'm kind of like trying to address two other things too. Sort of what can we

[01:50] get, you know, above the fold, and then sort of addressing Gabby's request for having more of a longer page. It's a little bit more dynamic and flexible. It can be used. So that's what I have here. I'm going to quickly go through this stuff. So in the

[02:00] hero, I have tried to arrange it such that when it goes to

[02:10] mobile or when it's on a narrow screen, as much of the critical information and the form will be above the fold. The only way to really make sure of that is to

[02:20] just keep making stuff smaller, right? So I could certainly make this image smaller,

[02:30] right? We could, you know, and that's going to obviously bring stuff up, and you can see that it's arranged such that the form won't be impacted there, right? The

[02:40] other way is to make the text smaller. I mean, I can start to also kind of cram stuff together, but I already have it at 24 pixels, which I think is going to you know, getting beyond that will just feel way too crammed. So yeah, so I think

[02:50] that that's one kind of consideration that we need to be aware of, is that the arrangement of the stuff in the pieces will have an impact when it goes to

[03:00] mobile. So you can see in this case, I'm trying to keep all of this stuff together and then have it followed by the field, and the way to do that is to arrange it such that everything in the left column is first, everything in the

[03:10] second column is second, and that's sort of the default. And then changing the sizes of things as we move down in the breakpoint. Now on desktop, this is

[03:20] a 1920 desktop, so this is like a MacBook Pro 16-inch, but the overall width of the

[03:30] whole page's content is only 1,100 pixels. Typical like MacBook 13-inch is about 1,300 and change. So that means that there's going to be some of this

[03:40] border space on either side. So it will try to like take up as much of the viewport, but hopefully not cut off too much. It could end up cutting off like,

[03:50] you know, somewhere like here. Or like there's a chance that depending on the size of the screen, depending on the browser, that somewhere in this range things get cut off on a smaller laptop. But again, by trying to tighten up what

[04:00] some of this is, or maybe we make the image smaller, you can adjust for that. So notes on that. Everything, so in all of these pieces I should say, the way I'm

[04:10] planning to build it is such that all of these are a field. So there's a field for the what goes on the iPad. There's a field for what this little eyebrow would

[04:20] say, what the heading says, what the subheading says, the tag, you know, these fields, etc. And then this would be, there'd be a field for that eyebrow and then a

[04:30] rich text box, right? So you could fill that up with paragraph text if you wanted to, put other images in there, whatever, because it'll be kind of like one of HubSpot's rich text fields. Everything below here I was basically

[04:40] seeing as like conditional modules, meaning if these three fields or two of

[04:50] the fields or whatever are filled out, then this thing would show up. It might end up being like a switch. But as far as I know...

[05:00] I can conditionally turn things on and off with HubSpot templates, but not necessarily rearrange. So I don't have to double check on that, meaning if you wanted this card to like be down here or

[05:10] whatever, or it wanted the grid to be up above this paragraph text, like I have to wait to figure that out. But as far as being able to kind of turn stuff on and off, I'm fairly certain I can do that.

[05:20] So by that kind of logic, I'm basically just building out a couple different modules here so that you have something to choose from. And I sort of imagine that maybe only the speakers

[05:30] is being sort of underneath there, or maybe just this rich text field. So all of these, you know, are repeater elements, or these are kind of like fields that would have to be filled out

[05:40] as like one-to-one fields, where this one would be basically just like a big rich text field. So if you just wanted to build out a whole web page there, you could use just that one module

[05:50] and hopefully get away with it. And then I have a footer. As you can see, as we go down, at breakpoint, there all of a sudden is like a lot of cards. Again, not thinking that all these

[06:00] would get used at once, just showing how they would look. And then those pieces get carried over into the other two themes. So, you know, largely there's basically the light blue one,

[06:10] we have the kind of dark mode one, and then the white background one. So obviously, I can mix and match if you want, kind of putting ideas out there. But yeah, so like I said,

[06:20] the goal here is to get these built into a template that can be used on HubSpot. If that ends up being a dramatic failure, then all of this I know I can build in Webflow, no problem.

[06:30] So if that ends up becoming a thing, I know you guys are debating back and forth about like where do we host some of these pieces, that stuff could be built on Webflow and we could still use all of

[06:40] the HubSpot functionality as far as the forms and the tracking and all of that. Obviously,

[06:50] you'd be building the page in Webflow, slight difference. But I'm pretty confident that I'll be able to do it with Codex. And then there's always an option to hand this off to a HubSpot

[07:00] developer as well. So yeah, if you guys can give me some feedback on this in like the next day or two, I should be able to get building on it by Friday. Tomorrow, I weirdly am not going to have

[07:10] power at my house because of a storm and some maintenance they have to do. So I'm trying to do work before and after that and then do everything hopefully in the time that I do have power.

[07:20] So talk soon.