I finally got my landing page to be mobile friendly
Here's the landing page: https://www.infaq.ai/
I'm incredibly lucky to have gotten my first paying customers for my subscription service and they haven't churned out several months in, so I decided to change gears and overhaul my landing page to really try to optimize it, specifically to be mobile friendly.
But I'm a programmer, not a designer; honestly I have no idea how some of you have such good responsive landing pages (and especially how you get all your animations).
I was trying to get the hero image to look good on mobile as well as on desktop and everything in between and I finally got it working. I used TailwindCSS.
I'd love to hear what y'all think. Here's what it looks like:
Desktop
Mobile
Try making the browser window tall and skinny from normal monitor width. It SHOULD adjust dynamically in a way that looks at least decent at every width.
Any landing page roasting is also always welcome.
Bonus points if you can guess why the domain name is "infaq" :)
Heckr
lol
Looks nice :) Congrats for that!
Nice work! Love how the hero image stays pinned to the right and elegantly crops it when its too big to fit in frame. Also as fellow non-designer finding myself doing more design things, Tailwind has been a godsend. Once you dabble with it for a few different niche usecases e.g. making things responsive, learning how to animate, etc., you quickly gain an insane toolset for building awesome sites. keep it up!
Totally agree on Tailwind. I was dreading learning CSS again but till one made it fun.
This looks pretty great! You call yourself just a programmer but you've definitely got good design skills!
Do you know how much the conversion rate varies if you have a product screenshot in the hero section? A lot of big players in the industry do this
Thanks! I have no idea on the conversion thing. I've also wondered that. That being said, there's a live demo further down the page that people can try which I'm starting with.
Would you mind giving some feedback on my landing page here: https://www.indiehackers.com/post/landing-page-feedback-reseat-a8dc48c7cf
Unlike you I'm yet to make it mobile friendly
Yeah sure! I'll comment directly on that post.
Your landing page is visualising appealing and the responsiveness is properly carried out, particularly in phone. Overall, wonderful job!
Appreciate all of you folks trying it!
Perfect for all screens until I saw it on Samsung Fold, give it a try on portrait view. One small correction will make it perfect for all devices. Good Luck
Amazing, thanks for testing it out!
Looks nice, for some reason on Safari all your buttons have double borders on them. Seems they're not rounded if they're supposed to be there.
https://imgur.com/a/bEwPmRj
I've found just using bootstrap 5 has handled 90% of my desktop->mobile but I like that you're focusing on the placement of the cartoon.
That's really weird......thanks for the bug report.
Is that Safari mobile or on desktop?
Also can you try again in about 3 minutes? I think I might have fixed it but don't have a device to test on.
It was Safari desktop but looks perfect now! nicely done.
Nice! Thanks for checking. For everyone's reference, I was using the Tailwind outline-* class. I changed it to border-. Looks like Safari might not respect rounded- with outline-*.