Skip to content
Submitted almost 2 years ago

responsive "comin soon" page using flexbox

Victor•290
@cervantesdeveloper
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I show and hide elements removing and adding classes with js, but this transitions are abrupt, how can I change that? Should I use CSS animations in order to get smooth effects?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Victor!

    You can't do animation or transition with display property. If you want to add those things, I recommend using visibility property.

    Keep in mind that when you are adding animations or transitions, make sure that those can be turned off when the users choose to. You can use prefers-reduced-motion media query to do that.

    For animations and transitions, take a no-motion-first approach. This way, the users who choose to see them will be able to see them. Also, if the users' browsers don't support the prefers-reduced-motion media query, they will not see them and that's fine as long as the animations are not needed to understand the page content.

    prefers-reduced-motion: Taking a no-motion-first approach to animations » Tatiana Mac

    Other suggestions:

    • Use hidden attribute instead of .hidden. But, if you want to add transition then you can't use hidden attribute.
    • <input> must have an accessible name. Use aria-label to give an accessible name to the <input>.
    • Add the element for the error message on the HTML. After that, connect the <input> with it by adding aria-describedby to the <input>. Make sure to leave the element empty (<p></p>)
    • Add aria-live attribute to the error message so that it will get announced once the element gets filled with the error message.
    • Add the novalidate attribute with JavaScript. This way, if the JavaScript fails to load the users still get native HTML form validation.
    • The dashboard image is a decorative image. So, leave the alternative text empty.
    • Don't change the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements.
    • Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

    I hope this helps. Happy coding!

    Marked as helpful
    1
    Victor•290
    @cervantesdeveloperPosted almost 2 years ago

    @vanzasetia Than you so much, this is really helpful. I didn't know about that kind of media query, I will research about it

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @cervantesdeveloper

    You are welcome! I am glad I could help. 😄

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord