SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: Recode or fix?

  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    979
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Recode or fix?

    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 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. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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....).
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    979
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree....so changing to liquid would mean redoing the whole site?

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    979
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sculley View Post
    I agree....so changing to liquid would mean redoing the whole site?
    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

    But granted, fixed layouts are much more easier lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But whatever you decide: fix the validation errors also
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    979
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post

    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
    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. #9
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sculley View Post
    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.
    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
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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 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 But, hey what would I know I'm not a graphic designer

  11. #11
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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 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 But, hey what would I know I'm not a graphic designer
    Going liquid would be indeed a nice challenge
    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

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

    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
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  12. #12
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    979
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Every site can be 'fixed', whether it's with a complete overhaul or some minor fixes lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  14. #14
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    979
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I meant with some minor fixes.

  15. #15
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i know :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •