I am new to UI design- was wondering what the best way to deal with different screen resolutions is when positioning various HTML elements? I thought using %ages would be the way forward but turns out it isn't!
css stylesheet based on the rule (e.g. "If the resolution is less than 1280px wide, load the small_resolution. css") file; by writing the rule directly in the usual. css file (e.g. "If the resolution is less than 1280px wide, load the CSS properties below").
In other words, CSS resolution is the main measure that affects modern responsive UI development. But device resolution is still important. It determines how images and videos are displayed. Due to the screen's high pixel count, these media can be provided at higher density, which creates a sharper view.
Have a read here: http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
You'd be most interested in @media
queries, particularly max-width
and min-device-width
You should take a look at liquid layouts. This deals with an expanding or contracting web page based on a users browser size -
http://www.maxdesign.com.au/articles/liquid/
http://www.alistapart.com/articles/negativemargins/
% is the correct way. If you start using Javascript to detect resolution and adjust design based on that your code is going to turn into tasty meat spaghetti very quickly.
Back in the day I was always told to design with a minimum resolution of 800x600, but nowadays I always go by 1024x768 as a minimum resolution.
Without more specifics about designs, we can't really help more I'm afraid!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With