What is the minimum width and aspect ratio that most websites support? After 568px it gets quite easy to support, but the difficulty below that is absurd. At 320x it's almost the effort of making another site, specially when background images are involved.
Here's a little information about common screen sizes:
* World Wide Web Consortium: https://www.w3schools.com/browsers/browsers_display.asp.
* CSS Tricks: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Generally I will design down to around 360px wide, which works for most android devices I've tested on (portrait-mode). IIRC 320px is for apple devices (also portrait mode). But really the important thing to consider is your target audience. If you have analytics, take a look at what devices are being used the most then, if necessary, create media queries to cater to those sizes.
For future projects, you may also consider using a framework like Twitter Bootstrap or Bulma to create responsive layouts. They add a bit of overhead, but are really useful for creating rapid prototypes that can work in variety of sizes. Bootstrap is fairly heavy (though you can customize your download), where Bulma is a bit more bare bones.
In media queries i had to set everything to !important in order for the mobile-version of the website to work. Is this common practice?
Hmm, not usually. Try re-ordering your styles? I will usually isolate my media queries to their own stylesheet, or at the very least put them at the very bottom of my main CSS document (after all the main desktop styles), with a comment mentioning what sizes and sections they are for.
Is it a problem if i don't use "labels" in an input field? Instead use just placeholder text.
You can technically get by without them, but it is bad for accessibility. Screen readers don't see placeholder text, they need the label. Instead you would create a class to apply to the label that would still allow screenreaders to access the text:
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
I had quite a bit of trouble in image sizing, how do people usually choose images for a responsive website? Is it one huge image or a bunch of images for each resolution? What i did was look for an aspect ratio that is common enough (16:9), then the images would trickle down properly. For thumbnails i had to manually resize them though, however I'm not sure if that's common practice.
It's almost never good to have multiples of one image if you can help it. Each new image is a new HTTP request, which slows down your load time -- and for images that aren't even seen by the user depending on their screen size, that's worse. If at all possible, just use one.
I have to say that working with images is one of the least fun parts of the job, as there are a million ways to handle them depending on what you are doing. Also clients can be persnickety about how images crop at various sizes, and sometimes there just isn't a good fix for that if you don't want a sidescroll lol. You'll figure it out as you get more experience though.
Design wise, I think this feels better than your first attempt, much more cohesive. Some notes:
This is just be me being stupid, I'm 99% sure, but it wasn't immediately apparent to me that you needed to scroll down to see the rest of the page. I saw the yellow bar the bottom and initially assumed it was a slider timer, and the background image was going to change. I might suggest either adding in a small arrow icon at the bottom of the header section, or perhaps shortening the height of the header so the user can see more of the yellow section below.
The letter-spacing on the body text feels a bit too wide. Usually I like ultra-wide kerning for headlines only; in body text it feels like you're trying to provide e m p h a s i s t o a l l t h e t e x t.
And finally, a general note on hierarchy: I know you are probably doing this just to learn the more technical side, but try to consider what information a client would actually want if this were a real site: "introduction/about my product, product photography, sign up, navigation, testimonials, contact info" etc etc. Then think about in what order the end user would want to access that information if they were visiting the site for the first time. The more important the information, the higher up on the page it should be.
For example, on your cupcake site, you have the about us text at the top, which is good, but is it more important than the actual sign up for the service? Should the "about" blurb come before or after the signup? One could make an argument for both options, but you should have a rationale for your design choice either way. Consider questions like that when designing and developing and you'll be miles ahead of most newbies.
Hope that was helpful and not just a wall of text? :p
