3 Things to Look for When Searching for a Vancouver Webdesign Agency

Choose The Right Format

If you’ve been dealing with slow pages, choosing the right format is what separates you from having buttery loading times. 

Before tying together your website with appealing, on-brand imagery, make sure you’ve chosen the best file type to go with your needs. The different usable file types are as follows:

• PNG – This format produces higher quality images, but is also very large file size. We wouldn’t recommend using PNG’s as product images. It was created as a lossless, but it can also be lossy. (We’ll get to explaining the difference between lossless and lossy as you scroll ahead). Complex designs, infographics, images with lots of text in them, and logos can ideally be PNGs. PNGs give you beautiful, crisp lines, allowing you to zoom in and not lose any quality. They also support transparent backgrounds, making it ideal for logos.
• JPEG – This popular format uses lossy and lossless optimization. Unlike with PNGs, there’s a good balance between quality and file size. In eCommerce, JPEGs will be your best bet for your product images, especially if there are several. You shouldn’t have to sacrifice image quality and JPEGs provide the best quality for the smallest file size.
• GIF – This format only uses 256 colors. They are of low quality and can only be used for simplistic images, such as icons and decorative images. It’s also the best choice for animated images. It only uses lossless compression. Never use GIFs for large product images. Use GIFs for thumbnails and decorative images only. Or you could get creative and make custom Instagram stickers for promoting your brand on your IG stories.

PRO TIP: Opt for the 24-bit PNGs instead of the “8 bit” since the former offers better quality and a much more versatile array of colors. But be wary of using too many decorative images since too many of them can affect your load times.

Know The Difference Between Lossy & Lossless Optimisation

You must save your visitors from a less than perfect user experience. To do so, one must optimize images to ensure faster load times. Using a plug-in or script, optimizing images is the process of decreasing image file size. The goal here is to speed up the load time of the page. As you’ve read through the last section, Lossy and lossless compression are two methods that were referred to a lot.

Lossy optimization restores the large file to its original form with minor loss of some unnoticeable data, while lossless compression restores the large file to its original form without any loss of data.

Identify Your Images & Make Alt Texts Your Best Friend

While Google can identify text extremely well, it is still a bit iffy in terms of images. So you must make sure your nomenclature is intact and easy to understand. Alternative text, commonly known as alt tags gives search engines a basic idea of what each image is about. However, they are not visible to your average visitor. Alternative text is a big win for website accessibility since it also helps visually impaired visitors navigate your site with audio-based software. And improving your website’s accessibility is a great way to improve your search rankings. Be sure not to stuff it with keywords. Use plain, understandable language with one targeted keyword. So it is imperative to fill in the Alternative Text field when you’ve added an image to your site.

Now, let’s say we are an exciting new gym, coming soon to your neighborhood. We are trying to find images for our website. We downloaded a stock image off Unsplash and it was named “photo-1534438327276-14e5300c3a48.jpg”. Now obviously, this needs to be renamed. We’d rename it to something simple like “choquer_gym_weight_training_1”. Once we upload it to our hypothetical gym’s website, we have to make sure to fill out the alt text, which would be: ‘Choquer Fitness Weight Training’. Given the example, this should help you understand how to rename and alt tag your images efficiently.

Using SVGs Can Make The Biggest Difference

Another good method would involve the use of SVGs, or ‘scalable vector formats’, with the other images you have on your site. SVG works great for logos, icons, text, and simple images. Here’s why:

• SVGs are known to be super scalable on browsers as well as photo editing tools.
• You can actually see the difference in quality on a small SVG against a bulkier PNG and JPEG equivalent in terms of gradients. The SVG’s gradient is extremely smooth, while banding can be seen on JPEG & PNG’s. (BEWARE: SVG’s don’t work with Illustrator gradient meshes)
• Google indexes SVGs, the same way it does PNGs and JPGs, so you don’t have to worry about SEO.
• SVGs can be your trump card since they are traditionally (not always) smaller in file size than PNGs or JPGs. This can result in faster load times.

Make Sure To Optimize Your Thumbnails

Every good eCommerce site will use well-optimized thumbnail images, especially on home and category pages. The goal is to quickly showcase products without taking up too much space and cluttering your webpage. Thumbnails are great, but can sometimes backfire if not optimized well. In turn, your page load speeds end up taking a hit. If they prevent your home and category pages from loading quickly, you could lose a potential lead. So make your thumbnail file sizes as small as possible. Remember that the collective impact of your thumbnails will have a noticeable impact on your page’s load time.

PRO TIP: Chance your alt attribute text and ensure not to duplicate text that you would use for the larger variants of the same image. In fact, make sure your alt texts are very different for each size of the same image.

Summary & Quick Pointers

• Rename images so that it makes more sense to you. No keyword stuffing. No fluff.
• Use GIFs if you need animated imagery.
• Shrink down decorative images as much as you can. For borders or simple shapes, make them PNG-8 or GIFs.
• If all fails and you can’t seem to compress a JPEG more than what you already have, try SVGs.
• Focus on image dimensions instead of its quality. So don’t worry about Dots Per Inch (DPi) or Pixels Per Inch (PPi) since they only affect an image's print quality, but not how it’s displayed on the web.

It’s always good to make a positive first impression in business. Since only some business is done in person, why not do the same thing with your website for your online customers?

When considering landing page design, remember that most people are wired to remember poor experiences more than good ones. Your business may not have a dedicated landing page designer for your website. That’s why we’ll be sharing some of our top tips from our landing page designer here at Choquer Creative that you can use as a reference point for your company. 

What is a Landing Page?

A webpage that is purpose-built for a specific product, service or marketing campaign is considered a landing page. 

Landing page designers build these pages specifically for conversion purposes. In a marketing campaign, a link is used in a Google ad, QR code, social media or another post to navigate the customer to the company landing page. Technically speaking, any page can be deemed as a “landing page”, but it needs to be designed to convert leads into customers. 

Consider What Your Customers Are Looking For

Strong headers and page copy is fundamental for your landing page design. You may make a landing page that looks good but speaks to nobody without knowing what your company offers. 

Your Offer, Your Target Audience, Your Solutions To Their Problems

Knowing who your audience is and what your unique offer is to them is crucial for an effective landing page. Any landing page designer, copywriter, web developer or website strategist needs to know this critical information. 

Why is this important? Understanding your target audience will help writers create targeted, persuasive copy for those specific customer groups. 

A common issue is when businesses relay features but not solutions to customers. It’s important to communicate why your product features solve a customer's problem. Consider our Choquer Creative homepage. We believe business owners struggle in website design because they cannot rank high enough on Google, they don’t have time anymore to tend to their website, or their websites don’t bring in enough leads.  

Rather than thinking from the business’ point of view, think about what your target audiences expect to see when they open your website. Consider the following questions in landing page design:

• Right away, what questions does the landing page answer for customers?
• How do customers know they’ve made it to the correct place?
• What calls to action (CTAs) and headlines can you include to captivate them?
• What does your page look like t compared to your competition?
• How do you prove the value of your products/services to your customers?

Stunning Landing Page Design Elements To Implement

After your foundation with your target audience is determined, let’s discuss some captivating ways to attract your target audience and make your website stand out. 

‍

Micro & Scrolling Animations

GIFs hero animations are more engaging than a blank background. Mirco animations should be small and highlight an area of the landing page related to a call to action.

Landing page designers create unique micro animations to make your business memorable. Consider using wheels and even scrolling animations to make your website unforgettable to customers. 

Scrolling animations are a disruptive UX landing page design concept. They’re remarkable for landing page design because they capture the user’s attention while serving the function of adding more photos, and copywriting while decluttering the website. 

Ensure to explore both vertical and horizontal scrolling animations for landing page design inspiration.  

Illustrations as Hero Images

Artistic illustrations on your landing page are a great way to allow your business to stand out. Usually, these illustrations are smaller file sizes, giving your business an advantage in terms of load speed and even search ranking. 

Fun illustrated characters your audience can relate to are a trend in 2022. You can even integrate an animated character into your call to action, making it more fun and less forceful.

You can also explore our other blog for more advice on optimizing your website images.

Add Videos To Your Landing Page

Video helps showcase your brand story while being interactive and memorable for your customers. 

Video is becoming a more reliable method to increase business revenue. A staggering 86% of marketers say that video helped them generate leads, and over 80% believe videos directly increased sales. 

Ensure to include a brief video on your landing page. A 1-2 minute video is best to get your message across without losing your customer’s interest. Consult with a landing page designer for video ideas such as a featured product, testimonial reel, or a demonstration. It’s best to embed it via Youtube or Vimeo to not slow your page’s loading speed. 

If you need a team to work on your website, including a dedicated landing page designer, don’t hesitate to reach out to us for a consultation.