adjusting html tags to different screen size

[castajiz_2]

I developed a website actually a simulation of a program on my 17.3 inch laptop. When I come to another machine for example a 15 inch laptop witch has a different screen size(diagonal) my html tags won't compensate, so I have to scroll through the website to see all my html tags(for example boxes etc...) Is it because i applied absolute positioning and should I change it to relative or is there something else that I should take care and be aware?

[JorgeM]

If you want your site to be responsive to different screen sizes you may want to look at using media queries and read up on "responsive web design".

But I'd say that it all depends.. Say if the site is going to be accessed by traditional pcs where you know that the min width of th user's display is 1024px, you could just wrap all of your content in a div and set the width to something close to that number and the margin to { 0 auto }. This will then center the div. from there you could basically use all of the relative and absolute positioning to your heart's content within that div and your users won't have to scroll to the right to see content.

Of course this approach limits you and is not mobile client friendly but again I think it depends. Not every site needs to incorporate the responsive web design.

Web designing is not my #1 strength and the sites I build are really business type apps, sort of like desktop apps that are ported to the web so someone else may provide a different perspective on this topic.

[castajiz_2]

Thank you for all of your responses, you really helped a lot of time. I ll see what I can do, I m gonna take a look at responsive web design...

[diafol]

I'm with Jorge here. My experiences are pretty similar too. I have had experience with using frameworks like Twitter Bootstrap which provide an easy way into 'responsive' - although it's a sledgehammer to crack a nut if you download the full stack and only use the responsive functionality. Another issue with frameworks is that they tend to make all sites look the same, unless you get creative with your css.

If your perceived usage at this point is 'big screens', it may not stay that way. You may encounter a (sudden) movement towards tablets by a significant percentage of your users, e.g. suppose you have a niche market, e.g. education (teachers), then 5 years ago you probably would have been safe at the 1024 end of things. Now a large proportion (majority even?) may be accessing all sites with tablets / iPads. So over a short-ish period of time, user's habits and preferred devices have changed. Obviously, those with responsive sites, just sit back and say, "so what", having done all the grunt work previously. Those of us without responsive sites are now scratching our heads and thinking, do I try to retro-fit, shoe-horn or completely re-design?

The fixed width and 0/auto margin is a neat solution, but be aware that there are many variations on a theme that are possible with this approach. Just a simple "min-width" (and "max-width") and use of rems/ems and % units instead of fixed px in your css can make all the difference. Floated items or "inline-block" items can be made to "wrap around" or "drop" effectively, usually without any need for javascript to be involved.

But as Jorge says, look up media queries and also 'breakpoints'. You will probably never create a one-stop site that looks perfect at every resolution / screen width, but there are recognised 'magic' breakpoints that allow you to provide more that adequate provision at all sizes. Well that's my 2p.

BTW - when you say "tags won't compensate", your HTML should not dictate layout - ever. No inline styling or layout attributes/properties, no <center> or any of that stuff - everything should be contained within a CSS file or at the very least a head <style> block. JS should be avoided wherever possible when dealing with layout - it's usually not required and just adds complexity through fragmentation of responsibility/roles.