Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Absolute positioning website into responsive

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #184125
    kuba0506
    Participant

    Hi, I have to convert old absolutely positioned website into responsive website.

    What techniques do you recommend?

    Should I rewrite layout into some responsive grid like Skeleton or Columnal?

    This the website: http://www.deccaindustries.com/

    #184164
    shaneisme
    Participant

    In a case like this, it’s a nuke from orbit sort of thing.

    If I were tackling this, I would only save the actual content (copy, images) itself and start fully from scratch.

    What tools you use is up to you. Have you used a grid system before? If so, maybe stick with that one… if you’re open to alternatives, there are plenty like Bootstrap and Foundation to choose from.

    If you’re feeling really saucy, rolling up Susy is fantastic once you get past the learning curve. (Especially if you know a task runner like Grunt or Gulp)

    I think trying to save any code would waste more time than it would save.

    #184182
    kuba0506
    Participant

    I used Bootstrap already, saw some tutorialas on Susy but for now is too complicated for me.
    I think I will stick to some basic ligthweight grid
    What do you think about Skeleton or Columnal are they good for this project?

    #184363
    shaneisme
    Participant

    I’ve not used either personally, but any grid system is a great place to start!

    Why don’t you spin up a replica of the home page without images (you can do something like color-coat the backgrounds of each piece), maybe even put it up on CodePen.

    We can help you through the details once you have the broad strokes.

    #184366
    burr
    Participant

    This might not be particularly helpful but is was the first thing that poped to my head when I read the title….

    You can use position: absolute; inside a position: relative; container in responsive design.

    Like here

    #184367
    shaneisme
    Participant

    Sure you can, but the site linked in the OP was built on absolute positioning on every element for layout purposes.

    #184423
    kuba0506
    Participant

    Hi guys!
    Thx for help, I started coding website from scratch with Skeleton grid system. For now I can say that even website is responsive some elements like logo should stay absolutely positioned, but that causes problems when resiszing browser I have to put new positions (top, left…). in media queries and I think It’s not good workaroun.

    What about slider, what responsive slider do you recommend?
    Or how to change code from my website to make slider responsive?

    #184570
    Paulie_D
    Member

    For now I can say that even website is responsive some elements like logo should stay absolutely positioned

    Not quite..what you mean is that you want them to stay in place….absolute positioning might be one solution but, as you have discovered, it’s not a responsive one.

    #184731
    shaneisme
    Participant

    @kuba0506 – if you Google “mobile first css slider” or something, you should find one.

    I’m not a fan of sliders/carousels/etc. in general. People simply don’t use them. If something is so important, just show it rather than hide it. A good rule of thumb.

    #184744
    kuba0506
    Participant

    @shaneisme – I checked some popular sliders, I like nivo the most because is easy to manage.

    As far as modulase like carousel/sliders concerned I agree with you but this time I have no choice.

    BTW do U know some good resources with CSS/HTML good practises with examples?

    #184747
    shaneisme
    Participant

    BTW do U know some good resources with CSS/HTML good practises with examples?

    You mean in general?

    If so, I personally just view source. Check out the source of css-tricks… mediumgithub… put the CSS files into a beautifier and see how its structured.

    Harry Roberts also recently updated this: http://cssguidelin.es/

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Other’ is closed to new topics and replies.