Here’s your official invite to the 2023 edition of FITC Toronto.

Whether you work in design, or digital development, finding inspiration and learning from industry leaders benefits your professional development journey.

FITC Toronto is your opportunity to gain professional insights and practical solutions to sharpen your skills. FITC is a two-day in-person and online event showcasing the best the world has to offer in design, digital development, media and innovation in creative technologies.

Talks we’re excited about

• Creating Experiences In The Age Of Futurisity with Stephen Martell
• Standing Out in a Saturated Medium with Erin Sarofsky
• Help for Humans with Jared Ficklin

Full event agenda

FITC Diversity Initiative

FITC is offering complimentary tickets for people from underrepresented groups in tech to attend the event, either in-person or online. The program is aimed at those who are unable to secure a ticket through their company or cannot afford a ticket themselves.

Apply for a free seat

Save $100 on FITC Toronto tickets!

Don’t have a ticket yet? No worries, we’ve got you covered. Save $100 off in-person tickets with code “fitcnews” and 25% off your online ticket with code “twittervip”.

Attend online or in person.

The post FITC Toronto, April 17-18, 2023 appeared first on Say Yeah!.

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!.

It’s key to make sure these accessibility details are taken care of when you’re working on a new site or with your next site update since, without them, you could be preventing some of your audience from using your site effectively (or using your site at all).

An accessible website opens up new market opportunities by ensuring all the information on your website is available to disabled users or people with other accommodation needs.

Accessible websites also help improve access for all by ensuring your content is as understandable and available as possible across all devices and potential use cases.

Let’s walk through the areas you’ll need to consider and implement for an accessible Webflow site.

Landmarks and page structure

Webflow makes structuring your pages for screen readers and keyboards fairly straight-forward with changes to a few different settings on your page elements.

A survey from WebAim found that almost 60% of screen reader users used landmarks at least occasionally when browsing websites.

One of the most important things you’ll want to implement is landmarks. The best way to do this is by looking at your page’s major elements (navigation, footer, the main body of your page) and making sure the appropriate landmark is set.

Webflow steps for setting landmarks

Click on any element. In the right sidebar, click on the element Settings to set its Tag (Webflow’s setting for landmarks). Your navigation landmark will typically already be taken care of by Webflow if you’re using a navbar component, but you’ll need to set the main container for your content as “Main” and your footer as “Footer” in these settings.

Adding a skip navigation link

Another crucial part of making a website accessible is ensuring that screen reader users or keyboard-only users can skip having to go through your navigation links every time they reach a new page of your site. Webflow doesn’t have a built-in way to do this yet, so a skip navigation will need to be built into your site using custom code.

Webflow steps for adding a skip navigation link

This tutorial will help you implement the functional part of the skip navigation (which you’ll need to add to each of your pages and templates) and this guide will provide the necessary code to hide the skip navigation until it is revealed by tabbing to it.

By combining these two tutorials, you’ll be able to add skip navigation to your site, making it more usable for keyboard-only and screen reader users.

Make sure to create a site map page

One accessibility standard that’s often overlooked is support for multiple ways to navigate through a site easily. Your menu and link structure will typically take care of one way of doing this, but adding a site map is key to making the rest of your site’s pages discoverable.

Something that often gets confused in this process is the difference between a sitemap for search engine indexing (e.g. an XML/auto-generated site map) and a site map page that is available to your site’s users. Webflow will auto-generate an SEO sitemap for you if the setting is enabled, but a site map for your users will need to be created by you using a standard Webflow page.

Webflow steps for creating a site map page

To make a site map page:

1. structure a page with an overall heading of “Site Map”;
2. add headers for each of the main categories of pages on your site;
3. include links to every page of your site on this page under the appropriate categories.

This page on our volunteer org site for Together is an example of a simple site map for accessibility purposes created with Webflow.

Bonus: site map pages are also a benefit for SEO (search engine optimization) as they highlight and link to all the most important pages of your site.

Adding this page to your website and linking it in the footer will ensure that anyone looking for a specific page can find it more easily, especially if your site does not have search functionality, and it will also provide an extra boost to your SEO.

Making your site’s menu accessible

Another part of making a Webflow site accessible is making sure your menu works and is usable for all of your users.

This can involve many considerations depending on dropdowns, hover states, and more, but at its most basic, you should ensure that you add a state change (e.g. an underline on hover and selection) rather than just a colour change, and make sure that all menu items have a focus state when a keyboard user tabs to them.

Webflow steps for more accessible menus

Typically, all Webflow stock navigation will have focus states, but you will need to add underlines yourself so that changes on hover are also more accessible.

Ensure your Webflow forms are accessible

Forms can often present a complex accessibility challenge, but Webflow settings are available to make accessible forms without any custom code.

Some tips to boost your form’s accessibility

Ensure error states have a symbol and text associated with them, along with any colour change you might use to indicate errors.

The Webflow default is just an error message with a colour change, but colour changes aren’t necessarily visible to everyone, which is why an error symbol is a great addition. As an example, we like to use a rounded triangle with an exclamation mark inside of it.

Make sure your form labels are properly associated with the fields (this will also ensure your form responses make sense!)

To do this, in the settings for each text field, ensure the name is the same as the field label above. This ensures no confusion about which field belongs to which label.

One additional step to ensure your form fields are fully ARIA compliant (necessary for accessibility in many cases) is to change the name of your field to be a custom HTML field, to create a “for” label. This change ensures that screen readers can better understand the fields used.

This tutorial from Jeff S can help you implement these changes for your form fields

Ensure your focus states for your form fields have enough contrast and are present for all fields.

The focus states on your form field are a way for users to tell which field they are currently filling out when using a keyboard to navigate. It’s best to use a combination of a thicker box around the field, a contrast change in the colour, and/or a shadow around the field to ensure the focus states are as clear as possible.

A form field without focus, before it is clicked or navigated to.

The form field with the focus state when navigated to or clicked on. This is an example of a focus state that uses a darker colour, and a thicker border to ensure the change in state is more perceivable.

Webflow accessibility tools and resources

As you’re putting your site together, be sure to take advantage of Webflow’s built-in accessibility capabilities and learning resources.

Baked into Webflow is the ability to add alternative text descriptions to each of your images. You can also make your site more accessible by making sure you use correct headings, e.g. an H2 should come before an H3.

Webflow has recently released an accessibility tool right in the designer that will catch a lot of these smaller issues for you automatically.

You can also learn more about accessibility basics from Webflow university.

Webflow is a great accessibility platform for your site

Webflow accessibility can seem daunting, but it’s totally doable by following our Webflow accessibility guide along with general content, design, and code accessibility best practices. In fact, Webflow is one of the top website platforms we’ve reviewed for accessibility. It’s up to you to take advantage of this great opportunity to make your site more accessible to your audience!

And, by doing this work as you’re putting your site together, you’ll make sure you don’t have to reconstruct your template later in order to make your site, and your content, more accessible to everyone.

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

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

Get in touch

The post How to make Webflow sites accessible—a step-by-step guide appeared first on Say Yeah!.

The FITC events lineup continues this fall, with Web Unleashed taking place on October 5-7, 2020.

This three-day event will feature talks across all areas of front-end development, from the latest changes to CSS, to more accessible front-end development practices, including new methodologies for building delightful web experiences.

This comprehensive schedule of talks has something for everyone, whether you’re a front-end expert, a designer, or a product owner.

Check out the full conference schedule

Talks we’re looking forward to:

• The World Wide Work with Ethan Marcotte
• Creating Accessible React Native apps with Scott Vinkle
• Improving the Web VisuA11Y with Obinna Ekwuno
• Systems of Systems with Tatiana Mac

FITC Diversity Scholarship

FITC, in partnership with RBC, is also running the Diversity scholarship program again this year, awarding up to 100 tickets. These tickets are set aside for anyone who are part of underrepresented groups in tech.

Apply now before September 27th

Grab your ticket or tickets for your whole team!

Don’t miss out on one of the best front-end development learning opportunities of the year. Save $50 off the price of your ticket or purchase tickets as part of a group using bulk ticket purchasing tickets for groups of 4 or more.

Get your tickets to FITC Web Unleashed with code SAYYEAH

Get tickets

The post FITC Web Unleashed: October 5-7, 2020 appeared first on Say Yeah!.

Welcoming over 200 C-level attendees and developers at the TELUS digital Conference Space, the event was a source for rich insights on programming, agile approaches, data best practices, and the benefits of working with open source technologies.

Top representatives of the javascript and digital transformation scenes shared a wealth of insights through the various talks, panels, and workshops that took place at NodeDay 2018. Here are some takeaways.

Digital transformation as the DNA in organizations

Every successful business in the world is using technology, whether selling a product or service, actively engaging customers, or supporting how your team works together. With every business looking to improve customer experience and service delivery models, it’s those who can tap into the most effective, transformational technology and processes that begin to set themselves apart.  But how do businesses keep up with emerging technologies and practices? How do they know which what will benefit them the most?

Paul Savage, COO at nearForm, says organizations will only know the impact of the right technology in their businesses if they take the time to understand it and always find new ways to apply it.

“The real secret is to build a culture of innovation. It’s not about, ‘I’m on a legacy system. I’m gonna transform, I’m gonna be on a new system and everything’s good.’ It’s building in the capability to change and innovate as you go. Digital transformation will lead to DNA inside organizations where they are constantly changing.”

Organizations need to prepare for, jump into, and understandably ride the waves of digital transformation to become adaptive to new opportunities afforded by emerging technologies.

Applying Node.js isn’t just a trend, it’s a game changer for experience delivery

Node.js is a platform that will continue to bring alignment and efficiency to teams through a shared language across the full development stack.

“Node.js and the web platform are really this deeply connected Venn diagram of technologies where we have Javascript, HTML, and the Web cloud platform as this common dialect of how we’re able to deliver these dynamic experiences for end users. Node is speaking the same language and it is enabling us to deliver those experiences faster,” said Dan Shaw, Strategic Advisor at nearForm.

Large enterprises are adopting Node.js because of community benefits

Principal Architect Joel Chen said that WalmartLabs immediately invested in Node.js as their standard platform for web development, not just for the internal team efficiencies it provided, but in an effort to tap into an open community and follow open standards.

“We wanted to be able to hire people who have existing skills that they could immediately use when they came to WalmartLabs. [Node.js] is collaborative and has a huge community and an open working environment.”

Other topics discussed at NodeDay included security and privacy in digital businesses, data as a driving force for customer delivery, innovation, and inclusivity benefits and practices.

NodeDay 2018 was a great opportunity to channel in on how modern technology, like Node.js, play a role in transforming organizations. We encourage you to stay connected with TechMasters to keep up to date with their future events.

From uncovering new market opportunities to finding new efficiencies through technology and processes, we’re here to help.

If you’re exploring ways to bring new efficiencies to your organization, let’s talk.

Get in touch

The post NodeDay 2018 Recap—combatting disruption through integrated development appeared first on Say Yeah!.

On May 2, join us at NodeDay, a one-day event catered to informing enterprise leaders about the benefits of using modern programming languages and approaches to help stave of disruption.

NodeDay is a conference by-and-for enterprise leaders. Hosting over 200 C-level attendees at the TELUS Digital Conference Space, this event is expected to highlight the benefits of Node.js, modern programming languages and agile approaches, and more.

From talks, to panels, workshops and roundtable discussions, NodeDay will empower executives with ways to better support and transform their organizations as technology continues to evolve.

Our CEO Lee Dale will be there to connect with speakers and attendees with a particular interest in digital transformation, experience design, and continuous improvement principles and tactics.

Feel free to connect with Lee on Twitter or at lee@sayyeah.com.

We’re excited to be capturing the event for NodeDay with a series of interviews. We look forward to digging deeper with the speakers about digital transformation best practises at their organizations, including:

• Dan Shaw, Strategic Advisor, nearForm
• Shawn Mandell, Chief Digital Officer, TELUS
• Nithya Ruff, Leadership, Speaker & Board Director Comcast
• Kyle Hodgson, Principal Architect, ThoughtWorks
• Briana Brownell, CEO, Pure Strategy Inc.

NodeDay invites you to join the digital transformation conversation with a practical look at Node.js and key insights on how this kind of modern technology plays a role in transformation.

Get tickets

Attend NodeDay to support Venture Kids

Proceeds allocated from NodeDay will be donated to Venture Kids, a not-for-profit that turns youth from Toronto’s underserved neighbourhoods into entrepreneurs.

We hope to see you this Wednesday at NodeDay!

The Say Yeah Team

The post Join us at NodeDay on Wednesday May 2 to explore digital transformation for legacy organizations appeared first on Say Yeah!.

As an avid Adobe Illustrator user for the past 15 years, I think it’s safe to say that I love the vector format. That’s why I’m excited SVG is gaining traction.

The good

The many benefits of SVG:

• Scale without quality loss
• Smaller file sizes
• Is simply an XML file; you can open an SVG in a text editor and edit the code.
• Can be styled with CSS; colours can be changed, elements hidden, allowing a single image to be used for multiple purposes.
• Animation

The bad

Nothing’s perfect, and browser support for SVG is no exception;

• Quirky behaviour in some modern browsers
• Old browsers lack support (IE prior to version 9, Android prior to version 4)
• The way you load an image affects whether or not it can be styled with external stylesheets
• It can be tricky to wrap your head around the way viewBox works

The resources

If you’re interested in the SVG format, below are some great resources to help you get started.

CSS-Tricks – Using SVG

A great place to start, with overviews of browser support, CSS integration, and the various methods of loading SVG on your site.

Can I Use – SVG Browser Support

Helpful table indicating browser support for SVG

StackOverflow – Optimal Settings for Illustrator Export

The title says it all, a short guide to exporting SVG from Illustrator.

Making Sense of SVG viewBox’s Madness

Helpful examples that explain how and why viewBox works the way it does.

Snap SVG

An Adobe backed SVG Javascript framework for loading and animating SVG in modern browsers. Be sure to check out their demos.

Raphael

SnapSVG’s older brother. Written by the same developer, Dmitry Baranovskiy, Raphael is a little heftier in the codebase than Snap, but includes support for older browsers.

Iconic

An extensive collection of standard interface icons in browser ready SVG format.

The post SVG: The most exciting format since the Animated GIF appeared first on Say Yeah!.

When I finally started the beta, I expected to ship within two weeks. That was over two months ago, and I’m glad, because my beta testers pushed me to make it much better. I owe them quite a bit of gratitude.

Marco’s full post.

The post Beta is more than just ironing out technical kinks, it’s about getting the best product to market. appeared first on Say Yeah!.

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!.