Back
Roast
Posted

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 👂 http://getcssscan.com


tbh man it's a really solid page. Not much to say =>

1) The "try it yourself feature" is really really really awesome!
2) I love the discount. And Romainian independence day line. Really original.

couple of minor points:

1) 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 ...

2) I'd pull social proof section up higher. Currently last section.

Hey Harry, thank you so much for the feedback!

Will make the text section shorter.
By the way, I tried to pull social proof section higher (this week, after I read your comment) and conversion dropped, not sure if it was exactly this but I prefer to back it!

Thanks again for the suggestions.

Awesome page. Nothing much to say. Maybe add the color version of logos for PH, CSS tricks etc . I missed that initially. See screenshot

P.S. Great product. I need to get the updated version. I was looking for info on how to do that on this page. Maybe something to add

Thank you! I removed the colors to focus on the CTA. You can see that on the bottom of the page, which has the same logos, their colors are there. Thanks for buying it, for the update, check if it's 2.9.3. If yes, it's already updated - should be automatically.

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!

Wow thanks for the heads up on the try button. What browser are you using it?

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

Thank you, William!
* Indeeed that's a great suggestion - I should try which headline works better.
* Not sure how to do that as I need to show the demo button code and the discount countdown + headlines which are big
* Sure! But this "Discover (...)" was already for the intermediary call. Do you have any ideas for more ctas?

Thanks again!

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

Thank you, Marc!

  • Just changed the download icon to Chrome and Firefox icon, which should help users see the supported browsers right on.

  • About font-size, they are all 16px+. Is your browser rendering them differently?

  • The quotes on the testimonials indeed are more difficult to read on Safari browser because it renders the gradient differently. I need to fix it.

  • About the 3 panes, will make it better, thanks!

  • Added the :hover state to all buttons! That was great! 👍

About font-size, they are all 16px+. Is your browser rendering them differently?

You're right. Most of it is 16px+ I now see. I was using a Cinema Display before which I guess renders everything a bit smaller than my laptop. I think slightly larger than 16px would be better.