Survey Form Challenge - responsive web design

Code Feedback
1

Hello,

Today, I completed the survey form challenge. I appreciate your comments and suggestions.
Here’s the link to my project: https://priscillacodes.github.io/surveyform/

Priscilla

1 Like
2

Hello, there is not much to say, it is quite a nice design, it has a suitable responsive design. The only thing that should be seen is the contrast that the title makes with the background when the screen is small. This is how it looks to me:

Screenshot_20200711-162642
Screenshot_20200711-1626421080×2160 480 KB

1 Like
3

Thanks Emmavz! Oh nice catch! I’ll look to improve that so the readability is better.

4

tiny suggestion: add resize: vertical; to textarea style prevent user from being able to expand the box beyond form size.

1 Like
5

This is quite nice, not a lot to pick on, just a few minor things:

  • Believe it or not, but the white text on the red button at the bottom does not quite have enough color contrast to be accessible. You can check color contrast at https://webaim.org/resources/contrastchecker.
  • Using FF/Chrome I am getting a horizontal scroll bar no matter what width I make the browser. The amount of scroll is very small so it’s not really detracting from the UI but if you are a perfectionist like me then it is annoying :slight_smile:
  • The select list/textarea need <label>s (just change the current <p> above each one to a <label>).
  • The placeholder text on the three inputs at the top should provide an example of the type of input you want, not just repeat the label.
  • Set the height on the Submit button in ‘em’ instead of ‘px’. At very large text sizes the ‘Submit’ breaks out of the button. Using ‘em’ allows the button to grow accordingly.
  • I think the background color on the #survey-form might need to be a little more opaque. It can sometimes be hard to read the content over parts of the background image (depending on how wide you have the browser). Turning the opacity up to 0.837 seems to make it a lot better for me (and it still maintains enough color contrast with the dark text).
  • Your form is definitely responsive to changes in the view port width. If you want to take it an extra step then consider making it more responsive to increases in the text size. For example, narrow your browser as far as it will go and then start increasing the text size. You might want to lose the side padding on the form so that you have more horizontal room to display the content. Also, consider using ‘em’ values for the break points instead of ‘px’ which will automatically make your form responsive to both changes in width and text size.

P.S. If you don’t know how to manually change the text size, using Firefox, go to the View->Zoom menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button.

1 Like
6

Thanks bbsmooth! This is very thorough and helpful!
I’ll work on the improvements you suggested :smiley: