Survey Form - Material Design & Utility-First CSS - Review Requested

Please review my survey form for the beta curriculum’s Build a Survey Form project.

Project: https://camper-fcc.gitlab.io/survey-form/
GitLab Code: https://gitlab.com/camper-fcc/survey-form

Here are some details of my project:

Thank you for your time and input! :sunny:

That looks really nice on mobile! I might have to pick your brain on grid/flex, I’ve had nothing but trouble with mine. That favicon is pretty sweet too, nice job.

1 Like

I can’t spot any thing strange with your code (I would be surprised if I could though) and you coded with standards (or “standards”) in mind as usual, which is nice to see; and awesome work on the no-media queries responsive layout using CSS Grid and Flexbox!

I haven’t taken any design courses, and the follow comments are all aesthetics-related, so please take it with a grain of salt.

One thing a bit strange to me is the static header, mostly because it has no utility on a survey form and takes up a fair amount space (Medium on mobile is a pretty bad offender of this). :sweat:

Even in cases where a static header has utilities (such as one with a mini login component), its size is often reduced on scroll on pages that take screen estate seriously. If it wasn’t a deliberate design choice, perhaps you could consider other type of static navigation such as a scroll-to-top button, or an expandable menu, that has a non-intrusive alpha value (particularly on mobile; although it is worth noting that scroll-to-top may be kind of useless on mobile since most browsers already let you do that).

I think generally speaking the controls could use a bit more padding, it may be worthwhile consulting the Material Design (MD) specifications if you are keen on using more of it in your projects. Alternatively, many have already done the hard work of writing MD components libraries and I think you can (probably) simply change the colour scheme (it can certainly be done with material-ui, but it’s React based and it’s the only one I have used so far); this also has the advantage of quirks like on-hover border radius in some of your components (I’ve done the same thing before :sweat_smile:).

The combination of fonts doesn’t feel quite right to me, but I’m not sure how to articulate that; maybe it’s because some of the UI components is Vollkorn when I expect them to be Helvetica (sans-serif on mac). *Scratch head*

Looking forward to see your next project. :smile:

1 Like

@slamoureux and @honmanyau, thank you for the review!

@honmanyau, I added the fixed header to keep my fCC profile and GitLab code always visible. :wink: So, I agree with you about it not having utility as far as the page/form itself is concerned. I also agree that I should remove it.

Do you mean I should add padding to the radio buttons and checkboxes, or all of the controls? Do you have any examples you can share for reference?

Should I style them to be more like this: https://material-ui-next.com/demos/text-fields/ and drop the border radius? I have A LOT to learn about material design. :cold_sweat: It’s comprehensive and complicated. I can see why something like the material-ui library for React would be really helpful. Is using a framework or library the only way to practically and efficiently implement material design? Do you know of any tutorials, classes, or other resources (aside from the official specs) that might help to implement material design?

I think you’re right about the font combination. I’ll look into that further and make some changes.

Lastly, do you know of any well-designed form examples that don’t rely on JavaScript or CSS frameworks? I can think of many forms I’ve seen around the web, but I haven’t yet looked into them deeper to see if they’re coded with best practices and accessibility in mind.

Thanks again, @slamoureux and @honmanyau, for your time, patience, energy, and the reviews! :sunny:

That does make sense, particularly if you will want to have a potential employer or collaborator looking at your projects. There is probably room for some creative animated static navigation menu there. :smile:

Yup! If we take your submit button for example, I think there is too little top and bottom paddings!

If you are following the Material Design specs then I think it should indeed be closer to that. Having said that, and just like everything else design related, I think there is really no shoulds and shouldn’ts—as long as it’s suitable, functional, practical (both for the user and yourself), and aesthetically pleasing (mostly subjective), you’re (probably) allowed to do whatever you want. Also, it is important to keep in mind that using a UI library, particularly one that follows such specific guidelines like MD, also means that what you make will most likely end up looking very similar to a bunch of apps and websites out there.

I’m honestly not sure if it’s the most practical and efficient way to do it, but using a UI library seems to be the sensible thing to do! Reading through the specs and understanding it is one thing, implementing it is another; doing both sounds like serious work to me. :sweat_smile: It’s really not too different to using any other library in your projects.

I haven’t looked at anything beyond the specs and libraries for MD, so I don’t really have much to say on that; but the specs do go down to the specifics of font, margin/padding sizes… etc. and it’s not difficult to understand I think.

In any case, I think MD is great, but there are probably many more things that you would rather be spending your time on right now, unless you happen to be a designer and/or it’s a requirement that you understand MD.

Unfortunately not. :frowning: My interests took me somewhere else after I finished the back end projects and I never quite revisited it since then. The only thing I can say about implementing UI (from limited experience on a couple of personal projects), let alone properly, is that it’s a lot of work. I think this doesn’t mean that you shouldn’t roll your own UI, particularly if you need very specific things or that the design has to be unique. Ultimately, I think of it as a trade-off between getting things done quickly and having a unique look—just like how most people probably wouldn’t take a designer bag to a hiking trip, and most people wouldn’t take hiking backpack to a business dinner. :smile:

1 Like

@camper The form looks really nice on both desktop and mobile. Utility first CSS seems to turn conventional wisdom about class naming on its head.

It seems that your styling relies on the latest browser implementations since I had to upgrade my Chrome browser on desktop to get it to work.
When I first tried to adjust Chrome (63) to mobile width, the form did not switch to mobile view and the elements were overflowing to the right (see image). Anyways, it works well in Chrome 64, Firefox, Edge and even IE 11!

Overflowing on Chrome 63

1 Like