{"id":16792,"date":"2025-12-16T15:15:20","date_gmt":"2025-12-16T13:15:20","guid":{"rendered":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes"},"modified":"2025-12-16T21:10:26","modified_gmt":"2025-12-16T19:10:26","slug":"the-basics-of-site-design-using-grids-sections-and-columns","status":"publish","type":"post","link":"https:\/\/hotel-webdesign.com\/en\/the-basics-of-site-design-using-grids-sections-and-columns\/","title":{"rendered":"The basics of site design using grids, sections and columns"},"content":{"rendered":"<div id=\"fws_69d430ce041bc\"  data-column-margin=\"default\" data-midnight=\"dark\"  class=\"wpb_row vc_row-fluid vc_row full-width-section vc_row-o-equal-height vc_row-flex vc_row-o-content-top animatedbgvideo zindex-set\"  style=\"padding-top: 40px; padding-bottom: 0px;  z-index: 999;\"><div class=\"row-bg-wrap\" data-bg-animation=\"none\" data-bg-animation-delay=\"\" data-bg-overlay=\"true\"><div class=\"inner-wrap row-bg-layer\" ><div class=\"row-bg viewport-desktop using-bg-color\"  style=\"background-color: rgba(255,255,255,0.09); \"><\/div><\/div><div class=\"row-bg-overlay row-bg-layer\" style=\"background-color:rgba(255,255,255,0.01);  opacity: 0.3; \"><\/div><\/div>\n\t\t\t<div class=\"video-color-overlay row-bg-layer\" data-color=\"\"><\/div>\n\t\t\t\n\t\t\t<div class=\"nectar-video-wrap row-bg-layer\" data-bg-alignment=\"\">\n\t\t\t\t<div class=\"nectar-video-inner\">\n\t\t\t\t<video class=\"nectar-video-bg\" width=\"1800\" height=\"700\" preload=\"auto\" loop autoplay muted playsinline><source src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/05\/bwwired-flat-1328-web-design-1.mp4\"  type=\"video\/mp4\"><\/video>    \t\t<\/div>\n\t\t\t <\/div>\n\n\t\t\t<div class=\"nectar-shape-divider-wrap no-color\" style=\" height:120px;\"  data-height=\"120\" data-front=\"\" data-style=\"curve_opacity\" data-position=\"top\" ><svg class=\"nectar-shape-divider\" fill=\"\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 100\" preserveaspectratio=\"none\"> <path d=\"M 0 14 s 88.64 3.48 300 36 c 260 40 514 27 703 -10 l 12 28 l 3 36 h -1018 z\"><\/path> <path d=\"M 0 45 s 271 45.13 500 32 c 157 -9 330 -47 515 -63 v 86 h -1015 z\"><\/path> <path d=\"M 0 58 s 188.29 32 508 32 c 290 0 494 -35 494 -35 v 45 h -1002 z\"><\/path> <\/svg><\/div><div class=\"row_col_wrap_12 col span_12 dark left\">\n\t<div style=\"\" class=\"vc_col-sm-9 postcontentcolumn wpb_column column_container vc_column_container col padding-3-percent inherit_tablet inherit_phone\" data-using-bg=\"true\" data-border-radius=\"10px\" data-shadow=\"medium_depth\" data-padding-pos=\"all\" data-has-bg-color=\"true\" data-bg-color=\"rgba(255,255,255,0.01)\" data-bg-opacity=\"0.5\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" ><div class=\"column-bg-overlay-wrap column-bg-layer\" data-bg-animation=\"none\"><div class=\"column-bg-overlay\" style=\"opacity: 0.5; background-color: rgba(255,255,255,0.01);\"><\/div><\/div>\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n<div class=\"wpb_text_column wpb_content_element\" >\n\t<div class=\"herethecontent\">\n<p>Grid site design - Set a number of columns, constant gutters and a hierarchy of sections right from the wireframe, and you'll save days of production time while improving legibility, performance and conversion. The aim is not to obtain a pixel-perfect page, but to put in place a repeatable structure: a system. Here's how to organise sections and columns so that the content breathes, the navigation seems obvious and the responsive aspect remains manageable without CSS overload.<\/p>\n<h2>Order sections before columns<\/h2>\n<p>Start by laying out your key sections, from top to bottom. Each section has a unique role: proof, promise, catalogue, decision support, reassurance, contact. If you try to adjust the number of columns without clarifying the intention of each block, you'll bloat the CSS and the content will look patchwork.<\/p>\n<p>The simple rule: one section = one intention = one template. The opening hero is often full-width, the product section unfolds in a grid, the editorial zone adopts a central column with a narrow line width (60-75 characters), and the conversion zone requires asymmetrical columns to anchor a form next to arguments.<\/p>\n<h3>Vertical rhythm, breathing and base lines<\/h3>\n<p>Vertical rhythm evens out the spacing between headings, paragraphs, maps and images, so that the eye anticipates what's coming next. Define a spacing scale (for example 4, 8, 12, 16, 24, 32, 48 px...) and stick to it. The line-height of paragraphs is aligned with this typographic grid, and the vertical margins of components are aligned with it. The result: a page that falls into place whatever the density of the content. This discipline also makes responsive easier: your spacing values are resampled cleanly, with no unexpected collisions between blocks.<\/p>\n<p><img decoding=\"async\" class=\"alignleft resizethreehundred autoblog-img\" title=\"The basics of site design using grids, sections and columns\" src=\"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg\" alt=\"maintenance - The basics of site design using grids, sections and columns\" \/><\/p>\n<h2>Choosing the right column grid<\/h2>\n<p>12 columns is still an excellent compromise: divisible by 2, 3, 4 and 6, it covers most patterns (1\/2, 1\/3-2\/3, 1\/4...). If you are planning very dense interfaces (dashboards, tables, maps), go to 16 or 24 columns, but impose locks (e.g. multiply only by 2 or 3) to avoid explosive combinatorics.<\/p>\n<p>Don't confuse container and grid. The container sets the maximum width of the content (e.g. 1200-1440 px) and is centred. The grid extends across the entire width of the container and governs the internal columns. Keep identical gutters from one breakpoint to the next whenever possible, or use a scale linked to the viewport (clamp) to keep comfortable side margins on large screens without diluting the content.<\/p>\n<p>If you are starting with a framework, clearly document the system you have adopted. For a pragmatic overview, explore <a href=\"https:\/\/www.alsacreations.com\/article\/lire\/1196-grilles-framework-css-webdesign.html\" target=\"_blank\" rel=\"noopener\">grids in web design<\/a>The article illustrates the choice of columns, gutters and containers in popular frameworks and helps you select a base compatible with your needs.<\/p>\n<h3>Use cases: editorial, catalogue, lead-gen<\/h3>\n<p>A blog favours a central column for the text, and card grids (2 to 4 columns) for the index. A product catalogue takes advantage of a malleable grid (2 \u2192 4 \u2192 6 columns depending on the viewport) and a filtering sidebar that accordions on mobile. An acquisition page combines full-width sections (credibility) and a pressed column (form or action button). For a tourist establishment, for example a landing dedicated to promoting a residence, structure the header with a text + visual column and a second section with benefit grids, as illustrated by this approach from <a href=\"https:\/\/hotel-webdesign.com\/en\/promoting-a-hotel-residence\/\" target=\"_self\">promotion of a hotel residence<\/a>.<\/p>\n<div class=\"frhwdquote\" style=\"background: url('https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/03\/vdoo4_hftwm.jpg'); background-size: cover; background-position: center center; box-shadow: inset 0 0 0 1000px rgba(255,255,255,.85); padding: 6%;\">\n<h2 class=\"h2frhwdquote\">Your quote in 5 minutes<\/h2>\n<p><a class=\"apromodemo\" href=\"https:\/\/calendly.com\/rdv-webdesign\/prise-de-contact\/\" target=\"_blank\" rel=\"noopener\">Let's talk about your project<\/a><\/p>\n<\/div>\n<h2>Responsiveness: breakpoints that really serve the content<\/h2>\n<p>Your breakpoints should flow from the content, not from dogma. Test the reflow: enlarge\/reduce the window and note the points where lines become too long, where a card falls wrong, where a column needs rebalancing. These points become your thresholds. In mobile-first, start with a single column, then expand to 2, 3 or 4 columns where width allows, respecting a maximum line width for legible text.<\/p>\n<p>For an educational overview of patterns and methods, read <a href=\"https:\/\/www.blogduwebdesign.com\/blog\/webdesign\/comment-utiliser-grilles-conception-web-guide-complet.html\" target=\"_blank\" rel=\"noopener\">how to use grids in web design<\/a>The article covers concrete cases and shows how columns are recomposed at different thresholds.<\/p>\n<h3>Gutters, margins and density<\/h3>\n<p>On mobile devices, gutters that are too thin stick components to the edges and tire the thumb. On the desktop, gutters that are too wide dilute the hierarchy. Use a clamp function to adjust the gutter between a minimum and a maximum. For example, clamp(12px, 2.2vw, 24px) keeps tactile comfort at the bottom and reasonable density at the top.<\/p>\n<p>Beware also of stacking: on mobile, a block with an image, title, description, CTA, tags, price... must remain scannable. Prioritise the elements, cut lines to 2 or 3, and leave spaces to breathe. The grid doesn't solve everything: editing the content is a step in its own right.<\/p>\n<h2>CSS Grid and Flexbox: complementary roles<\/h2>\n<p>Use CSS Grid for the architecture of pages and complex sections (zones, templates, two-dimensional alignments), and Flexbox for the layout of items along an axis (buttons, menus, carousels). Grid reduces the need for unnecessary wrappers, enables precise alignment and simplifies reorganisation within the same template according to breakpoint. For a clear overview, start with <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/Guides\/Grid_layout\/Basic_concepts\" target=\"_blank\" rel=\"noopener\">The basic concepts of CSS grids - MDN Web Docs<\/a>, Then experiment with minimal mock-ups before generalising.<\/p>\n<h3>Named zones, minmax(), auto-fit\/auto-fill<\/h3>\n<p>Named zones make the grid readable and reorganisable: an aside can pass under the content on a mobile device without duplicating any code. The minmax() function prevents stuck cards by setting useful minima (e.g. minmax(240px, 1fr)). With auto-fit\/auto-fill, you let the browser fill the available columns, which is perfect for galleries or modular card lists.<\/p>\n<p><img decoding=\"async\" class=\"alignleft resizethreehundred autoblog-img\" title=\"The basics of site design using grids, sections and columns\" src=\"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/xjxwbfso2f0.jpg\" alt=\"wordpress - The basics of site design using grids, sections and columns\" \/><\/p>\n<h2>Text, measurements and typography in a grid<\/h2>\n<p>The ideal size for a paragraph is around 60-75 characters; beyond that, reading fatigue increases. Limit your text columns to a maximum width and manage intrusive images by flowing them above\/below on mobile. Headings should occupy the grid without creating uncomfortable scales: avoid headings that spread out over all the columns if the content does not follow behind, otherwise the hierarchy will be misleading.<\/p>\n<p>Adopt a relative typographic scale (rem, clamp) and define a typographic container that limits the width of paragraphs independently of the surrounding card grid. This protects legibility when the design becomes denser.<\/p>\n<h2>Accessibility: order, reference points and consistency<\/h2>\n<p>The grid must never break the logical reading order. Think source order: visually rearranged zones must remain consistent for screen readers and keyboard focus. Add ARIA markers for the sections (banner, navigation, main, complementary, contentinfo) and a Go to content bypass link. .<\/p>\n<p>Plan for contrast, the minimum size of tactile targets, visible :focus states and compliance with reduced motion. Interactive elements located in narrow columns must remain reachable and not jump out from under the finger when the grid is recomposed.<\/p>\n<h2>Performance and technical debt<\/h2>\n<p>A grid that is too abstract or too magical will cost you in debugging. Limit DOM depth (avoid wrappers to align wrappers, etc.), prefer Grid to hacks based on negative margins, and document the rules: number of columns per breakpoint, gutters, vertical spaces, image behaviour, truncation rules.<\/p>\n<p>Watch the cascade: if your layout utilities proliferate, you'll lose the intent. Go for tokens (spacings, sizes, colours) and a few semantic classes (section, cluster, sidebar, rail) rather than dozens of cryptic variants. Aim for convergence: same spacing, same rounding, same shadows, same image ratios throughout the interface.<\/p>\n<h2>CMS integration and content blocks<\/h2>\n<p>In a CMS with blocks, define self-supporting templates: card grid (fixed image ratio, 3 card sizes), editorial section (controlled central column), proof banner (logos in a fluid grid), comparison area (table or 1\/3-2\/3 cards depending on viewport). Each template comes with its own constraints to avoid surprises when editors enter the content.<\/p>\n<div class=\"frhwdquote\" style=\"background: url('https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/uey8ati6d0.jpg'); background-size: cover; background-position: center center; box-shadow: inset 0 0 0 1000px rgba(255,255,255,.85); padding: 6%;\">\n<h2 class=\"h2frhwdquote\">Your quote in 5 minutes<\/h2>\n<p><a class=\"apromodemo\" href=\"https:\/\/calendly.com\/rdv-webdesign\/prise-de-contact\/\" target=\"_blank\" rel=\"noopener\">Let's talk about your project<\/a><\/p>\n<\/div>\n<p>The blog is an excellent school for grid discipline: a clear index, article details with coherent images, an opportunistic but non-intrusive sidebar. To work on the editorial value as much as the layout, see <a href=\"https:\/\/hotel-webdesign.com\/en\/what-to-put-in-a-blog\/\" target=\"_self\">what to put in a blog<\/a>, then structure your templates to accommodate these formats without breaking the reading experience.<\/p>\n<h2>Conversion: visual hierarchy, side rails and CTA<\/h2>\n<p>The role of the grid on the conversion side is to orchestrate attention. On the desktop, a side rail can accommodate the persistent CTA, while the main content unfolds the benefits. On mobile, the CTA takes its place above the long sections, or as a sticky bar at the bottom of the screen, but without masking the essential interface elements.<\/p>\n<p>Editorial pages can also convert if the structure is clear: scannable headings, relevant visuals, evidence boxes distributed throughout the flow, and a contextual call to action. For content acquisition strategies, see how to <a href=\"https:\/\/hotel-webdesign.com\/en\/boost-bookings-with-a-blog\/\" target=\"_self\">boost bookings with a blog<\/a> with a layout that guides you towards making contact.<\/p>\n<p>When the reader is ready, reduce friction: place an explicit and accessible CTA. If you want to frame a project, book a slot via <a href=\"https:\/\/calendly.com\/rdv-webdesign\/prise-de-contact\/\" target=\"_self\">Your quote in 5 minutes<\/a> and align your needs in terms of structure, content and accessibility.<\/p>\n<h2>Cross-functional components and micro layouts<\/h2>\n<p>The grid is not just used for large sections: it also governs micro layouts. A comment with avatar, a price insert, an FAQ block or a chat module should be aligned with implicit columns to avoid visual cacophony. Conversational assistants, for example, benefit from being harmoniously integrated into the overall rhythm of the layout: non-obtrusive opening, legible flow, discreet transitions. To find out more about the impact of these tools on the customer experience, explore <a href=\"https:\/\/hotel-webdesign.com\/en\/chatbots-and-virtual-assistants\/\" target=\"_self\">chatbots and virtual assistants<\/a> and think about their position in the grid so that they help without distracting.<\/p>\n<p><img decoding=\"async\" class=\"alignleft resizethreehundred autoblog-img\" title=\"The basics of site design using grids, sections and columns\" src=\"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hpjsku2uysu.jpg\" alt=\"supprt wordpress - The basics of site design using grids, sections and columns\" \/><\/p>\n<h2>Method: from wireframe to design system<\/h2>\n<p>1) List the pages and their purpose. 2) Draw up a list of typical sections and states (empty, long, error, loading). 3) Choose columns and gutters by breakpoint. 4) Build low-fidelity wireframes with Grid\/Flex. 5) Define tokens (spaces, colours, typefaces) and image rules. 6) Document the templates on a live style page. 7) Test on real content: long paragraphs, short\/long titles, oversized images, translated elements. 8) Iterate on density and readability. 9) Extend coverage to edge-case modules (tables, multi-step forms).<\/p>\n<p>This method limits discrepancies. Developers read the docs, editors rely on the templates, and products evolve without tearing up the grid every time a new section is added.<\/p>\n<h2>Common mistakes and remedies<\/h2>\n<p>- Too many breakpoints: focus on 2-3 useful content-based thresholds. - Inconsistent gutters: set a scale and stick to it. - Variable image ratios: impose one or two ratios, frame and crop cleanly. - Unreasonably wide text: limit the reading width. - Alignments broken by exceptions: encapsulate special cases in dedicated templates. - Rigid grid: use minmax(), auto-fit and named zones to retain flexibility. - Inconsistent source order: repair accessibility before visual polish.<\/p>\n<h2>Example of section\/column orchestration<\/h2>\n<p>Let's assume a product page: 1) Full-width hero: title, subtitle, visual, CTA. 2) Evidence: customer logos in fluid grid with auto-fit. 3) Features: 2-column grid on mobile \u2192 3\/4 columns on desktop; each card has a title, a short paragraph, a pictogram. 4) Comparison: 1\/3-2\/3 grid, the main table takes up the space; on mobile, we stack and offer a horizontal nav for the columns. 5) Testimonials: optional side rail on desktop, simple carousel on mobile. 6) FAQ: accordions with controlled text width. 7) Final CTA: airy section, repeats promise with embedded form.<\/p>\n<p>Each defined section comes with its own set of columns. The important thing is to avoid breaking the vertical rhythm: the same spacing between blocks, headings that form a regular skyline, and gradual transitions in density.<\/p>\n<h2>For those involved in tourism and hospitality<\/h2>\n<p>Interfaces need to support both inspiration (large, immersive photos) and decision-making (clear information sheets, filters, comparisons, testimonials). A successful structure combines large visual sections with compact information grids. Adapt the columns to the editorial seasonality: in periods of high demand, highlight promotions in a rail; out of season, switch to an editorial story. To refine your messages and priorities, you can take inspiration from the following approaches <a href=\"https:\/\/hotel-webdesign.com\/en\/online-communication\/\" target=\"_self\">optimising online communication for a holiday residence<\/a> and then translate these priorities into well-paced page templates.<\/p>\n<div class=\"frhwdquote\" style=\"background: url('https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/jvsgcv8_vb4.jpg'); background-size: cover; background-position: center center; box-shadow: inset 0 0 0 1000px rgba(255,255,255,.85); padding: 6%;\">\n<h2 class=\"h2frhwdquote\">Your quote in 5 minutes<\/h2>\n<p><a class=\"apromodemo\" href=\"https:\/\/calendly.com\/rdv-webdesign\/prise-de-contact\/\" target=\"_blank\" rel=\"noopener\">Let's talk about your project<\/a><\/p>\n<\/div>\n<h2>Documentation and governance<\/h2>\n<p>An effective grid system lives on light but up-to-date documentation: spacing values, columns per breakpoint, image ratios, components and their variants. Each new component indicates its relationship to the grid (occupied columns, responsive behaviour, text constraints). Add visual do's and don'ts to guide your teams.<\/p>\n<p>Link this document to the design system: shared tokens, reusable bricks, accessibility principles. The grid becomes a common language: mock-ups remain faithful, integrations converge and pages age better.<\/p>\n<h2>Tests and data<\/h2>\n<p>Don't conclude by eye. Measure. Scroll-depth indicates whether the top sections are catching. Time on section and clicks on side elements reveal whether the rail adds value. The A\/B density test (more or fewer columns for the same block) provides information about readability and conversion. Heat maps show whether the eye gets lost in grids that are too rich.<\/p>\n<p>From a technical point of view, keep rendering times to a minimum: a grid overloaded with wrappers or CSS calculations costs performance. Prefer native techniques (subgrid to inherit parent columns, minmax to limit case) and adapted images (srcset\/sizes) to preserve fluidity.<\/p>\n<h2>Operational conclusion<\/h2>\n<p>Concentrate on three pillars: 1) load-bearing sections, 2) columns chosen for real content, 3) constant vertical rhythm. With Grid for the architecture, Flex for the details, a parsimonious number of breakpoints, and lively documentation, you get an interface that adapts, maintains and converts. Put your team around the same grid, test with real content, and iterate in small steps. Quality comes first and foremost from consistency.<\/p>\n<p>If you are preparing an interface project and would like to quickly define expectations, scope and priority templates, make an appointment directly via <a href=\"https:\/\/calendly.com\/rdv-webdesign\/prise-de-contact\/\" target=\"_self\">Your quote in 5 minutes<\/a> to align business objectives, technical constraints and delivery schedules.<\/p>\n<\/div>\n<\/div>\n\n\n\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div style=\"\" class=\"vc_col-sm-3 blogsidebar wpb_column column_container vc_column_container col padding-3-percent inherit_tablet inherit_phone\" data-using-bg=\"true\" data-border-radius=\"10px\" data-padding-pos=\"all\" data-has-bg-color=\"true\" data-bg-color=\"#E5E1E1\" data-bg-opacity=\"0.2\" data-hover-bg=\"#C5BDBD\" data-hover-bg-opacity=\"0.2\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" ><div class=\"column-bg-overlay-wrap column-bg-layer\" data-bg-animation=\"none\"><div class=\"column-bg-overlay\" style=\"opacity: 0.2; background-color: #E5E1E1;\"><\/div><\/div>\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"img-with-aniamtion-wrap  custom-size\" data-max-width=\"100%\" data-max-width-mobile=\"default\" data-shadow=\"none\" data-animation=\"none\" >\n      <div class=\"inner\">\n        <div class=\"hover-wrap\"> \n          <div class=\"hover-wrap-inner\">\n            <img loading=\"lazy\" decoding=\"async\" class=\"img-with-animation skip-lazy\" data-delay=\"0\" height=\"305\" width=\"1024\" data-animation=\"none\" src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2024\/05\/Logo-GRIS-1-1024x305.png\" alt=\"\" srcset=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2024\/05\/Logo-GRIS-1-1024x305.png 1024w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2024\/05\/Logo-GRIS-1-300x89.png 300w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2024\/05\/Logo-GRIS-1-768x229.png 768w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2024\/05\/Logo-GRIS-1-1536x457.png 1536w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2024\/05\/Logo-GRIS-1-18x5.png 18w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2024\/05\/Logo-GRIS-1.png 1783w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>\n          <\/div>\n        <\/div>\n        \n      <\/div>\n    <\/div>\n<div class=\"wpb_text_column wpb_content_element  vc_custom_1765898930642\" >\n\t<div class=\"txtsidebar\" style=\"text-align: center;\"><strong>Hotel Web Design<br \/>\nThe digital agency for the hotel, restaurant and tourism sector<\/strong><\/div>\n<div class=\"txtsidebar\" style=\"text-align: justify; margin-top: 25px;\">Thanks to our dual expertise in digital and the hotel industry, we can help hoteliers and owners with their transformation: website creation, SEO optimisation, targeted advertising campaigns, connection with business software.<\/div>\n<\/div>\n\n\n\n<div class=\"img-with-aniamtion-wrap\" data-max-width=\"100%\" data-max-width-mobile=\"default\" data-shadow=\"none\" data-animation=\"none\" >\n      <div class=\"inner\">\n        <div class=\"hover-wrap\"> \n          <div class=\"hover-wrap-inner\">\n            <img loading=\"lazy\" decoding=\"async\" class=\"img-with-animation skip-lazy\" data-delay=\"0\" height=\"169\" width=\"300\" data-animation=\"none\" src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/Creative-3D-Visual-Animation-Website-Development-2.gif\" alt=\"\"  \/>\n          <\/div>\n        <\/div>\n        \n      <\/div>\n    <\/div><div class=\"nectar-cta  hover_color_99AFA8 border_radius_100px alignment_tablet_default alignment_phone_default display_tablet_inherit display_phone_inherit has-icon font_size_desktop_14px top_position_desktop_16px\" data-color=\"custom\" data-using-bg=\"true\" data-style=\"basic\" data-display=\"block\" data-alignment=\"center\" data-text-color=\"custom\" style=\"--nectar-text-color: #FDFDFD; --nectar-button-color: #C2CCD3; --nectar-button-color-hover: #99AFA8; --nectar-icon-gap: 5px; \"><span style=\"color: #FDFDFD;\" class=\"nectar-button-type\"><span class=\"link_wrap\" style=\"padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; background-color: #C2CCD3;\"><i><span class=\"im-icon-wrap\"><span><svg role=\"presentation\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 32 32\">\n        <path d=\"M12.399 23.391c-3.027 0-5.872-1.179-8.013-3.316-4.419-4.419-4.419-11.612 0-16.028 2.14-2.139 4.987-3.321 8.013-3.321 3.028 0 5.872 1.18 8.013 3.321 4.419 4.417 4.419 11.607 0 16.028-2.141 2.137-4.987 3.316-8.013 3.316zM12.399 2.057c-2.671 0-5.181 1.040-7.071 2.931-3.899 3.899-3.899 10.243 0 14.14 1.889 1.888 4.4 2.925 7.071 2.925s5.183-1.037 7.071-2.925c3.899-3.901 3.899-10.245 0-14.14-1.889-1.891-4.4-2.931-7.071-2.931zM12.32 17.332c-0.368 0-0.667-0.3-0.667-0.667v-9.333c0-0.367 0.299-0.667 0.667-0.667s0.667 0.3 0.667 0.667v9.333c0 0.367-0.299 0.667-0.667 0.667zM16.987 12.665h-9.333c-0.368 0-0.667-0.3-0.667-0.667s0.299-0.667 0.667-0.667h9.333c0.367 0 0.667 0.3 0.667 0.667s-0.299 0.667-0.667 0.667zM28.691 31.275c-0.569 0-1.104-0.223-1.508-0.625l-9.217-9.253 3.115-3.127 9.225 9.252c0.833 0.833 0.833 2.191 0 3.024l-0.107 0.104c-0.403 0.404-0.939 0.625-1.508 0.625zM19.848 21.396l8.28 8.311c0.303 0.301 0.827 0.303 1.131 0l0.107-0.107c0.311-0.311 0.311-0.82 0-1.137l-8.283-8.305-1.235 1.239z\"><\/path>\n        <\/svg><\/span><\/span><\/i><a target=\"_blank\" class=\"link_text\" role=\"button\" href=\"\/en\/contact\/\"><span class=\"text\">Free analysis of your site<\/span><\/a><\/span><\/span><\/div>\n    <div class=\"row blog-recent columns-1\" data-style=\"list_featured_first_row\" data-color-scheme=\"light\" data-remove-post-date=\"1\" data-remove-post-author=\"1\" data-remove-post-comment-number=\"1\" data-remove-post-nectar-love=\"1\">\n\n      \n      <div class=\"col span_12 post-17008 post type-post status-publish format-standard has-post-thumbnail category-blog-actualites category-conversion-web\" >\n\n        \n            <a class=\"full-post-link\" href=\"https:\/\/hotel-webdesign.com\/en\/why-your-site-isnt-converting-despite-a-good-traffic-rate\/\" aria-label=\"Why your website isn&#039;t converting despite good traffic\"><\/a><a class=\"featured\" aria-label=\"Why your website isn&#039;t converting despite good traffic\" href=\"https:\/\/hotel-webdesign.com\/en\/why-your-site-isnt-converting-despite-a-good-traffic-rate\/\"><span class=\"img-thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"403\" src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-ifsvn82xfgo-600x403.jpg\" class=\"attachment-portfolio-thumb size-portfolio-thumb wp-post-image\" alt=\"\" title=\"\" srcset=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-ifsvn82xfgo-600x403.jpg 600w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-ifsvn82xfgo-18x12.jpg 18w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-ifsvn82xfgo-900x604.jpg 900w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-ifsvn82xfgo-400x269.jpg 400w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/span><\/a>            <div class=\"post-header featured\">\n              <span class=\"meta-category\"><a class=\"blog-actualites\" href=\"https:\/\/hotel-webdesign.com\/en\/category\/blog-news\/\">blog news<\/a><\/span>              <h3>Why your website isn't converting despite good traffic<\/h3>            <\/div><!--\/post-header-->\n\n            <div class=\"excerpt\">traffic without conversion You\u2019re attracting people\u2026 but not the right people A website can\u2026<\/div>\n      <\/div><!--\/col-->\n\n      \n      <div class=\"col span_12 post-17007 post type-post status-publish format-standard has-post-thumbnail category-blog-actualites category-reservation-hoteliere\" >\n\n        \n            <a class=\"full-post-link\" href=\"https:\/\/hotel-webdesign.com\/en\/hotel-website-and-booking-engine-what-generalist-agencies-forget\/\" aria-label=\"Hotel website and booking engine: what generalist agencies forget\"><\/a><a class=\"small\" aria-label=\"Hotel website and booking engine: what generalist agencies forget\" href=\"https:\/\/hotel-webdesign.com\/en\/hotel-website-and-booking-engine-what-generalist-agencies-forget\/\"><span class=\"img-thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"140\" height=\"140\" src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-dtdlvpy-vvq-140x140.jpg\" class=\"attachment-nectar_small_square size-nectar_small_square wp-post-image\" alt=\"\" title=\"\" srcset=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-dtdlvpy-vvq-140x140.jpg 140w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-dtdlvpy-vvq-100x100.jpg 100w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-dtdlvpy-vvq-500x500.jpg 500w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-dtdlvpy-vvq-350x350.jpg 350w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-dtdlvpy-vvq-1000x1000.jpg 1000w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-dtdlvpy-vvq-800x800.jpg 800w\" sizes=\"auto, (max-width: 140px) 100vw, 140px\" \/><\/span><\/a>            <div class=\"post-header small\">\n              <span class=\"meta-category\"><a class=\"blog-actualites\" href=\"https:\/\/hotel-webdesign.com\/en\/category\/blog-news\/\">blog news<\/a><\/span>              <h5>Hotel website and booking engine: what generalist agencies forget<\/h5>            <\/div><!--\/post-header-->\n\n            \n      <\/div><!--\/col-->\n\n      \n      <div class=\"col span_12 post-17006 post type-post status-publish format-standard has-post-thumbnail category-blog-actualites category-reservations-directes\" >\n\n        \n            <a class=\"full-post-link\" href=\"https:\/\/hotel-webdesign.com\/en\/how-a-website-redesign-can-reduce-your-dependence-on-otas\/\" aria-label=\"How a website redesign can reduce your dependence on OTAs\"><\/a><a class=\"small\" aria-label=\"How a website redesign can reduce your dependence on OTAs\" href=\"https:\/\/hotel-webdesign.com\/en\/how-a-website-redesign-can-reduce-your-dependence-on-otas\/\"><span class=\"img-thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"140\" height=\"140\" src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-im7lzjxelhg-140x140.jpg\" class=\"attachment-nectar_small_square size-nectar_small_square wp-post-image\" alt=\"\" title=\"\" srcset=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-im7lzjxelhg-140x140.jpg 140w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-im7lzjxelhg-100x100.jpg 100w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-im7lzjxelhg-500x500.jpg 500w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-im7lzjxelhg-350x350.jpg 350w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-im7lzjxelhg-1000x1000.jpg 1000w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-im7lzjxelhg-800x800.jpg 800w\" sizes=\"auto, (max-width: 140px) 100vw, 140px\" \/><\/span><\/a>            <div class=\"post-header small\">\n              <span class=\"meta-category\"><a class=\"blog-actualites\" href=\"https:\/\/hotel-webdesign.com\/en\/category\/blog-news\/\">blog news<\/a><\/span>              <h5>How a website redesign can reduce your dependence on OTAs<\/h5>            <\/div><!--\/post-header-->\n\n            \n      <\/div><!--\/col-->\n\n      \n      <div class=\"col span_12 post-17005 post type-post status-publish format-standard has-post-thumbnail category-blog-actualites category-marketing-hotelier\" >\n\n        \n            <a class=\"full-post-link\" href=\"https:\/\/hotel-webdesign.com\/en\/why-independent-hotels-have-every-interest-in-investing-in-their-website\/\" aria-label=\"Why independent hotels have every reason to invest in their website\"><\/a><a class=\"small\" aria-label=\"Why independent hotels have every reason to invest in their website\" href=\"https:\/\/hotel-webdesign.com\/en\/why-independent-hotels-have-every-interest-in-investing-in-their-website\/\"><span class=\"img-thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"140\" height=\"140\" src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/wen-design-hotel-website-reservtion-creation-site-photographer-setting-up-website-2025-03-07-09-35-17-utc-140x140.jpg\" class=\"attachment-nectar_small_square size-nectar_small_square wp-post-image\" alt=\"\" title=\"\" srcset=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/wen-design-hotel-website-reservtion-creation-site-photographer-setting-up-website-2025-03-07-09-35-17-utc-140x140.jpg 140w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/wen-design-hotel-website-reservtion-creation-site-photographer-setting-up-website-2025-03-07-09-35-17-utc-100x100.jpg 100w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/wen-design-hotel-website-reservtion-creation-site-photographer-setting-up-website-2025-03-07-09-35-17-utc-500x500.jpg 500w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/wen-design-hotel-website-reservtion-creation-site-photographer-setting-up-website-2025-03-07-09-35-17-utc-350x350.jpg 350w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/wen-design-hotel-website-reservtion-creation-site-photographer-setting-up-website-2025-03-07-09-35-17-utc-1000x1000.jpg 1000w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/wen-design-hotel-website-reservtion-creation-site-photographer-setting-up-website-2025-03-07-09-35-17-utc-800x800.jpg 800w\" sizes=\"auto, (max-width: 140px) 100vw, 140px\" \/><\/span><\/a>            <div class=\"post-header small\">\n              <span class=\"meta-category\"><a class=\"blog-actualites\" href=\"https:\/\/hotel-webdesign.com\/en\/category\/blog-news\/\">blog news<\/a><\/span>              <h5>Why independent hotels have every reason to invest in their website<\/h5>            <\/div><!--\/post-header-->\n\n            \n      <\/div><!--\/col-->\n\n      \n      <div class=\"col span_12 post-16999 post type-post status-publish format-standard has-post-thumbnail category-blog-actualites category-distribution-hoteliere\" >\n\n        \n            <a class=\"full-post-link\" href=\"https:\/\/hotel-webdesign.com\/en\/the-real-cost-of-booking-and-airbnb-commissions-on-a-hotels-profitability\/\" aria-label=\"The true cost of Booking and Airbnb commissions on a hotel\u2019s profitability\"><\/a><a class=\"small\" aria-label=\"The true cost of Booking and Airbnb commissions on a hotel\u2019s profitability\" href=\"https:\/\/hotel-webdesign.com\/en\/the-real-cost-of-booking-and-airbnb-commissions-on-a-hotels-profitability\/\"><span class=\"img-thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"140\" height=\"140\" src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-syto3xs06fu-140x140.jpg\" class=\"attachment-nectar_small_square size-nectar_small_square wp-post-image\" alt=\"\" title=\"\" srcset=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-syto3xs06fu-140x140.jpg 140w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-syto3xs06fu-100x100.jpg 100w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-syto3xs06fu-500x500.jpg 500w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-syto3xs06fu-350x350.jpg 350w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-syto3xs06fu-1000x1000.jpg 1000w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2025\/12\/hotel-web-marketing-location-saisonniere-hotellerie-conseils-web-deisgn-syto3xs06fu-800x800.jpg 800w\" sizes=\"auto, (max-width: 140px) 100vw, 140px\" \/><\/span><\/a>            <div class=\"post-header small\">\n              <span class=\"meta-category\"><a class=\"blog-actualites\" href=\"https:\/\/hotel-webdesign.com\/en\/category\/blog-news\/\">blog news<\/a><\/span>              <h5>The true cost of Booking and Airbnb commissions on a hotel\u2019s profitability<\/h5>            <\/div><!--\/post-header-->\n\n            \n      <\/div><!--\/col-->\n\n      \n      <div class=\"col span_12 post-16985 post type-post status-publish format-standard has-post-thumbnail category-blog-actualites category-reservations-directes\" >\n\n        \n            <a class=\"full-post-link\" href=\"https:\/\/hotel-webdesign.com\/en\/how-to-turn-booking-visitors-into-direct-customers\/\" aria-label=\"How to turn Booking visitors into direct customers\"><\/a><a class=\"small\" aria-label=\"How to turn Booking visitors into direct customers\" href=\"https:\/\/hotel-webdesign.com\/en\/how-to-turn-booking-visitors-into-direct-customers\/\"><span class=\"img-thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"140\" height=\"140\" src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/06\/famille-2-reservation-hotel-140x140.jpg\" class=\"attachment-nectar_small_square size-nectar_small_square wp-post-image\" alt=\"hotel website design rental\" title=\"\" srcset=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/06\/famille-2-reservation-hotel-140x140.jpg 140w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/06\/famille-2-reservation-hotel-300x300.jpg 300w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/06\/famille-2-reservation-hotel-768x768.jpg 768w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/06\/famille-2-reservation-hotel-100x100.jpg 100w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/06\/famille-2-reservation-hotel-500x500.jpg 500w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/06\/famille-2-reservation-hotel-350x350.jpg 350w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/06\/famille-2-reservation-hotel-1000x1000.jpg 1000w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/06\/famille-2-reservation-hotel-800x800.jpg 800w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/06\/famille-2-reservation-hotel.jpg 1024w\" sizes=\"auto, (max-width: 140px) 100vw, 140px\" \/><\/span><\/a>            <div class=\"post-header small\">\n              <span class=\"meta-category\"><a class=\"blog-actualites\" href=\"https:\/\/hotel-webdesign.com\/en\/category\/blog-news\/\">blog news<\/a><\/span>              <h5>How to turn Booking visitors into direct customers<\/h5>            <\/div><!--\/post-header-->\n\n            \n      <\/div><!--\/col-->\n\n      \n    <\/div><!--\/blog-recent-->\n\n  <div class=\"nectar-cta  hover_color_99AFA8 border_radius_100px alignment_tablet_default alignment_phone_default display_tablet_inherit display_phone_inherit has-icon font_size_desktop_14px\" data-color=\"custom\" data-using-bg=\"true\" data-style=\"basic\" data-display=\"block\" data-alignment=\"center\" data-text-color=\"custom\" style=\"--nectar-text-color: #FDFDFD; --nectar-button-color: #C2CCD3; --nectar-button-color-hover: #99AFA8; --nectar-icon-gap: 5px; \"><span style=\"color: #FDFDFD;\" class=\"nectar-button-type\"><span class=\"link_wrap\" style=\"padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; background-color: #C2CCD3;\"><i><span class=\"im-icon-wrap\"><span><svg role=\"presentation\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 32 32\">\n        <path d=\"M2.667 30.667h26.667v1.333h-26.667v-1.333zM30.667 5.333h1.333v24h-1.333v-24zM29.312 32v-1.333c0.747 0 1.355-0.608 1.355-1.355h1.333c0 1.483-1.205 2.688-2.688 2.688zM2.667 2.667h26.667v1.333h-26.667v-1.333zM2.667 32c-1.471 0-2.667-1.195-2.667-2.667h1.333c0 0.736 0.599 1.333 1.333 1.333v1.333zM0 5.333h1.333v24h-1.333v-24zM1.333 5.333h-1.333c0-1.469 1.196-2.667 2.667-2.667v1.333c-0.735 0-1.333 0.597-1.333 1.333zM32 5.333h-1.333c0-0.736-0.599-1.333-1.333-1.333v-1.333c1.472 0 2.667 1.197 2.667 2.667zM8.667 6c-0.368 0-0.667-0.299-0.667-0.667v-4c0-0.368 0.299-0.667 0.667-0.667s0.667 0.299 0.667 0.667v4c0 0.368-0.299 0.667-0.667 0.667zM23.333 6c-0.367 0-0.667-0.299-0.667-0.667v-4c0-0.368 0.3-0.667 0.667-0.667s0.667 0.299 0.667 0.667v4c0 0.368-0.3 0.667-0.667 0.667zM26.667 9.333h-21.333c-0.368 0-0.667-0.299-0.667-0.667s0.299-0.667 0.667-0.667h21.333c0.367 0 0.667 0.299 0.667 0.667s-0.3 0.667-0.667 0.667zM9.333 13.333h-4c-0.368 0-0.667-0.299-0.667-0.667s0.299-0.667 0.667-0.667h4c0.368 0 0.667 0.299 0.667 0.667s-0.299 0.667-0.667 0.667zM18.667 13.333h-5.333c-0.368 0-0.667-0.299-0.667-0.667s0.299-0.667 0.667-0.667h5.333c0.367 0 0.667 0.299 0.667 0.667s-0.3 0.667-0.667 0.667zM26.667 13.333h-4c-0.367 0-0.667-0.299-0.667-0.667s0.3-0.667 0.667-0.667h4c0.367 0 0.667 0.299 0.667 0.667s-0.3 0.667-0.667 0.667zM9.333 17.333h-4c-0.368 0-0.667-0.3-0.667-0.667 0-0.368 0.299-0.667 0.667-0.667h4c0.368 0 0.667 0.299 0.667 0.667 0 0.367-0.299 0.667-0.667 0.667zM18.667 17.333h-5.333c-0.368 0-0.667-0.3-0.667-0.667 0-0.368 0.299-0.667 0.667-0.667h5.333c0.367 0 0.667 0.299 0.667 0.667 0 0.367-0.3 0.667-0.667 0.667zM26.667 17.333h-4c-0.367 0-0.667-0.3-0.667-0.667 0-0.368 0.3-0.667 0.667-0.667h4c0.367 0 0.667 0.299 0.667 0.667 0 0.367-0.3 0.667-0.667 0.667zM9.333 21.333h-4c-0.368 0-0.667-0.3-0.667-0.667s0.299-0.667 0.667-0.667h4c0.368 0 0.667 0.3 0.667 0.667s-0.299 0.667-0.667 0.667zM18.667 21.333h-5.333c-0.368 0-0.667-0.3-0.667-0.667s0.299-0.667 0.667-0.667h5.333c0.367 0 0.667 0.3 0.667 0.667s-0.3 0.667-0.667 0.667zM26.667 21.333h-4c-0.367 0-0.667-0.3-0.667-0.667s0.3-0.667 0.667-0.667h4c0.367 0 0.667 0.3 0.667 0.667s-0.3 0.667-0.667 0.667zM9.333 25.333h-4c-0.368 0-0.667-0.3-0.667-0.667s0.299-0.667 0.667-0.667h4c0.368 0 0.667 0.3 0.667 0.667s-0.299 0.667-0.667 0.667zM18.667 25.333h-5.333c-0.368 0-0.667-0.3-0.667-0.667s0.299-0.667 0.667-0.667h5.333c0.367 0 0.667 0.3 0.667 0.667s-0.3 0.667-0.667 0.667zM26.667 25.333h-4c-0.367 0-0.667-0.3-0.667-0.667s0.3-0.667 0.667-0.667h4c0.367 0 0.667 0.3 0.667 0.667s-0.3 0.667-0.667 0.667z\"><\/path>\n        <\/svg><\/span><\/span><\/i><a target=\"_blank\" class=\"link_text\" role=\"button\" href=\"https:\/\/calendly.com\/rdv-webdesign\/prise-de-contact\/\"><span class=\"text\">Telephone appointment<\/span><\/a><\/span><\/span><\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n\t\t<div id=\"googlecta\"  data-column-margin=\"30px\" data-midnight=\"dark\"  class=\"wpb_row vc_row-fluid vc_row full-width-section vc_row-o-equal-height vc_row-flex\"  style=\"padding-top: 0px; padding-bottom: 0px; \"><div class=\"row-bg-wrap\" data-bg-animation=\"none\" data-bg-animation-delay=\"\" data-bg-overlay=\"true\"><div class=\"inner-wrap row-bg-layer using-image\" ><div class=\"row-bg viewport-desktop using-image\"  style=\"background-image: url(https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2022\/09\/google-hotel-ads.svg); background-position: left top; background-repeat: no-repeat; \"><\/div><\/div><div class=\"row-bg-overlay row-bg-layer\" style=\"background-color:#ffffff;  opacity: 0.8; \"><\/div><\/div><div class=\"nectar-shape-divider-wrap\" style=\" height:50px;\"  data-height=\"50\" data-front=\"true\" data-style=\"mountains\" data-position=\"top\" ><svg class=\"nectar-shape-divider\" fill=\"#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 300\" preserveaspectratio=\"none\">\n          <path d=\"M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z\"><\/path>   <path d=\"M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z\"><\/path>\n          <path d=\"M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z\"><\/path>\n          <path d=\"M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z\"><\/path>\n          <path d=\"M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z\"><\/path> <\/svg><\/div><div class=\"row_col_wrap_12 col span_12 dark left\">\n\t<div style=\"margin-top: 8%; margin-bottom: 5%; \" class=\"vc_col-sm-12 wpb_column column_container vc_column_container col boxed no-extra-padding inherit_tablet inherit_phone\"  data-border-radius=\"15px\" data-shadow=\"medium_depth\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" ><div class=\"column-bg-overlay-wrap column-bg-layer\" data-bg-animation=\"none\"><div class=\"column-bg-overlay\"><\/div><\/div>\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n<div class=\"wpb_text_column wpb_content_element  vc_custom_1683977772092\" >\n\t<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-10514 size-full alignleft\" src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2022\/09\/agence-web-hotel-2.gif\" alt=\"\" width=\"266\" height=\"107\" \/><span style=\"color: #000000;\">Hotel Web Design is a Google partner with the <strong>Google Hotels<\/strong>including our customers <strong>benefit on a daily basis<\/strong>Google search: information about your accommodation, availability and prices is sent continuously to the search engine, which displays free booking links from the Google search directly to your booking page. <strong>These free links\u00a0<\/strong>represent around 15% of additional commission-free bookings for our customers in 2022! Read our article on <a href=\"https:\/\/hotel-webdesign.com\/en\/google-free-hotel-booking-links-how-to-benefit\/\" target=\"_blank\" rel=\"noopener\">free booking links from Google<\/a><\/span><\/p>\n<\/div>\n\n\n\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n\t\t<div id=\"sitereservationcta\"  data-column-margin=\"default\" data-midnight=\"dark\"  class=\"wpb_row vc_row-fluid vc_row full-width-section vc_row-o-equal-height vc_row-flex vc_row-o-content-middle\"  style=\"padding-top: 60px; padding-bottom: 30px; \"><div class=\"row-bg-wrap\" data-bg-animation=\"none\" data-bg-animation-delay=\"\" data-bg-overlay=\"true\"><div class=\"inner-wrap row-bg-layer using-image\" ><div class=\"row-bg viewport-desktop using-image\"  style=\"background-image: url(https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2020\/01\/Hotel-creation-luxe-copie.png); background-position: center center; background-repeat: no-repeat; \"><\/div><\/div><div class=\"row-bg-overlay row-bg-layer\" style=\"background-color:#ffffff;  opacity: 0.95; \"><\/div><\/div><div class=\"nectar-shape-divider-wrap\" style=\" height:120px;\"  data-height=\"120\" data-front=\"\" data-style=\"mountains\" data-position=\"top\" ><svg class=\"nectar-shape-divider\" fill=\"#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 300\" preserveaspectratio=\"none\">\n          <path d=\"M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z\"><\/path>   <path d=\"M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z\"><\/path>\n          <path d=\"M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z\"><\/path>\n          <path d=\"M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z\"><\/path>\n          <path d=\"M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z\"><\/path> <\/svg><\/div><div class=\"nectar-shape-divider-wrap\" style=\" height:120px;\"  data-height=\"120\" data-front=\"\" data-style=\"mountains\" data-position=\"bottom\" ><svg class=\"nectar-shape-divider\" fill=\"#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 300\" preserveaspectratio=\"none\">\n          <path d=\"M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z\"><\/path>   <path d=\"M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z\"><\/path>\n          <path d=\"M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z\"><\/path>\n          <path d=\"M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z\"><\/path>\n          <path d=\"M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z\"><\/path> <\/svg><\/div><div class=\"row_col_wrap_12 col span_12 dark left\">\n\t<div  class=\"vc_col-sm-3 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\"  data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n<div class=\"wpb_text_column wpb_content_element\" >\n\t<h2 style=\"text-align: left; font-size: 40px !important;\">Booking \/ reservation website<\/h2>\n<h2>-<br \/>\nBooking services for hotels and holiday rentals<\/h2>\n<\/div>\n\n\n\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div style=\"\" class=\"vc_col-sm-9 wpb_column column_container vc_column_container col padding-3-percent inherit_tablet inherit_phone\" data-using-bg=\"true\" data-padding-pos=\"all\" data-has-bg-color=\"true\" data-bg-color=\"rgba(0,0,0,0.01)\" data-bg-opacity=\"0.1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" ><div class=\"column-bg-overlay-wrap column-bg-layer\" data-bg-animation=\"none\"><div class=\"column-bg-overlay\" style=\"opacity: 0.1; background-color: rgba(0,0,0,0.01);\"><\/div><\/div>\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"nectar-fancy-ul\" data-list-icon=\"fa fa-check\" data-animation=\"false\" data-animation-delay=\"0\" data-color=\"accent-color\" data-spacing=\"default\" data-alignment=\"left\"> \n<ul>\n<li>Turnkey site with administration interface training on delivery<\/li>\n<li>Adapted logo and graphic charter. Possibility of using your existing elements<\/li>\n<li><a href=\"https:\/\/hotel-webdesign.com\/en\/referencement-naturel-hotel-restaurant\/\">Hospitality SEO<\/a><\/li>\n<li>Integration of <a href=\"https:\/\/hotel-webdesign.com\/en\/booking-engine-hotel-bnb-guest-house\/\">reservations module\u00a0<\/a><\/li>\n<li>or integration of an external booking engine (Reservit, Availpro, Mister booking, Roomcloud, etc)<\/li>\n<li>Integration of specific HTML elements (review portals, customer reviews, weather, press, pop-ups, direct chat, etc.)<\/li>\n<li>Secure SSL \/ HTTPS<\/li>\n<li>Multilingual<\/li>\n<li>Website user interface<\/li>\n<li>Hosting and domain name<\/li>\n<li>Fast delivery<\/li>\n<\/ul>\n<a class=\"nectar-button n-sc-button medium accent-color regular-button\"  href=\"\/en\/contact\/\" data-color-override=\"false\" data-hover-color-override=\"false\" data-hover-text-color-override=\"#fff\"><span>REQUEST A QUOTE<\/span><\/a> <\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n\t\t<div id=\"hotelwebdesigncta\"  data-column-margin=\"default\" data-midnight=\"dark\" data-top-percent=\"5%\" data-bottom-percent=\"5%\"  class=\"wpb_row vc_row-fluid vc_row full-width-section vc_row-o-equal-height vc_row-flex\"  style=\"padding-top: calc(100vw * 0.05); padding-bottom: calc(100vw * 0.05); \"><div class=\"row-bg-wrap\" data-bg-animation=\"none\" data-bg-animation-delay=\"\" data-bg-overlay=\"true\"><div class=\"inner-wrap row-bg-layer using-image\" ><div class=\"row-bg viewport-desktop using-image\"  style=\"background-image: url(https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2023\/04\/Header-Hotel-Web-Design-agence-web-hotels-3.jpg); background-position: left top; background-repeat: no-repeat; \"><\/div><\/div><div class=\"row-bg-overlay row-bg-layer\" style=\"background-color:#ffffff;  opacity: 0.5; \"><\/div><\/div><div class=\"nectar-shape-divider-wrap\" style=\" height:50px;\"  data-height=\"50\" data-front=\"true\" data-style=\"mountains\" data-position=\"top\" ><svg class=\"nectar-shape-divider\" fill=\"#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 300\" preserveaspectratio=\"none\">\n          <path d=\"M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z\"><\/path>   <path d=\"M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z\"><\/path>\n          <path d=\"M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z\"><\/path>\n          <path d=\"M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z\"><\/path>\n          <path d=\"M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z\"><\/path> <\/svg><\/div><div class=\"row_col_wrap_12 col span_12 dark left\">\n\t<div  class=\"vc_col-sm-12 wpb_column column_container vc_column_container col boxed padding-2-percent inherit_tablet inherit_phone\"  data-border-radius=\"15px\" data-shadow=\"medium_depth\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" ><div class=\"column-bg-overlay-wrap column-bg-layer\" data-bg-animation=\"none\"><div class=\"column-bg-overlay\"><\/div><\/div>\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n<div class=\"wpb_text_column wpb_content_element\" >\n\t<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-3630 size-small faviconhwdcalltoactionsection\" src=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy-300x300.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy-300x300.png 300w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy-100x100.png 100w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy-140x140.png 140w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy-500x500.png 500w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy-350x350.png 350w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy-270x270.png 270w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy-192x192.png 192w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy-180x180.png 180w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy-32x32.png 32w, https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/05\/cropped-favicon-HD-v2-hwd-logo-copie-copy.png 512w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/p>\n<p><span style=\"color: #000000;\"><span style=\"color: #acb9ca;\"><strong>Hotel Web Design<\/strong><\/span> is the web agency <span style=\"color: #acb9ca;\"><strong>100% dedicated to the hotel industry<\/strong><\/span>We can help you with all aspects of digital communication for your accommodation: <span style=\"color: #acb9ca;\"><strong><a style=\"color: #acb9ca; text-decoration: none;\" href=\"https:\/\/hotel-webdesign.com\/en\/reservation-website-creation\/\">booking websites<\/a><\/strong>, <strong><a style=\"color: #acb9ca; text-decoration: none;\" href=\"https:\/\/hotel-webdesign.com\/en\/referencement-naturel-hotel-restaurant\/\">natural referencing<\/a><\/strong><\/span> specialising in the hotel industry, <span style=\"color: #acb9ca;\"><strong><span style=\"text-decoration: none;\"><a style=\"color: #acb9ca; text-decoration: none;\" href=\"https:\/\/hotel-webdesign.com\/en\/referencement-google-ads-hotel-restaurant-2\/\">Google Ads referencing<\/a> <\/span><\/strong><\/span>and Google Hotel Ads, social networking campaigns, graphic charters and logos for hotels.<span style=\"color: #993366;\"><br \/>\n<span style=\"color: #acb9ca;\"><strong><a class=\"\" style=\"color: #acb9ca;\" href=\"\/en\/contact\/\" target=\"_Blank\" rel=\"noopener\">Make an appointment today<\/a> <\/strong><\/span><\/span>for free advice on how to optimise the digital management of your accommodation.\u00a0<\/span><\/p>\n<\/div>\n\n\n\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>","protected":false},"excerpt":{"rendered":"direct hotel bookings: Booking brings you volume, but it can also take away your customer relationship if you don\u2019t structure a journey capable of capturing intent to...","protected":false},"author":23,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_opengraph-title":"","_yoast_wpseo_opengraph-image":"","_nectar_header_bg":"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2024\/07\/exemple-site-love-room-web-design-creation-site-2.jpg","_nectar_header_bg_height":420,"_hwd_blog_posteur":"","footnotes":"","_yoast_wpseo_twitter-title":"","_yoast_wpseo_twitter-image":""},"categories":[1622,1621],"tags":[],"class_list":{"0":"post-16792","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog-actualites","7":"category-conception-web"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Les bases de la conception de site par grilles, sections et colonnes | Cr\u00e9ation Site H\u00f4tellerie &amp; Tourisme | Hotel Web Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hotel-webdesign.com\/en\/the-basics-of-site-design-using-grids-sections-and-columns\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Les bases de la conception de site par grilles, sections et colonnes | Cr\u00e9ation Site H\u00f4tellerie &amp; Tourisme | Hotel Web Design\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hotel-webdesign.com\/en\/the-basics-of-site-design-using-grids-sections-and-columns\/\" \/>\n<meta property=\"og:site_name\" content=\"Cr\u00e9ation Site H\u00f4tellerie &amp; Tourisme | Hotel Web Design\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hotelwebd\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-16T13:15:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-16T19:10:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg\" \/>\n<meta name=\"author\" content=\"blog\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/\"},\"author\":{\"name\":\"blog\",\"@id\":\"https:\/\/hotel-webdesign.com\/#\/schema\/person\/f49acf87afa5d978a1725aa44cf382eb\"},\"headline\":\"Les bases de la conception de site par grilles, sections et colonnes\",\"datePublished\":\"2025-12-16T13:15:20+00:00\",\"dateModified\":\"2025-12-16T19:10:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/\"},\"wordCount\":4477,\"publisher\":{\"@id\":\"https:\/\/hotel-webdesign.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg\",\"articleSection\":[\"blog actualites\",\"Conception Web\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/\",\"url\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/\",\"name\":\"Les bases de la conception de site par grilles, sections et colonnes | Cr\u00e9ation Site H\u00f4tellerie &amp; Tourisme | Hotel Web Design\",\"isPartOf\":{\"@id\":\"https:\/\/hotel-webdesign.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg\",\"datePublished\":\"2025-12-16T13:15:20+00:00\",\"dateModified\":\"2025-12-16T19:10:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#primaryimage\",\"url\":\"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg\",\"contentUrl\":\"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/hotel-webdesign.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Les bases de la conception de site par grilles, sections et colonnes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hotel-webdesign.com\/#website\",\"url\":\"https:\/\/hotel-webdesign.com\/\",\"name\":\"Hotel Web Design\",\"description\":\"Agence Web H\u00f4tels Restaurants\",\"publisher\":{\"@id\":\"https:\/\/hotel-webdesign.com\/#organization\"},\"alternateName\":\"Agence Web Hotels Restaurants\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hotel-webdesign.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hotel-webdesign.com\/#organization\",\"name\":\"Hotel Web Design\",\"url\":\"https:\/\/hotel-webdesign.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/hotel-webdesign.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/11\/Hotel-Web-Design-logo-v2-version-grise.png\",\"contentUrl\":\"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/11\/Hotel-Web-Design-logo-v2-version-grise.png\",\"width\":497,\"height\":181,\"caption\":\"Hotel Web Design\"},\"image\":{\"@id\":\"https:\/\/hotel-webdesign.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/hotelwebd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/hotel-webdesign.com\/#\/schema\/person\/f49acf87afa5d978a1725aa44cf382eb\",\"name\":\"blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/hotel-webdesign.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/876a614fbc0c97ce4f5f6a95482e89a7d79387c0bd1ee7da0017566e317649a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/876a614fbc0c97ce4f5f6a95482e89a7d79387c0bd1ee7da0017566e317649a1?s=96&d=mm&r=g\",\"caption\":\"blog\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The basics of site design using grids, sections and columns | Hotel Web Design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hotel-webdesign.com\/en\/the-basics-of-site-design-using-grids-sections-and-columns\/","og_locale":"en_GB","og_type":"article","og_title":"Les bases de la conception de site par grilles, sections et colonnes | Cr\u00e9ation Site H\u00f4tellerie &amp; Tourisme | Hotel Web Design","og_url":"https:\/\/hotel-webdesign.com\/en\/the-basics-of-site-design-using-grids-sections-and-columns\/","og_site_name":"Cr\u00e9ation Site H\u00f4tellerie &amp; Tourisme | Hotel Web Design","article_publisher":"https:\/\/www.facebook.com\/hotelwebd","article_published_time":"2025-12-16T13:15:20+00:00","article_modified_time":"2025-12-16T19:10:26+00:00","og_image":[{"url":"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg","type":"","width":"","height":""}],"author":"blog","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#article","isPartOf":{"@id":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/"},"author":{"name":"blog","@id":"https:\/\/hotel-webdesign.com\/#\/schema\/person\/f49acf87afa5d978a1725aa44cf382eb"},"headline":"Les bases de la conception de site par grilles, sections et colonnes","datePublished":"2025-12-16T13:15:20+00:00","dateModified":"2025-12-16T19:10:26+00:00","mainEntityOfPage":{"@id":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/"},"wordCount":4477,"publisher":{"@id":"https:\/\/hotel-webdesign.com\/#organization"},"image":{"@id":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#primaryimage"},"thumbnailUrl":"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg","articleSection":["blog actualites","Conception Web"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/","url":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/","name":"The basics of site design using grids, sections and columns | Hotel Web Design","isPartOf":{"@id":"https:\/\/hotel-webdesign.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#primaryimage"},"image":{"@id":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#primaryimage"},"thumbnailUrl":"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg","datePublished":"2025-12-16T13:15:20+00:00","dateModified":"2025-12-16T19:10:26+00:00","breadcrumb":{"@id":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#primaryimage","url":"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg","contentUrl":"https:\/\/w-maintenance.pro\/wp-content\/uploads\/2025\/12\/hgv2tfoh0ns.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/hotel-webdesign.com\/les-bases-de-la-conception-de-site-par-grilles-sections-et-colonnes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/hotel-webdesign.com\/es\/"},{"@type":"ListItem","position":2,"name":"Les bases de la conception de site par grilles, sections et colonnes"}]},{"@type":"WebSite","@id":"https:\/\/hotel-webdesign.com\/#website","url":"https:\/\/hotel-webdesign.com\/","name":"Hotel Web Design","description":"Web Agency Hotels Restaurants","publisher":{"@id":"https:\/\/hotel-webdesign.com\/#organization"},"alternateName":"Agence Web Hotels Restaurants","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hotel-webdesign.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/hotel-webdesign.com\/#organization","name":"Hotel Web Design","url":"https:\/\/hotel-webdesign.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/hotel-webdesign.com\/#\/schema\/logo\/image\/","url":"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/11\/Hotel-Web-Design-logo-v2-version-grise.png","contentUrl":"https:\/\/hotel-webdesign.com\/wp-content\/uploads\/2019\/11\/Hotel-Web-Design-logo-v2-version-grise.png","width":497,"height":181,"caption":"Hotel Web Design"},"image":{"@id":"https:\/\/hotel-webdesign.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hotelwebd"]},{"@type":"Person","@id":"https:\/\/hotel-webdesign.com\/#\/schema\/person\/f49acf87afa5d978a1725aa44cf382eb","name":"blog","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/hotel-webdesign.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/876a614fbc0c97ce4f5f6a95482e89a7d79387c0bd1ee7da0017566e317649a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/876a614fbc0c97ce4f5f6a95482e89a7d79387c0bd1ee7da0017566e317649a1?s=96&d=mm&r=g","caption":"blog"}}]}},"_links":{"self":[{"href":"https:\/\/hotel-webdesign.com\/en\/wp-json\/wp\/v2\/posts\/16792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hotel-webdesign.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hotel-webdesign.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hotel-webdesign.com\/en\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/hotel-webdesign.com\/en\/wp-json\/wp\/v2\/comments?post=16792"}],"version-history":[{"count":2,"href":"https:\/\/hotel-webdesign.com\/en\/wp-json\/wp\/v2\/posts\/16792\/revisions"}],"predecessor-version":[{"id":16794,"href":"https:\/\/hotel-webdesign.com\/en\/wp-json\/wp\/v2\/posts\/16792\/revisions\/16794"}],"wp:attachment":[{"href":"https:\/\/hotel-webdesign.com\/en\/wp-json\/wp\/v2\/media?parent=16792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hotel-webdesign.com\/en\/wp-json\/wp\/v2\/categories?post=16792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hotel-webdesign.com\/en\/wp-json\/wp\/v2\/tags?post=16792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}