A responsive(?) Survey Form

Code Feedback
1

Took me 2 days to figure out how to make a webpage responsive. I’m not sure if this can pass as “responsive” but as far as I have played around with it, it somehow does its thing. Will probably apply the same thing with my tribute page after this one or maybe move on to the next project. Anyway, I hope you guys find this helpful and appealing hahaha.

Here is the Survey Form I made.

2

It’s responsive in heart, but not in hand!

Beside the layout, I think the colours you used as foreground colour has not enough contrast with background color. black text colour is not very readable over dark blue colour.

I suggest you set the white for form with black for text. and for other text/ements outer the form, use the same blue colour with white text colour, check:

image
image1361×603 69.6 KB

Now about your layout, in desktop it looks good, but for mobile it has a little too much margin/padding, so you are kind of wasting some space becasue of that, check:

image
image473×875 88.3 KB

As you see the main form has too much waste space at the both left and right sides.

for mobile I suggest you followings:

  • Let the form fit with the width, also remove the border and border-radius to get maximum space for content
  • Add some more line-height, and let the input elements big enough to select easily
  • Centering elements out of the form could mek it better
  • In mobile try not override the font-size using absolute units as you did. Not overriding the default font-size is good too, becasue users could control default font-size with their browser settings(e.g. zoom)

Check something like following:

image
image475×765 76.8 KB

What do you think? it’s more responsive?!

In mobile remember, space is the first think you should think about. Using maximum space you get from screen, also applying enough space between elements, becasue it’s really hard to perform a precious point tap by fingers.

Use @media queries to control the element in different screen size, beside you may do some trick to not use them too.

I also realized for some element(example the email and name inputs) you specified absolute constant value(200px), this is not good! It’;s true 200px might not break 99% all the time, but using relative units over absolute units are recommended.

Good stuffs:

  • You set placeholders for input elements, very good! (but you forgot to set for the last textarea)
  • Informing user about required fields, cool.

Non-layout issues:

  • radio and checkbox elements come with no associated label linking, this is bad. specially for mobile. labels are so helpful to let user select the radio/checkbox using associated label text.

Suggestions:

  • Get some help of css, and make the radio and checkbox elements (the circle and square) larger for more easier select for mobile devices specially, but not critical.
  • Add horizontal line between each section in the form (example: after and before radio button group)

Like to see more responsive work from you dude, keep goin on great work, never give up and back and ask if you face with any issue. Also study hard, and be patient.

Happy programming

1 Like
3

You’ve made it look so much better and it’s very easy on the eyes! Thank you so much for your very constructive feedback @NULL_dev. This really fired me up and I’m even more motivated now! Thanks for pointing out all the details that where I did bad, at least now I’ll know where to start to pick up. I will be doing the next FCC project and will keep your pointers in mind this time, and hopefully along the way, I’ll backtrack to the previous projects and apply what I’ll learn. Again, thank you so much!! This really kicked me in the ass hahahah