Web Design – Say Yeah!

FITC Web Unleashed, October 24 -26, 2022

Maryam Atoyebi — Tue, 18 Oct 2022 19:10:32 +0000

Web Unleashed is back for its annual edition on October 24 – 26, 2022.

Web Unleashed is a three-day conference led by some of the most knowledgeable minds in front-end web development. With sessions from expert speakers, the conference will empower front-end developers with the latest tools, techniques, and technologies in the industry. Web Unleashed will also feature discussions on end-to-end testing, responsive design, and improving web performance.

Talks We’re Excited About

Now and Next in Responsive Design with Rachel Andrew
What Does It Mean To be Innovative and Creative? with David Hogue, Chris Coyier, Tatiana Mac, & Stacy Mulcahy
Do You Really Need That Design System? with Jason Pamental, Taylor Cashdan, and Kathleen McMahon
Front-End Framework Trends with Tracy Lee and Miško Hevery

Full program schedule

FITC Diversity Initiative

In partnership with the RBC Diversity Program, FITC is offering 100 complimentary tickets for people who are part of underrepresented groups in tech.

While the deadline to apply for this upcoming event has passed, we encourage people from underrepresented communities to follow FITC’s diversity initiatives for upcoming scholarships and other opportunities.

Attend by yourself or with your whole team

Tickets start from $60 for students and $180 for individual professionals, with discounted group tickets available.

Grab your tickets

Ready to keep your audience engaged with a delightful web experience?

We provide inclusive website design solutions that welcome your audiences to engage with your content, products, and services. Bring the best of front-end development to your projects with our web standards based, usable, accessible, and inclusive work.

Get in touch

The post FITC Web Unleashed, October 24 -26, 2022 appeared first on Say Yeah!.

How to build a more accessible website for your business: B2BeeMatch

Kate Matesic — Fri, 19 Nov 2021 17:40:07 +0000

Our article “How to build a more accessible website for your business” by Lee Dale is published on B2BeeMatch’s blog.

Over 90% of websites are fundamentally broken, actively limiting access to content and reducing engagement as a result of not following the standards and structure that make the web more usable and accessible for all.

In a 2021 study, The Baymard Institute uncovered that 94% of the top grossing e-commerce websites were not accessible.

“Basic accessibility issues severely disrupt those users who need accessibility considerations,” says the study, “and will prevent some from being able to effectively use the site to purchase products.”

WebAIM’s 2021 study of the 1,000,000 most popular websites uncovered that 97.4% of home pages had detected WCAG 2 failures.

The 6 most common web accessibility issues

These are the 6 most common (and easily fixable) web accessibility issues, as reported by WebAIM.

86.4% of homepages have low contrast text

This means text is difficult or impossible to read because it blends into the background colour

60.6% of homepages have missing alternative text for images

This means that images are not described so that people with vision impairments can understand the value and purpose of the image

51.3% of homepages have missing form input labels

This means that form fields do not have text that describes what content is to be entered in the field

54.4% of homepages have empty links

This means that links do not have descriptions or labels that describe and give context to where the link is going

28.9% of homepages do not set a document language

This means that an assistive service such as a screen reader may read the website in the wrong language

26.9% of homepages have empty buttons

This means that buttons do not have descriptions or labels that describe what the button will do

This lack of accessibility contributes significantly to the digital divide, but the issues that are making websites so broken impact much more than accessibility. That’s because the lack of accessibility is a symptom of underlying issues that impact usability, content engagement, performance and site management.

Going even further, many organizations don’t consider the mix of content, design and code that’s required to properly execute, maintain and effectively deliver a website that forms the hub of an exceptional omnichannel customer experience.

Let’s explore these gaps in more detail.

Here are three key questions everyone should be asking about their website:

1. How does your website best serve your marketing, sales, product, service and support teams?

Your website serves a series of cross-organizational purposes. Across sales, marketing, product, service and support, through to a cohesive customer experience, your website is a driver for activity and engagement across your organization.

Often, website objectives are driven by marketing, but talking to and identifying the needs of all the different organization stakeholders who rely on your website to engage with customers will uncover key use cases, content and transactional goals from across your organization.

These cross-organizational objectives will influence not only the design, but also the platform chosen, the features needed and the content strategy necessary for success.

2. How can your website effectively engage your target audience(s)?

Depending on the unique nature of your organization, there are potentially numerous external audiences that will rely on your website. These audiences can include any number of customer groups, partners, suppliers, job seekers, investors and more.

It’s essential to understand where these visitor groups are in their customer journey—what stage of a purchase or product cycle they’re in—to understand how your website will play a role in serving each customer group, while aligning to your cross-organization objectives.

This understanding of your audience will help shape the information architecture, content, calls to action and user flows across your website in order to grow audience engagement.

3. What is the right website platform for your organization?

Once you’ve established a content plan and defined transactional website flows that support your organizational and audience objectives, it’s time to consider the technology that will power your website.

With so many website and code platforms to choose from, the considerations of your staff and audience, as well as standards for performance, accessibility, content management, customization and ongoing management will form the basis for determining the best platform for your organization.

My team at Say Yeah has surveyed the top website builders and web development platforms in order to rank how well they support you in meeting website accessibility standards and requirements. Explore your options in-depth with the Website Builder Accessibility Review.

If you’re looking for more insight on the capability and performance of your current website, the Essential Website Audit answers two critical business questions:

Is your website broken?

How can you fix it?

This is your path to understanding how your current website platform supports your organization and what next steps you can take to better leverage your website as a critical marketing, sales, product, service and support tool.

You can achieve so much more with your next website refresh

It’s not always easy to know where to start when you’re reviewing the effectiveness of your website, planning to launch a new site, or looking to meet accessibility objectives. Remember to ask these three key questions in order to deliver a more effective, manageable and engaging website.

How does your website best serve your marketing, sales, product, service and support teams?
How can your website effectively engage your target audience(s)?
What is the right website platform for your organization?

This is the foundation for delivering a more inclusive website that helps your business better serve the full scope of your market, with your website as the hub of an exceptional omnichannel customer experience.

Looking for additional support on making a more usable, accessible, and inclusive website?

Get started with our Essential Website Audit to uncover issues with your current website, or get in touch to learn more about our inclusive website design services.

Get in touch

The post How to build a more accessible website for your business: B2BeeMatch appeared first on Say Yeah!.

Introducing our guide to making your Webflow site more accessible

Kate Matesic — Fri, 27 Nov 2020 00:45:30 +0000

In our review of commonly used platforms for publishing and managing websites, including WordPress, Webflow, Squarespace, Weebly, and Wix, we’ve found that Webflow offers the best balance of ease of development, accessibility, and control.

Although building a site with Webflow takes care of many content, design, and code accessibility considerations, making a more accessible Webflow website requires a few extra steps.

In our guide, we’ll walk you through the different areas you’ll need to consider when making your Webflow site to ensure accessibility for all. These factors include everything from form fields, to accessible navigation, to the structure of your site’s pages.

It’s important to consider accessibility when launching or updating your website. You could be inadvertently preventing members of your audience from using your site effectively.

And the best time to plan for accessibility in your work is right now, so let’s get started!

Explore the guide

Webflow accessibility can seem daunting, but our guide will help you with the processes and step-by-step requirements to deliver a more accessible site.

Whether you’re in the process of launching a new site or are looking to improve an existing one, the Webflow accessibility guide will help make your site, and your content, available to everyone.

Looking for additional support making your Webflow site more accessible?

We’ve done the hard work of understanding these requirements, how to execute, and bring these practices to your team for ongoing improvements and future projects. Whether you’re launching something new or looking to improve an existing site, we can help.

Get in touch

The post Introducing our guide to making your Webflow site more accessible appeared first on Say Yeah!.

Designing business blogs around consumer intent, a step-by-step guide

Lee Dale — Sun, 27 Jan 2019 17:40:58 +0000

Every customer who visits your website may be at a different stage of their purchase journey. Whether they are just beginning an information-gathering journey to understand a potential challenge or solution better or have gone through a series of steps along their purchase journey and are ready to buy today, intent plays a critical role in how each user will engage with your content and respond to your offering.

Intent is essential in establishing a connection to explain and persuade towards an exchange between your organization and a consumer, whether on your homepage, an advertising marketing page, or elsewhere on your site.

When we look at a blog and the articles you’re publishing, or other long-form pages or cornerstone content, intent plays into how visitors will react to your CTAs, and how you can best support that person in taking their next step towards making a purchase decision.

One of the challenges businesses faces when investing in publishing longer, information-focused articles or pages on their site is falling into the trap of thinking like a publisher.

A publisher’s job is to grow time on site by offering more engaging content and promoting the consumption of that content, typically encouraging readers to click on an ad or buy a subscription. As a business, your blog is a tool to drive transactions that support your products and services, not your content, and not 3rd-party advertisers.

Learn the best practices that shift a business blog from being content-focused to conversion-focused with this 8 step guide.

In this guide, we highlight ways you can adapt your blog posts and long-form articles to enable those transactions that draw you closer to customers across all stages of their purchase journey. We’ll achieve this by walking through a series of best practices that helped shift one of our customers from a content-focused blog to a service-focused blog, increasing their service engagement, mailing list growth, and deal flow.

Here’s a look at the overall wireframe of a standard article on our client’s blog

The structure of the blog post was designed to facilitate action by consumers.

As a service provider first (not a news publication), it was critical to guide behaviour toward service transactions. As you scroll the page, various paths to services are highlighted through different calls-to-action (CTAs), with no visible promotional marketing content or other article links until the reader has seen all the service options available.

Let’s examine a version of this wireframe that isolates and highlights the CTAs so you can see how they work together as a user scrolls down the page.

From the top of the page down to the links in the footer, we can map the page by intent.

Let’s review the methodology and detail behind each of the CTAs corresponding to the numbers from the wireframe so you can map your pages by consumer intent.

The above-the-fold second column to the right of the article is there for visitors who are ready to buy now. The subtle but consistently placed primary CTA allows people who are there to read to focus on the content. Those prepared to shop can also get started, whether it’s their first visit to the site or they’ve been clicking through a series of articles.
For users focused on the content, an inline CTA contextualized to the content leads them into the purchase funnel (rather than related content or articles, which move people sideways across the purchase funnel instead of further toward a sale). Remember, you’re a business first; as a primary and secondary objective, help your visitor take the next step, not get lost in more content. Placing other contextualized service links throughout the content encourages people to take their next step towards a purchase as you build trust with the content. Suppose the user continues to be focused on the content. In that case, they can scroll down and read through while secondary CTAs designed to support people with different levels of purchase intent follow along the side:
Not ready to buy today? We can share a reminder when it’s time to renew so you can get the best rate.
Did you arrive through a search engine to read our great content? You don’t know much about us? Here are all the services we offer to assist with your needs.
As the user reaches the end of the article, there’s a prominent CTA widget to entice into the purchase funnel, paired with a renewal reminder link if they’re not ready to shop today. This structure has the added benefit of working great on smartphones, where the second column on the right may be hidden or unavailable. This combined end-of-article get quotes CTA and renewal reminder is another view of the content higher in the side column. It’s not too close to being repetitive and doesn’t take away from the content. Still, it’s there, so these critical CTAs don’t get lost on a smartphone while supporting everyone in taking the next step towards a business goal as they finish reading the article.
From there, we get to our third level of intent: someone hesitant to shop immediately or share their details for a renewal reminder but has connected with the content. Did you enjoy this article? Sign up for our newsletter.
Not ready to commit to providing any personal information? Here are some other articles you may enjoy. We’ll ensure to use a similar conversion-oriented wireframe structure on each of those as we build trust with you through our premium content.
Lastly, we have a rich footer highlighting services and key links that help illustrate the organization’s capabilities, give everyone a jumping-off point to other aspects of the site, and support SEO initiatives by sharing key content categories and cross-linking on every page. In this case, we also highlight contact information and encourage connecting with the organization by phone, email, or social channels. To the user, the company is a customer-first organization ready to help! Another step toward building trust as the consumer weighs their purchase options.

This progressive, methodical, and courteous approach to providing access to services and information supports users at different stages of their purchase journey.

The journey begins with their arrival on the website from a search engine. It extends to the delightful reading experience in your articles, fast and free quote delivery and seamless purchase process. Ensuring to cover all these levels of consumer intent with your wireframes is a sure way to build towards increased conversions and business success.

Our customer’s results

The improved clarity and accessibility of services, content, and actionable next steps improved deal flow across many articles that were well-ranking on search engines but saw limited service engagement.

A before and after comparison

For this customer, the ongoing investment in content began to drive several improved business outcomes. The mailing list grew, the organic search continued to be a key driver of site traffic, site visitors began engaging with various helpful services that were previously siloed away from the content-focused blog pages, and time-on-site shifted from reading to taking action towards business goals.

In part, these improvements helped bolster Kanetix.ca ahead of their 2018 acquisition by the Ontario Teachers’ Pension Plan.

The post Designing business blogs around consumer intent, a step-by-step guide appeared first on Say Yeah!.

7 steps to making your site more accessible beginning with your next content update

Lee Dale — Wed, 09 Dec 2015 23:39:01 +0000

7 steps to making your site more accessible beginning with your next content update.

With this book, you’ll learn how to:

Take essential steps towards meeting Accessibility for Ontarians with Disabilities Act (AODA), Web Content Accessibility Guidelines (WCAG), and Section 508 guidelines.
Save time with future accessibility initiatives by taking simple steps now.
Tell your story with text to improve website accessibility by users and search engines.
Write for your audience to ensure your messaging is understood.
Structure your content so it’s easy to navigate on multiple devices.
Describe images to improve your storytelling.
Make audio and video more accessible with captioning and transcripts.
Clearly identify links so users know where they’re going.
Write an accessibility statement and begin a dialog with your users.

Download the PDF

Subscribe to our newsletter

The post 7 steps to making your site more accessible beginning with your next content update appeared first on Say Yeah!.

You catch more bots with honey: reducing form spam without captchas.

Matt Rintoul — Wed, 16 Jul 2014 00:13:00 +0000

With the launch of our new website at sayyeah.com we added a simple contact form to allow interested people to get in touch with us. From the moment the site went live, the most interested people getting in touch were spambots.

100s of messages quickly flooded Lee’s mailbox. Instead of prospective clients, he was inundated by offers for discount Michael Kors handbags, apparently being sold from a small fishing charter company and a diabetes care website (among many others).

We needed a way to block these useless submissions without adding any additional user requirements to fill out the form, such as captchas or simple math problems.

So how did we handle this challenge?

The answer in our case was to use a Honeypot form field. What this entails is creating a trap field. A human using the website won’t see or fill out this field, but a bot will, and when it dumps content in to it, we’ll have effectively caught the bot.

The Front End

Our basic form consists of a few fields. Name, Email, Message. This is what we’re looking for from real people trying to connect with us.

Our trap field is called Phone. This field shouldn’t be named trap, or gotcha, or lolsillybots, because it’s easier to detect something that looks out of place. By blending the naming convention in with the form, it’s harder for the bot to detect it.

Here’s our initial form, with all fields visible. The blank field is the honeypot field.

Remove from the tab index

First lets take the element out of the tab flow. If we don’t do this, when a user presses tab to jump from the adjacent field they will jump to the top of the screen with no understanding of what’s going on.

This tag goes right in the HTML. tabindex=“-1”

Visually remove the honeypot element

Next we can target the element #phone in a CSS stylesheet and position it absolutely {position:absolute;}, way off screen. {top:-10000px;}

This will ensure that the form field isn’t visible to the average person visiting your site.

Some notes:

The field should not be disabled, otherwise, nothing can write in it, and that would defeat the purpose;
You should also avoid using display: none; CSS as some bots can catch that you’re hiding the field.

The Back End

Now that we have the honeypot field in place and hidden from human eyes, we need to set up a backend method to catch and validate its value. What this will do is look at our field and make sure it meets the criteria we set, in our case, it must be empty.

How this is achieved will be different for each programming language, but for our example, here’s Express running on Node with node-validator installed.

What this line is saying is “Look at the value and ensure it’s nothing (string value=”).

If it is, continue, if it’s not, throw an error, don’t email us, call the FBI, log the request, etc. Whatever you choose as the outcome for invalid posts.

That’s it

And so far it’s working for our small submission form. It was quick to setup, taking less than 5 minutes, and dropped our spam submissions down to zero. At least for the time being.

This isn’t fool proof, and if our form had more value for the spammers they’d quickly find away around it. But it’s the first line of defence and if the bot(s) that spam us find a work around or get more sophisticated, we’ll have to up the ante.

There are many other methods for stopping unwanted form submissions, you can check out some suggestions in this post on StackOverflow.

Product strategy as a foundational skill

If you’re looking to bring fundamental product strategy methodologies and execution to your team, we’re here to help.

Get in touch

The post You catch more bots with honey: reducing form spam without captchas. appeared first on Say Yeah!.

The next wave of consumer computing – high DPI screens

Lee Dale — Fri, 06 Jul 2012 17:52:00 +0000

I’ve been using a Retina MacBook Pro for one week and I’ve already changed my font, redesigned my narrow layout’s header, and conditionally replaced an image with text. I’ve noticed that fonts, especially, respond extremely differently on the Retina screen: many of my old, non-Retina choices simply didn’t look good, and many fonts and metrics that were previously poor for screen use can be used nicely on Retina screens.

Marco Arment on getting a leg up on the next wave of consumer computing – high DPI screens. Available now on the new iPad and the Retina Macbook Pro. Available everywhere in 2014.

The post The next wave of consumer computing – high DPI screens appeared first on Say Yeah!.

A design gap.

Lee Dale — Thu, 07 Oct 2010 16:21:00 +0000

It’s time for some GapmericanApparel fun. In addition to the brand cheapening grade school logo they’ve inexplicably decided to use, choosing the Canadian store at gap.com actually loads the entire store inside the popup chooser.

While it sure is nice to see that classy old logo in the top left of the Canadian store, it’s some poor execution on the Web side that allows the whole site to load in a 250 pixel box.

Then again, this kind of poor attention to detail is exactly what I’d expect from a company sporting a logo like their new one. I thought Old Navy was their bargain property, but I guess they’re looking to bring Gap to new lows. Congrats, you’ve succeeded!

The post A design gap. appeared first on Say Yeah!.