So you want a website with the so-called “Wow” factor.
The home page must open with stunning visuals that catch the eye right away. Your goal is to impress well-to-do clients with your striking, colorful design.
You figure that a carousel image slider or full-screen background image would give you that massive visual impact you’re looking for. You already have incredible, high-quality product images, so it seems like a no-brainer.
You’re not alone.
A business owner once remarked about a competitor’s site:
“That website has that “Wow” factor we’re looking for. You can tell. They obviously know what they’re doing.”
The website they were referring to had a full-screen image slider greeting users the moment they reached the home page.
Page Load Time
Unfortunately, focusing too much on visuals can create an initial “wow” reaction that ends up crippling user experience in the end. A website must, first and foremost, be user-friendly, mobile-friendly and accessible to impress well-to-do clients, mobile users and any other visitors that stop by. The pages must load quickly and provide a seamless experience.
Shiny Objects, Sliders & Seashells
Large, gorgeous images in a slider are dazzling… just like seashells and other “shiny objects” that wash up on a beach.
But for how long?
Think about how you use the web. You’re probably searching for information, not looking to be dazzled. If you can’t find it on one website… or if you’re waiting those few extra agonizing seconds for a page to load, you click away and go elsewhere.
If that shiny slider is hurting your page speed, it’s also increasing your bounce rate and hurting your search engine rankings.
Online Site Optimization Tools
Fortunately, there are online tools you can use to better judge a website, instead of drawing conclusions from your initial impression alone.
At GTmetrix, you can analyze the waterfall chart to see how long each page element takes to load. (This includes image sliders.) Waterfall charts visualize page-loading behavior.
Responsible Image Sliders
If you’re still considering a carousel slider, add it responsibly.
- First, be sure to optimize your images.
- Choose images with plain, uncluttered, non-distracting backgrounds.
- Keep in mind that most visitors will only view a couple of slides. Resist the temptation to add that sixth slide. No one is going to wait for it.
- Remove other unnecessary elements from your pages. Minimize the “bells and whistles.”
- Choose a slider that utilizes lazy loading (only loading the first slide right away, then letting the rest load after the page is visible.)
- Learn about page caching and how to leverage it.
Did you know that most RAW photos that come from a camera have huge file sizes, which will add to the load time of your web page? They must be optimized for the web (whether you have an image slider or not).
File Format, File Size and Dimensions
- File Format: Save your photos and upload them as JPGs. Save other graphics, such as illustrations, that have large, flat areas of color as PNGs or GIFs.
- File Size: Also consider the file size of your saved images. A 5MB (megabyte) image is huge. A 125KB (kilobyte) image is much better for the web. (NOTE: If you have five 200KB photos in one image slider, that’s 1MB of images weighing down your page.)
- Image Dimensions: On the web, the height and width of images are measured in pixels. A blog post typical image might be 700×300 pixels. If your image is 2000×900 pixels, it’s huge.
Image Compression Tools
You can compress images in Photoshop or an online compressing tool. Image Optimizer is a free online tool. You can use it to resize, compress and optimize your image files. It’s as easy as clicking a button! Optimizilla and TinyPNG can compress JPEG and PNG files with the lowest file size possible.
If you have a WordPress site, you should optimize the images you upload.
- You can also check the images that have already been uploaded to your Media Library to find out their file sizes and image dimensions.
- You can also use a WordPress plugin such as Smush to optimize your images, resize and compress them to improve your Google PageSpeed score.
See WordPress Media Library Hidden Features to learn more ways to optimize images in it. It explains everything from image uploading to compression to the effects of image cropping.
The Hero Image Alternative
Second-guessing your visual impact approach?
Choosing a Hero Image
- Similar to sliders, you’ll want to avoid images with busy backgrounds in your Hero Images.
- Try using photos (1,200 pixels wide) that have a single main subject with a simple, uncluttered background.
- Choose an image that entices users to interact with your site.
- Check it on large screens. Check it on a cell phone. Make sure it looks good on both.
The Illustration Alternative
If photos are weighing down your site, try replacing some of them with illustrations. Illustrations tend to have a smaller file size. They are not as detailed as photos, so they load faster. Illustrations can also be used as Hero Images. Need someone to help you create images for your site? Try Fiverr.com.
“Wow” Them with Subtle Animations
With the arrival of HTML5 and CSS3, web designers can now utilize CSS animations in web pages. This is an easy way to add personality to your site, enhance the emotional experience and give visual cues so visitors don’t have to guess where to go next.
Everything you add to your site, including subtle animations, should add value for your visitors. Do they help them complete a task, provide answers to their questions or entertain them?
People need to be able to use your website, above all else.
If your site is confusing and visitors can’t find their way around it or complete the task they came there for, they will get discouraged and turn to “less shiny” websites.
Other Ways to Engage Users
- Provide useful content that is also easy to read. Use meaningful titles, headlines and subheadings. Keep your sentences and paragraphs short. Use whitespace.
- Add optimized, relevant images to your articles.
- Add captions under images (captions are read, on average, 300% more than body copy).
- Include a simple and well-structured navigation structure.
- Keep your mobile users happy by limiting the number of huge, striking visuals in your designs.
- Show your personality.
In the end, you need to find a balance between creating a visual impact that “wows” and providing a website that “satisfies” your visitors with a successful, pleasurable and memorable experience.