I just finished the beta of my survey form, I would love any feedback before I continue tweaking it.
It think it would look better if the form section was centered withing the white container. Currently, it is shifted to the right.
i’ve tried that in a few different ways with moderate success. Should I create a wrapper class with display grid to center the form?
justify-content: center on the form element will get you closer, but I would have to mess it some more,.
I created a div around my form element with a flexbox class and tried centering it with justify and align content to center and nothing changed, I thought that would have done the trick?
@slamoureux This is excellent design! All of the fCC tests pass, I don’t see any HTML or CSS validation errors, and you have all of the form elements properly labeled and grouped. Once you get this to be fully responsive for all viewport widths, this will be perfect for your portfolio.
Color Contrast: The only error I see in terms of accessibility is the color of the text in contrast to the background color of the submit button. The current ratio is 3.95:1 and it’s supposed to be 4.5:1 or higher.
Mobile-First Design: To ensure sites are fully responsive, I like to use the mobile-first design approach. By designing the 320px viewport width first, I only have to add on to that in order to change the way it looks on wider viewports, rather than worry about fitting content into smaller viewports. I find that to be more intuitive than starting at the laptop/desktop viewport size.
Accessibility: I don’t see any accessibility issues with your code, but I just came across this helpful post about the importance of accessibility and thought you may be interested: How to Make Sure Your Website Works for All Users. It goes over the basics, but there are some helpful and simple tips in there that we can use for our projects going forward. There’s also this accessibility checklist (I got this from the accessibility link above) that I’ll likely be using as well.
CSS Grid and Flexbox: As for CSS Grid, I recommend Wes Bos’ recent free video course for a quick and comprehensive introduction. This is the resource I used to learn CSS Grid and will likely refer back to the videos and example code as I continue to use CSS Grid in the future. For Flexbox, I used Flexbox Zombies.
I think this is great work!
Thank you for all of the helpful advice I definitely learned the hard way about starting from 320px and then going up. I will be doing this for every site after this!
CSS Grid! Woohoo!
That’s what I’ve been trying to make happen on this project.
Cuz I’m trying to follow @camper’s advice about mobile-first.
I’m thinking the mobile version will require the labels to go atop the input fields, and the fields will be less wide. Then the media query(ies) are written for the laptop/desktop size(s) and that’s when Grid gets implemented and stuff goes side-by-side again.
the way the form-title and the submit-button mirror each other and frame-out the form!
A few questions/suggestions based on viewing the CodePen version:
- Did you intend for all the light saber colors to be Red? (maybe this is a Star Wars thing?)
- How Dark are You – Is this a question? Does it need a question mark?
- The font-family is sans. Did you mean for it to be sans-serif?
- The radio buttons and checkboxes don’t jive (line-up) horizontally even though there are 3 in both. Maybe this is by design?
- If you add
padding: 0 5px;to .radio-legend and .checkbox-legend, you might like how it looks.
- Would it make sense to reduce the image size maybe 20%? – so that the image and caption are more likely to stay “above the fold”.
Excellent job. Keep tweaking it – This will be a portfolio piece to be proud of!
Thank you for all the great feedback! I just finished making it mobile responsive and I used all of your tips. The red color choices were done on purpose along with the offset labels and buttons/checkboxes. Feels nice to finally be done besides minor tweaks, hated this project
Stephan, I want you — to settle back and admire your galactic work!
You mentioned a few tweaks still needed. I noticed two things:
- How Dark Are You? - In the small view, the checkbox items break strangely.
(This is an issue I’m also dealing with.)
- In the smaller view(s), perhaps reduce the space between
<input>for each pair.
I’m dilly-dallying on this one, too. Maybe because it’s not a very exciting project, but forms are a BIG part of customer contact, customer input, etc. So I need to just behave properly and get 'er done.
I’ve watched a few tutorials on making forms responsive and I noticed the instructors don’t go that extra bit to make the form accessible with the additional
<label for=""> tied to
<input id="">, and
<fieldset>, etc. I’m glad this cohort is going the extra bit on all of our projects.
I mentioned “above the fold” in the last message (a term used for newspapers, right?). Funny coincidence that I was watching a video by Jen Simmons (master of CSS; Design Advocate at Mozilla) and she addressed this very issue. She said that now it’s important to shift our thinking to what’s available in the viewport as the user moves through the site versus what the user sees only upon site-opening. In my head, this becomes “creating micro experiences”, but maybe I’m being too poetic! Anyway, here’s the link to that tut:
Flexibility & The Fold – new possibilities with CSS Grid
Do you have any other resources for the fold? I would love to learn how to create something like this where the green background portion stays above the fold on every viewport size.
Thanks for the follow on Twitter!
Regarding your question:
I don’t have more “above the fold” resources bookmarked, but I remembered there was a very cool site posted by @Syknapse on Twitter a few months back. https://syknapse.github.io/Tychos-Supernova/
Plus I got lots of hits on Google seraching for “above the fold” design.
Hope these ideas help you.
When you get a chance, please look at my Survey Form (which I just added to the list). Suggestions welcome!
Enjoy your weekend!