Did You Know:
Businesses & non-profit organizations with 50 or more employees should have made their website and web content accessible by January 1st, 2021?
It’s not too late! Make your website AODA compliant.
Our REM team consists of many different roles, in this blog I’m going to highlight some of the responsibilities of our Customer Success Team. Our Customer Success Managers (CSM’s) at REM act as hybrid contacts for you from the start of your journey with us, through the deployment and are here to support you after your website goes live.
The Early Stages
At the beginning of your project, CSM’s will typically reach out to start the discussing the hosting portion of your contract with REM. This includes transferring any domains, setting up DNS and email hosting. During this time, we explain the hosting packages that we have to offer you, discuss the importance of SSL Certificates and most importantly introduce ourselves!
Testing and Site Review’s
Once your site is built and tested by developers, the CSM’s will do a second round of testing. At REM we take testing your website very seriously to ensure that we hand you the best functioning website that we can. Once your site has gone through the rigorous testing stages, we reach out to you to schedule a Site Review (this is my favourite stage). A site review is the first time you see your website in its functioning form on our staging server. It’s typically a 15-minute conversation between you and your CSM reviewing the site together and discussing the outcome of the design/development of your site based on your engagement letter and concepts.
WebWiz@rd is a fantastic tool, it is user friendly and easy to navigate. CSM’s are armed with the knowledge and tools to provide you with training that is simple for you to understand and empower you to continuously update your website all on your own. We have many different modules ranging from our media collections, blogs and newsletters, eCommerce platforms and many more customized solutions based on your requirements. Our CSM’s will show you the ropes and guide you through managing your website.
One of the most important aspects of our business model is to ensure that you always feel supported. Whether you’re struggling with changing something on your website, or something isn’t functioning the way you predicted, our CSM’s are here to support and help you. Whether you send us an email, or give us a call we’ll be sure to listen and help.
CSM’s at REM are here to build relationships with you and our goal is your success!
A great home page layout makes the web page more interesting to look at because the viewer’s eyes will want to dance around in the page. It’s definitely easy to get lost on a home page and we want your viewers to enjoy the experience.
People underestimate how important it is to give your layout white-space. By giving your users/viewers time to digest each section while clearly separating them at the same time, allows them to really take it all in; here are some tips to keep in mind:
- White-space emphasizes how impressive a photo is and gives it intrigue.
- Use the right amount of white-space:
- Too much: the user will have to scroll through or “get stuck at” empty space.
- Too little: the user might start feeling claustrophobic if things are squished together.
- Our website as an example, the Home Banner:
- On the left-side is a big photo that showcases one of our clients’ website on a laptop, smartphone and tablet. There’s a good amount of space between it and REM’s logo. Never over-crowd logos, they need space all around!
- Notice how the white space makes it really easy to read the headline, which is the 1st heading.
Make your layouts dynamic, symmetrical and appropriately proportional. This will show that you as a company are structured, organized and thoughtful. Your layout will determine the home page’s information hierarchy. Here are some ways to accomplish this:
- Vary your layout throughout; use columns to put multiple items in a row.
- Use a grid. In our website’s case (and in most of our clients’ website’s case), the grid is based on 12 columns. Notice how we use 3 columns in some areas such as the buttons below the banner, the featured portfolio and the blog teaser.
- Maximize the use of your browser’s/device’s screen size, while still having proper white-space. Using our website as the example, notice how the angled grey background, large photos and Google Map take up the full width of the browser.
We often talk about headings, especially when it comes to having AODA compliant websites. On the home page, it keeps your viewers engaged and when sized correctly the end result is a sequential experience that your viewers will subtly perceive. Some things to keep in mind:
- Heading 1: biggest, stands out and as I’ve mentioned, the very first thing at the top that clearly states what we provide: web design and development. Important and useful for SEO.
- Use the correct sequence for SEO and AODA purposes (For more information, read this blog post about “AODA – Colour Contrast and Headings”)
- Headings in a home page are very useful for separating sections.
For our website, the headings start off the following areas:
- “We Provide Web Design & Development” introduces the website and attracts, using big imagery.
- “We build exceptional websites…” some vital text for SEO and to give users more of an idea of who we are, who we serve and what we do.
- “Some of our Featured Work” with highlighted projects.
- “Blog” teasers of our blog posts.
As you can see in our three-part series there is a lot that goes into designing your home page – it’s the most important page and we truly want to make sure that we support you and guide you through the process. It is a lot to stay on top of, and our designers are here to help organize and guide you through the process.
We want you to succeed; we sincerely love it when you do! So, if you’re looking to change up your existing website or looking to design a new one, feel free to reach out to us! We’re here to help.
Now that we have gone over the foundational aspects of a home page, we can dabble a bit into Branding. Your lead Graphic Designer will help you establish the overall look and feel during the design process. It’s the most fun part in my opinion because this is where you truly get to express who you are through emotions that your viewers feel when they view your home page! When we talk about look and feel we are referring to the colours and fonts – one key thing to remember is consistency.
Colour Us Simple
Using our website as the example, our primary colours are orange and dark grey. There are shades of much lighter grey throughout to complement the imagery and the primary colours. Notice that orange is used sparingly as it’s a very strong, prominent colour which naturally draws the eye. Hence, it’s only used for important elements such as action buttons that we really want users to click on and to highlight certain headings. The colours are not only on-point with branding, but they’re also AODA compliant.
It Feels Like Home
“Feel” aka overall tone is something you do not want to miss when it comes to your home page. It’s important to think about what you are trying to convey. Is your company approachable, friendly, laid-back, corporate, luxurious, natural, etc.? As our website as the example, we convey that:
- We’re technologically savvy by showing current devices (laptop, smartphone, tablet, monitor). And our website is responsive and looks great on every browser/device.
- We’re fresh and creative using modern fonts, angled backgrounds and shapes. Our creativity is also shown in the work we’ve done for our clients.
- We’re reputable; our portfolio shows we’ve worked with well-known companies.
Although it sounds quite simple, determining the look and feel for your website and home page is a lot harder than it sounds. Our designers are here to help guide you through the process. As we build our relationship with you throughout the process, we’ll be sure to nail it down.
If you’re thinking it may be time for a refresh let us know; we would be happy to give you some ideas!
Now that you’re part of our REM Team and as you navigate the process, we figured we’d put together a little guide to help you and your designer create a great website together. Over the next few posts, we’ll walk you through things to keep in mind while collaborating with your designer – also useful when updating any content on your own.
It’s easy to forget when designing your home page to think about what the intent is of your home page. The key word that comes to my mind is engagement. We want to attract the user/viewer to dig deeper into your website. Your home page should ignite excitement and curiosity so that your audience feels encouraged to read and investigate further in regards to who and what your company represents and what services and/or products you offer.
Show Off a Little
Your home page is also the spot to impress your potential and current customers, you’ve done incredible work, you have fantastic products so provide some teasers that captivate customers (even existing ones). You’ll notice on the REM Web Solutions home page, we have a “Featured Work” section and this allows us to not only showcase our talent, but help our customers build a vision of what they can get!
Now that you have provided some teasers of work or products that you carry, you have already established what your customers or potential customers can expect from you. They should know exactly what you do or what you sell right away – even if they have not visited any other page. This is a great way to highlight your professionalism as a business that offers impeccable services or high-quality products as well as provide potential customers with insight on what they can expect while conducting business with you.
Your home page should always have key “call-to-actions”; think buttons and callout sections that get your users to go to internal pages and encourage them to do something like contact you (email, phone, visit your office/store, etc.) You want them to browse and learn more about your services or products and book time with you. Your home page is a great way to summarize what you do and help promote further engagement into your website.
If you’re still unsure about how to do this, talk to your lead designer or give us a call!
Join us on Thursday, November 19th at 9:30am for our free, AODA webinar!
Our AODA (Accessibility for Ontarians with Disabilities Act) certified Graphic Designers: Sean Sanderson and Christine Votruba have put together an engaging webinar that explains what it is, how it affects your business and its design factors with resources to help make your website complaint.
Hosted by The Cambridge Chamber of Commerce, the virtual event will be held through Zoom; please register in advance so that we can send you the link and details prior to the event.
To register visit The Chamber’s event page.
Stay tuned for future webinar dates! For more information visit aodawebsites.ca.
Thoughtfully used pictures on websites go a long way. Not only are they used for decorative purposes and to spruce up the look and feel of your website. When strategically chosen and placed, images and graphics become a source of understanding the information presented on your website.
When it comes to AODA and the WCAG 2.0 it is imperative that images, videos and any content that isn’t text have some form of alternative text (Alt-Text) allowing them to be accessible to those with visual impairments. When using a screen-reader Alt Text become important so that computer programs can recognize and correctly describe images on a web page. When our designers and developers create AODA websites a significant amount of work goes into ensuring your images are correctly placed and have suitable Alt Texts attached in the code to ensure compliance.
When choosing images for your websites, our designers are sure to follow W3C’s Image Classification rules to ensure Alt Texts are assigned according to the images placed on your website. Some of the classifications are as follows:
Informative: Used to represent concepts or information
Decorative: Used to enhance the aesthetic and do not convey information
Functional: Used to represent functionality on the page
Complex: Used to simplify the representation of complex data
Our Customer Success Team will ensure that moving forward when you’re updating your websites, you are prepared to make use of our tools to easily update/add Alt Text to any images that you place on your website moving forward. This way you’re ensuring that images are accessible to those with visual impairments or those with other various disabilities.
When designing your website, we enjoy being adventurous with our clients, especially when it comes to the colours you choose. Your website truly is your brand, an online reference to who you are and it’s extremely important that your design and colour scheme match who you are and what you stand for. When designing websites that need to be AODA compliant our designers and developers need to go the extra mile to ensure the colours you choose are both representative of you and fall within the compliance parameters of WCAG 2.0. This could be a tricky feat and here is why.
People with colour deficiencies and low vision may have difficulties viewing your website depending on the colours that you use. It is incredibly important that the contrast ratios comply with the requirements allowing people to receive information from your website visually. When choosing colours and fonts our designers and developers must following the following regulations:
Contrast– minimum ratio of 4.5:1
Bold & 14pt or 18pt + colour contrast ratio of 3:1
Add text labels to colour pickers
Use texture to complement colour information
Text on images should always use as high contrast as possible
Incidental/Decorative items such as logos are exempt
Colour Contrast Checkers: Web Aim Color Checker & CCA
Another very important aspect of AODA compliance is the ability to visually organize design elements in order of importance. This becomes mainly apparent when someone is using a device or screen reader to navigate content and information presented on a web page – typically this is done by tabbing on a specific type of keyboard.
In order for devices to navigate the content accordingly, headings must be strategically placed to allow a reader to comprehend the content, our designers and developers ensure the information is presented in an organized manner by making use of the correct Headings on a page:
Heading 1 – Only to be used once on a page
Heading 2 – Must be at least 1-point size smaller and follow an H1. Can have different styles
Heading 3 – Again must be smaller than H2. Is to be used as a subheading for H2 only
Heading 4 – must be smaller than H3. Is to be used as a subheading for H3 only and so on
When adding content to your website or designing the layout, it is extremely important to keep these regulations in mind. If you have any more question in regards to AODA compliance, or the information from this blog, please reach out to us!
Now that we have established the importance of being AODA compliant in a previous blog. We will touch on some of the pieces that make your website compliant. First, we need to understand the importance of compliance, in the world of digital marketing we need to remind ourselves the larger the audience we reach the better it is for our businesses. Currently 15% of Ontarians have a disability, that is 1 in 7 Canadians above the age of 15, 80% of these Canadians reported to use an assistive device. This is potentially a large untapped market for your business if your website is not AODA compliant.
Providing you with a laundry list of updates our designers and developers do when creating compliant sites would be far too granular. We will highlight main challenges and some best practices we follow to ensure your website is geared to all Canadians, regardless of their abilities. After rigorous training, our senior designers learned about the AODA’s four core principles and the twelve corresponding Website Content Accessibility Guidelines (WCAG). They are as follows:
Be Perceivable - All content on a website should be distinguishable
All non-text content should have alternatives
Video content should have alternatives
Create content that can be easily be displayed in multiple formats
The level of contrast between foreground and background should be distinguishable
Be Operable – All content should be useable
Website functionality should be keyboard accessible
Provide users flexible time to read and use content
Avoid animated flashes and blinking
Provide tools for wayfinding
Be Understandable – All content should be comprehensible
Provide readable and understandable content
Design functions in predictable ways
Provide tools to avoid and correct mistakes
Be Robust – All content can be interpreted by a wide variety of users
By following the above core principles and their guidelines, our designers and developers analyze existing websites and make recommendations to our clients, after the design is complete our developers build the updated site and conduct multi-step testing to ensure your website passes all AODA requirements. Once the testing is complete your customer success manager completes a final test and reviews the updates with you.
Aside from the workflow and the guidelines we must follow to keep our customers safe from penalties, we believe we are doing our part to build an inclusive community here in Ontario. A community that abides by the law, helps our customers build successful businesses and most importantly advocate for those who may find it difficult to do so for themselves.
As the summer winds down and the cooler air creeps upon us we tend to reflect on the year that we’ve had and prepare for the year ahead of us. With the pandemic (whose name we choose not to speak), companies have beefed up their online presence. Websites have been redesigned, new functionality has been implemented to suit the ever-changing world we live in now, businesses have really stepped up their game and we love that!
With all the new changes in the world that businesses were forced to adapt to, there may be one last thing on the list… one very important checkmark to give you a head start in the new year. The Accessibility for Ontarians with Disabilities Act, 2005 (AODA) became law on June 13, 2005 – its purpose is inclusivity. Our goal collectively is to make Ontario accessible to people with disabilities by 2025 and we mean it! If you have a business with 50+ employees and a website, as of January 2021 your company and executives can be fined up to $100,000 each day that your website is not AODA compliant.
With that being said, the team at REM Web Solutions has also beefed up our game, we have implemented our internal policies and procedures to ensure that we are compliant. We have also invested in our designers to receive top training on how to design and build AODA compliant websites to better serve our customers who fall into this category.
If you are a business with 50+ employees and your website is not AODA compliant – or you simply don’t know, please reach out to us as soon as possible. We are armed to educate, help and most importantly provide you with services you need to be law abiding business owners.