qsm-odoo
d80b8cbc28
Setting width *and* height attributes allows to reserve some space to avoid layout shift during page loading. Of course, CSS rules set the height the user chose, while the width is set to 'auto'. But while the image is loading, it is best to already reserve some width to reduce layout shift (like making the menu move or even re-render itself into a "+" menu). The chosen values for the space reservation are the ones of the default logo and theme, but it does not really matter as long as they are coherent. While the image is being loaded, the chosen user height is still applied and the 'auto' width rule induces a width that respects the aspect ratio set by the width and height attributes. That could be a problem if the real logo has a larger height than width, in which case the layout shift would be increased because of the arbitrary values set as width and height, but in most cases, this should reduce it. This also allows to gain some page speed scoring. Examples: =# Logo 200 x 100, height set to 50 Before this commit - while loading: width = 0, height = 50 - once loaded: width = 200 / 100 * 50 = 100, height = 50 -> layout shift of 100 - 0 = 100 After this commit - while loading: width = 95 / 40 * 50 = 118.75, height = 50 - once loaded: width = 200 / 100 * 50 = 100, height = 50 -> layout shift of 100 - 118.75 = -18.75 => Shift of 18.75px to the left, way better than shift of 100px to the right =# Logo 100 x 100, height set to 50 Before this commit - while loading: width = 0, height = 50 - once loaded: width = 100 / 100 * 50 = 50, height = 50 -> layout shift of 50 - 0 = 50 After this commit - while loading: width = 95 / 40 * 50 = 118.75, height = 50 - once loaded: width = 100 / 100 * 50 = 50, height = 50 -> layout shift of 50 - 118.75 = -68.75 => Shift of 68.75px to the left, kinda the same as a shift of 50px to the right. =# Logo 100 x 200, height set to 50 Before this commit - while loading: width = 0, height = 50 - once loaded: width = 100 / 200 * 50 = 25, height = 50 -> layout shift of 25 - 0 = 25 After this commit - while loading: width = 95 / 40 * 50 = 118.75, height = 50 - once loaded: width = 100 / 200 * 50 = 25, height = 50 -> layout shift of 25 - 118.75 = -93.75 => Shift of 93.75px to the left, worse than shift of 25px to the right but the case of having a 'portrait' logo is considered less common than having a 'landscape' logo. Ideally, we should choose the arbitrary values related to the most common aspect ratio. closes odoo/odoo#101149 X-original-commit: 73786c5c45202914e02325c19a2afaa47d31c341 Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Odoo Website Builder
Get an awesome and free website, easily customizable with the Odoo website builder.
Create enterprise grade website with our super easy builder. Use finely designed building blocks and edit everything inline.
Benefit from out-of-the-box business features; e-Commerce, events, blogs, jobs announces, customer references, call-to-actions, etc.
Edit Anything Inline
Create beautiful websites with no technical knowledge. Odoo's unique 'edit inline' approach makes website creation surprisingly easy. No more complex backend; just click anywhere to change any content.
"Want to change the price of a product? or put it in bold? Want to change a blog title?" Just click and change. What you see is what you get. Really.
Awesome. Astonishingly Beautiful.
Odoo's building blocks allow to design modern websites that are not possible with traditional WYSIWYG page editors.
Whether it's for products descriptions, blogs or static pages, you don't need to be a professional designer to create clean contents. Just drag and drop and customize predefined building blocks.
Enterprise-Ready, out-of-the-box
Activate ready-to-use enterprise features in just a click; e-commerce, call-to-actions, jobs announces, events, customer references, blogs, etc.
Traditional eCommerce and CMS have poorly designed backends as it's not their core focus. With the Odoo integration, you benefit from the best management software to follow-up on your orders, your jobs applicants, your leads, etc.
A Great Mobile Experience
Get a mobile friendly website thanks to our responsive design based on bootstrap. All your pages adapt automatically to the screen size. (mobile phones, tablets, desktop) You don't have to worry about mobile contents, it works by default.
SEO tools at your finger tips
The Promote tool suggests keywords according to Google most searched terms. Search Engine Optimization tools are ready to use, with no configuration required.
Google Analytics tracks your shopping cart events by default. Sitemap and structured content are created automatically for Google indexation.
Multi-Languages Made Easy
Get your website translated in multiple languages with no effort. Odoo proposes and propagates translations automatically across pages, following what you edit on the master page.
Designer-Friendly Templates
Templates are awesome and easy to design. You don't need to develop to create new pages, themes or building blocks. We use a clean HTML structure, a bootstrap CSS.
Customize every page on the fly with the integrated template editor. Distribute your work easily as an Odoo module.
Fluid Grid Layouting
Design perfect pages by drag and dropping building blocks. Move and scale them to fit the layout you are looking for.
Building blocks are based on a responsive, mobile friendly fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Professional Themes
Design a custom theme or reuse pre-defined themes to customize the look and feel of your website.
Test new color scheme easily; you can change your theme at any time in just a click.
Integrated With Odoo Apps
e-Commerce
Promote products, sell online, optimize visitors' shopping experience.
Blogs
Write news, attract new visitors, build customer loyalty.
Online Events
Schedule, organize, promote or sell events online; conferences, trainings, webinars, etc.