Good Design is a Lot Like a Good Marriage…

happy couple cheering because they got married!

Something that I learned after being married, is that communication is key. If you have a good line of communication then your relationship will do great!  Expressing your likes and dislikes will help you to improve your relationship and better yourself. I call it companionship inventory. The way companionship inventory works best, is by utilizing the “hamburger method”. The buns are the compliments and the criticism is the stuff in the middle–you may have heard it referred to in another, not-as-delicious type of sandwich. Continue reading “Good Design is a Lot Like a Good Marriage…”

A Note on Importance

Orange and white text reading if everything is important then nothing is important.

I don’t know about you, but I loved watching the Pixar movie The Incredibles when I was growing up. It’s a movie about how, in a fantastical world of superpowers, you lose sight of the regular, everyday people. At least that’s how I see it. When the villain’s plan is revealed, it comes with a line that’s stuck with me for the last fourteen years:

“When everyone is super, no one will be.”

Continue reading “A Note on Importance”

Internalizing Our Internship: Strathcom’s Interns Tell Their Tale

Internship banner and icons

Being a grizzled veteran of the Strathcom circuit, having worked here for a grueling 8 months, my sour disposition perked up slightly when I heard we were offering a few summer internships. Perfect, I thought to myself. Some poor unwitting souls I could heap abuse upon, who I could haze mercilessly, and who I could send to Starbucks for overly-complicated drink orders only to berate them when they returned with a drink that wasn’t precisely what I wanted (“I said double sweetener but half-sweet!”). But by the end of July, when our summer interns said a teary farewell, we had all learned a valuable lesson. Well, the interns learned a number of them. I’d like to think I learned to not be such a jerk—but only time will tell. Anyway, why am I telling you all of this? Let’s hear it from the interns themselves.

Continue reading “Internalizing Our Internship: Strathcom’s Interns Tell Their Tale”

Picture Perfect: The Difference Between Vector & Raster Graphics

Industrial robots begins to create artistic painting.

Have you ever wondered about the difference between vector and a raster graphics? Probably not. But have you ever wondered why the file you downloaded is twice as big as normal? Or why the image you’ve used for your website is pixelated? Well, read on and we’ll explain to you the difference between vector graphics and raster graphics. Continue reading “Picture Perfect: The Difference Between Vector & Raster Graphics”

A Modest Request…

child dressed up as retro business man

In the wonderful world of web, we as consumers are exposed to subliminal messages and overbearing marketing lists that have become second nature. And while automotive dealers have a plethora of knowledge, having seen the industry progress firsthand, some of the marketing ploys they ask for get lost in translation due to the stimulus-overload we are already in the midst of. Simply put, there are too many features available on websites, and everytime we add a new feature something gets lost in the shuffle. We, as designers, are often tasked with creating carousel slides to catch the eye while there are better tools available. If you read my last blog, about trusting your designer, then you’ll remember that sharing your vision and goals is an important part of the process — but letting us help guide you with our professional knowledge is just as important. After all the main goal is to improve the communication from Dealership to Marketing Manager to Designer, culminating in getting the message through to the customer loud and clear. And as a former dealership employee, marketing manager, designer, and customer, I can tell you with all honesty that these lanes of communication could be improved. Continue reading “A Modest Request…”

Trust Me, I’m an Expert!

Closeup side view of group of late 20's multi ethnic team of web designers working on a project. They are divided into small groups, some working on a computer and some testing mobile platforms on digital tablets and smartphones.

 

Web Designer (noun)

a person who plans, designs, creates, and often maintains websites.

By definition, the title of web designer seems simple. Someone who makes and maintains websites. However, it seems like even the most expert of designers spend much of their time trying to predict what a client wants instead of creating beautiful pieces of art. What caused this? Continue reading “Trust Me, I’m an Expert!”

Hey, You! Click That CTA Button!

Happy senior man using computer at home, smiling at camera...

In our digital world, website users are often assaulted by an array of visual cues on a daily basis. They may have hurdles like chat pop-ups and video pops-ups just to  find what they were looking for in the first place.

Often, we spend so much time creating purposeful content and design elements to guide our users, that we may forget to discuss one of the most important elements  — the Call To Action (or CTA). Depending on your goal, you want to ensure that your users are prompted to complete the actions you’ve created on landing pages; you know, the actions that lead to conversions. Continue reading “Hey, You! Click That CTA Button!”

Mobile Site Speed Matters. Are you up to speed?

Consumers and search engines have a certain level of expectation for mobile site speed and performance. If your site has problems that go unchecked, it can have a big impact. We have all visited a mobile site that has taken too long to load, got impatient, and left. Continue reading “Mobile Site Speed Matters. Are you up to speed?”

CMS Update: Silent Salesman’s New Style

technology updates with a laptop computer.

Here at Strathcom, we are constantly working on new features and new ways to provide the best experience for our clients. Here are just a few things that we updated in the last week: Continue reading “CMS Update: Silent Salesman’s New Style”

Website Personalization

personalized starbucks cups

As a millennial, I can admit that I come from a generation of people that like to feel recognized. Afterall, we are the Netflix-watching, Starbucks-drinking, everyone-is-special generation. If you don’t believe me, here are some stats:

  • According to a study by Janrain, 74% of people get frustrated when websites have content, offers, or ads that have nothing to do with their interests.
  • 62% of people under 34 years old are willing to share their location for more relevant content.
  • 40% of consumers will buy more from a retailer that personalizes the shopping experience across all channels.

You might be thinking that these are just a bunch of random percentages and that just because millennials generally shop this way, doesn’t mean you necessarily have to sell this way.

homer

But consider your own experience. Don’t you like being able to have your own, separate Netflix account so you don’t have to dig through the programs your spouse, friends, or your kids watch? Don’t you appreciate it when Amazon shows you the products they know you will be interested in? I don’t know about you, but I appreciate it when companies make things easier for me.

At Strathcom, we know that personalized content is something your potential customers want. This is why we developed our website personalization tool. This tool keeps track of the pages your visitors look at so next time they visit your site they are shown content relevant to their needs.

With our website personalization tool, you are able to customize the image, the video, the messaging, and the calls-to-action based on the inventory viewed by each individual user. If they are a student looking at vehicles that are at a lower price point, you can change the image or video to a small car and the messaging to “check out our vehicles under $10,000”, for example. Or if they are a lawyer looking at more high-end, luxury models, you can change the image to a video slider that showcases luxury details. Since these visitors likely aren’t as interested in special offers as they are in showing up their neighbours, you can change the messaging to “only 2 left in stock” to utilize their fear of missing out.

This is just one of the ways we can personalize your site. For more information on our other tools such as Notepad, Geo-Fencing, and Silent Salesman, drop us a line at info@strathcom.com  or subscribe to our newsletter!

5 Ways to Improve Your Google Ranking

seoEveryone wants to have that number one spot on the Google Organic Search Results page.  Here are 5 simple things that can help to improve how you rank on Google:

1. Create useful, relevant content

Quality content created specifically for your intended users will not only help with user engagement, but will improve your site’s authority and relevance, which will increase your rank on the Google Search Results page. It’s also important to update your content regularly.  Regularly updated content is viewed as one of the best indicators of a site’s relevancy. Be sure not to use duplicate content throughout your website, though; this could harm your ranking.

2. Have a blazing fast website

Page speed is an important factor on how you will rank on Google. A slow page speed means that search engines crawl fewer pages using their allocated crawl budgets, which negatively effects your indexation. Page speed is also important for user experience. Pages with a longer load time tend to have higher bounce rates, and lower conversions.

Not sure what your page speed is? Google has a great tool to test it!

3. Make sure your website is responsive and optimized for mobile users

Responsive sites are designed to provide optimal viewing and easy navigation on any device or screen size. This makes it great for users viewing the site on a mobile device. Even though you may have a separate mobile site, Google has started to punish sites that are not responsive or mobile friendly, causing them to rank lower in the search results pages.

4. Make sure all of your citations are correct and up-to-date

Citations are online references to your business name, address and phone number (NAP). Some examples of citations are your Google+ Page or YellowPages. Google uses these citations when evaluating the authority of your business website, and is a key component in Google’s ranking algorithm.

Citations from well-established portals will help increase the relevancy of your business.  Make sure your address, website url, phone number and business name are consistent across each website.

5. Blog!

Blogging is a great way to help boost your ranking on Google. Google crawls blog content more frequently than your web page content because blogs are constantly being updated.  A blog page is essentially another web page and every web page is another opportunity to rank in the search results page.

Blogs can also help you become a local source of knowledge and with lots of great keywords written into the content you can rank for many different topics related to your brand and dealership.

If you have any other questions on how to improve your organic ranking on Google, please do not hesitate to reach out to a member of our team or subscribe to our newsletter!

Why a Nissan Dealer Should Choose Strathcom Media Inc.

Like Nissan, Strathcom is a company that values design, quality, innovation, and progression. Even when we are better than the competition, we still strive to improve. Those values have made Nissan the fastest growing automotive brand in Canada, and have made Strathcom one of the top automotive website, tools, and online advertising companies in Canada.

Strathcom started its relationship with Nissan as one of the few Nissan/Infiniti CDW (Certified Dealer Website) providers. Since then we have been giving Nissan dealers across the country the sites and tools that help them continually increase traffic to and sales from their websites. Though we ensure all creative elements align with Nissan and Infiniti guidelines to keep you compliant, that doesn’t mean your website has to be dull. Nissan understands that good design and a good first impression are important in the customer journey and because of that, they give us the freedom to make sure your site looks modern, professional, and fresh.

Some Nissan dealers still have dated designs, and that’s a shame! What they could have with a Strathcom site versus what they currently have is night and day. Let me put it to you this way: what truck is poised to be the king of the road in the coming years? You’re a Nissan Dealer so you already know the answer, the 2016 Nissan Titan, this thing is a beast. Cummins engine! 310 HP with 555 LB-FT of Torque! And it’s got to be one of the best looking trucks ever made! Your old 2012 Titan isn’t horrible. It gets the job done, it may have some issues but compared to the 2016 Titan, it’s not even in the same ball park. That is how Strathcom compares to the other guys. We are the best and we want you to be the best, and we are going to give you the tools to be the best.

What tools you ask? Well let me tell you…

  • What if you could put a virtual fence around your largest competitor so if people are in that dealer’s showroom comparing their inventory with yours they will see a message talking about why The Nissan Sentra is Better than the Honda Civic (assume it’s a Honda dealership), or a message saying bring in a business card from that dealership and get an extra $500 off your new car purchase? With a Strathcom site you can, it’s called Geo-fencing. It comes included at no extra cost.
  • What if you could personalize your website so that each user had their own individual experience? Think of how Amazon tailors the products they show you to what you have shown interest in, or how your Netflix screen will show you movies that closely suit your tastes whereas mine will show me movies that suit my tastes. If someone goes to your site and is looking at a Nissan Murano and then leaves and comes back later, suddenly the home page slider image is a Murano, talking about the top benefits of a Murano, and the sale you are currently having on Muranos is front and center, and scroll down and – whoa! – an offer to get an extra $250 off your trade in when you come and test drive a Murano today, SOLD! This is called Personalization, and  it comes included at no extra cost.
  • What if all of the vehicles a person has looked at is saved for them when they come back, automatically, and with pricing updates? With a Strathcom site they are. We call it Notepad, and it comes included at no extra cost.

 

I could do this all day but this blog can only be so long… Okay one more!

  • What if you could compare what you are pricing your vehicle at with the competition in your area, and see the average price that car is selling for, the average odometer on the car, and sell your vehicle quickly and for the highest profit possible? Well get ready to ditch that expensive vAuto software because with a Strathcom site you can. It’s called Market Pricing, and you guessed it, it comes included with the site!

The point is we give you the tools that literally no other Canadian website provider can. Tools that in 3 or 4 years every website provider will have, but with a Strathcom site, Nissan dealers have access to them today, and at a lower cost than what you are probably paying for your current website! Strathcom knows what dealers need to be successful, and more specifically Strathcom knows what Nissan dealers need to be successful.

Nissan has come a long way since our President Duncan Cochrane learned to drive in a Nissan Maxima Brougham, the question is, has your site grown with it?

Homepage Elements with the Highest Conversion Rates

Conversion Optimization: probably the most important topic imaginable for building car dealership websites, and a topic we’d like to shed some light on. Here’s what we at Strathcom discovered during our tests for conversion rates!Print

A Call to Action is Like Asking for the Sale

You train your Salespeople to close the deal, and the same kind of logic behind that also applies online. There’s no denying the insane importance of a Call to Action (CTA), and knowing just when and where to ask for the sale is just as important. In our tests, we excluded clicks from top-level menus. Here are the stats:

The Most Clicked-on Webpages

  • New/Used Inventory – people like to browse, so let’s suggest taking a test drive, for example
  • Specials – let’s load this page up with incentives; that’s the idea here anyways, right?
  • Service Appointment

Highest-Performing Design

Button-style CTAs outperformed “image + text” CTAs. Main CTA buttons account on average for almost half of the clicks on a webpage, making them by far the most important CTAs to include.

Best Placement

The higher above the fold, the higher the conversions.

iStock_000070576867_Medium

A Convenient Quick-Search Bar

Makes sense, doesn’t it? Users want to find what they’re looking for right away and if they don’t, they’ll go somewhere else. The stats:

Usage

One of the top-performing homepage elements to encourage conversions – we found in our tests that quick-search bars average around 20% of all site clicks.

Placement

  • Placement on the homepage doesn’t matter, as it’s consistently used wherever we put it – it’s just a matter of making it accessible
  • When placed lower on a page, users will actively scroll down to use it

A Ton of Links

One paragraph on the homepage could contain links to just about every other section of the site, giving readers an easy way of searching for and finding what they need. Stats:

Most Clicked-on Links

  • Contact Info/Location/Directions/Hours – some users are customers already, and they just want to find out where and when they can drop by, so let’s be sure they can find out easily
  • Book Service Appointment
  • View New/Used Inventory

Highest-Performing Design

Links with button styles, but ONLY when used sparingly – let’s be smart about how we use buttons.

For our testing purposes, “conversions” was defined as clicks which took a user to an internal webpage. We tested using heat maps, click maps, and Google Analytics data, and our tests were done over multiple sites with differing designs.

NEW EBOOK: 29 Tips & Tricks for Planning and Creating Content

Last week we published our guide to the essential SEO considerations you must address before launching a healthy website. And later this month we’ll release another online companion about selling cars through social media along every stage of the sales funnel.

But for now we tackle an even more direct subject: how to create the stuff with which your audience interacts. Websites, blogs, newsletters — this new ebook covers it all!

Continue reading “NEW EBOOK: 29 Tips & Tricks for Planning and Creating Content”

[VIDEO] Responsive Web Design, or: How You Learned to Stop Worrying and Love Strathcom

In our latest video submission, Strathcom’s own David Lam explains why your auto dealership website needs to be featured on our Responsive Web Design platform.

What is a Responsive Website? It’s a platform that optimizes your website’s content for any and all possible display mediums and operating systems.

It doesn’t matter whether your customers are using

  • Smartphones
  • Tablets
  • Laptops
  • Old desktop PCs
  • Or TV monitors

Your website will be automatically formatted to best display and run your dealer’s vehicle photos, content, and interactive apps. The days of designing a separate desktop and mobile website are long gone!

Strathcom’s Responsive Website Platform will save you money and improve the browsing experience for your clients, no matter their mobile device. Care to see our handsome and talented Web Department Technical Lead clarify the details? Here’s the clip!

8 Visual Design Tips to Class Up Your Car Ads

There’s no denying it: we humans are visual creatures. Our methods of communication rely more on visual stimulation than ever. Just look at our social media habits.

According to a Hubspot study, Facebook photos get 53% more likes than text-based posts. Photo-based social media sites have also blown up, with Instagram garnering over 150 million users, and Pinterest capturing over 70 million. These are all indications of a visual content revolution.

There is a staggering amount of visual marketing online, and it can become overwhelming for consumers. You have just 8 seconds (according to Hubspot) to break through all of that clutter and reach your customer. That’s why you need to make your visual content interesting, engaging, and relevant. Not every car dealership has the luxury of an in-house designer, but you shouldn’t let that stop you. You can create your own visually-compelling content and integrate it into your online marketing—whether that be your website, on social media, in a blog, or email campaign. Here is an 8-pack of practical design tips for creating quality content on your own.

  1. Incorporate Colour

    Using colour in your imagery reinforces your brand identity. Add it to a simple background, to a border around your vehicle photos, or to a graph comparing fuel efficiency of different car models. Just remember to choose a colour palette that reflects your original brand colours. If you want to venture outside your standard colour palette, try to keep it minimal as a general rule by using no more than five colours.

Good use of colour background (Dodge.ca)

  1. Use Text Overlays

    Adding words to your images with text overlays is a good way to give context to an otherwise bland image. We often see this technique used in the homepage sliders of car dealership websites. It can also be effective for images in blogs and social media posts. Keep in mind that your typography should be legible and appropriate for your branding style, and complementary to your imagery.

Here’s a nice text-overlay example from Dodge.ca: Nice text-overlay example (Dodge.ca)

  1. Ensure a Logical Layout

    Whether you’re making a blog post or social media blast, it’s important to consider the layout of your visuals in relation to your text. The aim is to guide your reader through your content in a logical way. Simply put, only include images that enhance the meaning of your text, not distract or take away from it.

Here’s a logical layout example from GMC.com:

  1. Don’t Fear the White Space

    Yes, visual aids can be great. But it is important to avoid “visual clutter” and allow them room to breathe. You want to keep your content clear and easy for your audience to understand, which sometimes means going back to the basics and befriending the white space, the empty spaces in a design.

Here’s an example of white space done right, by GoFord.ca: White space done right (GoFord.ca)

  1. Play with Scale

    While you want to maintain consistency in your visual messaging, it’s okay to vary the size of images and to mix large images with small ones to create visual interest. Play with image composition and use larger “close-up” images to highlight areas of interest like special vehicle features.

Below, Hyundai Genesis plays with image scale to highlight different vehicle features (HyundaiGenesis.com): Hyundai Genesis plays with image scale to highlight different vehicle features (HyundaiGenesis.com)

  1. Embrace Simplicity

    Overused phrase alert: “Less is more!” Yes, we’ve heard this a million times, but more often than not, it’s true. Don’t just throw in images without reason. Use images that help convey the point of your text, not distract from it. Your visuals should be there to serve a purpose, so keep it simple and to the point.

A good use of simplicity in visuals, from GM.ca: Good use of simplicity in visuals (GM.ca)

  1. Keep It Consistent

    Although you can have fun with your visual content, it’s important to keep it consistent with your brand image and overall communication style. In layman’s terms, all your visuals should have the same style, look and feel. Keep this in mind when incorporating colours, fonts and any other graphic elements.

Chrysler changes up colours while keeping a consistent style (Chrysleroffers.ca): ­Chrysler changing up colours but keeping a consistent style (Chrysleroffers.ca)  Chrysleroffers.ca 2  Chrysleroffers.ca 3

  1. Balance the Visual and Verbal

    The best content comes from the seamless combination of the visual and the verbal. If you want to really engage and stimulate your readers, keep your text concise and use relevant, useful visuals to enhance it.

Chevrolet does a good job of balancing visual and verbal elements on Chevrolet.com: Chevy balancing the visual and verbal (Chevrolet.com)

Put these tips into practice!

Now you’re ready to get started on creating your own images. You don’t have to be a Photoshop wizard to do this! Here are some free and easy-to-use image editing tools to help get you started:

References:

Want a professional design team on your side? Contact Strathcom Media for more information on our custom graphic design services.

Web Design from the 90's to the year 2013.

We’ve come a long way baby!

Have you ever browsed your Facebook timeline, right back to the beginning, and looked at some of your old posts? If you’ve been on Facebook for a while, then you’ll probably find some pretty embarrassing material – things that your wiser and older self would never be caught saying to the general public. Well, the Internet archive is a bit like Facebook’s timeline & the WayBack Machine takes snapshots of what your website looked like in the past. That’s right — nothing is ever completely deleted once it’s posted online. We thought we’d take a look at Strathcom’s website way back when we got started and oh, the fossils we dug up. Don’t hold it against us – we were all young and naïve once just like the Internet! But let’s just say some of our early designs might remind you of your teenager’s Facebook timeline!

The Beginning – 1998 Web Design

In the beginning, there was Netscape 3.0 (and Internet Explorer): brace yourself for state-of-the art web browsing technology! Here’s a snapshot of what Strathcom.com looked like in June, 1998:

Strathcom as of June, 1998

Notes:

  • Minimal text and an a-typical navigation were a product of the times. Back in 1998, websites didn’t have much consideration for SEO or usability; all that mattered was having a presence on the web.
  • Unlike many other sites at the time, we did have important SEO keywords in our title and description. Even today, 15 years later, many people don’t even know what Search Engine Optimization is.
  • That being said, we have been in the SEO industry for 15 years. Not many web design or even SEO agencies can say that!

Strathcom at the Speed of Flash – Web Design in the year 2000

The year was 2000, and the millennium bug was still in people’s minds. So was the idea that a Flash-powered website was the bee’s knees. While 2000 passed without a hiccup, Flash websites are definitely still around. Strathcom has since advanced to a more effective and faster web design, leaving old flash websites in the dust. Strathcom Media in 2000Notes:

  • At the time, Flash had only been around for a few years (it was first adopted by MSN in 1996) and it was still one of the best ways to deliver a rich web experience across platforms. In many cases, Flash is now being replaced by HTML5, CSS and JavaScript.
  • Once again, the primary purpose of our website was to establish our online presence. Not much was taken into consideration when it came to SEO; as long as we had a website explaining what we did, it was just dandy.
  • As not everyone had Flash installed, we had to inform our visitors how the website was built and in what resolution, as well as provide a no-flash portal.

The Elevator Music Blues – Web Design in the year 2003

What would make our website really cool? I know – let’s add soothing background music and a blue background so our visitors can chill out to our subliminal tones. Elevator music: it’s what all the cool kids are listening to these days! Here’s our site in 2003 (the bars in the lower right move – neat, right?). Oh – that speech bubble – I might have added that.

Strathcom Media in 2003

Notes:

  • Boy oh boy was music a fad at one point! Now canned music tends to annoy anyone surfing the internet.
  • On top of animated graphics and a stylized image of Edmonton, we also incorporated a more modern navigation layout which has a page to match each of our concepts.
  • When you visit the one-click-deep pages, you can see that there still isn’t much unique text written for SEO purposes.

It’s Psychedelic Baby! – Web design in 2004

It might not have been the 60s, but our intro video in 2004 looks like a real flashback. Detractors might describe it as a combination between a techno dance party and what happens when you give a squirrel a caffeine tablet and tell it to make a music video. But it does tell something else: the internet is moving quickly, and Strathcom has been there to help you catch up with the trend. Speed (the attribute, not the drug!) is something you need to successfully adapt online. Oh, and doesn’t the music scream “this is the future”! Notes:

  • In 2004 we were still pushing strong to convince businesses to start marketing on the internet, as many companies still hadn’t jumped on board yet.
  • That was too bad, because the longer your domain name has been live on the internet, the more authority your website has, and the better its rankings in search engines. Strathcom already had a well-established domain name by this time.
  • This year we also switched to a side navigation. Although it might not look as pleasing to the eye, it did leave more room for the main attraction: the flashing techno dance party!

A Step in a New Direction – Web design in 2005

The year 2005 ushered in a new look for Strathcom. Gone was the background music, and in was a new streamlined look. If you look close, you can see our lot management tool being displayed on a state-of-the-art Palm handheld. You won’t see those around anymore.

Strathcom Media in 2005

Notes:

  • In 2005 we were really getting serious about the automotive industry. We started focusing just on the online automotive industry and moving away from building websites for any type of business.
  • We finally introduced a modern page navigation that actually looks like what one would see on a modern, optimized website.  We also included a “testimonials” and “news” section to keep users interested.

The EasyLoaderMobile Revolution – Web design in 2007

In 2007, we focused our website on our offering of the Easy Loader VMS, or Vehicle Management System, a tool that remains an essential part of our business. Our innovative Mobile Lot management system was also available for PDA devices.

Strathcom Media in 2007

Notes:

  • Who else can say that they were focusing on mobile in 2007? Even in the  year 2013, mobile is still a new idea for many businesses.
  • By now our website had a lot more unique content for SEO purposes, as well as some great calls-to-action. All of our services are structured out into individual pages for usability and SEO purposes.
  • By 2007, web design wasn’t about just having a web page up and available anymore. There was much more to creating a website that worked for your users, and usability became an important consideration.

Where We Are Today: Web Design in 2013

If you’ve been to our homepage you’ve probably noticed that Strathcom has a new look. It’s a change that we’ve made to reflect our new ownership, and our vision of where we are going in the future. While not every single one of our website designs through history has been fantastic, we have been growing step-by-step to where we are today. We were one of the pioneers in automotive website design when we started, and we continue to be to this day. The web has changed, and so have we. Google was founded in 1998. Facebook was launched in 2004. Just think how far the web universe has come in the past ten to fifteen years. You can see why a website isn’t a one-time investment. It’s an ongoing process that will evolve as the web environment and your business changes. And over time you will be able to take advantage all of the new features that technology has to offer.

— Michael Fisher & Samantha Goettel

Form Validation: Avoid Frustration for You and Your Customers

Without functional and clear client-side validation, an online form becomes next to useless. Client-side validation checks the form when the user presses the submit button and does not allow it to go through until it passes all validation checks. Some of the simplest checks see if the user has filled out all the fields, but increasing your validation clarity and scope beyond the basics can make a form easier for a customer to fill out properly.

Red fields are immediately recognizable as required.

Form Error Messages

The previously popular method of showing errors for a form was with an alert box, a method that has become outdated with the easy-to-use jQuery library. An error message should always be shown next to or below the field it represents, to make things easy for your customers. Using traditional stop-slow-go colours can make a design a less visually appealing, but can simplify error recognition. A user can easily distinguish a red field as being bad, and a green one as being good. Don’t ever leave the user hunting for the problem – show them exactly where it is. One nice addition you can add to your form is to animate the page to the first error message by using the jQuery animate and scrollTop function. Error messages should always say exactly what format the field is looking for. Telling the customer that their entry is simply invalid is not enough and can easily become frustrating when the required format is not clear.

Keyup validation gives immediate results.

Keyup Validation

A nice addition to your forms is validating on keyup rather than only on submit for text fields. This means the field a user is working on is checked as they type, giving them immediate feedback. A simple way to do this is turn a field green when it validates, or red until it does.

Don’t make phone numbers a hassle for customers.

Validating Phone Numbers

Online forms often require a certain format, often shown in the label or error message as something similar to XXX-XXX-XXXX. This can be aggravating to the user, especially if they are trying to enter a normally valid format such as (XXX) XXX-XXXX, which would produce an error. Luckily, there’s a great way to avoid this problem. The first step is to not ask for a format at all! Once a customer has typed in a value, use a jQuery replace function to delete all symbols, letters and spaces so the field is only left with numbers. After you’ve done that, simply check if there is at least 10 characters left in the field.

Validating Email Addresses

Email addresses can be tricky to validate because they’re more complicated than a simple text field. The way to check if a customer has entered an email address is by using the jQuery filter function to see if they have entered an @ symbol sometime after the first character, a period sometime after the characters after the @ symbol, and at least two characters after the period. Phew! A very handy premade filter for this formula is /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.

 

Could you please ship it to 18500 111st Select a Country?

Validating Dropdowns

Make sure a customer cannot choose an identifier as a valid option (for example, don’t let them choose “Choose an Option” from the dropdown). This can be done by checking the dropdown value against any identifier values.

Less guessing equals more successfully filled out forms.

Reduce Guessing and Increase Conversions

Although server-side validation can be important for security, proper client-side validation is more responsive and more useful to the customer. By using all the tips above you will wind up with a form that is both clear and easy to fill out and submit. The key to a good form is to keep things simple as well as obvious – from the general layout to the final validation.