Check for Issues

Bootstrap Studio provides an easy way for you to find common issues with your design. Just go to File -> Check for Issues. The app will run a list of audits and give you instructions on how to fix the issues found.

Audits

Here is a quick rundown of the audits:

• Page Titles - Checks if all pages in your design have a title. The app automatically adds the name of the design or the global title you've set in your SEO settings to each page, but it is recommended that every page has a unique and descriptive title. Click the audit to see the pages that don't have titles. Clicking the Add Title button will open the Page Properties dialog for that page, where you can fill it out.
• Page Descriptions - Checks if all pages in your design have a description. The app automatically adds the global description you've set in your design's SEO settings, but it is recommended that every page has a unique description. Click the audit to see the pages that don't have a description. Clicking the Add Description button will open the Page Properties dialog for that page, where you can fill it out.
• Favicons - Checks if you have added favicons to your design.
• HTML 'lang' attribute - Checks if all pages have a 'lang' attribute. If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly.
• Duplicate IDs - Checks if there are multiple components with the same ID on one page. The ID is used to identify a component on the page to link to it, style it or access it through JS, so every ID on a page should be unique. The audit lists all components with duplicated IDs grouped by page and ID. Click a component from the list to select it in the Stage and change its ID from the Attributes Panel. Keep in mind that the app does not check IDs in Custom Code.
• DOM Size - Checks if there are pages with more than 1500 components. A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows. Consider reducing the number of components on the listed pages.
• Inline Styles - Checks if there are components with inline styling. It is recommended for styles to be defined in a separate file. Inline styles's main purpose is to allow quick styling for testing purposes and it should be avoided. The audit lists all components with inline styles found in you design. Click a component from the list to select it in the Stage. You can move the element.style rules to a new CSS block from the three-dot menu.
• Hidden Components - Checks if your design contains components hidden through the Hide context menu option. These components are not rendered on the page or exported.
• Unoptimized Images - Checks if your design contains images with a file size over 500KB. Click on an image from the list to select it in the Design Panel where you can right-click it and open it in an external image editor like Photoshop.
• Unused Images - Checks if your design contains unused images. Keep in mind that the app does not look for images added through JavaScript, so they will be marked as unused. Click the Cleanup button to view the images and remove them.
• Unused CSS - Checks if your design contains unused CSS blocks. Just like with the images, the app does not look for CSS classes/attributes added through JavaScript. Click the Cleanup button to view the unused CSS blocks and remove them.