Odoo Web Design Service 101: Design Progress & Responsiveness

<!DOCTYPE html> <html lang="en-US" data-website-id="1" data-main-object="blog.post(1155,)" data-add2cart-redirect="1">  <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="mobile-web-app-capable" content="yes"/> <meta name="generator" content="Odoo"/> <meta name="google-site-verification" content="pgjyH0qvN69B0m_HrTKV6h8TVnbRXp5etEHo19unPy4"/> <meta name="description" content="Odoo Web Design Service is all about helping you build a beautiful website to leave a good impression on visitors and potential customers."/> <meta name="keywords" content="odoo,web design,odoo web design,odoo web design service,web design service,responsive web design"/> <meta property="og:type" content="article"/> <meta property="og:title" content="Odoo Web Design Service 101: Design Progress & Responsiveness"/> <meta property="og:site_name" content="Odoo"/> <meta property="og:url" content="https://www.odoo.com/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <meta property="og:image" content="https://www.odoo.com/web/image/41907516-redirect/WDS.jpg%3Fex%3D658a7549%26is%3D65780049%26hm%3D380e4194de709a3d0864ded6ac16725265dfa84b1671ade245c393ad96d8bf33%26%3D%26format%3Dwebp%26width%3D1166%26height%3D656"/> <meta property="og:description" content="Odoo Web Design Service is all about helping you build a beautiful website to leave a good impression on visitors and potential customers."/> <meta property="article:published_time" content="2024-02-19 02:51:12"/> <meta property="article:modified_time" content="2025-02-07 04:51:19.912724"/> <meta property="article:tag" content="Apac"/> <meta property="article:tag" content="Asia"/> <meta property="article:tag" content="Oceania"/> <meta property="article:tag" content="Odoo Online"/> <meta property="article:tag" content="Odoo.sh"/> <meta property="article:tag" content="On-Premise"/> <meta property="article:tag" content="Web Design Services"/> <meta property="article:tag" content="eCommerce"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:title" content="Odoo Web Design Service 101: Design Progress & Responsiveness"/> <meta name="twitter:image" content="https://www.odoo.com/web/image/41907516-redirect/WDS.jpg%3Fex%3D658a7549%26is%3D65780049%26hm%3D380e4194de709a3d0864ded6ac16725265dfa84b1671ade245c393ad96d8bf33%26%3D%26format%3Dwebp%26width%3D1166%26height%3D656"/> <meta name="twitter:site" content="@odoo"/> <meta name="twitter:description" content="Odoo Web Design Service is all about helping you build a beautiful website to leave a good impression on visitors and potential customers."/> <link rel="alternate" hreflang="ar" href="https://www.odoo.com/ar/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="ca" href="https://www.odoo.com/ca_ES/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="zh" href="https://www.odoo.com/zh_CN/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="zh-tw" href="https://www.odoo.com/zh_TW/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="cs" href="https://www.odoo.com/cs_CZ/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="nl" href="https://www.odoo.com/nl_NL/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="en" href="https://www.odoo.com/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="fi" href="https://www.odoo.com/fi_FI/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="fr" href="https://www.odoo.com/fr_FR/blog/trucs-et-astuces-pour-les-entreprises-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="de" href="https://www.odoo.com/de_DE/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="id" href="https://www.odoo.com/id_ID/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="it" href="https://www.odoo.com/it_IT/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="ja" href="https://www.odoo.com/ja_JP/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="ko" href="https://www.odoo.com/ko_KR/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="pl" href="https://www.odoo.com/pl_PL/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="pt" href="https://www.odoo.com/pt_BR/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="ro" href="https://www.odoo.com/ro_RO/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="ru" href="https://www.odoo.com/ru_RU/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="sk" href="https://www.odoo.com/sk_SK/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="sl" href="https://www.odoo.com/sl_SI/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="es" href="https://www.odoo.com/es/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="es-es" href="https://www.odoo.com/es_ES/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="th" href="https://www.odoo.com/th_TH/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="tr" href="https://www.odoo.com/tr_TR/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="uk" href="https://www.odoo.com/uk_UA/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="vi" href="https://www.odoo.com/vi_VN/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="alternate" hreflang="x-default" href="https://www.odoo.com/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="canonical" href="https://www.odoo.com/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155"/> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""/> <title>Odoo Web Design Service 101: Design Progress & Responsiveness</title> <link type="image/x-icon" rel="shortcut icon" href="https://odoocdn.com/web/image/website/1/favicon?unique=f584581"/> <link rel="preload" href="https://odoocdn.com/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff2?v=4.7.0" as="font" crossorigin=""/> <link type="text/css" rel="stylesheet" href="https://odoocdn.com/web/assets/1/4b6d597/web.assets_frontend.min.css"/> <script id="web.layout.odooscript" type="text/javascript"> var odoo = { csrf_token: "6cc3edc470ccaaec01714db1a3bc6dd16939985fo1771336351", debug: "", }; </script> <script type="text/javascript"> odoo.__session_info__ = {"is_admin": false, "is_system": false, "is_public": true, "is_website_user": true, "uid": null, "is_frontend": true, "profile_session": null, "profile_collectors": null, "profile_params": null, "show_effect": true, "currencies": {"137": {"symbol": "AED", "position": "after", "digits": [69, 2]}, "19": {"symbol": "ARS", "position": "after", "digits": [69, 2]}, "21": {"symbol": "AUD", "position": "after", "digits": [69, 2]}, "59": {"symbol": "\u09f3", "position": "after", "digits": [69, 2]}, "27": {"symbol": "\u043b\u0432", "position": "after", "digits": [69, 2]}, "6": {"symbol": "R$", "position": "before", "digits": [69, 2]}, "4": {"symbol": "CAD", "position": "after", "digits": [69, 2]}, "5": {"symbol": "CHF", "position": "after", "digits": [69, 2]}, "7": {"symbol": "CNY", "position": "after", "digits": [69, 2]}, "194": {"symbol": "K\u010d", "position": "after", "digits": [69, 2]}, "10": {"symbol": "kr", "position": "after", "digits": [69, 2]}, "80": {"symbol": "E\u00a3", "position": "after", "digits": [69, 2]}, "1": {"symbol": "\u20ac", "position": "after", "digits": [69, 2]}, "18": {"symbol": "GBP", "position": "after", "digits": [69, 2]}, "25": {"symbol": "HK$", "position": "after", "digits": [69, 2]}, "193": {"symbol": "Rp", "position": "after", "digits": [69, 2]}, "20": {"symbol": "Rs", "position": "after", "digits": [69, 2]}, "26": {"symbol": "\u00a5", "position": "after", "digits": [69, 2]}, "100": {"symbol": "KSh", "position": "after", "digits": [69, 2]}, "34": {"symbol": "\u20a9", "position": "after", "digits": [69, 2]}, "116": {"symbol": " \u062f.\u0645", "position": "after", "digits": [69, 2]}, "115": {"symbol": "\u20ae", "position": "after", "digits": [69, 2]}, "44": {"symbol": "Rs", "position": "after", "digits": [69, 2]}, "35": {"symbol": "Mex$", "position": "before", "digits": [69, 2]}, "36": {"symbol": "RM", "position": "after", "digits": [69, 2]}, "183": {"symbol": "kr", "position": "before", "digits": [69, 2]}, "37": {"symbol": "$", "position": "after", "digits": [69, 2]}, "38": {"symbol": "Php", "position": "after", "digits": [69, 2]}, "171": {"symbol": "Rs.", "position": "after", "digits": [69, 2]}, "16": {"symbol": "z\u0142", "position": "after", "digits": [69, 2]}, "166": {"symbol": "QR", "position": "after", "digits": [69, 2]}, "30": {"symbol": "kr", "position": "after", "digits": [69, 2]}, "158": {"symbol": "SR", "position": "after", "digits": [69, 2]}, "178": {"symbol": "kr", "position": "after", "digits": [69, 2]}, "39": {"symbol": "$", "position": "after", "digits": [69, 2]}, "40": {"symbol": "\u0e3f", "position": "after", "digits": [69, 2]}, "141": {"symbol": "DT", "position": "after", "digits": [69, 2]}, "146": {"symbol": "NT$", "position": "after", "digits": [69, 2]}, "2": {"symbol": "US$", "position": "before", "digits": [69, 2]}, "24": {"symbol": "\u20ab", "position": "after", "digits": [69, 2]}, "41": {"symbol": "R", "position": "after", "digits": [69, 2]}}, "bundle_params": {"lang": "en_US", "website_id": 1}, "test_mode": false, "websocket_worker_version": "18.0-3", "translationURL": "/website/translations", "cache_hashes": {"translations": "4e4456f5821568cdb2f47527400173088d4cc33e"}, "recaptcha_public_key": "6Ldp7rgUAAAAAJF-NZ6k-y0HGEPozP3SeROO_z7F", "geoip_country_code": "SG", "geoip_phone_code": 65, "lang_url_code": "en_US", "turnstile_site_key": "0x4AAAAAAADwqVOUIWCeR_H8"}; if (!/(^|;\s)tz=/.test(document.cookie)) { const userTZ = Intl.DateTimeFormat().resolvedOptions().timeZone; document.cookie = `tz=${userTZ}; path=/`; } </script> <script type="text/javascript" defer="defer" src="https://odoocdn.com/web/assets/1/dc08da1/web.assets_frontend_minimal.min.js" onerror="__odooAssetError=1"></script> <script type="text/javascript" defer="defer" data-src="https://odoocdn.com/web/assets/1/892e209/web.assets_frontend_lazy.min.js" onerror="__odooAssetError=1"></script> <script> if (!window.odoo) { window.odoo = {}; } odoo.__session_info__ = odoo.__session_info__ || { websocket_worker_version: "18.0-3" } odoo.__session_info__ = Object.assign(odoo.__session_info__, { livechatData: { isAvailable: true, serverUrl: "https://www.odoo.com", options: {"header_background_color": "#714b67", "button_background_color": "#714b67", "title_color": "#FFFFFF", "button_text_color": "#FFFFFF", "button_text": "Chat with a human!", "input_placeholder": false, "default_message": "Welcome to Odoo. How can I help you today?", "channel_name": "Odoo Website ALL", "channel_id": 19, "default_username": "Visitor"}, }, }); </script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} </script> <noscript> <style> /* Prevent animated elements hiding */ .o_animate_in_children > * { opacity: 1!important; -webkit-transform: scale(1)!important; -ms-transform: scale(1)!important; transform: scale(1)!important; } </style> </noscript> </head> <body> <div id="wrapwrap" class=" o_single_post "> <a class="o_skip_to_content btn btn-primary rounded-0 visually-hidden-focusable position-absolute start-0" href="#wrap">Skip to Content</a> <header id="top" data-anchor="true" data-name="Header" data-extra-items-toggle-aria-label="Extra items button" class=" o_no_autohide_menu o_affix_enabled o_header_fixed o_header_fade_out o_main_header o_inverted o_not_editable" style=" "> <div class="o_main_header_main top_menu" id="top_menu"> <a class="float-start o_logo" href="/"><span class="visually-hidden sr-only">Odoo</span></a> <a href="#" role="button" class="o_mobile_menu_toggle d-inline-block d-md-none"> <i class="fa fa-bars" focusable="false"></i><span class="visually-hidden sr-only">Menu</span> </a> <ul class="o_header_buttons list-unstyled"> <li class="nav-item d-md-none me-auto"> <a class="nav-link text-whatsapp ps-0 py-2" href="https://wa.me/85264491993"> <i class="fa fa-whatsapp fs-4 align-middle mt-n1 me-2"></i><small>WhatsApp</small> </a> </li> <li class="o_wsale_my_cart nav-item me-lg-0 d-none"> <a href="/shop/cart" class="nav-link px-1" aria-label="Shopping Cart"> <i class="fa fa-shopping-cart"></i><sup class="my_cart_quantity rounded-pill bg-o-color-1 ms-1 py-1 px-2"></sup> </a> </li> <li class="nav-item o_no_autohide_item"> <a href="/web/login" class="nav-link">Sign in</a> </li> <li class="nav-item o_no_autohide_item"><a class="btn btn-primary btn-sm text-nowrap trial_link" href="/trial">Try it free</a> </li> </ul> <ul class="o_primary_nav"> <li class="dropdown"> <a href="#" aria-label="Apps: use the dropdown menu to switch apps" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" class="dropdown-toggle">Apps</a> <div class="start-0 dropdown-menu o_secondary_nav" data-bs-parent="o_primary_nav"> <div class="container"> <div class="row"> <div class="col-md-3 o_finance_apps "> <div class="o_nav_app_family">Finance</div> <ul> <li><a class="dropdown-item" href="/app/accounting">Accounting</a></li> <li><a class="dropdown-item" href="/app/invoicing">Invoicing</a></li> <li><a class="dropdown-item" href="/app/expenses">Expenses</a></li> <li><a class="dropdown-item" href="/app/spreadsheet">Spreadsheet (BI)</a></li> <li><a class="dropdown-item" href="/app/documents">Documents</a></li> <li><a class="dropdown-item" href="/app/sign">Sign</a></li> </ul> </div> <div class="col-md-3 o_sale_apps "> <div class="o_nav_app_family">Sales</div> <ul> <li><a class="dropdown-item" href="/app/crm">CRM</a></li> <li><a class="dropdown-item" href="/app/sales">Sales</a></li> <li><a class="dropdown-item" href="/app/point-of-sale-shop">POS Shop</a></li> <li><a class="dropdown-item" href="/app/point-of-sale-restaurant">POS Restaurant</a></li> <li><a class="dropdown-item" href="/app/subscriptions">Subscriptions</a></li> <li><a class="dropdown-item" href="/app/rental">Rental</a></li> </ul> </div> <div class="col-md-3 o_website_apps "> <div class="o_nav_app_family">Websites</div> <ul> <li><a class="dropdown-item" href="/app/website">Website Builder</a></li> <li><a class="dropdown-item" href="/app/ecommerce">eCommerce</a></li> <li><a class="dropdown-item" href="/app/blog">Blog</a></li> <li><a class="dropdown-item" href="/app/forum">Forum</a></li> <li><a class="dropdown-item" href="/app/live-chat">Live Chat</a></li> <li><a class="dropdown-item" href="/app/elearning">eLearning</a></li> </ul> </div> <div class="col-md-3 o_inventory_apps "> <div class="o_nav_app_family">Supply Chain</div> <ul> <li><a class="dropdown-item" href="/app/inventory">Inventory</a></li> <li><a class="dropdown-item" href="/app/manufacturing">Manufacturing</a></li> <li><a class="dropdown-item" href="/app/plm">PLM</a></li> <li><a class="dropdown-item" href="/app/purchase">Purchase</a></li> <li><a class="dropdown-item" href="/app/maintenance">Maintenance</a></li> <li><a class="dropdown-item" href="/app/quality">Quality</a></li> </ul> </div> </div> <div class="row"> <div class="col-md-3 o_hr_apps "> <div class="o_nav_app_family">Human Resources</div> <ul> <li><a class="dropdown-item" href="/app/employees">Employees</a></li> <li><a class="dropdown-item" href="/app/recruitment">Recruitment</a></li> <li><a class="dropdown-item" href="/app/time-off">Time Off</a></li> <li><a class="dropdown-item" href="/app/appraisals">Appraisals</a></li> <li><a class="dropdown-item" href="/app/referrals">Referrals</a></li> <li><a class="dropdown-item" href="/app/fleet">Fleet</a></li> </ul> </div> <div class="col-md-3 o_marketing_apps "> <div class="o_nav_app_family">Marketing</div> <ul> <li><a class="dropdown-item" href="/app/social-marketing">Social Marketing</a></li> <li><a class="dropdown-item" href="/app/email-marketing">Email Marketing</a></li> <li><a class="dropdown-item" href="/app/sms-marketing">SMS Marketing</a></li> <li><a class="dropdown-item" href="/app/events">Events</a></li> <li><a class="dropdown-item" href="/app/marketing-automation">Marketing Automation</a></li> <li><a class="dropdown-item" href="/app/surveys">Surveys</a></li> </ul> </div> <div class="col-md-3 o_services_apps "> <div class="o_nav_app_family">Services</div> <ul> <li><a class="dropdown-item" href="/app/project">Project</a></li> <li><a class="dropdown-item" href="/app/timesheet">Timesheets</a></li> <li><a class="dropdown-item" href="/app/field-service">Field Service</a></li> <li><a class="dropdown-item" href="/app/helpdesk">Helpdesk</a></li> <li><a class="dropdown-item" href="/app/planning">Planning</a></li> <li><a class="dropdown-item" href="/app/appointments">Appointments</a></li> </ul> </div> <div class="col-md-3 o_productivity_apps "> <div class="o_nav_app_family">Productivity</div> <ul> <li><a class="dropdown-item" href="/app/discuss">Discuss</a></li> <li><a class="dropdown-item" href="/app/approvals">Approvals</a></li> <li><a class="dropdown-item" href="/app/iot">IoT</a></li> <li><a class="dropdown-item" href="/app/voip">VoIP</a></li> <li><a class="dropdown-item" href="/app/knowledge">Knowledge</a></li> <li><a class="dropdown-item" href="/app/whatsapp">WhatsApp</a></li> </ul> </div> </div> </div> <span class="o_store_link d-md-flex justify-content-md-center"> <a class="mx-md-3 px-3 dropdown-item" href="https://apps.odoo.com/apps/modules"><i class="fa fa-cube fa-fw me-2"></i>Third party apps</a> <a class="mx-md-3 px-3 dropdown-item" href="/app/studio"><i class="fa fa-pencil fa-fw me-2"></i>Odoo Studio</a> <a href="https://www.odoo.sh" class="mx-md-3 px-3"><i class="fa fa-cloud fa-fw me-2"></i>Odoo Cloud Platform</a> </span> </div> </li> <li class="dropdown"> <a href="#" aria-label="Industries: use the dropdown menu to find links to industries related pages" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" class="dropdown-toggle">Industries</a> <div class="start-0 dropdown-menu o_secondary_nav" data-bs-parent="o_primary_nav"> <div class="container"> <div class="row"> <div class="col-md-3 o_retail_industries "> <div class="o_nav_ind_family">Retail</div> <ul> <li><a class="dropdown-item" href="/industries/book-store">Book Store</a></li> <li><a class="dropdown-item" href="/industries/clothing-store">Clothing Store</a></li> <li><a class="dropdown-item" href="/industries/hardware-shop">Hardware Store</a></li> <li><a class="dropdown-item" href="/industries/toy-store">Toy Store</a></li> <li><a class="dropdown-item" href="/industries/bakery">Bakery</a></li> </ul> </div> <div class="col-md-3 o_services_industries "> <div class="o_nav_ind_family">Services</div> <ul> <li><a class="dropdown-item" href="/industries/odoo-partner">Odoo Partner</a></li> <li><a class="dropdown-item" href="/industries/real-estate">Real Estate</a></li> <li><a class="dropdown-item" href="/industries/talent-acquisition">Talent Acquisition</a></li> <li><a class="dropdown-item" href="/industries/hair-salon">Hair Salon</a></li> <li><a class="dropdown-item" href="/industries/bike-leasing">Bike Leasing</a></li> <li><a class="dropdown-item" href="/industries/property-owner-association">Property Owner Association</a></li> </ul> </div> <div class="col-md-3 o_hospitality_industries "> <div class="o_nav_ind_family">Hospitality</div> <ul> <li><a class="dropdown-item" href="/industries/bar-pub">Bar and Pub</a></li> <li><a class="dropdown-item" href="/industries/fast-food">Fast Food</a></li> <li><a class="dropdown-item" href="/industries/fine-dining-restaurant">Fine Dining Restaurant</a></li> </ul> </div> <div class="col-md-3 o_health_industries "> <div class="o_nav_ind_family">Health & Fitness</div> <ul> <li><a class="dropdown-item" href="/industries/fitness-center">Fitness Center</a></li> <li><a class="dropdown-item" href="/industries/sports-club">Sports Club</a></li> <li><a class="dropdown-item" href="/industries/wellness-practitioners">Wellness Practitioners</a></li> </ul> </div> </div> <div class="row"> <div class="col-md-3 o_supply_chain_industries "> <div class="o_nav_ind_family">Supply Chain</div> <ul> <li><a class="dropdown-item" href="/industries/beverage-distributor">Beverage Distributor</a></li> <li><a class="dropdown-item" href="/industries/corporate-gifts">Corporate Gifts</a></li> <li><a class="dropdown-item" href="/industries/custom-furniture-production">Custom Furniture Production</a></li> <li><a class="dropdown-item" href="/industries/micro-brewery">Micro Brewery</a></li> </ul> </div> <div class="col-md-3 o_construction_industries "> <div class="o_nav_ind_family">Construction</div> <ul> <li><a class="dropdown-item" href="/industries/construction">Construction</a></li> <li><a class="dropdown-item" href="/industries/gardening">Gardening</a></li> <li><a class="dropdown-item" href="/industries/solar-energy">Solar Energy</a></li> </ul> </div> <div class="col-md-6 x_wd d-none d-lg-flex align-self-end"> <img src="https://odoocdn.com/openerp_website/static/src/img/arrows/grey_arrow_sm_02.svg" height="40px" class="rotate-70 me-3 mt-3 mb-n2" alt="" loading="lazy"/> <div class="display-6 text-primary">...and many more!</div> </div> </div> </div> <span class="o_store_link d-md-flex justify-content-md-center"> <a class="mx-md-3 px-3 dropdown-item" href="/trial?industry"><i class="fa fa-cube fa-fw me-2"></i>Browse all Industries</a> </span> </div> </li> <li class="dropdown"> <a href="#" aria-label="Community: use the dropdown menu to find links to community related pages" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" class="dropdown-toggle">Community</a> <div class="start-0 dropdown-menu o_secondary_nav pb-0" data-bs-parent="o_primary_nav"> <div class="container"> <div class="row"> <div class="col-md-3 o_learn_com"> <div class="o_nav_com_family">Learn</div> <ul> <li><a class="dropdown-item" href="/slides/all/tag/odoo-tutorials-9">Tutorials</a></li> <li><a class="dropdown-item" href="/page/docs">Documentation</a></li> <li><a class="dropdown-item" href="/slides/all?slide_category=certification">Certifications</a></li> <li><a class="dropdown-item" href="/training-events">Training</a></li> <li><a class="dropdown-item" href="https://www.odoo.fm" target="_blank">Podcast</a></li> </ul> <div class="o_nav_com_family mt-lg-5">Empower Education</div> <ul> <li><a class="dropdown-item" href="/education/program">Education Program</a></li> <li><a class="dropdown-item" href="/education/scale-up-business-game">Scale Up! Business Game</a></li> <li><a class="dropdown-item" href="/education/visit-odoo">Visit Odoo</a></li> </ul> </div> <div class="col-md-3 o_software_com"> <div class="o_nav_com_family">Get the Software</div> <ul> <li><a class="dropdown-item" href="/page/download">Download</a></li> <li><a class="dropdown-item" href="/page/editions">Compare Editions</a></li> <li><a class="dropdown-item" href="/page/release-notes">Releases</a></li> </ul> </div> <div class="col-md-3 o_collab_com"> <div class="o_nav_com_family">Collaborate</div> <ul> <li><a class="dropdown-item" href="https://github.com/odoo">Github</a></li> <li><a class="dropdown-item" href="/forum/help-1">Forum</a></li> <li><a class="dropdown-item" href="/events">Events</a></li> <li><a class="dropdown-item" href="https://github.com/odoo/odoo/wiki/Translations">Translations</a></li> </ul> <ul class="pt-lg-3"> <li><a class="dropdown-item" href="/become-a-partner">Become a Partner</a></li> <li><a class="dropdown-item" href="/accounting-firms/register">Register your Accounting Firm</a></li> </ul> </div> <div class="col-md-3 o_services_com"> <div class="o_nav_com_family">Get Services</div> <ul> <li><a class="dropdown-item" href="/partners">Find a Partner</a></li> <li><a class="dropdown-item" href="/accounting-firms">Find an Accountant</a></li> </ul> <ul class="pt-lg-3"> <li><div class="o_schedule_demo "> <div class="dropdown"> <a href="#" data-bs-toggle="dropdown" class="dropdown-toggle dropdown-item text-start">Meet an advisor</a> <ul class="dropdown-menu"> <li><a class="dropdown-item btn" target="_blank" href="/appointment/5542">Demo with an Expert (1-50 employees)</a></li> <li><a class="dropdown-item btn" target="_blank" href="/appointment/5543">Demo with an Expert (50-250 employees)</a></li> <li><a class="dropdown-item btn" target="_blank" href="/appointment/4497">Large company (>250)</a></li> </ul> </div> </div> </li> <li><a class="dropdown-item" href="/blog/customer-reviews-6">Customer References</a></li> </ul> <ul class="pt-lg-3"> <li><a class="dropdown-item" href="/pricing-packs">Implementation Services</a></li> <li><a class="dropdown-item" href="/page/developers-on-demand">Development Services</a></li> <li><a class="dropdown-item" href="/help">Support</a></li> <li><a class="dropdown-item" href="//upgrade.odoo.com">Upgrades</a></li> </ul> </div> </div> </div> <span class="o_header_social"> <div class="social_icons"> <a target="_blank" href="https://github.com/odoo/odoo" class="d-inline dropdown-item"><i class="fa fa-fw fa-github" focusable="false"></i><span class="visually-hidden sr-only">Github</span></a> <a target="_blank" href="https://www.youtube.com/channel/UCkQPikELWZFLgQNHd73jkdg" class="d-inline dropdown-item"><i class="fa fa-fw fa-youtube-play" focusable="false"></i><span class="visually-hidden sr-only">Youtube</span></a> <a target="_blank" href="https://twitter.com/Odoo" class="d-inline dropdown-item"><i class="fa fa-fw fa-twitter" focusable="false"></i><span class="visually-hidden sr-only">Twitter</span></a> <a target="_blank" href="https://www.linkedin.com/company/odoo" class="d-inline dropdown-item"><i class="fa fa-fw fa-linkedin" focusable="false"></i><span class="visually-hidden sr-only">Linkedin</span></a> <a target="_blank" href="https://www.instagram.com/odoo.official" class="d-inline dropdown-item"><i class="fa fa-fw fa-instagram" focusable="false"></i><span class="visually-hidden sr-only">Instagram</span></a> <a target="_blank" href="https://www.facebook.com/odoo" class="d-inline dropdown-item"><i class="fa fa-fw fa-facebook" focusable="false"></i><span class="visually-hidden sr-only">Facebook</span></a> <a target="_blank" href="https://www.tiktok.com/@odoo" class="d-inline dropdown-item"> <svg xmlns="http://www.w3.org/2000/svg" style="width: 15px; margin-top: -3px;" class="custom-tiktok" viewBox="0 0 2859 3333" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"><path d="M2081 0c55 473 319 755 778 785v532c-266 26-499-61-770-225v995c0 1264-1378 1659-1932 753-356-583-138-1606 1004-1647v561c-87 14-180 36-265 65-254 86-398 247-358 531 77 544 1075 705 992-358V1h551z"></path></svg> </a> <a target="_blank" href="//podcast.odoo.com" class="d-inline dropdown-item"><i class="fa fa-fw fa-spotify" focusable="false"></i><span class="visually-hidden sr-only">Spotify</span></a> </div> <div> <a class="d-inline dropdown-item" href="tel:+3222903490"><i class="fa fa-phone text-muted me-1"></i>+32 2 290 34 90</a> <a target="_blank" class="d-inline dropdown-item" href="https://wa.me/85264491993"><i class="fa fa-whatsapp me-1"></i> WhatsApp with Us</a><div class="o_schedule_demo w-auto"> <div class="dropdown"> <a href="#" data-bs-toggle="dropdown" class="dropdown-toggle dropdown-item d-inline text-start"><i class="fa fa-calendar text-muted"></i> Get a demo</a> <ul class="dropdown-menu"> <li><a class="dropdown-item btn" target="_blank" href="/appointment/5542">Demo with an Expert (1-50 employees)</a></li> <li><a class="dropdown-item btn" target="_blank" href="/appointment/5543">Demo with an Expert (50-250 employees)</a></li> <li><a class="dropdown-item btn" target="_blank" href="/appointment/4497">Large company (>250)</a></li> </ul> </div> </div> </div> </span> </div> </li> <li><a href="/pricing">Pricing</a></li> <li><a href="/contactus">Contact</a></li> </ul> </div> </header> <main> <div id="wrap" class="js_blog website_blog o_single_blog o_wblog_cover_post"> <section id="o_wblog_post_top"> <div id="title" class="blog_header"> <div data-name="Blog Post Cover" style="" data-use_size="True" data-use_filters="True" data-res-model="blog.post" data-res-id="1155" class="o_record_cover_container d-flex flex-column h-100 o_colored_level o_cc o_cc3 o_cc o_half_screen_height o_record_has_cover o_wblog_post_page_cover"> <div class="o_record_cover_component o_record_cover_image o_we_snippet_autofocus" style="background-image: url(https://odoocdn.com/web/image/41651342-0b5100f8/pexels-cottonbro-studio-5082579.jpg);"></div> <div class="o_record_cover_component o_record_cover_filter oe_black" style="opacity: 0.2;"></div> <div class="container text-center position-relative h-100 d-flex flex-column flex-grow-1 justify-content-around"> <div class="o_wblog_post_title js_comment"> <h1 id="o_wblog_post_name" class="o_editable_no_shadow" data-oe-expression="blog_post.name" placeholder="Blog Post Title" data-blog-id="1155">Odoo Web Design Services 101: Design Progress & Responsiveness</h1> </div> <a id="o_wblog_post_content_jump" href="#o_wblog_post_main" class="css_editable_mode_hidden justify-content-center align-items-center rounded-circle mx-auto mb-5 text-decoration-none"> <i class="fa fa-angle-down fa-3x text-white" aria-label="To blog content" title="To blog content"></i> </a> </div> </div> </div> </section> <section id="o_wblog_post_main" class="container pt-4 pb-5 "> <div class="o_container_small"> <div class="d-flex flex-column flex-lg-row"> <div id="o_wblog_post_content" class=" o_container_small w-100 flex-shrink-0"> <div data-editor-message="WRITE HERE OR DRAG BUILDING BLOCKS" class="o_wblog_post_content_field js_comment o_wblog_read_text"> <p><a href="/zh_TW/blog/business-hacks-1/odoo-web-design-services-101-site-map-and-wireframing-1122" target="_blank">We talked about the importance of a site map and wireframe last time.</a> But how are we going to translate all that into your website? Scroll down for a walk-through and all the tips and tricks from Odoo's Web Design Experts!</p> <div data-oe-expression="//www.youtube.com/embed/oFkRQHHTl6U?rel=0&autoplay=1&mute=1&enablejsapi=1&loop=1&playlist=oFkRQHHTl6U" class="media_iframe_video"> <div class="css_editable_mode_display"></div> <div class="media_iframe_video_size"></div> <iframe frameborder="0" allowfullscreen="allowfullscreen" src="//www.youtube.com/embed/oFkRQHHTl6U?rel=0&autoplay=1&mute=1&enablejsapi=1&loop=1&playlist=oFkRQHHTl6U"></iframe> </div> <p><br></p> <section class="s_table_of_content pt24 pb24 o_cc o_cc1 o_colored_level" data-snippet="s_table_of_content" data-name="Table of Content" style="background-image: none;"> <div class="container"> <div class="row s_nb_column_fixed"> <div class="col-lg-3 s_table_of_content_navbar_wrap s_table_of_content_navbar_sticky s_table_of_content_vertical_navbar d-print-none d-none d-lg-block o_not_editable o_cc o_cc1 o_colored_level" data-name="Navbar"> <div class="s_table_of_content_navbar list-group o_no_link_popover" style=""><a href="#table_of_content_heading_1702607065516_114" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0">Outstanding Menu Bar</a><a href="#table_of_content_heading_1702607065517_115" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0">Crisp Content</a><a href="#table_of_content_heading_1702607065517_116" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0">Responsive Web Design</a><a href="#table_of_content_heading_1702607065518_117" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0">More Tips & Tricks </a></div> </div> <div class="col-lg-9 s_table_of_content_main oe_structure oe_empty o_colored_level" data-name="Content" data-editor-message-default="true" data-editor-message="DRAG BUILDING BLOCKS HERE"> <section class="pb16 o_colored_level" style="background-image: none;"> <h2 data-anchor="true" id="table_of_content_heading_1702607065516_114"><font class="text-o-color-1">Outstanding Menu Bar</font><br></h2> <p>Building a straightforward menu and footer is the first step to a beautiful website to leave a good impression on visitors and potential customers. </p><p class="o_default_snippet_text">Simply structure your menu and footer the way your site map suggests to ensure precise navigation. Don't forget to add your logo and feature your selected brand color at the footer to represent your business just as you want. <br></p> </section> <section class="pb16 o_colored_level" style="background-image: none;"> <h2 data-anchor="true" id="table_of_content_heading_1702607065517_115"><font class="text-o-color-1">Crisp Content</font></h2><p style="margin-bottom: 0px;">Think like your customers when adding content to your now structured website—crisp presentation and eye-catching design are key. </p><p style="margin-bottom: 0px;"><br></p><p style="margin-bottom: 0px;">Actualize your wireframe by playing around with the user-friendly <a href="/app/website" target="_blank">Odoo Website Builder</a> to present your products and services in tailored text colors and placement. If you are looking for something quick but still charming, make use of the many design blocks available on the Website Builder. Easy to modify, these design elements can also function as brainstormers or the foundation of your unique design before you make edits—be it smoothing out the corners or completely changing the size and shape of your blocks—to claim the design yours. </p><p style="margin-bottom: 0px;"><br></p><p>The next step is to accent your website design with visuals. Take advantage of all the beautiful free images on <a href="https://unsplash.com/" target="_blank">Unsplash</a> available on Odoo to appeal to your visitors!<br></p> </section><section class="pb16 o_colored_level" style="background-image: none;"> <h2 data-anchor="true" id="table_of_content_heading_1702607065517_116"><font class="text-o-color-1">Responsive Web Design</font></h2><p style="margin-bottom: 0px;">Odoo also understands that modern businesses welcome most visitors on mobile views, as a mobile-friendly website guarantees you:</p><p style="margin-bottom: 0px;"><br></p><ol style="margin-bottom: 0px;"><li>Seamless User Experience,</li><li>Improved Search Engine Visibility, and</li><li>To Stay Ahead of the Competition. </li></ol></section><section class="s_text_image o_colored_level pt0 pb0" data-snippet="s_image_text" data-name="Image - Text" style="background-image: none;"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 pt16 pb16 o_colored_level"> <img src="https://odoocdn.com/web/image/41650006-77071f0c/unnamed.png?access_token=b1b293f0-4e85-4c38-b459-5d0409beb09d" alt="" class="img img-fluid mx-auto o_we_custom_image" data-mimetype="image/png" data-original-id="41650006" data-original-src="/web/image/41650006-77071f0c/unnamed.png" data-mimetype-before-conversion="image/png" data-bs-original-title="" title="" aria-describedby="tooltip944101" loading="lazy"> </div> <div class="col-lg-6 pb16 o_colored_level pt0"> <p><br>Toggle between the "Mobile" and "Desktop" views or click the mobile icon on your top edit menu to ensure your website design on mobile view is as seamless and easy to navigate as on laptops. One of the best features of our low-code Website Builder is that you get to edit everything on the front end and get instant reflection of your edits. </p></div> </div> </div> </section><section class="s_text_block o_colored_level pt0 pb0" data-snippet="s_text_block" data-name="Text" style="background-image: none;"> <div class="container s_allow_columns"> <p style="margin-bottom: 0px;">Odoo also allows users to add and remove blocks or adjust spacing when viewing your website on mobile view, with the placements on laptop view remaining the same. </p><p style="margin-bottom: 0px;"><br></p><p>And this is how we support responsive web designs for optimized conversion and results for your online business!<br></p></div> </section><section class="pb16 o_colored_level" style="background-image: none;"> <h2 data-anchor="true" id="table_of_content_heading_1702607065518_117"><font class="text-o-color-1">More Tips & Tricks </font></h2><ol style="margin-bottom: 0px;"><li> <strong>Shape Your Images:</strong> Experiment with the customizable shapes and features to look different and stand out from your competitors!</li><li><strong>Set Up A Parallax Background: </strong>Give your website a modern look by featuring a mainstay image complemented by the many customizable templates. <br> <img src="https://lh7-us.googleusercontent.com/oPk_Jis7RFPJTAtCaWCnNwxVgCXBUyyEm-XRHhwomxBI8R_jVbHOGUW9oEv2AkcCf83Bg80gE6X1UfBJRzyFoMWQ5yd4GGL2pjDGXM1VuH1pvh7VDVUMqf17FgfeFkHV9nnjnJ1pcqfaWWVvEL-nzeFTKA=s2048" data-bs-original-title="" title="" aria-describedby="tooltip137717" style="width: 100% !important;" loading="lazy"> <br></li><li><strong>Use Odoo's Built-in Tabs & Forms:</strong> Interact with your visitors by encouraging them to reach out to you via request and quotation forms on your Odoo-supported website and have the inquiries automated on the backend on <a href="/app/crm" target="_blank">CRM</a>, Contacts, <a href="/app/ecommerce" target="_blank">eCommerce</a>, and <a href="/app/helpdesk" target="_blank">Helpdesk</a>.</li><li><strong>Hit "Save": </strong>Who hasn't experienced the pain of losing hours of hard work for not hitting "Save"? We learn from history. </li></ol></section> </div> </div> </div> </section> <section class="s_text_block pb40 o_colored_level pt0" data-snippet="s_text_block" data-name="Text" style="background-image: none;"> <div class="container s_allow_columns"> <p>And we hope this gives you an idea of how easy it is to build your online business using the <a href="/webdesign" target="_blank">Odoo Web Design Services</a>*. Still have doubts? <a href="/book/website-expert" target="_blank">Book a free audit session</a> with our in-house Web Design experts!</p><p><em><span style="font-size: 14px;">*Free audit session is only available in APAC.</span></em> </p><p><br></p></div> </section></div> <div class="css_editable_mode_hidden text-muted"> <div>in <a href="/blog/business-hacks-1"><b>Business Hacks</b></a></div> <div># <a class="badge me-1 o_tag o_color_0 post_link" href="/blog/business-hacks-1/tag/apac-385">Apac</a> <a class="badge me-1 o_tag o_color_0 post_link" href="/blog/business-hacks-1/tag/asia-249">Asia</a> <a class="badge me-1 o_tag o_color_0 post_link" href="/blog/business-hacks-1/tag/oceania-252">Oceania</a> <a class="badge me-1 o_tag o_color_0 post_link" href="/blog/business-hacks-1/tag/odoo-online-250">Odoo Online</a> <a class="badge me-1 o_tag o_color_0 post_link" href="/blog/business-hacks-1/tag/odoo-sh-323">Odoo.sh</a> <a class="badge me-1 o_tag o_color_0 post_link" href="/blog/business-hacks-1/tag/on-premise-253">On-Premise</a> <a class="badge me-1 o_tag o_color_0 post_link" href="/blog/business-hacks-1/tag/web-design-services-393">Web Design Services</a> <a class="badge me-1 o_tag o_color_0 post_link" href="/blog/business-hacks-1/tag/ecommerce-339">eCommerce</a> </div> </div> </div> </div> </div> <div class="container"> <div class="mx-auto o_container_small"> <div id="o_wblog_post_comments" class="pt-4 o_container_small"> <div class="small mb-4"> <a class="btn btn-sm btn-primary" href="/web/login?redirect=/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155#discussion"><b>Sign in</b></a> to leave a comment </div> <div id="discussion" data-anchor="true" class="d-print-none o_portal_chatter o_not_editable p-0" data-res_model="blog.post" data-res_id="1155" data-pager_step="10" data-allow_composer="1" data-two_columns="false"> </div> </div> </div> </div> </section> <section id="o_wblog_post_footer"> <div class="mt-5"> <div id="o_wblog_next_container" class="d-flex flex-column"> <div data-name="Cover" style="" data-use_filters="True" data-res-model="blog.post" data-res-id="1122" class="o_record_cover_container d-flex flex-column h-100 o_colored_level o_cc o_cc3 o_cc o_wblog_post_page_cover o_wblog_post_page_cover_footer o_record_has_cover"> <div class="o_record_cover_component o_record_cover_image " style="background-image: url(https://odoocdn.com/web/image/40263767-5f73247c/pexels-monoar-rahman-109371.jpg);"></div> <div class="o_record_cover_component o_record_cover_filter oe_black" style="opacity: 0.2;"></div> <a id="o_wblog_next_post_info" class="d-none" data-size="o_half_screen_height o_record_has_cover" data-url="/blog/business-hacks-1/odoo-web-design-services-101-site-map-and-wireframing-1122?anim"></a> <div class="container text-center position-relative h-100 d-flex flex-column flex-grow-1 justify-content-around"> <div class="o_wblog_post_title"> <div id="o_wblog_post_name" placeholder="Blog Post Title" class="h1" data-blog-id="1122">Odoo Web Design Services 101: Site Map and Wireframing</div> </div> <div class="o_wblog_toggle "> <span class="h4 d-inline-block py-1 px-2 rounded-1 text-white"> <i class="fa fa-angle-right fa-3x text-white" aria-label="Read next" title="Read Next"></i> </span> </div> <div class="o_wblog_next_loader o_wblog_toggle justify-content-center align-items-center mx-auto position-relative d-none"> <div class="rounded-circle bg-black-50"></div> </div> </div> </div> </div> </div></section> <div class="oe_structure oe_empty oe_structure_not_nearest" id="oe_structure_blog_footer" data-editor-sub-message="Visible in all blogs' pages" data-editor-message-default="true" data-editor-message="DRAG BUILDING BLOCKS HERE"><section class="s_text_block o_colored_level pt0 pb0" data-snippet="s_text_block" data-name="Text"> <div class="container s_allow_columns"> <p><br/></p> </div> </section></div></div> <div id="o_shared_blocks" class="oe_unremovable"></div> </main> <footer id="bottom" data-anchor="true" data-name="Footer" class="o_footer o_colored_level o_cc o_footer_slideout"> <div id="footer" class="container o_not_editable "> <span class="o_logo o_logo_inverse d-block mx-auto o_footer_logo my-5"></span> <div class="row"> <div class="col-12 col-lg-7 col-xl-6"> <div class="row"> <div class="col-12 col-md-4 mb-3 mb-md-0"> <div class="row"> <div class="col-6 col-md-12"> <span class="o_footer_title">Community</span> <ul class="o_footer_links list-unstyled"> <li><a href="/slides/all/tag/odoo-tutorials-9">Tutorials</a></li> <li><a href="/page/docs">Documentation</a></li> <li><a href="/forum/help-1">Forum</a></li> </ul> </div> <div class="col-6 col-md-12"> <span class="o_footer_title">Open Source</span> <ul class="o_footer_links list-unstyled"> <li><a href="/page/download">Download</a></li> <li class="divider"></li> <li><a href="https://github.com/odoo/odoo">Github</a></li> <li><a href="https://runbot.odoo.com/">Runbot</a></li> <li><a href="https://github.com/odoo/odoo/wiki/Translations">Translations</a></li> </ul> </div> </div> </div> <div class="col-6 col-md-4"> <span class="o_footer_title">Services</span> <ul class="o_footer_links list-unstyled"> <li><a href="https://www.odoo.sh">Odoo.sh Hosting</a></li> <li class="divider"></li> <li><a href="/help">Support</a></li> <li><a href="https://upgrade.odoo.com">Upgrade</a></li> <li><a href="/page/developers-on-demand">Custom Developments</a></li> <li><a href="/education/program">Education</a></li> <li class="divider"></li> <li><a href="/accounting-firms">Find an Accountant</a></li> <li class="divider"></li> <li><a href="/partners">Find a Partner</a></li> <li><a href="/become-a-partner">Become a Partner</a></li> </ul> </div> <div class="col-6 col-md-4 mb-4"> <span class="o_footer_title">About us</span> <ul class="o_footer_links list-unstyled"> <li><a href="/page/about-us">Our company</a></li> <li><a href="/page/brand-assets">Brand Assets</a></li> <li><a href="/contactus">Contact us</a></li> <li><a href="/jobs">Jobs</a></li> <li class="divider"></li> <li><a href="/events">Events</a></li> <li><a href="//podcast.odoo.com">Podcast</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/blog/6">Customers</a></li> <li class="divider"></li> <li><a href="/legal">Legal</a> <span class="small text-muted">•</span> <a href="/privacy">Privacy</a></li> <li><a href="/security">Security</a></li> </ul> </div> </div> </div> <div class="col-12 col-lg-5 col-xl-5 offset-xl-1"> <div class="d-flex align-items-center justify-content-between"> <div class="js_language_selector o_language_selector dropdown d-print-none"> <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="border-0 dropdown-toggle btn btn-sm btn-outline-secondary"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/us.png?height=25" alt="" loading="lazy"/> <span class="">English</span> </button> <div role="menu" class="dropdown-menu "> <a class="dropdown-item js_change_lang " role="menuitem" href="/ar/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="ar" title=" الْعَرَبيّة"> <img class="o_lang_flag " src="https://odoocdn.com/web/image/res.lang/23/flag_image?height=25" alt="" loading="lazy"/> <span class=""> الْعَرَبيّة</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/ca_ES/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="ca_ES" title=" Català"> <img class="o_lang_flag " src="https://odoocdn.com/web/image/res.lang/30/flag_image?height=25" alt="" loading="lazy"/> <span class=""> Català</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/zh_CN/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="zh_CN" title=" 简体中文"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/cn.png?height=25" alt="" loading="lazy"/> <span class=""> 简体中文</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/zh_TW/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="zh_TW" title=" 繁體中文"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/tw.png?height=25" alt="" loading="lazy"/> <span class=""> 繁體中文</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/cs_CZ/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="cs_CZ" title=" Čeština"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/cz.png?height=25" alt="" loading="lazy"/> <span class=""> Čeština</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/nl_NL/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="nl_NL" title=" Nederlands"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/nl.png?height=25" alt="" loading="lazy"/> <span class=""> Nederlands</span> </a> <a class="dropdown-item js_change_lang active" role="menuitem" href="/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="en_US" title="English"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/us.png?height=25" alt="" loading="lazy"/> <span class="">English</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/fi_FI/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="fi_FI" title=" Suomi"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/fi.png?height=25" alt="" loading="lazy"/> <span class=""> Suomi</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/fr_FR/blog/trucs-et-astuces-pour-les-entreprises-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="fr_FR" title=" Français"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/fr.png?height=25" alt="" loading="lazy"/> <span class=""> Français</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/de_DE/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="de_DE" title=" Deutsch"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/de.png?height=25" alt="" loading="lazy"/> <span class=""> Deutsch</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/id_ID/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="id_ID" title=" Bahasa Indonesia"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/id.png?height=25" alt="" loading="lazy"/> <span class=""> Bahasa Indonesia</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/it_IT/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="it_IT" title=" Italiano"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/it.png?height=25" alt="" loading="lazy"/> <span class=""> Italiano</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/ja_JP/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="ja_JP" title=" 日本語"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/jp.png?height=25" alt="" loading="lazy"/> <span class=""> 日本語</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/ko_KR/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="ko_KR" title=" 한국어 (KR)"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/kr.png?height=25" alt="" loading="lazy"/> <span class=""> 한국어 (KR)</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/pl_PL/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="pl_PL" title=" Język polski"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/pl.png?height=25" alt="" loading="lazy"/> <span class=""> Język polski</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/pt_BR/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="pt_BR" title=" Português (BR)"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/br.png?height=25" alt="" loading="lazy"/> <span class=""> Português (BR)</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/ro_RO/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="ro_RO" title=" română"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/ro.png?height=25" alt="" loading="lazy"/> <span class=""> română</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/ru_RU/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="ru_RU" title=" русский язык"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/ru.png?height=25" alt="" loading="lazy"/> <span class=""> русский язык</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/sk_SK/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="sk_SK" title=" Slovenský jazyk"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/sk.png?height=25" alt="" loading="lazy"/> <span class=""> Slovenský jazyk</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/sl_SI/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="sl_SI" title=" slovenščina"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/si.png?height=25" alt="" loading="lazy"/> <span class=""> slovenščina</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/es/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="es" title=" Español (América Latina)"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/419.png?height=25" alt="" loading="lazy"/> <span class=""> Español (América Latina)</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/es_ES/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="es_ES" title=" Español"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/es.png?height=25" alt="" loading="lazy"/> <span class=""> Español</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/th_TH/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="th_TH" title=" ภาษาไทย"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/th.png?height=25" alt="" loading="lazy"/> <span class=""> ภาษาไทย</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/tr_TR/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="tr_TR" title=" Türkçe"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/tr.png?height=25" alt="" loading="lazy"/> <span class=""> Türkçe</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/uk_UA/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="uk_UA" title=" українська"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/ua.png?height=25" alt="" loading="lazy"/> <span class=""> українська</span> </a> <a class="dropdown-item js_change_lang " role="menuitem" href="/vi_VN/blog/business-hacks-1/odoo-web-design-services-101-design-progress-responsiveness-1155" data-url_code="vi_VN" title=" Tiếng Việt"> <img class="o_lang_flag " src="https://odoocdn.com/base/static/img/country_flags/vn.png?height=25" alt="" loading="lazy"/> <span class=""> Tiếng Việt</span> </a> </div> </div> </div> <hr class="mt-3 mb-4"/> <p class="small text-muted">Odoo is a suite of open source business apps that cover all your company needs: CRM, eCommerce, accounting, inventory, point of sale, project management, etc.</p> <p class="small text-muted mb-4">Odoo's unique value proposition is to be at the same time very easy to use and fully integrated.</p> <div class="o_footer_social_media mb-4"> <a target="_blank" href="https://www.facebook.com/odoo" class="me-3"><i class="fa fa-fw fa-facebook"></i></a> <a target="_blank" href="https://twitter.com/Odoo" class="me-3"><i class="fa fa-fw fa-twitter"></i></a> <a target="_blank" href="https://www.linkedin.com/company/odoo" class="me-3"><i class="fa fa-fw fa-linkedin"></i></a> <a target="_blank" href="https://github.com/odoo/odoo" class="me-3"><i class="fa fa-fw fa-github"></i></a> <a target="_blank" href="https://www.instagram.com/odoo.official" class="me-3"><i class="fa fa-fw fa-instagram"></i></a> <a target="_blank" href="https://www.tiktok.com/@odoo" class="me-3"><i class="fa fa-fw fa-tiktok"></i></a> <a target="_blank" class="me-3" href="tel:+3222903490"><i class="fa fa-fw fa-phone"></i></a> <a target="_blank" href="https://wa.me/85264491993"><i class="fa fa-fw fa-whatsapp"></i></a> </div> </div> </div> </div> <div class="o_footer_copyright o_not_editable"> <div class="container py-3 text-center"> <a class="small" href="/app/website">Website made with <span class="o_logo o_logo_inverse o_logo_15"></span></a> </div> </div> </footer> </div> <div id="o_live_modal" class="modal fade" tabindex="-1" role="dialog" contentEditable="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="mt-1"><b>Odoo Experience</b> on YouTube</h3> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span title="Close" class="fa fa-times"></span></button> <p class="text-black"> <b>1.</b> Use the live chat to ask your questions.<br/> <b>2.</b> The operator answers within a few minutes. </p> </div> <div class="modal-body bg-200"> <img src="https://odoocdn.com/openerp_website/static/src/img/2016/live-support/info.gif" class="img img-fluid" alt="Live support on Youtube" loading="lazy"/> </div> <div class="modal-footer"> <a class="btn btn-primary btn-lg" target="_blank" href="https://www.odoo.com/event/odoo-experience-2024-4662/track">Watch now<i class="fa fa-1x fa-long-arrow-right ms-1"></i></a> </div> </div> </div> </div> </body> </html>

CINXE.COM

Odoo Web Design Service 101: Design Progress & Responsiveness