Homepage Best Practices
Design Principles: Website real estate is precious and should only include the necessary information to make your customer convert. Designing a website that is high performing is more important than extra flash and pizzazz, if the extra causes the website to perform slower. The home page should tell a story with the least amount of content needed to inform and convert customers. A home page can be broken into two parts: Above the fold and Below the fold.
Above the fold (header and hero area)
Should include the following elements:
- Logo/branding and Simple/Intuitive navigation
- Headline that summarizes what your business does or what sets you apart from competition
- Description - short description supporting the headline
- Call to action - what you want your visitors to do once on the site
- Visual stimulation representative of your business outcome - image or graphic depicting something relevant to the business
To see what is important about the above the fold layout and its includes, click here
To see what components belong above the fold and how to apply a proper layout to this area, click here
Below the fold (everything below the hero area)
Generally includes the following elements
- Secondary Content - Content that is not important enough to make it Above-The-Fold, but is still crucial to convincing your visitors to become customers or loyal followers.
- Additional Content - These are the “nice-to-have” information, but are not critical in making your website effective for making a strong first impression.
Common examples of components going beyond the fold:
- Callouts - icons or images with text and links depicting the most important items on the site like benefits, services, features, etc.
- Introduction - a brief explanation or backstory to support the headline and description from above the fold outlining how the business stands out
- Social proof - trust and success indicators like quotes or ratings by clients, examples of work, etc.
- Relevant Images - keep the images on the homepage to a minimum of 5 and maximum of 7 - make sure the images are compressed and resized for web. Restrict galleries to photo gallery or portfolio pages, not the homepage. Its unnecessary to have galleries with multiple images on the homepage - just introduce the gallery with an image and an excerpt and include a link to see more.
- Secondary calls to action - a call-to-action that provides an alternative conversion opportunity or action to the primary action you ideally want visitors, prospects, or leads to take
- Content offer - highlights of blog posts, courses, products or discounted items
- Links - instead of piling information on the homepage, the home should act as a hub for the content detailed out in the remainder of the site pages. It’s a good practice to give a blurb or excerpt about the items with important information on the site with links for interested parties to get taken to those pages to read more.
To see what is important about the below the fold layout and its includes, click here
To see what components belong beyond the fold and how to apply a proper layout to this area, click here
Homepage Performance Practices
Hero Best Practices
Desktop
Video, image
- Never autoplay videos with important content
- Make sure videos are only a few seconds long and loop
- Make sure videos are compressed for web
- Have a properly resized fallback photo ready for mobile views and expect to not include this video on mobile views
- Make sure images are resized for web
Sliders - Avoid sliders of any kind unless absolutely necessary
Mobile
Stay with a static or parallax image only - Why:
- Video: will cause performance issues
- Move videos to internal pages
- Never autoplay videos with important content
- Include an introduction to the video with a fallback image on the homepage and a link to the full video on an internal page or hosted elsewhere
- For homepage hero videos, replace them with fallback images on mobile view
- Slider: null conversion rate and causes performance issues
Image Best Practices
Desktop
- Keep the images on the homepage to a minimum of 5 and maximum of 7
- Make sure the images are compressed and resized for web.
- Restrict galleries to photo gallery or portfolio pages rather than having them on the homepage if possible.
- Its unnecessary to have galleries with high quality images on the homepage - just introduce the gallery with an image and an excerpt and include a link to see more OR hide the gallery row in mobile views.
Mobile
- Should be in JPG unless transparency needed
- Limit the number of images on the homepage to only needed content
- Try to stick with static images
Features to avoid on the Homepage
The following features are known to cause performance issues. If using any of the module types mentioned below, make sure they don't contain any important information on desktop view and then hide them on mobile view.
Mobile
- Module animation - keep animations on modules and columns to a minimum, especially on mobile devices
- Video embeds - keep videos specific to desktop views, replacing them with a link to the video somewhere else in mobile views if the video is that important
- Slider modules - testimonial sliders, image carousels, logo carousels, content sliders, etc.
- Photo galleries
- Modal popup modules
- Hover modules - such as ihovers and interactive banners
- Interactive Callout modules - such as flipboxes, slideboxes, info circles
- Social feeds - the only suitable social feeds are Instagram feeds, Facebook and twitter feeds are highly unnecessary especially on mobile - hide Instagram feed rows from mobile view if they are being used.
- Particle backgrounds - keep rows with particle backgrounds specific to desktop view only
- iFrames/Paypal/script embeds - If this is needed the rest of content should be simply/elegant vs dynamic/flashy
- Nested modules - saved rows or templates inside of modules like tabs or accordions
- Chat plugin
- Any module with moving parts and high JavaScript content
Image Best Practices
Image usage in the builder:
- Should be in JPG unless transparency needed
- Images must have explicit width/height
- Images should be compressed/smushed
- Images dimensions should be set appropriately in module based on image size on page
How to compress image size for png images with transparency:
- Open the png image in photoshop
- Click file > export > save for web legacy
- Change the image type to PNG-8 or PNG 24 depending on how detailed the image is and how many colors it needs to look lossless
- Adjust the image size
- Then save the image and upload it
- Its ideal to have such images be around only a few hundred kb or less
For information on options for compressing jpeg images, reference this link
Video Best Practices
How to compress a video for use on the homepage hero in desktop view:
- Make sure the video is only a few seconds long and loops
- Remove or mute any audio in the video especially if the video autoplays
- Make sure there is no important information or text in the video
Then:
- Download and install handbrake - a free and open source program for video compression
- Open the media source by dropping the video file onto handbrake's source selector
- In the range, change chapters to seconds, then feel free to cut the video shorter if necessary by reducing its duration
- In the summary tab, select "web optimized"
- In the video tab change the framerate to 29, then change the quality to "avg bitrate" and put 1200 kbps or less
- In the audio tab, clear the audio tracks included in the video so that there are none
- At the bottom of the window, browse for a place to name and save the video
- Then click "start encode"
This should save a much smaller version of the video to your selected location which you can use in place of the hero video - remember that this is only for desktop view and that you have a fallback image in place for mobile view.
Table of Contents
Add a header to begin generating the table of contents
Next Steps
After creating the homepage, start creating internal pages.