A little bit of trivia for guys out there who are wondering why hero images are called as such. The term “hero” was first used in the world of theater and it was the prop (it’s usually called the hero prop) that is more detailed than usual because it’s meant to be seen or viewed in close range. One good example of a hero prop is the DeLorean Time Machine from the film franchise “Back to the Future”.

So if you were thinking that hero images had something to do with comic book characters in capes and gadgets then you are a tad bit far off. But still, their modern day purpose in web design can be almost like that of a superhero in that they can save the day.

But how did the hero image came to be? Where did it start? How did it become the hottest trend in web design since popups and splash pages?

Origins in Traditional Media

When the idea of hero images first came out, people were a bit worried about it. A lot of people say that having a very large image on the front page might not be the best thing to do. Others think that it was just a very tacky way to say “I’m creative, get over it.”

People forget that hero images, or at least the idea of hero images, have always been in use even in traditional media. When was the last time you visited a newspaper stand? They may not be that common these days but I am pretty sure you can recognize one when you see one. Ever noticed how most newspapers are always using large images on the top-half fold of their publications? According to some newspapers I know, this is to attract buyers who will be intrigued by the images. Some well-known and respectable newspapers use images of people of interest, recent happenings, or emotion provoking pictures. Other, less popular newspapers usually go for racy pictures or controversial images to pique the interest of passers-by.

Hero Images in Modern Web Design

If it worked in traditional mediums like newspapers, it should probably work with modern web design as well, right? With where modern web design is going these days, that’s a big yes. Gone are the days when the page-by-page design appeals to your audience. Most websites nowadays are following a more storytelling approach in their design. The idea is that your visitors should be able to understand what you do, what you can offer, and why they should choose you over the others on the home page alone. A hero image (which is basically just a very large attractive image header) serves not only as eye candy but also as a medium for websites to “tell a short story” with an image. In a time when people have very short attention span, you can easily cram an idea into one image instead of a 200-word blurb.

Why Use Hero Images?

I can’t count the number of times friends, clients, and other people have asked me this question. According to most of them, this questions stems from what seems like a sudden popularity of the element. Here are some of the reasons why using hero images is always a good thing if done properly.

1. It builds your brand – A lot of people who are hesitant in using Hero Images believe that committing the largest and most prime real estate on your website to an image is not logical. While this may be partly true, a Hero Image can easily tell a story and build your brand just by being there. This is really effective for websites and brands that have services or products that have a great story to tell.
2. It gives answers to customer questions – Oftentimes, websites use hero images as a means to provide an answer to a probable question. For example, some e-commerce sites use their hero images to include information such as “100% organic, Free Shipping to USA, or Made from the wool of 100% Highlander Yak. This is to address possible questions or time-sensitive information that customers might make or need.
3. It can highlight your value proposition – As a business, it will always be your goal to differentiate yourself from the competition. This is what we call value proposition. It’s basically telling your customers that value your service or product brings to them. Where better to put it than on your hero image. You can put it in the form of a call-to-action in your hero image.
4. To make an announcement – They say that whenever you have something exciting to announce on your site then your hero image is your best bet. Pop-ups and floating elements don’t work anymore so you might as well put it in a place where you are sure people will see it. Announcements posted on hero images get the most visibility and thus more exposure. Announcements include sales, the arrival of new products, and product giveaways.

How to Properly Use Hero Images

With the one-page approach becoming very popular, more and more websites are gearing towards the use of Hero Images. The question is…is there a right and wrong way to use Hero Images? Well, of course. You can’t just plaster a large image on your site and expect it to work perfectly. The secret is in the telling. Let me explain that to you in detail below.

1. Make your visitors feel welcome – Now this may sound like an advice from the 80’s but bear with me here. Remember when I told you that the Hero Image is the first thing that your visitor will see when they visit your site? To a certain extent, it works like that funny doormat your neighbor always had. For anybody visiting their home, they would see the doormat, smile, and come in knowing the people inside have a good sense of humor. This is the same with your Hero Image. Make sure it exudes the same aura you are exuding as a brand. With a simple play in color and saturation, you can turn any photo into a powerful, warm, and inviting Hero Image just says “Come in, we’re open.
2. Don’t be afraid to add some action – A lot of websites who use hero images oftentimes just use generic and “static” images for their headers. Now, this can work for some but oftentimes adding a bit of “action” into the hero image can really do you some good. By adding a bit of momentum and movement into your Hero Image, you can create a very powerful yet playful image. Add a simple yet incisive message and you have yourself a keeper. Just don’t overdo it and use an image that is too “busy” as it distracts your visitors and may make your layout seem messy.
3. Get it going with grids – Aside from the whole hero image trend, grids are also one web design element that is getting popular these days. Don’t be afraid to use both elements in your web design. By using grids properly, you can help guide the visitor’s eyes to what is important in your page. You can split your Hero Image into two blocks to accommodate a graphic and the other typographic.
4. Don’t limit yourself – As boring as it sounds, most websites I know settle with a rectangular or box-shaped hero image for their website. This severely limits the storytelling value of your site. Don’t hesitate to play around with your hero image. Set it askew, experiment with lines, forget about symmetry, or you can even get a little bit creative with patterns and borders. Remember that if your hero image successfully captures the attention of your visitor, you already won half the battle.

Final Tips for A Good Hero Image

To wrap everything up, here are the three essential elements that should be present in your hero image

1. An eye-catching image – Humans are visual creatures. We love seeing images that appeal to us. You’ll agree with me when I say that you’d rather look at an infographic than read a wall of text. Make sure you use an image with high resolution and can really catch the attention of visitors.
2. A compelling copy – Depending on your choice of design, you might have very little room for a copy on your hero image. Either way, you should ensure that you have a catchy and compelling copy ready. This is to ensure that your visitors get your message.
3. An effective call-to-action – A simple button or link telling your customers what they should do next should be present in your hero image. Do you want them to check your inventory? Maybe direct them to your testimonial page to see stories from your other customers? It’s all up to you but always find a way to direct them to the next logical step towards your conversion funnel.

Don’t be afraid to play around with your website design. Be bold. Be free. In case you need help with your website design, don’t hesitate to contact the experts for help.

Posted: December 3, 2015

Updated: July 16, 2019

In an effort to better serve local businesses and clients not participating on Foxxr’s monthly SEO plans, we created a new department for quick website fixes, repairs and maintenance.

Our new team of highly skilled developers typically turn around requests in 3-10 business days at the very affordable rate of $75 per hour.

Whether you need speed improvements, aesthetic improvements or theme upgrades, we can handle your request in a timely matter.

As WordPress evolves and rolls out updates, plugins and themes must also be updated. This can sometimes cause performance issues that need to be addressed. Get your fixes done fast and problem free with Foxxr’s Ad Hoc Services. Save time and hassle so you can focus on what you do best, running your business.

Some of our typical request include:

SEO campaigns, social media marketing, and a plethora of other elements of a strong online presence are constantly competing for the attention and the investment dollars of online businesses, but optimizing your website remains the core to creating a high conversion rate.

Optimal web design is often thought of almost exclusively in terms of aesthetics, but in reality, this is only one aspect of a high-performance website. Ultimately, the goal of Web design, whether you are building a new website or improving an existing one, is to create brand awareness, generate new leads, and (above all) make conversions. To accomplish this, you need every aspect of your website to be feature optimal “usability” and to focus on “user experience.”

Below, we look at 15 ways you can optimize your website with Web design strategies that are proven to make more customer conversions:

1. Keep It Simple.

The first principle of Web design to keep in mind, ironically, is to not “over-design.” That is, don’t add in numerous extra elements that serve no specific purpose. Doing so will only make it more difficult for site visitants to find what they’re looking for and lead to confusion and frustration, regardless of how entertaining those unnecessary elements may seem to be. In regard to color schemes, for example, most experts recommend at least three but no more than seven be used.

2. Optimize Your Fonts.

For online usage, there is a general consensus that some form of Sans Serif font is easier for viewers to read and that the best overall font size is 16pt. It also generally best to use no more than three typeface and 3 pt size options, and it is critical that background versus font colors contrasts to improve “readability.” Finally, don’t fill up the screen too tightly: a lot of white space can be beneficial in that it keeps your pages looking clean and uncluttered.

3. Create a “Visual Hierarchy.”

It is important to make the most important elements on each page stand out naturally, based on color, size, and position. Note that readers’ eyes tend to move from the top of the screen to the bottom and from its left to its right, so position calls to action and desired highlights accordingly. Using an unusually bold color contrast and making important elements larger than other elements on the page also helps.

4. Make Navigation “Intuitive.”

You want those who visit your site to spend their time investigating your products/services and, hopefully, making a purchase, not struggling to find their way around, getting “stuck,” and finally abandoning your site to never return again. To accomplish this, keep a fairly simple navigation bar always at the top of the page, avoid going more than three layers deep, avoid giving too many navigation options all at once, show the visitor’s navigation path in the page’s footer, and include clearly marked internal links.

5. Keep It Consistent.

You want your website to feel like a unified whole, not like three of four radically different websites randomly pasted together. There should be color, text, and tone consistencies throughout the site. Variation should also be used, but still consistently. Meaning, use a consistently distinct layout for particular “types” of pages, while allowing some elements to appear in every page.

6. Ensure Full Compatibility.

These days, users access the Internet via a wide range of devices, browsers, and Operating Systems, with mobile access being especially on the rise. Invest in responsive design software that can auto-adjust screen size and other elements based on which type of device the visitor is using. Also add alt-text to describe each image since some users will not be able to view those images.

7. Use Basic Conventions.

While you want your website to be unique and innovative, there are still certain conventions that online users are accustomed to and have come to expect. It is best to follow these to avoid unnecessary confusion/frustration. For example, a navigation bar at the top of the screen, a brand logo in the upper left corner, and links that “light up” when the mouse hovers over them are conventions that are probably too deeply ingrained to be discarded.

8. Work to Engender Trust.

No matter how flashy and functional your Web design may be, if visitors are unsure about your site’s credibility or even of whether or not they have a secure connection, sales will plummet. Trust levels generally go up when customers see the green https://, the “security lock” logo, an About Us page, an address and contact information, easy access to the price tags on your products, and clear, honest descriptions of those products.

9. Try Split-Screen Layouts.

One of the latest trends in Web design is the split-screen layout, which divide the screen into two or more subsections, each devoted to a particular category of product or service or taking you directly to a major division of the website.

10. Use Grid Layouts.

Regardless of whether or not you opt for split-screen, you cannot afford to abandon layout grids. Grids allow you to organize each page, to create columns and boxes and to use every square inch to maximum effectiveness.

11. Make Calls to Action Prominent.

Your CTA buttons should stand out due to color contrast, size, and positioning. They should also be easy to find due to “isolation.” Remove unnecessary distractions from around the CTAs so that they stand out as clearly as possible.

12. Personalize the Experience.

Using software that learns the history of past viewers as to which pages they visited when previously at your site, what past purchases they have made, and even their general browsing patterns, allows you to place appropriate offers and ads and otherwise personalize the experience. This is what Amazon.com, for example, and other online retailers do to great effect.

13. Reduce Load Time.

No matter how impressive your site’s Web design might be, it will be to no avail if potential “converts” flee the site before it is even finished loading. Getting professional Web design experts to compress JavaScript, optimize image dimensions, and reduce HTTP requests is key; but you also have to balance text and video/image content to reduce overall data load.

14. Remember “Hick’s Law.”

“Hick’s Law”, almost as well-known in Web design circles as Newton’s Law of gravity to the general public, says that the time it will take a customer to make a decision is directly proportional to the number of choices he/she is confronted with. Limit yourself to one CTA per page, collapse less-used menu options and have a simple navigation bar, and use links sparingly. Fewer choices mean a higher conversion rate.

15. A/B Test Everything.

In Web design, you should be periodically A/B testing all elements of your website to continuously gain effectiveness and to examine new trends to see how well they convert. Test checkout pages, product pages, CTA buttons, videos, images, headlines, testimonials, and everything else.

Conclusion

Doing everything possible to optimize your website for high conversion rates will pay off in the end. But be sure to get help from professional Web designers, like those at Foxxr.com, to ensure your website is at its full potential.

Need Web Design for Your Business?

Get Started

A high-performance landing page is the crucial link between your paid and organic search ads and your business’ website. By equipping your website with the best converting landing pages, you greatly increase your visitor traffic and your overall sales.

Below, we list 11 landing page conversion tips, gleaned from numerous successful landing page examples. Use these tips to get great ideas on how to improve the aesthetic appeal, engagement level, and (above all) conversion rate of your own landing pages.

1. Be Concise But Thorough

While it might seem contradictory to promote both conciseness and thoroughness as twin elements of a good landing page, the task is not at all impossible. One way to accomplish this is to use concise descriptions throughout the page that are accompanied by links that access further information. This avoids overcrowding and allows for a quick scroll-over view, while providing extra information to those who want it.

2. Make Calls to Action “Salient”

The ultimate connection between a landing page and a higher conversion rate rests on its call to action buttons. These must, therefore, be placed in “salient,” that is, “highly visible” locations. Top-right or mid-screen are good options, as is having an “extra” call to action button at the bottom of the page. And making the button a bright or deep color that contrasts with the background can also help. Additionally, some modern websites are finding great success by placing call to action links throughout the web pages that their landing pages link to, and not just on the product pages.

3. Adjust Image Sizes to Vary Emphasis

Many landing pages will make images of products they want to emphasize larger than any other product images present. This can be effective with best sellers, with on-sale items, or when the sales funnel behind the landing page is focused on market segments likely to buy the emphasized product. However, be careful not to enlarge an image absent such “good reasons for doing so,” since that could lead to increased clicks without increased conversions. The emphasized product image needs to align with what your customers are likely looking for to begin with.

4. Be Careful About “Little Words”

Even small changes in the text of CTA buttons can sometimes make a big difference. For example, “Buy Now” has been shown to far better than “Shop Now” for getting conversions. Some might suppose that “shop” would seem less “pushy” and avoid bringing up the thought of spending money. But “shop” might confuse some who are already ready to buy and gain a lot of clicks of people who indeed “just shop.”

5. Avoid Unnecessary Distractions

Especially on landing pages and at conversion points, you need to get your leads to focus on a single action instead of being unduly distracted. This can mean removing “screen clutter” from around a CTA button, but it can also mean avoiding long forms that ask for too much information or making customers wait for a video to load and play before they can act on the CTA. And, finally, it means centering your landing pages and CTAs around things that customers are the most keenly interested in. For example, it might be a low price, a free shipping offer, or a unique product feature that your particular audience is most interested in.

6. Make Forms Short and Simple

To gain contact information for future follow-up ads, you will need to sometimes include forms to fill out on your landing pages, but remember that few people enjoy filling out forms. Make the form conspicuous but limit it to only a few fields if possible. Make text concise but clear enough that customers know exactly what to do. Avoid asking for overly sensitive information, and always ask for the most important data first. If possible, use a single instead of multiple page process, since that can boost conversion rates by over 20%.

7. Emphasize Customer Benefits

It is important that every landing page focuses on what customers care about most —how the product or service will benefit them. You need to look at your business and its products/services from the customer’s perspective. Customers may have some interest in product specs and About Us information, but front and central should be benefit statements that tell the page visitor “what’s in it for him/her.”

8. Use Headlines, Taglines, and Other Text “In Tandem”

The purpose of headlines is to “grab attention,” and thus, these should be most prominent and also relatively short. “Taglines,” on the other hand, should follow up on the headlines by adding additional and “clarifying” information. Finally, the smallest-font text and that which is least conspicuous (if not collapsed and hidden) should give access to the nitty-gritty details that a smaller portion of landing page visitants will want to see before making a conversion.

9. Include Optional Demo Videos

For many types of products and services, customers are much more likely to convert if they can first see a video demo on how to use the product or on how the service will be rendered. Since all customers will not wish to watch the video, and because those with slow-loading computers could end up abandoning the landing page if forced to load the video, you should not make the video auto-start but make it optional to watch. Also consider using full background screen videos once the customer clicks to see the demo, however, so the video is as large as possible.

10. Strive to Engender Trust

In recent surveys, one in six customers indicates they have dropped an order due to “security concerns,” and six in ten say they have decided not to purchase a product due to the lack of a “trust badge.” Including a link to your About Us page, showing your business’ physical address and contact information, giving a link to customer testimonials, and listing endorsements all help establish trust. A trust badge, backed up by the proper certification and well recognized by consumers, also boosts confidence and thus conversion rates in this age of rampant online fraud.

11. Use Polite, Personable Language

While it is possible to be over-personal and drive customers away, neither do you want to seem too distant and impersonal. Use personal pronouns, especially “we” and “you” to add that personal touch and don’t use language too technical for most of your audiences to readily understand. Also be sure to “leave a thank you note” for those who buy a product or even just visit your site, which will also give an opportunity to ask for contact data in exchange for a special offer.

Some Good Landing Page Examples:

Conclusion

Typically, most online businesses spend over 90 times more effort to bring visitors to their websites than they spend on actually trying to convert them into customers. Yet, without conversions, all is in vain. Landing pages are one key element in making conversions and are worthy to invest in, as they stand between the ad and website.

To learn more about maximizing the conversion potential of your landing page or pages, or to avail yourself of professional web design services, contact Foxxr today at 727-379-2207 or fill out our online contact form.

The Popularity of WordPress

WordPress has been soaring in popularity as a small business CMS (Content Management System) over the last 10 years or more, and though originally designed with blog sites specifically in mind, it has now become the top Web-content management software for non-blogging websites as well.

Many will naturally ask such questions as “What are the reasons for the popularity of WordPress Web design?” and “Why do so many small businesses choose WordPress over their other options?” Below, we attempt to answer these queries by highlighting 12 WordPress Web design features that are driving its status as the leading CMS platform in the modern market.

1. WordPress is Perfect for Website Redesign.

The flexibility and compatibility of WordPress make it simple, convenient, and affordable to redesign an existing Website. This is crucial since business websites need to grow and change with the businesses themselves.

2. WordPress Web Design Allows for Full Customization.

When you design using WordPress, you are put in full control over future updates and changes, and you can brand your Web pages to your exact specifications. There are literally thousands of themes, templates, and plug-ins to choose from, which can be custom-selected to uniquely, fully, and accurately express what your brand is all about.

3. You Can Easily Add a Blog and Keep it Active Using the WordPress CMS.

Blogging capabilities are integrated into the basic WordPress platform, making it fast and simple to run a blog. You can even set up an RSS feed, auto-post recent blogs to your home page, enable email subscriptions to your blog, allow readers to leave comments. WordPress makes blog management fast, simple, and high-tech.

4. WordPress is Virtually Synonymous with “Scalability.”

With WordPress, there is no need to immediately purchase all the elements you eventually want on your small business website. You can begin as basic or advanced as you wish and then add new plug-ins and functionalities as desired.

5. The WordPress Interface is The Epitome of “User-Friendly.”

There is no need to be a professional Web designer to make simple updates on a WordPress website, for adding new pages, posts, and images is easy and takes only a few seconds. The interface is highly “intuitive,” lessening the learning curve tremendously and saving you valuable time. Additionally, because WordPress is a browser-based system, you can manage your website from any computer that is connected to the Internet.

6. WordPress is Exceptionally “Search-Engine Friendly.”

Using WordPress helps drive more traffic to your site through integrated SEO strategies. First, a very simple code is used that is easier for search engines to read/index. Second, you can add meta tags, keyword phrases, descriptions, titles, and more to every webpage, blog post, and image on your site. The end result is your website content is easily digested by search engines and accurately portrayed to Web searchers.

7. Your Website Will be Automatically Kept Secure.

WordPress updates itself automatically, including its security features, which keeps you constantly abreast of the latest safeguards against online spies, thieves, and viruses.

8. WordPress Assists You with In-House Security as Well.

WordPress allows you to permit multiple users/administrators for your website. But to keep things organized and secure, WordPress also lets you designate “access levels” and “procedure restrictions” that keep you in control of who sees your information and what they do with it.

9. No HTML-editing/FTP Software is Needed with WordPress.

As WordPress is a fully functioning system in its own right, you do not need (as with some other CMS platforms) to use extra, outside software to enable functions like text formatting, image/document uploads, image editing, creation of picture galleries, or integration of video content.

10. Web Developers Love WordPress.

When it comes time to hire a professional web developer to handle a major website redesign or to solve a problem you can’t handle on your own, the fact that WordPress uses standard coding will make it easy to find the help you need.                                                                                                                                                                                 

11. WordPress Web Design is Fast.

WordPress’s internal setup makes it possible to be coded faster, without compromising on quality, than is possible with fully hand-coded websites. This means fewer downtime waiting for Web design or redesign.

12. WordPress Web Design is Affordable.

Since most of the basic, essential WordPress plug-ins are free and many of the more advanced plug-ins are relatively inexpensive, WordPress Web design is as affordable as it is advantageous.

To learn more about WordPress Web design or to avail your business of an experienced WordPress Web developer, contact us at Foxxr today by filling out our online form. Foxxr specializes in WordPress Web design services and can custom-build or fully redesign your business’ website in a way that uniquely expresses your brand and optimally identifies with your online visitors.