1) You do not have to use a container-fluid to create the style responsive
container-fluid is a full-width, efficiently resizing package (e.g. for apps).
container is a pseudo-fixed-width, centred package that actions down in dimension as the screen resizes.
2) In the same way, you do not have to use a row in a container
You can use row-fluid inside a container to get a 12-column (nestable) liquid lines within a pseudo-fixed-width, centred package those actions down in dimension as the screen resizes. This is the best way to accomplish a resizable structure.
3) You should prevent any use of precise pixel-based sizes
Definitely no precise sizes or levels, even (especially!) on pictures. Implement line levels, edges etc. using rates where possible.
4) Create no use of
or to impact range splitting without examining across all type factors/sizes
Definitely not to use
to make straight space – set up your edges and cushioning.
5) Always make sure everything is within a well-understood structure
Think
6) Think about copying and concealing sections on different form aspects to improve line-breaks
Use hidden-tablet or hidden-phone and visible-tablet, visible-phone to improve structure and line-breaks/wrapping on different focus on devices. Keep in mind to evidence in every form factor to avoid losing or copy components.
7) Keep in mind that if you want something invisible on mobile phones and pills, you’ll have to apply both classes
8)Remember that internet explorer still fill image content, even if the element is not displayed
You will pay for an picture obtain even if the factor is display: none;. It is best to use only one picture across all solutions that machines down perfectly. That tends to mean preventing wrinkles and written text.
9) Most 3rd Celebration material rotators are damaged in various ways
(including jquery.cycle and jshowoff), especially with liquid templates. Use (and style) the Bootstrap slide carousel, which deals much better with sensitive styles.
10) If you need to crack out of the lines, the best way to do this is to use adverse margin
Don’t ignore to also improve the max-width to make sure that the item is constantly on the complete the area (and make sure that the item is huge enough, if it is a fixed-dimension factor like an image). For example: .myElement { margin-left: -10%; max-width: 110%; }to crack 10% out to the remaining, and still take up the full-sized (if possible).
11) Prevent qualifications pictures that are really aspect of the grid/layout
They are not well reinforced by all internet explorers, and you have little management over sizing and placement – especially in sensitive templates. Instead, put real img components into the markup. You can use the press components in CSS to make sure that you have the right quantity of edge at each sizing for liquid templates.
12) Designers need to think about the fluidity of the layout
In the last, designers have converted the UX into set Photoshop styles of every web page, and then connections developers have tried to realize them pixel-perfect across all internet explorer. In a sensitive globe, UXs and designers have to think more about the best connections styles at different form-factors, and concentrate on typographical issues like typeface styles, edges, range size and leading.