Survey-form insight

Hey everyone finished the second project a few days ago and would like to ask for your feedback.

Link for the site : https://codepen.io/stravse/full/wvqQGJr

I do have a question for Pros out there when making a website do you usually design it for mobile first then do desktop? or desktop and then mobile? what is the smallest screen do you usually try and make the website work ? How about the largest screen size? What software do you use for checking things for mobile and desktop? Are there any extensions in VScode that might help me?

2 Likes

Yes, always. My media queries are always based on min-width using rem units.

I usually just narrow my browser as skinny as it will go (which is around 430px). At that narrow width your styling is going to be so minimal and single column that it will look good at even narrower widths. But if you need to narrow even further you can use the browser’s dev tools responsive design mode. The main issue you’ll run into with very narrow widths is long words that overflow their containers, but you can use CSS to force them to line break.

I’ve got dual monitors side-by-side so I can make it pretty wide :slight_smile: Seriously, you usually don’t want content to go too wide because long line lengths are hard to read. I almost always put a max width (in rem units) on things so that nothing gets too wide. For elements with lots of text I usually stay around 45 rem max width. I almost always use rem units for widths, that way my pages are responsive to both changes in view port width AND changes in font size. If you use max widths to keep things from getting too wide then you basically don’t have to worry about very wide view ports because your content will never get that wide in the first place.

Nothing special, just narrow/widen your browser and see what happens. There is no other special magic going on here. Devices have different view port widths and you just have to make sure your page looks good and is functional at various widths. As mentioned above, you can use the browser’s responsive design mode if you need to go real narrow. Also, I use Firefox’s text-only zoom mode to test responsiveness to changes in text size, but a lot of developer’s feel you don’t need to do this because page zoom is an acceptable and accessible alternative. Personally, I like the challenge of making things responsive to text size and I personally have my default font size set bigger than the standard browser default so I notice pages that aren’t truly responsive to text size.

Hey man Thanks for the long reply.
Currently just playing around with the browser dev tools and is amazed with the amount of preset screen dimensions for mobile. Will try and break my stuff and tweak it so I can make it responsive enough.

I will keep in mind to generally use rem for most of my stuff. Do you have any specific mobile screen size to build first?

Mobile then go bigger to get more and more into detail.

I don’t worry about specific screen sizes because I use rem units for almost all of my widths, including media queries. I just start with my browser as narrow as it can go and then slowly widen it to make sure that everything continues to look good as it gets wider. I know most of the advice you find out there about responsiveness will give you specific px widths to design for but I don’t do that. I literally never use px in my media queries. I let the content dictated the break points (in rem) instead of being concerned about arbitrary px widths.

Welcome to the forums @stravse. Your page looks good. Something to revisit;

  • Run your HTML code through the W3C validator.
    • There is an HTML syntax/coding error you should be aware of and address.
      Since copy/paste from codepen you can ignore the first warning and first two errors.

Yep, saw the error and a quick google search helped me made a proper placeholder for the select element. Thanks for the heads up.