Website Improvements to Accommodate People with Disabilities (ADA Compliance)


UPDATE MAY 27:  All templates now have an alternate text field for the header image.


 

We’re excited to announce new improvements to help you make your website fully accessible

to those with disabilities. These tools will allow you to fulfill the requirements for ADA (Americans with Disabilities Act) Compliance. For those customers outside of the US, there are similar rules in place in the EU and coming soon to Canada. Other countries are likely to follow. Generally, they all follow the WCAG (Web Content Accessibility Guidelines) put forward by the World Wide Web Consortium.

In some places, a person with a disability may be able to pursue legal action against you, so it’s in your best interest to make your website compliant as soon as possible. Below, we’ll go over the new tools we’ve built as well as some advice to help your site become compliant.

Alternative Text for Images

ADA compliance requires all images to have alternative text (AKA alt text) that adequately describes the image. This is read by screen readers and refreshable braille displays for people with visual disabilities. As an added bonus, alt text may also help with search engine optimization if you use keywords as part of your image description.

If you inserted an image using the text editor’s “add image” button, note that there’s always been an option to add alt text.

Add image from editor

However, there were some images that didn’t have the option which we fixed as follows:

“Click to Change” boxes on all page layouts:

Click go change image

For any product images on a Catalog layout page, we have auto-filled the alt text with your product name. You may wish to change these to better suit your images to be more descriptive.

Header Image in Template Design:

This one will be released in about a week. Further instruction will be given in a future post about this.

Header alt text

Labels for Buttons, Text Box Fields, Checkboxes, Radio Button Options and Drop Down Menus

These labels are not visible on your website, but have been added to our code for screen readers and refreshable braille displays to read. Here’s where this was added:

  • catalog and shopping cart checkout process pages
  • interactive pages like the blog, custom feedback form, autoresponder, newsletter, message board, polls, guest book, calendar, download and recommend site pages

New Captcha

We have switched our old captcha to the Google’s reCAPTCHA tool which is disability friendly. It now looks like this:

Captcha

Further Practical Advice

Here is a list of other ways you can make your website ADA compliant:

  • Add captions to any videos you upload. Another option is to have a transcript of your video available.
  • Make sure there is high contrast between your text color and background color at “Design” -> “Edit Body.”
  • Use headings, subheadings and white space to group related content.
  • Add a caption to any graphics that you post.
  • Enable the mobile version of your website at “Design” -> “Mobile Site” so your website layout will be adapted automatically for easier viewing on a mobile phone or tablet.
  • Provide controls for video, music or sound effects that play on your website. Note that YouTube automatically includes this.

As a final note, we recommend searching online for more information to familiarize yourself with WCAG so you can accommodate more visitors to your website.

Holiday Design Sweepstakes Winner

Thanks to all of our customers who entered the Holiday Design Sweepstakes during the month of December 2016.

The winner was Martha Caceres, who will receive a full custom template for her website.

Keep your eyes on your Dashboard page for future contest opportunities!

Get a Custom Logo Design from LogoMojo

logomojoWe are excited to announce that CityMax has partnered with LogoMojo.

LogoMojo is passionate about developing exceptional quality logos to help small businesses develop a unique and memorable brand.

Direct, personal communication and exceptional in-house designers set LogoMojo apart from other companies. They take the time to get to know you, and you’ll get to know them too. It’s that relationship that makes for extraordinary, perfectly you results!

LogoMojo creates a logo design that is uniquely you, and offers a Free Logo Design Consultation so you can speak with an actual designer about your logo needs before you even get started.

For a special offer from Citymax on logo design by LogoMojo, simply visit the “Logo Design” page under the Marketing Tab in your website or visit this link.

NEW: CityMax University Livestreams!

citymaxu-header

Calling all website administrators, business owners and graphic designers: have you tried our Enhanced Templates yet? Have you checked them out, but not sure how they work? Are you using an Enhanced Template that needs some more work before it’s just right?

Join us LIVE this June for Enhanced Templates 101, our first-ever CityMax University class. A member of our support team will give a live demonstration of the Enhanced Template system, and you’ll also have the opportunity to ask questions about Enhanced Templates and website design, as we’ll be doing a Q&A session at the end of the presentation.

We’ll be hosting four live classes in the month of June:

Tuesday, June 10th – 10:00am PST / 1:00pm EST

Thursday, June 12th – 3:00pm PST / 6:00pm EST

Tuesday, June 17th – 3:00pm PST / 6:00pm EST

Thursday, June 19th – 10:00am PST / 1:00pm EST

We’ll be covering the same content in each class, but feel free to join us as many times as you need! We’ll also be archiving each class for later viewing for those who can’t make it to the livestream.

The link to the stream will be posted in a system notice on your dashboard on the day of the event. Hope to see you there!

4 Common Design Mistakes

When building your website, there are a few simple things to keep in mind that can drastically improve the quality of your online presence. Today’s web viewers are fickle and move fast, and if your site makes one of these common design mistakes, you might lose a potential customer.

Background Blunders

Using patterns or textures is a fantastic way to make your website seem alive. A solid color background with a contrasting color font is the go-to as you can never go wrong with keeping it simple. But, nowadays, designers around the world are revolutionizing the use of textures in web design by taking the previously sterile world of web design and introducing textures that we’re familiar with in our day-to-day lives. Wood grain, linen, paper, leather, and metal are finding their way from our homes and our possessions onto the websites we visit. When used properly, they can inject a tremendous amount of life and familiarity into a design and can help your website stand out against the rest.

However, variation in textures and patterns is also dangerous because it’s easy to overdo. Bold, colorful backgrounds often distract from the content, and even worse, if used behind the body of your website, they can make your text difficult to read. That can turn into a lost visitor. In general, high-contrast backgrounds that use more than one distinct color are usually unfit for a website background.

Here are a few examples of background choices gone wrong. The backgrounds themselves are not fundamentally flawed – I chose images and patterns that were nice on their own – but if they don’t play nice with your text, or draw the eye away from your content, your site will drive visitors away.

example1

example2

Now for a few examples of a good use of texture. These examples use simple, subtle patterns to breathe some life into the design while keeping the text legible. They don’t use bold colors, and look good with a wide variety of text colors, which means you can switch things up in your headers or titles on your page to draw the eye of the visitor.

example3

example4

Bold backgrounds can be very effective and striking when used properly – that is, with your text placed on a contrasting, solid color background or simple texture.

example5

Not Enough White Space

Just like harsh background choices can cause a visitor to close your site quicker than you intended, hitting your customer with a wall of text, an erratic layout or a strange content structure will make a mess of your first and only opportunity to keep your visitors on your site.

Instead, make sure your content is organized in a way that makes it clear where the visitor should look. Only put emphasis on the most important points. On the Internet, a cluttered page will feel daunting to read so remember to use white space to break up content into easy to read chunks.

I like to use Apple.com as a perfect example of a beautiful, clean home page:

appleexample

Apple uses descriptive text, beautiful product photography (always a huge plus!) and an extremely simple layout.

Unreadable Fonts

Fonts come in two basic types: serif and sans-serif. The word ‘serif’ refers to the decorative lines and strokes attached to characters, and of course, ‘sans-serif’ refers to those characters without those decorative strokes. Here are some examples of serif vs sans-serif fonts:

fontexample

Serif fonts tend to look more distinct and are sometimes easier to read, which is why they’ve been used for years in print – books and newspapers historically use serif fonts almost exclusively. They tend to give off an air of quality, personality, warmth, and intellect. If you’re going for a professional, classic feel, a serif font like Times New Roman or Georgia is a great choice.

Sans-serif fonts are missing the traditional decorate strokes of serif fonts, but they are often better suited for computer screens. Compared to a serif font, sans-serifs look clean, crisp, cool, minimalist and modern. A simple sans-serif like Arial or Verdana is familiar and looks great.

There are a few font no-nos out there that are good to stay away from. Any fonts that may be difficult to read like scripts, comic fonts, handwritten fonts and bubble letters can distract from your website copy. It’s important to remember that the visitors to your site could be absolutely anyone, with any computer screen or mobile device, at any resolution. And let’s not forget those with less than perfect eyesight. If your fonts are tough to read, your text won’t get read – it’s that simple. Some common culprits of this include Comic Sans MS, Papyrus, and Bradley Hand ITC. If you absolutely must use them, keep them to page headers or graphics and leave your body text in a simpler and much easier to read serif or sans-serif font.

fontexample2

Autoplay Music or Video

I don’t know about you, but I know when I stumble across a website and it starts making noise at me, I frantically dig through my open windows, find the culprit, and close it immediately. I think many web users can probably say the same. Multi-tasking on the web is the new standard, and it’s common for users to have several websites open at once, all while checking email, instant messaging, listening to music, and watching a video. If your site auto-plays music and your visitor already has their own music playing, guess which one probably wins?

The same goes for YouTube and other embedded videos. It’s tempting to have your video roll immediately when your site is opened, but consider this: what if your unsuspecting visitor has their speakers cranked to 10 from the last video they watched? You might scare them out of their chair if they weren’t expecting it, especially if they’ve opened your site in a new window or tab they haven’t looked at yet. Not a great first impression.

Always let your user choose to play content on your site. Place it in an easily accessible way, draw attention to it if you must, but don’t auto-play it. It’s the website equivalent of a pushy salesman pouncing on you the moment you walk through the front door of a store.

Conclusion

There are a lot of ways to make your website stand out, but the best way to build your website is to think like your visitors. No doubt you are a visitor to many websites yourself, so put yourself in those same shoes when you are building your site. What kind of things do you like and dislike when visiting websites and shopping online? What kinds of things draw you in and make you want to read more? What kinds of things send you running from your browser as soon as you see them? Building a website is all about your visitors and providing them the best possible experience – and if you can make a sale in the process, even better. A good website is like a good retail store: clean, organized, inviting, and easy to navigate. Following some of our tips can get you well on the way to success on the web!

How to Create Perfect Product Photos

Woman taking photograph.You already know that first impressions are everything, which is why your product photos and images can make or break your online store. If your website images look like they were taken in your basement, people are probably going to think twice before buying from you.

You don’t have to be a professional photographer to get great shots – you just need a digital camera and a little practice. Here are some tips to get you started:

Lighting

  • If you can, use natural light – either take your item outside or take your shots near a window.
  • Play with the white balance setting on your camera.
  • Read More

How to Maximize your Website Footer

site_footer Sometimes the first place people look for information on your website is the last place you think about. In particular, I’m talking about your page footer.

The page footer is that part at the very bottom of your web page: but it shouldn’t be the last thing you think about as far as site design goes.

You don’t want to clutter your main site navigation with too many pages, so consider the footer a good place for some of that additional information. With the CityMax.com website builder, you can quickly and easily add the same footer to all your site pages, but we’ll get to that in a minute.
Read More

Advanced Design Tip #2: Technical Tips for Call to Action Buttons

Last week, we introduced Call to Action buttons (CTAs) as a great tool to help increase conversions on your small business website. This week we will give you some techniques to maximize effectiveness and boost sales! Read on for some great tips from our Brand Manager and Creative Director, Joe Deobald.

Group the Elements

Grouping elements together is a great way to help emphasize the importance of the CTA button. In the example below, the text above the button helps earn the visitor’s trust – giving a sense of “it’s safe to click.” The whitespace to the right helps to separate blocks of elements from each other, allowing for a clear indication that they are different.

donortools_whitespace_grouped

Read More

Advanced Design Tip #1: Intro to Call to Action Buttons

Due to popular demand, today we kick off a new series of posts: Advanced Design Tips with Joe Deobald, Brand Manager and Creative Director at CityMax.com.

Call to action buttons: Let your visitors know what’s important

Congratulations! So you’ve finally got your site up and running. You’ve added products and great SEO content, and you’re ready to launch your site. You even have a great offer that you want your site visitors to buy. With Call to Action Buttons (CTAs), you can literally guide your visitors that awesome deal on a hand bag, or to join your special newsletter.

First off: let’s talk about what a CTA actually is. Simply put, it’s a button that tells the user to perform an action like “Buy this now!” or “Learn More…”
Before just throwing any old button up on your site, you need to plan it out. You want it to grab their attention – not just with a bright orange or green, but the text needs to be short, descriptive, and entice them to click. You want to tell them what to expect once they click the button: you need to build trust. Think about the questions and expectations your visitors will ask before making the decision to click. If it’s a free trial, then put that in the CTA.

onehub_tell_users_expect1

The old wives’ tale that size matters isn’t a stretch in this context. For website design, the larger the element is, the more important it is. This is a main focus on your website. You need to figure out exactly how important the action is, and design your buttons accordingly.
Read More

Your Content Doesn’t Matter (If Your Customers Can’t Read It!)

Design principles that work great on paper should work just as well on your website right?

Unfortunately, nope. Over the years, researchers have studied how people view web pages to find what they’re looking for – and what works on a printed poster doesn’t work nearly as well on a small business web page!

If people can’t find what they’re looking for on your site, you could lose sales. Below you’ll find our top “No-Nos” for laying out your site.

1. Don’t align your text down the middle

Researchers have found that pages with a lot of text on them tend to be read in an F-shape pattern, as indicated by the heatmap below. The more colorful areas indicate where the visitors eyes looked at the most.

fshape

With that in mind, you’ll want to place your most important content where their eyes will be searching: in the headline and along the left.
Read More