I recently wrote about how to build a variable width website. I’m gradually converting all of my sites to variable width and I did another one this week, but I came across some new problems.
Here’s what they were and how I fixed them.
The site I converted this week uses images in a number of reasonably short paragraphs. The placing of the images is important because they serve to emphasise the paragraph’s main point.
As I mentioned here you need to keep in mind that the number of lines in a paragraph will change when you’re using a variable width setting. The wider the page width, the longer the lines will be.
This means the number of lines in a paragraph will tend to reduce as the page gets wider.
So the first thing I did was to make sure that all the images I was using were placed right at the beginning of the paragraph they related to. This is because the number of lines will reduce from the bottom upwards.
If I left an image placed half way down or near the bottom of its paragraph it’s conceivable that on a very wide screen it could end up sitting in the next paragraph as well as the one to which it’s relevant, which would reduce its impact.
Moving these images meant going through my pages and cutting and re-pasting the links for many of them. Nothing too difficult about that – just boring!
But when I tested my site I still found images becoming misplaced, even on my desktop screen, which is by no means the widest screen out there.
After scratching my head for a while I came to the conclusion that the only thing I could do would be to limit the width to which my site could expand.
So I tried different widths and tested each page, and I eventually arrived at these parameters:
- Width: 80%; (Means that the content area will expand to 80% of the width of the screen it’s being viewed on as long as the space is there).
- Min-width: 850px; (This is the minimum width the pages on this site can shrink to on small screens and still display correctly. For really small screens the user will have no option but to scroll right when necessary).
- Max-width: 1000 px. (This is the maximum width the pages on this site can expand to before images start becoming misplaced).
It’s not ideal as I’d have preferred a wider range of expansion/contraction. But the site will still look a heck of a lot better to someone viewing it on a wide screen than it would have done when the width was fixed at 850px.