JAVAJAN S.L.

Manlleu

facebook
Català
Castellano
English

Web guide

Responsive web implementation method

Today it is almost necessary to develop websites that are fully adapted to multiple devices (tablet, mobile phones, laptops, PCs...) . This section aims to guide the graphic designer who created the designs in a wide web standards, what should we consider when proposing responsive web designs (adaptable) and diversity of opportunities that offer JQuery libraries (plugins that implement different functions in one site: deploy menus, image carousels, usability dynamics...).

Javajan implements BOOTSTRAP, a leading development framework of web responsive environments. It is essentially a collection of CSS and Javascript auxiliary functions that allow us to effectively build very basic layout for all the pages of the website and ensures proper adjustment of elements in any device.

http://getbootstrap.com/examples/theme/ Reference page of the responsive implementation; if we change the width of the browser window, we can see how the different elements behave, with particular attention to the main menu, it becomes fully adapted to the correct usability on mobile devices.

Example of structure block according to 12 columns Bootstrap guide:

Example of blocks behavior according to the width of the display device:

Web responsive basic concepts

Mainly we consider that:

  • A responsive website does not works with pixels (in general) it works with %, where 100% is the total width of the device in which visualize the web.
  • The elements are placed next to each other, as it reduces the width of the screen they go down: for example, if we have a row of six columns, we can change it to 2 rows of 3 columns and finally (or directly) to 6 rows of a column. Also we can configure it to, even though the page is reduced, elements will never be relocated in a single row. Examples http://getbootstrap.com/examples/grid/.

  • The total number of columns must always be 12, considering that 12 is 100% of the total width of the page, for example, col_8 + col_2 + col_2, always having in mind that the total is 8 + 2 + 2 = 12. Most correct thing at the moment to propose a responsive design workspace is divide it into 12 equal parts and work with guides and columns following the proposed structure.
  • The behavior of the columns in a mobile phone makes it move under the other, ideally in the same order in which they appear. If necessary, we can also hide some mobile content (if there is too much information or we want to simplify it), while we promote other content (images for example).
  • The space between columns that define Bootstrap is 30px (15px for each side). You can change the entire website or a specific part.
  • Regarding the other elements, remember that there are many tools here: http://bootsnipp.com/ that can help when thinking about the usability of a design (dropdown elements, menus or fixed feet on the page, forms...). Just type the keyword in the searcher to find several examples on the same web component.
web responsive

If you want to stay informed of the latest developments and trends in web design:

Subscribe to our news informative