Surface Pro (2017) vs Surface Pro 4
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?
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.
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.
Sounds like you are having a hard time:)
Responsive design is not so bad and anyone with a basic knowledge of HTML/CSS can get going in a few hours. Although a mix can be and often is used effectively, there are two basic schools of thought:
A totally fluid site, which adapts to fill the screen size. Sounds to me as if that's what you have been trying and not a terrible approach but often best for simple sites, or you can make life hard for yourself, lose control on layout detail and more complex elements may not be so pretty.
Using media queries, which are explained here:
This gives more control over layout detail at specific widths. Also as I think is mentioned, a decent way to hack an old site to be usable on pads and mobiles. That can be a pretty quick process and something most sites should be doing. The average small business site can be up and running in 3 to 5 hours, may not be perfect but okay for a while and better than 20% of traffic just bouncing.
You can also use a responsive grid as a base, which is a good idea. This one was okay but seems to be down, possibly gone:
The github links are still there which might help, although I know Github are down for maintenance tonight. If not, fish round for a copy, or use one of the many others:
Whatever suits your style, coding preferences, or typical base widths.
Media queries won't work on most versions of IE but then how many devices running old IE need a responsive site. No problem at all on Android, Chrome, Firefox, Safari, Opera, latest IE etc.
If you for some reason you are keen on using a percentage base, something like this will give you a start:
or more ideas at:
Whether you choose a pixel based, or percentage based grid, you can still use media queries for fine control. Setting fonts, headers, margins, padding etc in pixels, according to how the site reacts at different screen widths. You can give everyone a fairly precise layout with minimal effort.
A quick way to build is just open the design in something like Chrome and resize the window vertically, so you see what happens at the break points. Won't be pixel perfect for an iphone etc. but close and you can tweak afterwards.
Thanks for your informative post Ansolan.
But to be honest, I'm (we're) fully aware of all the stuff you've mentioned.
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.
The annoying thing is, if every browser complied with standards........
Always been the same unfortunately and agree that recent standards not supported by some have made matters a little worse.
Also agree that the more complex the site, the harder the task but don't think you can accomplish a really good job for that type of site without using media queries. They are fairly wide ranging, if you like to work in a particular way for example you can use @media screen and (min-width:25em) not just pixels. There are a wide range of possibilities even for established media queries:
let alone more to come but still the problem you mentioned for both, browser support.
Out of interest, try the sites listed here, click through to a few examples:
This sort of thing might suit you, no idea really:
I'm not going to say which I think the best site on there is:)
Sure you will eventually find solutions you are looking for, there or somewhere else. Have a good Christmas.
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?
A simple way of quick testing is just resize the browser window on a decent modern browser. Next step up might be one of many online emulators e.g.
More ideas here:
There is software around you can download and manufacturers test facilities but at the end of the day, testing on real devices is the way if you are a perfectionist.
Incidentally, noticed that Dave Gamache has his site up again:
A solid approach for a range of sites, or a few more options at:
As a background to grids and design in general, try:
This thread is now locked and can not be replied to.