The information is almost entirely up to date for Joomla 5 (note added on October 21, 2023).
Video tutorial
- Toolbar, full screen – 00:00:40.
- Copy, paste, cut text, paste as text – 00:00:56.
- Color, size, text style, font – 00:03:07.
- Text alignment – 00:04:56.
- Heading 1-6 levels – 00:05:28.
- Bullet list, Numbered list – 00:06:55.
- Media (images uploading) – 00:07:48.
- Image – 00:09:25.
- Link – 00:10:38.
- Anchor (link to a specific place on the page) – 00:12:19.
- Table – 00:14:58.
- Text division («Read More») – 00:21:33.
- Find and replace – 00:23:04.
- Quotes – 00:23:32.
- Increase indent – 00:24:05.
- Source code – 00:24:24.
- Subscript and Superscript – 00:24:4
- Special symbols and emotions – 00:24:57.
- Horizontal line and insert/edit code sample – 00:25:27.
Better watch video with «1080p HD» quality. This and other video reviews and tutorials can be found on my YouTube channel.
Links from the video:
In previous video tutorials we create responsive company website from scratch with a blog, portfolio and uploaded it to hosting. During video tutorials, we many times used the visual text editor TinyMCE to format the text. In this video tutorial, we will take a closer look at the tools of this editor and work with the Media component.
Video tutorial recording date – June 16, 2023. Software from video review. Joomla 4.3.2, TinyMCE 5.10.7.
In Joomla 5 now you have the opportunity to align images in image settings. In Joomla 5.2 TinyMCE has been updated and supplemented with new features.
Text formatting recommendations
When it comes to text formatting, there are several recommendations that can help improve readability and convey information effectively. Here are some commonly followed guidelines:
- Use Clear and Readable Fonts. Choose fonts that are easy to read, such as Arial, Helvetica, or Times New Roman. Avoid decorative or overly stylized fonts that may be difficult to decipher.
- Font Size and Spacing. Use an appropriate font size to ensure readability, typically between 10 and 12 points for body text. Provide ample spacing between lines (line height) to avoid cluttered text.
- Headings and Subheadings. Utilize headings and subheadings to structure your content. This helps readers quickly grasp the main points and navigate through the text. Use a larger font size, bold or capitalized text to differentiate headings from the body text.
- Paragraphs and Line Length. Break your text into paragraphs to enhance readability. Aim for moderate paragraph lengths, typically 3-5 sentences. Avoid excessively long lines, as they can strain the reader's eyes. Ideally, keep the line length around 50-75 characters.
- Text Alignment. Choose an alignment that best suits your content and design. Left alignment (ragged right) is the most commonly used, as it provides a clean and consistent look. However, center or right alignment can be used for specific purposes like titles or artistic designs.
- Use of Bulleted or Numbered Lists. When presenting a series of related items or steps, consider using bulleted or numbered lists. This helps to organize information and makes it easier for readers to follow along.
- Consistent Formatting. Maintain consistency throughout your text. Use the same font, font size, spacing, and formatting style (e.g., bold, italics) for similar elements. Consistency creates a cohesive look and helps readers navigate your content more smoothly.
- Emphasize Important Text. Use formatting options like bold, italics, or underlining to highlight important keywords or phrases. However, avoid excessive use of such formatting, as it can diminish its impact.
- Utilize White Space. White space refers to the empty space around and between elements. Leave enough white space to provide visual breathing room for readers. This helps reduce visual clutter and improves overall readability.
- Proofread and Edit. Before finalizing your formatted text, proofread and edit it for any spelling, grammar, or punctuation errors. Poorly formatted content can distract readers and undermine your message.
Remember, the specific formatting choices may vary depending on the context, platform, or medium you're working with. It's always essential to consider the readability and accessibility of your text for the intended audience.
Text aligning guidelines.
When it comes to aligning text, there are a few guidelines to consider based on the context and design requirements. Here are some recommendations for text alignment:
- Left Alignment (Ragged Right). Left alignment is the most commonly used text alignment for body text in most languages, including English. It provides a clean and consistent look with a straight left margin. The right side remains uneven or «ragged», as it depends on the length of the words in each line.
- Justified Alignment. Justified alignment aligns both the left and right edges of the text, creating straight margins on both sides. This alignment is commonly used in newspapers, books, and formal documents. However, be cautious when using justified alignment for online or digital content, as it can result in uneven spacing between words (known as «rivers of white») and potentially reduce readability.
- Center Alignment. Center alignment is useful for headings, titles, or short lines of text, where symmetry and visual impact are desired. Avoid using center alignment for long paragraphs or extensive body text, as it can make the text harder to read and disrupt the natural flow.
- Right Alignment (Ragged Left). Right alignment aligns the text along the right margin, creating a straight edge on the right side. This alignment is less common for general body text and is often used for specific purposes, such as captions or labels. Avoid using right alignment for long paragraphs, as it can make the text harder to read, especially in languages that read from left to right.
- Mixed Alignment. In some cases, you may choose to use a combination of alignment styles within a document or design. For example, you can use left alignment for paragraphs and center alignment for subheadings or block quotes. This can add visual interest and help differentiate various sections of the content.
- Consider Context and Readability. When choosing the appropriate alignment, consider the context and purpose of your text. Think about the readability and the user experience. Left alignment is generally the safest choice for body text, as it is familiar and easy to read. However, don't hesitate to experiment with different alignments for titles, headers, or artistic designs.
- Maintain Consistency. Whatever alignment you choose, it is important to maintain consistency throughout your document or design. Consistent alignment creates a professional and cohesive look, making it easier for readers to follow the text flow.
Remember, text alignment is a design choice, and the specific alignment you choose should align with the overall aesthetic and purpose of your content.
Headings guidelines.
Headings play a crucial role in structuring your content and guiding readers through your text. Here are some guidelines to consider when using headings:
- Use Heading Hierarchy. Headings are typically organized into a hierarchical structure, with higher-level headings indicating major sections and lower-level headings indicating subsections. This hierarchy helps readers understand the organization and flow of your content. Common heading levels include H1 for the main title or section heading, H2 for subheadings within the main sections, H3 for subheadings within H2 sections, and so on.
- Clearly Differentiate Headings. Make sure there is a clear visual distinction between headings and body text. Use larger font sizes, bold or capitalized text, and sometimes different font styles to differentiate headings from the rest of the content. Consistency in formatting helps readers quickly identify and navigate through the headings.
- Maintain Consistency in Styling. Once you establish a specific formatting style for your headings, maintain consistency throughout your document or design. Consistent styling enhances the visual appeal and readability of your content. Choose a font size, font style, and color scheme that aligns with the overall aesthetic of your document or design.
- Be Descriptive and Concise. Headings should provide a concise and informative summary of the section or subsection that follows. Use descriptive words that accurately represent the content beneath each heading. This helps readers quickly grasp the main points and decide whether to read further.
- Consider Visual Hierarchy. The visual hierarchy of your headings should align with the importance and structure of the content. Higher-level headings should stand out more prominently than lower-level headings. This can be achieved through a combination of font size, font weight, and spacing. However, ensure that the visual hierarchy is intuitive and does not distract or confuse readers.
- Don't Overuse Headings. Use headings judiciously and avoid overusing them. Each heading should represent a meaningful section or subsection of your content. If there are too many headings, it can clutter the layout and make it harder for readers to follow the flow of information. Strike a balance between providing structure and overwhelming the reader with excessive headings.
- Optimize for SEO (Search Engine Optimization). If your content is published online, consider incorporating relevant keywords into your headings. This can help improve the visibility of your content in search engine results. However, ensure that the keywords are naturally integrated and do not compromise the readability or user experience.
- Test for Accessibility. Ensure that your headings are accessible to all readers, including those using screen readers. Use appropriate HTML tags (e.g., «<h1>», «<h2>», etc.) for headings in web content. This helps assistive technologies navigate and interpret the heading structure accurately.
By following these guidelines, you can create well-structured content with clear and effective headings that enhance readability and user experience.
Bullet and numbered list guidelines.
Bullet and numbered lists are useful for presenting information in a concise and organized manner. Here are some guidelines for using bullet and numbered lists effectively:
- Use Bulleted Lists for Unordered Information. Bulleted lists are suitable for presenting information that doesn't have a specific order or sequence. Each item in the list is preceded by a bullet point, typically a solid circle or a small symbol. Bulleted lists are useful for emphasizing individual items without implying any hierarchical relationship between them.
- Use Numbered Lists for Ordered Information. Numbered lists are appropriate when presenting information that follows a specific order or sequence. Each item in the list is numbered sequentially. Numbered lists indicate a logical progression or step-by-step process, where the order of items matters.
- Keep List Items Clear and Concise. Each item in a bullet or numbered list should be concise and focused. Ideally, limit each item to a single sentence or a short phrase. Clear and succinct list items make it easier for readers to scan and comprehend the information quickly.
- Maintain Consistency in Punctuation and Capitalization. Ensure consistency in the punctuation and capitalization style within your lists. Typically, each list item does not require a full stop (period) at the end unless the item is a complete sentence. Capitalize the first letter of each list item, regardless of whether it is a sentence or a phrase.
- Use Parallel Structure. Maintain a parallel structure across list items, especially in longer lists. This means using the same grammatical form, tense, and style for each item. Consistency in structure helps readers grasp the information more easily and improves the overall flow of the list.
- Avoid Overloading Lists. Be mindful of the length and complexity of your lists. If a list becomes too long or contains detailed subpoints, consider breaking it down into sublists or using headings and paragraphs to provide more structure. Long, overwhelming lists can reduce readability and impact the effectiveness of your presentation.
- Nest Lists for Subpoints. When you need to include subpoints or subcategories within a list, consider using nested lists. A nested list is a sublist that is indented beneath a parent list item. This helps visually differentiate and organize the information hierarchy.
- Consider Visual Design. Pay attention to the visual design of your lists. Ensure adequate spacing between list items to improve readability and make the list visually appealing. Consistency in indentation, bullet or numbering styles, and alignment enhances the overall visual consistency of your content.
- Use Lists Sparingly. Although lists are helpful in organizing information, avoid excessive use. Overusing lists can make the content appear fragmented and disrupt the natural flow. Evaluate whether a list is the most suitable way to present the information or if it can be effectively conveyed through paragraphs or other formatting techniques.
By following these guidelines, you can create bullet and numbered lists that enhance the clarity, organization, and readability of your content.
Images guidelines.
When it comes to using images on a website, there are several guidelines to consider to ensure they enhance the user experience and effectively convey your message. Here are some recommendations for using website images:
- Use High-Quality Images. Use high-resolution images that are clear, sharp, and visually appealing. Low-quality or pixelated images can negatively impact the professional look of your website. Optimize the images for web use to balance quality and file size for faster loading times.
- Relevant and Engaging Images. Choose images that are relevant to your website's content, purpose, and target audience. Images should support and enhance the message you're conveying. Engaging and visually appealing images can capture users' attention and create a positive impression.
- Consistent Style and Theme. Maintain a consistent style and theme for your images to ensure visual coherence across your website. Consider factors like color palette, image composition, and overall aesthetic to create a unified look and feel. Consistency helps in reinforcing your brand identity and creating a cohesive user experience.
- Proper Image Sizing and Optimization. Resize and optimize images for web use to reduce file size without sacrificing quality. Large image files can significantly slow down your website's loading speed, leading to a poor user experience. Utilize image compression techniques, choose appropriate file formats (e.g., JPEG, PNG, SVG), and consider using responsive images to cater to different devices and screen sizes.
- Alt Text for Accessibility. Include descriptive alt text for each image, which is a textual alternative that provides a description of the image's content. Alt text is crucial for accessibility, as it enables screen readers to convey the image information to visually impaired users. Use concise and descriptive alt text that accurately represents the image.
- Proper Placement and Alignment. Place images strategically within your content to enhance readability and visual appeal. Consider the flow of the content and align the images accordingly. Left or right alignment with text wrapping can create a visually balanced layout. Experiment with different placements to find the most effective arrangement for your specific content.
- Legal Considerations. Ensure that you have the proper rights and permissions to use the images on your website. Use royalty-free or licensed images from reputable sources, or create your own images to avoid copyright infringement. Be mindful of any restrictions on the usage of images, especially for commercial purposes.
- Mobile-Friendly Considerations. Optimize images for mobile devices, as mobile browsing continues to grow. Ensure that images are responsive and adjust well to different screen sizes and resolutions. Test your website's performance and image display on various mobile devices to ensure a smooth user experience.
By following these guidelines, you can effectively use images on your website to enhance its visual appeal, convey your message, and provide a positive user experience.
Links guidelines.
When including links on your website, it's important to follow guidelines that promote usability, accessibility, and an overall positive user experience. Here are some recommendations for using links effectively:
- Use Descriptive Anchor Text. The anchor text, or the clickable part of a link, should provide a clear and concise description of the linked content. Avoid generic terms like «click here» or «read more». Instead, use descriptive phrases that indicate where the link leads, such as «Learn more about our services» or «Download the PDF guide».
- Ensure Link Visibility. Make sure that links are visually distinguishable from the surrounding text. Underlining or using a different color or font style (e.g., bold) for links is a common practice. Consistency in link styling helps users identify clickable elements and improves overall usability.
- Use Meaningful URLs. When possible, use URLs that are readable and reflect the content of the linked page. Avoid using long, cryptic URLs that provide little information. Meaningful URLs are not only user-friendly but can also improve search engine optimization (SEO).
- Open External Links in New Tabs. If your link leads to an external website, it's generally a good practice to have it open in a new browser tab or window. This allows users to easily navigate back to your website and maintains their engagement.
- Include Title Attributes for Additional Information. Adding a title attribute to your links provides additional information when users hover over the link. This can be useful for providing a brief description of the linked page or indicating if the link leads to a document (e.g., PDF, Word file).
- Differentiate Visited Links. Make it clear which links users have already visited by applying a different styling, such as a change in color or underline. This helps users keep track of the pages they have previously accessed.
- Consider Accessibility. Ensure that your links are accessible to all users, including those who rely on screen readers. Use descriptive anchor text, rather than relying on the surrounding context alone, to convey the purpose of the link. Additionally, provide clear visual cues for links, such as underlines or color changes, to assist users with visual impairments.
- Test Cross-Browser Compatibility. Check how your links behave across different web browsers (e.g., Chrome, Firefox, Safari) to ensure they function properly and maintain their intended design. Cross-browser testing helps guarantee a consistent experience for all users.
- Optimize for Mobile. Ensure that links are easily clickable on mobile devices with touchscreens. Leave enough spacing around links to avoid accidental taps on neighboring elements. Also, consider the smaller screen size when writing link text, as space may be limited.
By following these guidelines, you can create links that are clear, accessible, and enhance the usability of your website.
Website tables guidelines.
When it comes to using tables on your website, it's important to follow guidelines that promote readability, accessibility, and effective data presentation. Here are some recommendations for using website tables:
- Use Tables for Tabular Data. Tables are most appropriate when presenting structured, tabular data. Use tables to display information that is best understood in a row-column format, such as financial data, product comparisons, schedules, or statistical data.
- Keep Tables Simple and Concise. Avoid complex or excessively large tables that overwhelm users. Keep your tables focused on the relevant data and present it in a concise manner. Consider breaking large tables into smaller, more manageable sections if possible.
- Provide Clear Column and Row Headers. Use clear and descriptive column and row headers to label the data in your table. This helps users understand the meaning of each cell and facilitates easy navigation within the table. Consider using HTML table tags like «<th>» for header cells.
- Ensure Proper Contrast and Formatting. Ensure sufficient contrast between the table background and text to enhance readability. Use appropriate font sizes and styles that are easy to read. Consider using shading or alternating row colors to improve the visual distinction between rows.
- Use Responsive Design for Mobile Devices. Make sure your tables are responsive and adapt well to different screen sizes, including mobile devices. Consider horizontal scrolling, collapsing columns, or using a stacked layout for improved mobile usability. Test your tables on various devices to ensure they are easily viewable and navigable.
- Avoid Using Tables for Layout Purposes. Tables should not be used for website layout purposes, such as creating complex page structures. Use CSS and HTML tags like «<div>» and «<section>» for layout and positioning, as this allows for more flexibility and better accessibility.
- Include Table Captions and Summaries. Provide a clear and descriptive caption for your table to summarize its content. This helps users understand the purpose and context of the table. Additionally, consider providing a summary attribute or an introductory paragraph that describes the table's key points or trends.
- Ensure Accessibility. Make your tables accessible to all users, including those who rely on screen readers. Use proper table markup with appropriate HTML tags like «<caption>», «<th>», and «<td>». Ensure that the table structure is logical and correctly represents the relationships between headers and data cells. Provide alternative text descriptions for any images or icons used within the table.
- Test and Validate. Test your tables across different browsers and devices to ensure consistent rendering and functionality. Validate your HTML code to ensure it adheres to web standards and guidelines.
- Consider Visualization Options. For complex data sets, consider using data visualization techniques, such as charts or graphs, to present the information more effectively. Visualizations can make it easier for users to grasp patterns or trends in the data, particularly for large or dense datasets.
By following these guidelines, you can create well-structured and accessible tables that effectively present data and enhance the user experience on your website.
In the next video «Joomla JCE video tutorial. Joomla text editor» we will look at all same actions but in a different text editor.
| Article author – Aleksej Khoroshevskij |
|---|
 Ph.D., lecturer at Kharkiv National University of Radio Electronics, web developer, and SEO specialist with over 15 years of experience. Expert in website creation using Joomla and WebSite X5. Author of scientific publications, video courses, and educational content on web development and SEO. Runs a blog and a YouTube channel, sharing knowledge and practical experience. Provides services in website development, customization, maintenance, and promotion. Learn more about the author… Publications and work: |
| Similar articles |
|---|
Useful links:
