Contents

Speaking of good practices in building pages...

The Beta pages resource allows you to build modern pages with just a few clicks and without a need for technical or programming knowledge. However, it is important to follow some good practices, in order to expedite page publication and make the site even more attractive.

Pay attention to the URL

• Use keywords to provide a URL that is easily interpreted by the user. For example: brand-guide.
• Supplement the URLs with titles to encourage the user to click on them.
• Use short words, but longer than three characters. Avoid using special characters (with the exception of a hyphen to separate words). 

Identify your page with the logo

• Many users browse with several tabs open, so your page needs to stand out! Use a custom logo for your site – try to include a 48x48px image in .ico format.

Pay attention to external content

• External content includes components from outside Beta pages, i.e., YouTube videos, articles, pages from another site, etc. They multiply your site’s resources.
• When integrated with Beta forms, you need to pay attention to the minimum height, since a scroll will be inserted on the page if the height is inappropriate.
• Avoid placing URLs with multiple parameters that compromise the standard behavior of a URL. For example: to indicate the URL of a point on Google Maps, you can use a URLs shortener to simplify it.
• Check if the URL you want to insert allows for use in another context.
• Whenever possible, try to insert external content last: the weight of the external page might disrupt the assembly of your page and affect the user experience.

Carefully elaborate text content

• The Enable container option should be used if you want your component to fill the entire width of the page.
• Use images to draw attention, but prefer 4:3 or 4:4 aspect ratios to prevent them from becoming misconfigured.
• Choose titles with keywords that will draw the attention of anyone who is quick reading.
• Remember that your site can be accessed from multiple devices. So try to insert a maximum of 4 text boxes per component, to avoid a line break due to the responsiveness of the layout.

Identify yourself in the footer

• Enter trademark rights with your company name.
• Enter links from your social networks to show greater presence on the web.

Use the image gallery

• Choose titles with keywords that match all the images in the gallery.
• Enable spacing between images, if desired.
• Place captions on the images (for example, copyright).
• The images attached to the gallery should support the recommended resolutions to avoid losing quality when they are published.

Highlight content with banners

• Enable arrows or bullets when there is more than one slide in the banner to increase user navigability.
• Leave an objective message for the visitor, so reading is more enjoyable, attracting attention to click.
• Look for images that are representative of what you want to say. You can choose to insert a video as well. Just remember: both in images and videos, try to use resolution higher than 720p and lower than 1080p, with good quality and widescreen proportions (16:9). Look for image optimization tools to keep them from being heavy when loading in the slide.
• Customize the look of your banners: set the alignment of content and buttons, insert a color mask if you don’t have enough contrast, to make the text easier to read.

Use paragraphs to include relevant texts

• Choose short titles.
• When inserting the image, always choose an option that represents the paragraph well and draws attention. Give preference to 4:3 aspect ratio images to maintain image quality.
• When entering the description, choose texts that urge the reader to learn more about that subject.

Organize your website’s menu

• The purpose of the menu is to make it easier to navigate through the content of your site, so give preference to using objective words and avoid entering more than ten menu items.
• Avoid placing very large logos – the image used in the menu logo should not exceed a height of 50px.

Use sections to divide the content

• Use titles with keywords to draw the user’s attention; enter objective subheadings that convey the message in few words.
• Look for an image that represents what you would like to convey to the user. Give preference to good quality images in widescreen aspect ratio (16:9). The image to be attached to the section component should support the recommended resolutions (720p and 1080p) to avoid losing quality.
• Enable the parallax effect, a feature that moves the background image, creating a sense of depth when scrolling through the page.