Insights

8 Salesforce Lightning Page Layout Best Practices

Salesforce Lightning is a great platform for building pages and layouts. However, there are some best practices to follow to ensure that your pages are effective and user-friendly. In this article, we'll cover 8 of them.

Salesforce Lightning pages are a great way to customize the look and feel of your Salesforce org. But with great power comes great responsibility! If not done correctly, custom Lightning pages can quickly become a mess of conflicting styles and layouts.

In this article, we’ll share 8 best practices for creating custom Lightning pages. By following these best practices, you can be sure that your Lightning pages are well-organized, easy to maintain, and look great!

1. Use the right layout

The layout of a page is critical to the user experience. A well-designed page will help users find what they need quickly and easily. A poorly designed page will frustrate users and cause them to leave the page without finding what they need.

There are several different types of layouts available in Salesforce Lightning, and each has its own strengths and weaknesses. The best way to choose the right layout for your page is to understand the different options and how they can be used to create an effective user experience.

2. Keep it simple

When you’re working in Lightning, you’re working with a lot of different elements on the page. You have your standard Salesforce objects like Accounts and Contacts, but you also have Lightning components, which are essentially mini apps that live on the page.

If you try to cram too much onto the page, it’s going to be overwhelming for users. They’re not going to know where to start, and they’re going to get lost.

Instead, focus on one task per page. Make sure that the page is easy to scan, and that users can quickly find what they’re looking for.

If you need to include multiple tasks on a single page, consider using tabs or accordions to break up the content. This will make it easier for users to find what they need, and it will help keep the page feeling clean and uncluttered.

3. Make sure your page is responsive

As more and more people use mobile devices to access the internet, it’s important that your website is accessible on all devices. A responsive page layout will adjust itself to fit the screen size of the device it’s being viewed on, whether that’s a desktop computer, a tablet, or a smartphone.

If your Lightning page layout isn’t responsive, you risk losing potential customers who can’t view your page properly on their mobile device. In addition, search engines like Google penalize non-responsive websites, so you could also see a drop in your search engine ranking if your page layout isn’t responsive.

To make sure your Lightning page layout is responsive, you’ll need to use the Salesforce Lightning Design System (SLDS). The SLDS provides a set of CSS stylesheets that you can use to ensure your page looks great on all devices.

4. Avoid using too many components

When a page has too many components, it can negatively impact the loading time of the page. In addition, if there are too many components on a page, it can make the page appear cluttered and difficult to navigate.

Therefore, it’s important to carefully consider which components are absolutely necessary for the page, and to only include those components. If there are optional components that could be included, but aren’t essential, they should be left out.

Finally, when adding new components to a page, it’s important to test the page to ensure that the new component doesn’t adversely impact the loading time or usability of the page.

5. Don’t forget about mobile users

A study by Google found that 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead.

What does this mean for you? If your Lightning pages aren’t mobile-friendly, you could be losing out on valuable leads and customers.

To make sure your pages look great on mobile devices, use the Salesforce Mobile App Designer. This tool lets you preview how your pages will look on different screen sizes so you can make changes before they go live.

It’s also important to keep in mind that not all elements on your page will work well on mobile. For example, if you have a large image, it might not look good on a small screen. In cases like this, you might need to replace the image with something else or remove it altogether.

6. Choose a color scheme that fits your brand

Your color scheme is one of the first things visitors will notice about your page, so it’s important to make sure it’s in line with your brand. If your brand colors are blue and green, for example, you’ll want to make sure your Lightning page uses those colors prominently.

Not only will this help your page look more professional, but it will also help visitors connect your page with your brand. This can be helpful if they’re trying to remember your page later, or if they’re looking for your page specifically because they like your brand.

There are a few different ways to choose a color scheme for your Lightning page. You can use an online tool like Adobe Color CC, or you can choose a pre-made theme from Salesforce.

If you want complete control over your page’s colors, though, you can always create a custom color scheme using the Lightning Design System.

7. Consider accessibility

When you’re building a page layout, you’re not just thinking about how it will look to people who can see. You’re also thinking about how it will be used by people who are blind or have low vision, and how screen readers will interpret the information on the page.

This means using semantic HTML tags to structure the content on the page, and adding alternative text to images so that screen readers can describe them. It also means ensuring that form fields are properly labeled, and that links make sense when read out of context.

By considering accessibility from the start, you’ll end up with a page layout that works well for everyone.

8. Test, test, and test again

Lightning pages are built on top of the Salesforce1 platform, which is a completely different codebase than the Classic Salesforce platform. As a result, there are bound to be differences in how Lightning pages render and behave compared to Classic pages.

Additionally, because Lightning pages are responsive by design, they will look and behave differently on various screen sizes. So it’s important to test your pages on as many devices as possible to ensure that they look and work the way you want them to.

Finally, keep in mind that Lightning pages are still a relatively new feature, so Salesforce is constantly making changes and improvements. As a result, it’s important to stay up-to-date on the latest changes and test your pages accordingly.

Previous

10 Session Management Best Practices

Back to Insights
Next

10 GCP IAM Best Practices