Here is beautiful registration page that i have created. Kindly review and provide feedback.
- You need
<label>s for your inputs. Placeholder text is not a replacement for them. This is major accessibility issue. - As I increase the text size the Submit button text disappears toward the right side of the button.
- Do not use ‘vh’ or ‘vw’ units to set font size. The user should be able to increase the font size without having to change the height/width of the browser window.-
- The text ‘sign up and get free present’ is very small and is not dark enough (does not have enough color contrast with the white background).
1 Like
I dint get the third point, arnt we suppose to use vw to adjust the font dynamically ?
Is this a requirement for the project? Sorry, I haven’t done these projects so I don’t always know the requirements.
If you are going to use vh or vw for font sizes then they need to be really big. Right now the size for ‘sign up and get free present’ is too small, and that is at my normal browser width. As I narrow my browser it becomes ridiculously small. I have to widen my browser a whole lot before it becomes readable. So in this case you would need to make the value much bigger than 1.
But in general, using viewport units for font size is a bad idea. The goal of a responsive web page should be to ‘respond’ nicely to whatever device the user is viewing your page with, and this would include whatever text size the user is viewing your page with. By using viewport units you are preventing the user from using the text size they need to view your page. The only way they can make the text size bigger is to widen the browser width and it may not be possible to widen it far enough to make it readable.