Criticize my work - Landing page for startup

Hello everyone,

I made this landing page for a friend who wants to start a business. What do you think about it? How can I make it better?
Give me your constructive criticism.
https://bioflex.herokuapp.com

Thanks.

Using Firefox, go to the ‘View -> Zoom’ menu and activate ‘Zoom Text Only’. Holding down the Ctrl key, scroll your middle mouse button to increase the text size. It won’t take long before you begin seeing issues.

Thanks a lot. I’ll try that. :grinning:
Did you se any issues?

Yes, increasing the text size causes several issues. The user should be able to view your page with as big of text size as needed and your page should be able to handle the increased text size gracefully. Be sure to narrow the browser width with increased text size as well. One thing that will help with these issues is to use ‘em’ instead of ‘px’ for your break point units.

I just tried what you said. The page is not able to handle the zoom. Thanks a lot.
How did you think of that though? It never crossed my mind. :sweat_smile:

That’s why I brought it up :slight_smile: I’ve been doing this for a long time and accessibility is one of my primary areas of interest. There are a few things I always do as I design/assess a page:

  • Narrow the browser as far as it will go and make sure nothing breaks (basically, develop using what they call a ‘mobile first’ approach). Style your page with a narrow view first and then add break points for wider views (using min-width instead of max-width).
  • Gradually increasing the text size to at least 300% (that’s what FF goes to) and make sure everything looks good at both wider and narrower widths. Using ‘em’ for your CSS break points helps tremendously with this because ‘em’ takes both browser width and text size into consideration. If you do it right you will automatically have very few issues with text size (and as long as you use ‘em’ for the widths of the elements on your page).

I am constantly evaluating my pages/apps as I am working on them, and it’s the first thing I do whenever I look at someone else’s page.

Very interesting.

So do you mean something like

@media only screen and (min-width: 1024em)

instead of

@media only screen and (min-width: 1024px)

Yes (except it won’t be 1024em, that would be way too big).

Start as narrow as you can go and slowly widen the browser window until you have enough horizontal room to rearrange things on the page for a wider view port. That will be your first break point. You can ballpark the em value using:

https://www.w3schools.com/TAGS/ref_pxtoemconversion.asp

So for your example above, assuming a default text size of 16px, then 1024px would convert to 64em. So you can start with that value and then readjust as you test it.

Thank you. Your patience is very much appreciated. :grinning:

No worries, sometimes I need a break from what I am currently working on and will take a stroll through the forum.

Happy coding.

1 Like

awesome work here. Use can do for buttons.

cursor: pointer;

btw, from where did you get those illustrations?

Thanks a lot. :sweat_smile:
I got the illustrations here https://pngtree.com/.