Responsive Design on which component should be responsive

Question

I use Twitter bootstrap framework for designing my Web application. When i think about responsive design is it all about designing my layout responsively or should i also think about Text box, Labels, Buttons and other components to be responsive as screen gets bigger.

And which would be the best resolutions that i should follow to create a responsive design, where i could notice all most there are number of devices that keep evolving with different resolutions every day.

Currently i have developed my app which is responsive with layouts, text box, buttons, labels and headers on all resolutions between 1024 -1439, 1440- 1659, 1660 - 1920.

and less than 1024 and Greater than 1920px.

And how should i use scaling on responsive design.

I would like to know if this is the industry standards or is there anything else should i keep in mind before developing Web Application.

score 1 · Accepted Answer · edited May 23 '17 at 12:28

Twitter's Bootstrap is responsive by default. This include all components and the grid(s).

To find your answer, please first study http://getbootstrap.com/css/#grid Twitter's Bootstrap defines four grids. The largest grid has a max container size of 1170px.

The large (col-lg-*) is bound by:

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Your design requires a larger grid, for at least 1920px and up. Where 1920x1080 seems to be an industrial standard: http://en.wikipedia.org/wiki/1080p

According Bootstrap's grid definitions, i expect you should extend the grids with a larger grid. See also: See also Bootstrap 3 - 940px width grid?, Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

To add and extra grid, download Bootstrap's LESS files from: https://github.com/twbs/bootstrap/tree/master/less, add a extra grid() and recompile your CSS.

In grid.less replace:

//or define in variables.less 
@screen-superlg: 1920px;
@screen-superlg-min: @screen-lg;

// Large screen / wide desktop
//or define in variables.less 
@container-superlarge-desktop:      ((1860px + @grid-gutter-width));
@container-superlg:                 @container-superlarge-desktop;

.container {
  .container-fixed();

  @media (min-width: @screen-sm) {
    width: @container-sm;
  }
  @media (min-width: @screen-md) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
  /* Larger devices (HD TV, 1920px and up) */

  @media (min-width: @screen-superlg-min) {
    width: @container-superlg;
  }
}

and add:

//  Super Large grid
//
// Columns, offsets, pushes, and pulls for the hd tv device range.

@screen-lg-max:              (@screen-superlg-min - 1); // define in variables.less

@media (min-width: @screen-superlg-min) {
  .make-grid-columns-float(superlg);
  .make-grid(@grid-columns, superlg, width);
  .make-grid(@grid-columns, superlg, pull);
  .make-grid(@grid-columns, superlg, push);
  .make-grid(@grid-columns, superlg, offset);
}

After doing this you can use the new Super Large grid by using col-superlg-* grid column classes.

After this you should also have te extend the Responsive utilities (http://getbootstrap.com/css/#responsive-utilities) defined in less/responsive-utilities.less.

Thanks, Is there a need for Text box,Labels,buttons re sized on change of resolution. I haven't seen that in bootstrap document, Or have i missed it — sureshdeepak, Jan 27 '14 at 15:53
I haven't seen anybody having a change in Control sizes which varies on resolutions — sureshdeepak, Jan 27 '14 at 16:05
By default Bootstrap don't resize them neither change their resolution. Check http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/ it shows a list of components which change based on @grid-float-breakpoint. Modals, forms, jumbotron and of course navbar styles change. Non of this changes effects button or other elements. I not sure this says their is no need, i think the focus of Bootstrap is Desktop and smaller. — Bass Jobsen, Jan 27 '14 at 17:17
Thanks for your valuable time on this.Is there anything you have about scaling on view port settings which is also important for responsive design. — sureshdeepak, Jan 29 '14 at 09:00

Responsive Design on which component should be responsive

1 Answers1