[MSKINS-131] Enable the responsive features of Bootstrap 2.3.2

• Type: Improvement
• Status: Closed
• Priority: Minor
• Resolution: Fixed
• Affects Version/s: fluido-1.5
• Fix Version/s: fluido-1.6
• Component/s: Fluido Skin
• Environment: All
• Flags: Patch
• Assignee: Michael Osipov
• Reporter: Jon Harper
• Created: 18/Jul/16 20:42
• Updated: 05/Nov/16 12:31
• Resolved: 05/Nov/16 11:56

Description

Bootstrap 2.3.2 has opt-in support for responsive layouts. In 2016, mobile has grown a lot. I think it should be enabled.

To enable it, we just have to download bootstrap-responsive.css from http://getbootstrap.com/2.3.2/ and add it to the page. See http://getbootstrap.com/2.3.2/scaffolding.html#responsive

The following mail was sent to the mailing list:

I tried enabling Bootstrap's 2 responsive mode on
https://maven.apache.org and I thought that it was better than the
current version. Please see a demo here: http://jonenst.github.io/maven-site/ .
I also added preview images of the main the page using firefox
"Responsive Design View".

The only difference between the two types of images is the inclusion
of the responsive css as per
http://getbootstrap.com/2.3.2/scaffolding.html#responsive .

Note that the responsive mode does significant changes only on
displays of width 767 pixels or less. Above 767px, the changes are very
minor (tiny adjustments to fonts, columns and gutters sizes).

Did you try enabling the responsive mode? Was there something
preventing you from using it ? The only drawback I see is that devices
with 767 pixels have a bigger menu than needed, but:

• the current mode already has some problems (text and images going
  outside of the menu, less size of the content).
• there are almost no devices in the 610-767 range. (see
  http://mydevice.io/devices/ ). For 600px width, the menu still looks
  big but not as oversized as for 767 pixels and using it this way is an
  improvement.

Issue Links

• is depended upon by: MSKINS-119 Text overlapping on mobile devices