- This topic is empty.
-
AuthorPosts
-
September 22, 2014 at 10:40 am #184125
kuba0506
ParticipantHi, 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/
September 22, 2014 at 5:41 pm #184164shaneisme
ParticipantIn 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.
September 22, 2014 at 10:57 pm #184182kuba0506
ParticipantI 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?September 23, 2014 at 8:15 am #184363shaneisme
ParticipantI’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.
September 23, 2014 at 9:09 am #184366burr
ParticipantThis 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 aposition: relative;
container in responsive design.Like here
September 23, 2014 at 9:23 am #184367shaneisme
ParticipantSure you can, but the site linked in the OP was built on absolute positioning on every element for layout purposes.
September 23, 2014 at 10:56 pm #184423kuba0506
ParticipantHi 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?September 24, 2014 at 4:00 am #184570Paulie_D
MemberFor 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.
September 25, 2014 at 10:25 am #184731shaneisme
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.
September 25, 2014 at 11:54 am #184744kuba0506
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?
September 25, 2014 at 12:08 pm #184747shaneisme
ParticipantBTW 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/
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.