Roast my landing page: CSS Scan
Tell me everything that's wrong with the landing page.
Inspired by the extension WhatFont? I built CSS Scan (http://getcssscan.com). A browser extension that gives you the CSS of any element on the internet you hover over and let you copy all its rules with a single click.
I had no expectations when I launched it but it got a lot of interest so I kept updating it and since then it's my full-time job. Right now you can also edit the CSS and see the changes in realtime, plus a lot of features and extras.
Reached $50k in total revenue today but I want to take it to the next level with your help. Conversion is good but I believe it can be improved.
How can I make the landing page better? Any feedback. I'm all ears 👂
tbh man it's a really solid page. Not much to say =>
- The "try it yourself feature" is really really really awesome!
- I love the discount. And Romainian independence day line. Really original.
couple of minor points:
Your worst section by far imo is the The Lightspeed Inspector / Copy Any element you want / Smart CSS section - text looks long. Shorten it. I just looked at it and thought, fuck reading that. looks long. Also to make it more readable, perhaps use bold + italics and increase line height ...
I'd pull social proof section up higher. Currently last section.
Awesome page. Nothing much to say. Maybe add the color version of logos for PH, CSS tricks etc . I missed that initially. See screenshot
This is a great landing page. The "Try it Now" button doesn't work with (chrome based) browser, even with cookies enabled, but works great in Google Chrome. You do communicate on your site that it is only supported by Firefox and Chrome proper for now so that is understandable. The copy is succinct and to the point which I appreciate. Keep it up!
Awesome you're killing it, this is good copy.
Ways to improve:
- Test if your core headline works better with "Never open Dev Tools to check styles again" or "The fastest and easiest way to inspect and copy CSS"
- The social proof with all press mentions doesnt appear above the fold. Can you press things up so that it fits on the first page without scrolling?
- Can you add intermediary call to actions? Eg before "Discover how your favorite websites are styled by analysing CSS on the fly"
- Can you add a pitch on you and your story in the end, anything that makes it relatable? How you came across it, who you are, maybe that you are indie or young or from somewhere special
- There's a lot of stuff going on above the fold. Not sure where my eyes should go
- The download icon on "Buy it now" feels out of place.
- The black text on darkish green button for "Buy it now" has not enough contrast + size is too small. Maybe try light green background, or white text.
- No Safari support as far as I can tell
- On Firefox it's not immediately clear it's supported. Most extension are Chrome-only and so is the example video. I'd like to see the Firefox icon above-the-fold
- "Try it yourself on this page" button doesn't have a :hover state so doesn't feel interactive
- The video is nice, but feels slow at times and other times too fast. Maybe have multiple named segments showcasing one feature at a time.
- The 3 panes below the video have a lot of text I'm too lazy to read. The headings aren't descriptive enough to catch my attention
- Of the testimonials only Brad Frost looks familiar to me. The quotes are barely readable.
- The "as seen in" logos have weird inverted colors. Why is Y Combinator blue? Etc.
- What's a "Hero" license? Are there other licenses?
- Can I expect future updates? How actively is CSS Scan being maintained? Will it still work in a year when browsers have changed?
- A lot of the text is very small. I'd use 16px minimum.
- Many images and video are kinda blurry on my Retina screen
Many positive points too, but this is a Roast 😁