Retrofit Existing Site with Responsive Design [closed] - css

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
Hopefully this question will not break any of the rules, even though it could probably lead to some debate. And if it reads as though I am asking for code to be written for me, I am not! I just need some advice on the best way to approach this and have read through so many suggestions on forums and have tinkered with so many different bits of code on Codepen and jsFiddle that I have seen posted that I am probably more confused now than at the start!
To being, I will try to explain what I am after in as much detail as possible....
I maintain an existing site (http://www.margate-fc.com/content/frontpage.php) and it is long overdue a redesign. As a large chunk of the traffic comes from mobile devices the current fixed layout is not suitable and I want to make the whole site responsive, while keeping the current Header<>Sidebar,Content,Sidebar<>Footer layout or at least something similar.
The Header and Footer will change slightly at various resolutions and the Navigation Bar will switch to a dropdown/off-canvas menu at a certain breakpoint but none of these will be a problem to work with.
It is the middle section (Sidebar,Content,Sidebar) that will change most between mobile and desktop and is where I need the advice. There will be three different Layouts...
All Three Columns Visible (800px and Above)
Content and Right Sidebar (adverts) visible side by side and Left Sidebar (Statistics) Off-Canvas (799px and Lower)
Content and Right Sidebar stacked and Left Sidebar Off-Canvas (probably 479px and Lower - but realistically it will be at the point where Content becomes too narrow)
Some of the other things I would like to factor in....
I am hoping to keep the two sidebars as fixed width as possible otherwise the content inside the left one could become disjointed.
I would like the entire design to be fluid down to a certain viewpoint and leave room on a wider screen for side ads.
Ideally I would like the sidebars, when visible as columns, to be of matching height and the background color to be achieved without hacks (actually choosing a bg-color not using wide borders or images).
Not a lot to ask then, eh?
I have read a lot of varied advice about each of the things I am trying to achieve and much of it is no problem and have done much of it at some point before. The trouble I am having is getting it all to work together.
Ideally I was hoping to achieve what I was after using a framework and dived in with Twitter Bootstrap. The trouble I had was that the spans were too fluid (so the sidebars went from much wider than the content they contained to too small very easily) and the gutters were too wide. I did attempt to change them, but without a degree in mathematics the results were a mess.
Also, at a certain screen-width, the sidebars were both visible, but with no content. As the screen got smaller, the content returned.
So that is where I am at the moment and I am really grateful for anyone who has read this far!
So, what is the best way to achieve what I am after? Do I try to use a framework that has more flexibility than Bootstrap or do I try to handcode it? If the latter do I start with the mobile layout and then work through the higher breakpoints, or do I start with the fullscreen (because that will be the most difficult to achieve with the equal height and coloured columns) and work downwards through the resolutions?
Or is there another way to go about this that anyone can suggest? I am open to any suggestions, preferably as CSS-based as possible but would be more than happy to use some JS if that is believed to be the best way.

Answer 1

I won't address everything without being able to see your code, but let me take one example:
Ideally I was hoping to achieve what I was after using a framework and dived in with Twitter Bootstrap. The trouble I had was that the spans were too fluid (so the sidebars went from much wider than the content they contained to too small very easily) and the gutters were too wide.
So I interpret this as you're fine with the base fluidity of the grid, but your sidebar divs need to behave differently. Fine, then take them out of the grid, and handle them separately.
Instead of:
<div class="container span12">
...
<div id="sidebarLeft" class="span2">...</div>
<div id="content" class="span8">...</div>
<div id="sidebarRight" class="span2">...</div>
...
</div>
try:
<div class="container span12">
...
<div class="wrapper clearfix span12">
<div id="sidebarLeft" class="sidebar">...</div>
<div id="sidebarRight" class="sidebar">...</div>
<div id="content" class="content_block">...</div>
</div>
...
</div>
Then apply your own styles to lay out just the area that needs to behave differently, eg.
.sidebar {
width: 200px;
float: left;
}
#sidebarRight {
float: right;
}
#content {
margin-left: 200px;
margin-right: 200px;
}
or something like that. Then you can use media queries to hide (display:none;) or otherwise tweak the custom portions of your layout at different sizes.

Answer 2

I think Bootstrap is too heavy - if you are converting a pre-existing website, using Bootstrap will only cause you more problems. What I've found is that unless you are willing to completely customize Bootstrap.css so that it is totally right for you, you'll be designing with lots of Bootstrap conventions in mind. There has been a lot of criticism of the "sameyness" of Bootstrap, and you can see this in the fact that 1000s of websites look the same (you know the Jumbotron slider, with the nav menu, Hero units and the like).
In my opinion there are a few options for you -
Use a framework such as Zurb Foundation or Groundwork CSS which are slightly less intrusive.
Handcode several different "versions" of your site using Media Queries (what I like to do is have separate content areas defined in master divs [i.e. one div will be called 'iphone' and the other will be called 'desktop' and then hide them with media queries]).
Use a fluid grid system and totally refactor your content into that grid system. A good fluid grid system (not a Framework as such) would be 960 Grid System (http://960.gs/) in my mind, or you could just use the customize feature on the Bootstrap website to whittle it down to only the elements you need.
Then of course the 3rd option would be to hide certain elements of your current website i.e. sidebar set to display:none; with Media Queries.
Media Queries
Bootstrap does recommend a good set of CSS Media queries to be starting with however. For example, using the set of queries recommended by Bootstrap, below is how I envisage your site being set out:
/* Large desktop */
#media (min-width: 1200px) {
.iphone {display:none;}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
.iphone {display:none;}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.main {display:none;}
.iphone {
display:block;
top:0;
left:0;
right:0;
bottom:0;
height:100%;
width:100%;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
.main {display:none;}
/* whatever code you want to put here for landscape viewing of the website on a mobile (if you need it)*/
}