3 Easy Inclusive Web Design Tips For An LGBTQ Friendly Site

First, what it means to be inclusive

It’s no secret that being one of a few female students studying computer science was daunting. Male peers discredited my knowledge and I felt like I had to fight daily for my right to be there.

During my junior year, two other students, who I thought were my friends, copied my programming code in an attempt to pass it off as their own. Fortunately, they were caught and penalized for copying my work.

Later they told me how they expected to get away with it since I was “just a girl.” (I see you, Gwen Stefani.) The pressure to excel increased with each project, quiz, test and grade because I thought I had to prove myself.

Many grade school teachers higher-ed professors have accepted female students need extra encouragement to get and stay interested in similar fields of study, but I don’t want to stop there. STEM should include everyone, regardless of their gender, to be truly inclusive.

A study from Coming Out in STEM found “heterosexual men were 17% more likely to stay in STEM than their LGBQ male counterparts.” It’s hard enough for women to feel like they belong with the good old boys’ STEM field, let alone other diversities.

Mary Hoelscher, Ph.D. says in GLSEN, “when students see themselves reflected in their curriculum and pursue STEM in college, they gain access to numerous opportunities.” It’s not enough to say you’re inclusive of the LGBTQ community.

I once was a business owner who proclaimed pride support by simply sharing a rainbow on social media. I thought my passive allyship was good enough. Then, in April 2019, I attended the Prep for Pride webinar hosted by my friend, Mason Aid. I learned how to become a more active ally to advocate for the LGBTQ community.

Image courtesy of Mason Aid

“Looking inside and at what you have set up in your business is one of the biggest things you can do to create inclusive spaces.”

Mason Aid

How could a cisgendered woman’s involvement make an impact? I wasn’t sure until they mentioned how ensuring our systems and processes are inclusive can be considered active allyship.

I’ve watched trends in content formation change over the 10 years I worked as a web developer. Data collection gets simplified with a lot of assumptions to get the data the business thinks they need.

Related Article: User Misbehavior

Now take action with these 3 easy inclusive web design tips

It’s time to change the standard in who we assume is our target market and how they’ll use the website. Here are 3 inclusive web design tips to create a powerful edge over other websites.

Tip #1: Change Gender-Specific Language

I get that many business owners have an idealized target market of people who we want to become our client. Gender gets defined as either male or female, or a combination of the 2.

  • Change “he” or “she” to “they.”
  • Group your audience together by using the terms “friends, folks, folx” or even “team.”
  • Remove pronouns altogether and write in first- or second-person instead.

Tip #2: Update Your Images

OK, OK, I agree. Stock images are not ideal for your website. But sometimes that’s all you have access to until you’re ready to hire a professional photographer.

Insert my sales pitch for the talented Emma Dorge here, who focuses on brands and individuals wanting to tell their story authentically.

Fortunately, free stock photography sites, like Unsplash and The Gender Spectrum Collection, feature a variety of inclusive images.

Tip #3: Give Users More Options in Online Forms

Let’s talk first names first. Your user might not know if you need their legal name or preferred name, and feel anxious which to provide. Include an optional field if they have a preferred name different from their legal name.

Do you have a form on your website which asks users what their gender is?

Instead of the typical binary “male/female” option, present users with a blank input field. Don’t use “other,” which is fair. I’m sure most of us wouldn’t want to be considered “other” in any form of life! To put it simply: don’t assume what someone wants to be labeled, give them the opportunity to tell you!

If you’re using a content management system (CMS) like WordPress or Squarespace, then this edit should be relatively simple through the administrative dashboard. But if you’re operating a custom build then you may need to check with your developer to see how the database has been set up to accept data.

“But changing all of my text, updating photos and expanding my forms will all take up time and space on my website!”

Yes! The LGBTQ community deserves more space in your business, but I also understand the impact of time. Let me know if you'd like some help with ideas or implementation, and we can work together to create a more inclusive website!


Website design and development by... us!🤪

P.S. Here's a link to our privacy policy that literally no one asked for.

crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram