I was working on my new web design on my notebook with 1600×900. After I done all responsive css tweaks etc, I found out that it is not enough… my design doenst look good on users most used sceen resolution 1366×768, everything looks “too big”… images, spacing/negative space, typography etc.

So have I made a mistake in an starting point? Should I use 1366×768 as my screen resolution and to define max width, because of image sizes? Or design in max width size? Im confused 🙂

Which is your screen resolution / starting width or workflow for responsive theme design?
Thanks you

You're thinking of Responsive Design like one used to think when we worked with fixed width designs. In modern web design we no longer think of most common resolutions. The reason being there are just way too many to consider. That's the whole point of Responsive Design to make your web pages work no matter what screen size its being viewed on. To make then resolution independent.

I appreciate that this can be quite awkward to get your head around especially if you're coming from a print or graphics background where you always have a fixed size to work with.

In terms of approach there are two ways you can work. Deal with the desktop size first and then adjust your design as the screen size comes down or the more common approach these days is what's known as mobile first. This is exactly what it says on the tin. Consider your mobile size first. The phone in portrait then landscape then tablets etc. Don't think in terms of resolution though just start out making your design work at a typical phone size and then just adjust your design with CSS media queries as you have more screen real estate to work with. This typically means adjusting your navigation, perhaps adding a side bar etc but that's to massively simplify things.

Hope that helps you. Just try your best to get away from thinking in terms of resolution as this will just give you a head ache.