Webpage Resize moves content

  Mort105 10:03 16 Dec 2012
Locked

Hi. I have a web page that looks ok when the window is full screen but when I resize the content is moved making the page look a mess.

How do I make the page content static and implement scroll bars?

  Mort105 15:23 19 Dec 2012

Ok we'll I've made the width of the outer container fixed to 1100, not ideal but seems to be better than the alternative....

  LastChip 11:35 22 Dec 2012

Fluid layouts are in their infancy and browser cooperation is iffy to say the least - IE (as always) being the worst of the lot.

It's a very complex and specialised type of web coding, that's takes a lot of patience and testing to get right.

Frankly, you could write a book on it and not be able to cover every eventuality.

The main problem is everything has to be set as variables - mostly percentages, em's and the like and often elements floated within the structure. If that structure changes, then those elements that are floated will "float" to the next available space determined by the hierarchy.

You can potentially use javascript to overcome some of these problems. But what happens if the user has javascript turned off? I'll tell you, it's a mess! So there's no elegant degrading.

I've actually been involved recently in attempting to develop a website in this manner with a joint (very talented) developer and I can tell you, between us, we've spent hundreds of hours and still not found the holy grail for what we want to achieve.

The sites you see on the web that will behave in this manner are almost always "Flash" sites, which do nothing for SEO.

So if you find a quick and simple answer, post it here and I'll buy you a pint!

Your solution of a fixed width is probably the most sensible option, though 1100 is an odd size.

  LastChip 14:33 23 Dec 2012

Thanks for your informative post Ansolan.

But to be honest, I'm (we're) fully aware of all the stuff you've mentioned.

Our challenge was to create a single site, (for maintenance purposes) that would render no matter what the screen size, resolution or ratio it was using (including mobiles). And whether the user had javascript turned off, which means some of the fixes for IE couldn't be used.

Imagine a three column site with three images horizontally across and not only does the site need to be fluid, but the individual images as well (we actually cracked that one purely with css code). But that's only one of the many problems you face when presented with a challenge for a site with more than 3000 pages to render correctly.

Actually, setting pixel based sizes practically destroys a true fluid (responsive) layout, as pixels are a fixed measurement - last thing you need. Strangely, when declaring em's as a size for text (which should conform with variables), it doesn't respond how you would expect.

@media queries can be used, but unless you use a ridiculous amount, tend to be clumpy when changing site resolutions and that wasn't part of the brief (but ultimately, we may have to resort to that). Another potential fix would be to use php server side, to adjust certain elements, when serving the pages. That's a possibility we're actively looking at.

Then there's the question of how to gracefully degrade the site into a different (but still a clearly recognisable corporate image) for mobiles. As obviously a site made for a 1920px wide-screen, would appear somewhat differently on a mobile and even differently between different mobile manufacturers. With Galaxy tabs and ipads in the mix, you create even more variations.

Throw that all together and then start testing in multiple browsers with different levels of compliance and it becomes apparent very quickly, it's no easy task.

So while I agree with you simple sites can now be made fluid, complex ones are a different story. At the moment, it's still very much work in progress!

The annoying thing is, if every browser complied with standards instead of trying to monopolise the market, we could produce something that would be truly cross-browser compliant and be a much better user experience. Because ultimately, it's the user that is the most important part of the equation.

Never-the-less, thanks for your input.

  Mort105 10:03 24 Dec 2012

Thanks for keeping this going, not checked back for a while but it looks like I need to do more reading (thanks for the links).

I haven't tested this on a mobile yet as it's only living on my home PC at the minute.

I don't suppose there is a good mobile emulator that would allow you to test how a page would look on any given mobile screen?

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Huawei Mate 20 Pro review: In-depth hands-on

34 tips for turning your art and graphics into amazing animated GIFs

iPhone XR release date, price & specs

OnePlus 6T : date de sortie, prix et autres rumeurs