My survey form about coffee - Please give your comments

Hi everyone!

I finished my second project in FCC - survey form. It passed all the tests and I worked really hard on responsiveness on all devices but I can’t find what else I can do about accessibility. So if you have any suggestions please let me know.
Thank you in advance!

This is my Pen

P.S. How do you put the links to CodePen in here and it looks like a snippet and not just like a link? I see it in all the topics here but couldn’t find an option.

7 Likes

Great work @dieplumpe, nice colors(they compliment each other), Design is simple, user friendly and responsive, One thing i think you should edit is the placeholders, maybe grey them out, reduce the opacity or just align the text center, Otherwise you nailed it.

Happy Coding

1 Like

@skyeparagon I changed opacity as you advised. Thank you!
I just afraid that it might create troubles for accessibility. It’s not so contrast now like they were before.

@dieplumpe The placeholder is bold enough to counter that I think, Though you can use “letter-spacing” to add a little space between each letter.

2 Likes

What do you think? can I submit the form?

I think your form looks good. The only issue that I think you have to change is the typo for survey. Other than that, I feel like the rest of the comments would be design suggestions. So you can decide which style changes you want to do.

Usually I just post the link. I don’t include it with other text like here is my pen. So you could try that approach.

Hopefully that helps!

1 Like

Thank you! It’s so embarrassing that I didn’t see this typo :relieved:

1 Like

No worries, you’re good. I think you are ready to move onto the next project.

Happy coding!

1 Like

Thank you again! Yes, I’ll start to work on the product page skeleton :slightly_smiling_face:

1 Like

You mentioned accessibility so I’ll point out a few minor issues:

  • The <select> needs a label. Since you have labels on everything else I’m assuming this is just an oversight.
  • You should probably wrap the content in a <main>.
  • You are using the browser’s default keyboard focus indicator for the inputs/button. Some browsers are better than others. Chrome looks pretty good but on Firefox some of them don’t show up very well. My suggestion would be to style the CSS outline property for all of them so that they stand out and look the same for all browsers.
  • At bigger text sizes the checkbox/radio button content starts to overlap its input. Also with large text, at certain browser widths the ‘Submit Your Answers’ button breaks out of the button.

I’m being pretty picky above because overall your form looks very nice and so there aren’t many problems to mention. Nice job.

1 Like

Your form looks good @dieplumpe. Some things to revisit;

  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • There’s a horizontal scrollbar on smaller screens.
  • I noticed you had the following property: value; pair in the body selector, font-weight: bold; but the text does not show as bold.
    • This is because when you imported the font you only chose to select the normal weight so the browser does not have a bold weight. If you’d like have a bold weight then you should select it also. The Monserrat font has quite a few weights so you should select the normal weight (400) and the bold (700). Something like;
      @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
1 Like

@Roma, @bbsmooth thank you for your comments! I’ll try to fix all that you mentioned.

But I have a problem to see the problems in responsiveness that you mentioned. When I made this page I controlled it on my mobile phone, tablet and laptop (changing size of the screen, zooming it). And there are no breaks or horizontal scrollbars on any of my devices. Can you please give me a bit of advice on how I can see these problems that you mentioned (cause my devices don’t show them to me)?
Thank you in advance!

@dieplumpe, the way I see the scrollbar is to grab the right edge of the browser and pull it as far right as possible.
You can also open up developer tools and click on the little phone icon

You’re probably familiar with the box methodology. Everything you see on a webpage is just a box you need to move around and resize, things will start to click.
Use the following to outline every element to see what’s going on if having trouble with something. In your CSS add the following at the top;

* {
  border: solid 1px red;
}

You’ll see where your checkboxes extend out of the container.

1 Like

Hi @dieplumpe. I am using ‘text only’ zoom to increase the text size on the page. The easiest way to do this is to use Firefox. Go to the View -> Zoom menu and activate ‘Text Zoom Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. At some point you will see the content for the radio buttons/check boxes start overlapping their inputs.

And like @Roma, I am also seeing a horizontal scroll bar on narrower view ports. Start with your browser wide and then begin narrowing it. At some point the scroll bar will show up. I believe it has to do with the CSS grid you are using for the check boxes. Put a temporary background color on the fieldset and you’ll see that it is sticking out past the form container on the right.

2 Likes

@dieplumpe I think you are ready for the next project! That looks really good. It is responsive, passes tests, etc. Good job. You really have a knack for design that I do not have! Happy Coding! :smile:

1 Like

It’s not quite responsive and two of us are working with her to resolve.

1 Like

I noticed the one header. My bad on that. Other than that everything else is responsive. Sorry.

1 Like

@bbsmooth @Roma I did what I can. My devices still show that it’s all OK, no overlapping, no breaks (but when I change the size on the laptop I change it for all the page not only for text, isn’t it more logic? + Idk if I actually have this function in Chrome). I get rid of scrollbar finaly :cry:

@landon.h.lloyd you said you noticed header, what’s wrong with it? Sorry for asking, but I can’t see anything with the header. It shows ok to me, that is why I’m asking. maybe your devices is just better than mine

@dieplumpe Just when I sized it down to mobile view. I couldn’t see it 100%.

There are two ways to increase the size of the text, using page zoom, which enlarges everything on the page, and using text only zoom, which enlarges only the text. A lot of people use page zoom, and I believe it is the default for most browsers. But for accessibility reasons, some people use text only zoom. I believe a lot of mobile devices allow you to increase just the text size. And of course most browsers allow you to do this too (Firefox has it built in, Chrome/Edge have extensions you can add).

I can tell you that I use text only zoom all the time. Usually when you use page zoom you’ll get a horizontal scroll bar rather quickly because everything is being enlarged. With text only zoom, if the developer has made the page responsive to changes in text size, then you don’t get a horizontal scroll bar, which is much less annoying. And for whatever reason a lot of sites like to set their default text size very small, so I am constantly enlarging the text size manually (and Firefox remembers where I have it set for each site, so it automatically shows the site at the increased text size I want).

Basically, as a developer, you don’t really have control over the text size the user is viewing your page at (yes, there are ways to control this but you probably don’t want to do that because it kills accessibility). So you want to try and make sure that your page looks good at whatever text size they are using.

But other than this issue, your page is very nice and good job on getting rid of the horizontal scroll bar. I do encourage you though to test anything you create at different text sizes. People like me, who are getting on in age and their eyesight isn’t as good as it used to be, will appreciate it :slight_smile:

2 Likes