¿Qué es un Grid?

[fusion_builder_container hundred_percent=»no» hundred_percent_height=»no» hundred_percent_height_scroll=»no» hundred_percent_height_center_content=»yes» equal_height_columns=»no» menu_anchor=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»center center» background_repeat=»no-repeat» fade=»no» background_parallax=»none» enable_mobile=»no» parallax_speed=»0.3″ video_mp4=»» video_webm=»» video_ogv=»» video_url=»» video_aspect_ratio=»16:9″ video_loop=»yes» video_mute=»yes» video_preview_image=»» border_size=»» border_color=»» border_style=»solid» margin_top=»» margin_bottom=»» padding_top=»» padding_right=»» padding_bottom=»» padding_left=»»][fusion_builder_row][fusion_builder_column type=»1_1″ layout=»1_1″ spacing=»» center_content=»no» link=»» target=»_self» min_height=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»left top» background_repeat=»no-repeat» hover_type=»none» border_size=»0″ border_color=»» border_style=»solid» border_position=»all» padding_top=»» padding_right=»» padding_bottom=»» padding_left=»» dimension_margin=»» animation_type=»» animation_direction=»left» animation_speed=»0.3″ animation_offset=»» last=»no»][fusion_text]

En el desarrollo web utilizamos el grid para diseñar la estructura de la web así como el contenido de la página. El grid es una cuadrícula sobre la que se distribuyen los distintos elementos que componen la web.

Durante el post hablaremos de diseño web y de desarrollo web. Para que se entienda algo mejor la diferencia entre ambas, vamos a resumir la labor de cada uno de ellos. El diseñador crea la parte visual de la web, una vez terminado este diseño lo envía al desarrollador quien maqueta la web siguiendo las pautas del diseño. Aunque ambos trabajan con el mismo contenido utilizan herramientas diferentes ya que su trabajo es completamente distinto.

Antiguamente, los diseñadores web trabajaban con tablas, distribuyendo el contenido por las celdas de la misma. Una de las ventajas de las tablas era que tanto el diseño de la web como el desarrollo de la misma se hacían de forma rápida y dando un poco de color a los bordes, a las celdas y al fondo se conseguía un resultado visualmente llamativo.

Con la llegada de nuevas tecnologías para el desarrollo web como HTML5 y CSS3, acompañado de la cantidad de dispositivos con internet que utilizamos día a día, el desarrollo web cambió y en lugar de utilizar tablas como antiguamente, ahora se utilizan “bloques”. Este cambio ha sido vital para que veamos una web en nuestro móvil, con el contenido perfectamente adaptado a la pantalla del dispositivo.

Veamos como es el grid de nuestra propia web. Esquemáticamente podemos decir que el grid tiene la estructura que vemos a continuación en la versión de escritorio.

[/fusion_text][fusion_table]

[/fusion_table][fusion_separator style_type=»none» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» sep_color=»rgba(224,222,222,0)» top_margin=»20px» bottom_margin=»» border_size=»» icon=»» icon_circle=»» icon_circle_color=»» width=»» alignment=»center» /][fusion_text]

En la siguiente captura de pantalla se ve la correspondencia con el esquema anterior:

1. Logo
2. Menú
3. Contacto y redes sociales
4. Contenido
5. Sidebar

[/fusion_text][fusion_imageframe image_id=»14491″ style_type=»none» stylecolor=»» hover_type=»none» bordersize=»» bordercolor=»» borderradius=»» align=»center» lightbox=»no» gallery_id=»» lightbox_image=»» alt=»» link=»» linktarget=»_self» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» animation_type=»» animation_direction=»left» animation_speed=»0.3″ animation_offset=»»]https://www.suratica.es/wp-content/uploads/2019/03/web.png[/fusion_imageframe][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=»no» hundred_percent_height=»no» hundred_percent_height_scroll=»no» hundred_percent_height_center_content=»yes» equal_height_columns=»no» menu_anchor=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»center center» background_repeat=»no-repeat» fade=»no» background_parallax=»none» enable_mobile=»no» parallax_speed=»0.3″ video_mp4=»» video_webm=»» video_ogv=»» video_url=»» video_aspect_ratio=»16:9″ video_loop=»yes» video_mute=»yes» video_preview_image=»» border_size=»» border_color=»» border_style=»solid» margin_top=»» margin_bottom=»» padding_top=»» padding_right=»» padding_bottom=»» padding_left=»»][fusion_builder_row][fusion_builder_column type=»1_1″ layout=»1_1″ spacing=»» center_content=»no» link=»» target=»_self» min_height=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»left top» background_repeat=»no-repeat» hover_type=»none» border_size=»0″ border_color=»» border_style=»solid» border_position=»all» animation_type=»» animation_direction=»left» animation_speed=»0.3″ animation_offset=»» last=»no»][fusion_text]Si esta misma página la vemos en nuestro dispositivo móvil, vemos como la estructura cambia pero el contenido es el mismo. El trabajo del desarrollador es hacer que el mismo contenido se adapte a la pantalla del dispositivo, es decir, que los mismos bloques cambien su orden y disposición y se adapten a distintos grid.[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=»no» hundred_percent_height=»no» hundred_percent_height_scroll=»no» hundred_percent_height_center_content=»yes» equal_height_columns=»no» menu_anchor=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»center center» background_repeat=»no-repeat» fade=»no» background_parallax=»none» enable_mobile=»no» parallax_speed=»0.3″ video_mp4=»» video_webm=»» video_ogv=»» video_url=»» video_aspect_ratio=»16:9″ video_loop=»yes» video_mute=»yes» video_preview_image=»» border_size=»» border_color=»» border_style=»solid» margin_top=»» margin_bottom=»» padding_top=»» padding_right=»» padding_bottom=»» padding_left=»»][fusion_builder_row][fusion_builder_column type=»1_2″ layout=»1_2″ spacing=»» center_content=»no» link=»» target=»_self» min_height=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»left top» background_repeat=»no-repeat» hover_type=»none» border_size=»0″ border_color=»» border_style=»solid» border_position=»all» padding_top=»» padding_right=»» padding_bottom=»» padding_left=»» dimension_margin=»» animation_type=»» animation_direction=»left» animation_speed=»0.3″ animation_offset=»» last=»no»][fusion_table]

[/fusion_table][fusion_text]

1. Logo y Menú plegado
2. Menú desplegado
3. Contacto
4. Contenido

[/fusion_text][/fusion_builder_column][fusion_builder_column type=»1_2″ layout=»1_2″ spacing=»» center_content=»no» link=»» target=»_self» min_height=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»left top» background_repeat=»no-repeat» hover_type=»none» border_size=»0″ border_color=»» border_style=»solid» border_position=»all» padding_top=»» padding_right=»» padding_bottom=»» padding_left=»» dimension_margin=»» animation_type=»» animation_direction=»left» animation_speed=»0.3″ animation_offset=»» last=»no»][fusion_imageframe image_id=»14490″ style_type=»none» stylecolor=»» hover_type=»none» bordersize=»» bordercolor=»» borderradius=»» align=»center» lightbox=»no» gallery_id=»» lightbox_image=»» alt=»» link=»» linktarget=»_self» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» animation_type=»» animation_direction=»left» animation_speed=»0.3″ animation_offset=»»]https://www.suratica.es/wp-content/uploads/2019/03/responsive-200×444.png[/fusion_imageframe][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=»no» hundred_percent_height=»no» hundred_percent_height_scroll=»no» hundred_percent_height_center_content=»yes» equal_height_columns=»no» menu_anchor=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»center center» background_repeat=»no-repeat» fade=»no» background_parallax=»none» enable_mobile=»no» parallax_speed=»0.3″ video_mp4=»» video_webm=»» video_ogv=»» video_url=»» video_aspect_ratio=»16:9″ video_loop=»yes» video_mute=»yes» video_preview_image=»» border_size=»» border_color=»» border_style=»solid» margin_top=»» margin_bottom=»» padding_top=»» padding_right=»» padding_bottom=»» padding_left=»»][fusion_builder_row][fusion_builder_column type=»1_1″ layout=»1_1″ spacing=»» center_content=»no» link=»» target=»_self» min_height=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»left top» background_repeat=»no-repeat» hover_type=»none» border_size=»0″ border_color=»» border_style=»solid» border_position=»all» animation_type=»» animation_direction=»left» animation_speed=»0.3″ animation_offset=»» last=»no»][fusion_text]

No solo la estructura principal de una web se basa en un sistema de grid o cuadrícula. El contenido de la misma también se distribuye en base a un grid. De hecho la información no se distribuye en la web de forma aleatoria. Distintos estudios analizan el comportamiento de los  usuarios (experiencia de usuario) cuando navegan por internet de manera que el grid de nuestra web sea fácil e intuitivo para los usuarios que la visiten.

Para concluir, el uso de un buen grid en el diseño de la web es clave para que los usuarios al navegar por ella se sientan cómodos. Como hemos visto, lo habitual es tener más de un grid en la estructura de la web, ya que es muy importante distribuir el contenido de forma adecuada según el tamaño de pantalla del dispositivo que estemos utilizando.

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]