Absolute positioning website into responsive

[kuba0506]

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/

[shaneisme]

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.

[kuba0506]

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?

[shaneisme]

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.

[burr]

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

[shaneisme]

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

[kuba0506]

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?

[Paulie_D]

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.

[shaneisme]

@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.

[kuba0506]

@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?

[shaneisme]

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… medium… github… put the CSS files into a beautifier and see how its structured.

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

[Author]

Posts