Recode or fix?

HTML & CSS
1

Just picked up a WordPress site and have done a bunch of changes upgrades. The only thing is, I have to widen the left column and whoever designed it set it up with [URL=“http://76.12.159.43/wp-content/themes/oops50/images/structure/bkgd-main.jpg”]fixed image background and it makes it impossible to change the width of the columns. The immediate goal is to make the left column wider (to allow larger Ads) but the overall goal is to just make it right.

The reason I’m posting it to the CSS forum is I’d love your feedback about whether you’d recommend fixing it or just starting from scratch and redoing the whole CSS. It seems to me the easiest thing would be to redo the entire CSS but wanted to run it by you all first.

Would love your comments. Thanks in advance!

2

Me myself and i would go for a liquid design. Right now, bumping up the font-size on my browsers breaks the lay out. So i would a redo (but i’m a little biased to fixed widths so…).

3

I agree…so changing to liquid would mean redoing the whole site?

4

How does starting the .css from scratch help in making this background image fit a wider container?

I would edit the background image to meet the requirements of the new width.

5

Here’s the thinking…

Looking at the revamp of the layout (modifying the current site’s CSS), it seems challenging as I don’t know how the previous person did the layout, and where some elements are getting their attributes and sources, etc. so it would take a long time to figure out. Also, remember the goal is to make it more functional as Luki_be mentioned – you increase your font and the site breaks. There are other issues with it as well. So, it seems that redoing the site layout would be easier and would also become more organized and functional. No?

Totally open to feedback!

6

No it doesn’t: you don’t need to redo the lay out. But you’ll have to adjust the CSS from pixel widths to relative units: either using percentages for the widths and ems for padding, margin… or everything in ems.

The only somewhat safe way to lay out web pages so they work everywhere,
is to not lock sizes to anything but viewport - using percentage, and decide what is too wide or too narrow for your creation.

You have 4 basic methods:

1: Fluid layout: all widths in ‘%’. (One can also use auto-width in some
cases.)

  • adapt well to various viewports, but can become overly wide and narrow.

2: Conditional fluid layout: all widths in ‘%’, + min-width/max-width
for entire layout in ‘em’ and/or ‘px’.

  • adapt well to various viewports, and can not become overly wide or
    narrow.
  • if ‘em’ is used for max-width, it’s sometimes refered to as
    “conditional elastic” since they behave as fluid and ‘em’-sized at the
    same time.

3: Fixed layout: all widths in ‘px’.

  • can’t adapt to anything.

4: Em-sized layout: all widths in ‘em’.
-can’t adapt to anything.

In fact you have more methods if you consider these variants:

5: Fixed - fluid - fixed: overall width in ‘%’, with fixed-width side
columns and fluid main column.

  • adapts well to various viewports, but main column can become overly
    wide and narrow.
  • also comes in 2-columns fixed-fluid or fluid-fixed, and in other
    column-mixes.

6: Conditional fixed - fluid - fixed: overall width in ‘%’, with
fixed-width side columns and fluid main column, + min-width/max-width
for entire layout in ‘em’ and/or ‘px’.

  • adapt well to various viewports, and main column can not become
    overly wide or narrow.
  • also comes in 2-columns fixed-fluid or fluid-fixed, and in other
    column-mixes.

7: Overly backwards and unnecessary complex “adaptive fixed/em-sized”
layout: width in ‘px’ or ‘em’, + max-width in ‘%’ and min-width in ‘em’
or ‘px’.

  • can adapt to various viewports to a certain degree, but ‘em’ sized
    tends to break under font resizing stress unless all font-sizes are left
    at default.

So you have a lot to choose from lol.

IMHO a fixed layout should only be used if the client really, really insists on it.

It’s my believe that a site isn’t only build using valid HTML and CSS, but also needs to adhere to the accessibility and usability standards. You don’t have control on what kind of users will use the site :smiley:

But granted, fixed layouts are much more easier lol

7

But whatever you decide: fix the validation errors also :wink:

8

I agree…have never built a fluid site though b/c they seem a lot harder.

Thanks for the explanations. Really appreciate that!

Thanks for the heads up about the validation errors.

9

Oh well, fluid sites and floats are a bit harder because you easily run into float drops. But you can avoid that by using the display: inline-block technique. Using that technique you can stack an element side-by-side with another block of content. And all this without floats and their bugs and clearing lol. There are some things to consider but they are minor things and easily fixed.

If you want to go that way, just give a shout

10

Hi,

My first thoughts are that you simply increase the left column and the reduce the middle column so that you don’t make the page any wider as it is already 1000px wide.

Or if you definitely need the middle section that wide then you would need to make the page wider of course which would then be a little too wide.

For a fixed width the only part of the image you need to alter then would be the left yellow column which shouldn’t be much of a problem as its mainly a solid colour. You can just crop and copy in your paint package and shouldn’t take more than 30 minutes to change the image with any luck.

Regarding what Luki suggests then that’s a whole different ballgame and would be a long job instead of a quick one :slight_smile: Fluid layouts are good but very hard to code properly and for them to look good. For accessibility they are good but only if you also use min and max widths as 100% layouts can be hard to read also.

This would present problems in organising content and structuring the equal columns as separate images would need to be made and wrapped in nested divs. Not difficult but just time consuming.

It’s no surprise that most wordpress layouts are therefore fixed just to make life easier. However there is still no reason why text could not scale to be readable as long as heights weren’t set on everything.

As you already have a fixed width site then the decision has already been made and perhaps you should stick with it for now.

If you want a fluid site then you should also think about a re-design at the same time. The site feels a little old fashioned to me and could do with a facelift into the 21st century :slight_smile: But, hey what would I know I’m not a graphic designer :wink:

11

Going liquid would be indeed a nice challenge :smiley:
But like you said, in that case a re-design would be best. In my experience, liquid layouts and a lot of images are hard to mix when it comes to stress testing. The min/max widths are easily to achieve without expressions :wink:

And i agree, a face lift isn’t a bad idea but that’s for the owner to decide, not us :wink:

If going with the fixed width option, it’s a matter of not locking everything to the extend that on bumping up the font-size, the text will break out…

The liquid option has in this stage a huge drawback imho: the huge background image

12

Sounds like you’re all in agreement that this site can be fixed and it doesn’t need to be reconfigured. I’m in agreement it could use a redesign (glad I’m not the only one who thinks so) but they just got it designed last year I think.

Really appreciate all your feedback!

13

Every site can be ‘fixed’, whether it’s with a complete overhaul or some minor fixes lol

14

I guess I meant with some minor fixes.

15

i know :slight_smile: