How to Design an LGBTQ-Inclusive Website

How to Design an LGBTQ-Inclusive Website thumbnail

At DreamHost, we care a lot about accessibility and inclusive web design. The idea is simple: Make your website as easy to use (and as welcoming as possible) for each and every visitor.

Of course, you’re going to think about the abilities of your users and the demographics of your target market. But there is a huge population that many small business owners forget to consider when designing a website: individuals who identify as LGBTQ (an initialism for lesbian, gay, bisexual, transgender, queer, and questioning).

“Wait,” you say. “People are people, and love is love.” And you’re not wrong!

However, there are so many things you can do to make a website that is more inclusive and welcoming for all your visitors, regardless of orientation or identity. We’ll walk you through some of the key reasons you should consider the needs of your LGBTQ customers when designing a website (Spoiler: It’s good for business!) and then we’ll give you 12 key pointers to get started.

Why Having an LGBTQ-Inclusive Website Matters

“Making your site more inclusive for LGBTQ people can improve the user experience for everyone,” explains Jaymie Strecker, a non-binary Drupal developer at Kosada in Athens, Ohio. “Your site’s audience almost certainly includes people who are LGBTQ themselves or have LGBTQ friends and family. To provide the best user experience, you have to understand how that facet of their lives intersects with your site. Why would you want to alienate a significant percentage of your users?”

Strecker points out that some people hesitate when they hear the word “inclusive” because they equate it with “politically correct” and are afraid it will take away their creative freedom in crafting content for the site.

“They think it’s about following a bunch of rules about what you’re not allowed to say,” Streker says. “In reality, being inclusive is about understanding your audience and making your site resonate with them. It’s about breaking away from marketing clichés and reaching out to your users in a more authentic way. A more LGBTQ-inclusive site will come across as more vibrant, fresh, up-to-date, and friendly.”

Another factor in having an LGBTQ-friendly site, the one we teased above, is that it’s simply good for business. “We live in a capitalistic society, and online shopping is a must nowadays,” says Laura Egocheaga, Lead Digital Marketing Strategist at DivibeTech in Tampa, Florida. “Money does not discriminate, and analysts at LGBT Capital estimated the LGBTQ buying power at $3.7 trillion globally.”

According to Statista, 9.1% of U.S. millennials identified as LGBT in 2020. In its 2017 Accelerating Acceptance report, media watchdog GLAAD put that figure much higher: 20%. On top of that, Egocheaga notes, younger people — especially Gen Z — are more embracing of queer culture overall.

“No matter if you’re a startup or big brand, your objective is to capture the attention of a younger generation to increase the lifetime value of your consumer,” Egocheaga says. “An LGBTQ-inclusive website matters because you don’t want to be turning away that buying power, let alone be considered a horrible brand in Generation Z’s eyes.”

For Queen of Surfing, a Hawaii-based expert on online publicity and marketing, the proof is in the numbers. “If you go online and research the top 100 followed entities on Twitter, 8% of them are gay or lesbian or transgender,” she says. “Even more awesomely shocking: 30% of the top 10 most-followed people on Twitter are gay or lesbian or transgender. To make the error of excluding us from any version of online presence and not considering us as a demographic when creating your website is akin to losing out on 8–34% of your possible profits.”

There are perks to having an LGBTQ-inclusive site within your company as well. It can help your employees feel safe and valued, regardless of how they identify. It will also help LGBTQ customers — and prospective LGBTQ employees — find you. For example, at DreamHost, we are champions of diversity — that’s why two of our core values are to “Empower People” and “Give Everyone a Voice.”

Register Your .GAY Domain Today

Find your perfect .GAY domain today and take a bold new step forward in representation online.

.GAY domains

12 Ways to Create an LGBTQ-Inclusive Website

So how can you tweak your site to be welcoming to all? Simply follow these 12 tips to create an LGBTQ-friendly website.

1. Use gender-neutral terms.

Being inclusive when it comes to pronouns is crucial, especially in drop-down forms. “Gender forms should contain more than just binary options,” says Andrew Becks, co-founder and COO of 301 Digital Media, based in Nashville. “More to the point, why collect gender at all? Sign-up form completion rates will likely be higher with one less question, so maybe just avoid asking altogether unless absolutely necessary.”

In addition to male and female, be sure to include ‘non-binary’ or ‘other’ as an option. “If ‘other’ is chosen, give them the option to write in what they want their gender to be,” Egocheaga says. “This will give you an in-depth look into that consumer’s mind so you can retarget them with specific marketing content.”

If it’s an option on your site, a text field is the best bet since that will provide options that cover all of your users, explains Streker, who prefers to use the gender-nonspecific pronoun ‘they.’ “This allows people to write in options that you may not have considered, such as the Native American term two-spirit or the Native Hawaiian / Tahitian Māhū,” they say. “It irks me, as a gender non-binary person, to be forced to choose between radio buttons ‘male’ or ‘female.’”

2. Include LGBTQ images.

“Avoid clichés like featuring only opposite-sex couples in photography,” Becks says. Use pictures and graphics that represent individuals and couples from the LGBT community.

“Facebook does a great job at this when they have two males or two females get married and share it as a milestone post, showing an icon of two males or an icon of two females dressed up,” Egocheaga says. “It’s the little things that make a huge difference.”

Though there aren’t many LGBTQ-inclusive options on popular stock photo sites that you can buy, there are sites that offer inclusive content that reflect the diversity of your audience, such as, the LGBT section at Twenty20, Blend Images, PhotoAbilitythe Getty Images Lean In Collection, and Canva’s Natural Woman Collection.

“Drawings can include LGBTQ people, too,” Strecker says. “For one of my company’s websites, to explain our product in a fun way, we commissioned a comic from artist Kelci Crawford that features a genderqueer character.”

3. Show targeted products.

“Where appropriate, have a section of the website dedicated to an organization’s LGBTQ-community outreach efforts or LGBTQ-targeted product offerings,” Becks says.

“And definitely include that page on the menu so it catches everyone’s attention right away,” Queen of Surfing says. “A ‘straight’ person coming across your site might now forward it to their LGBTQ friend, having noticed that mention on your menu.”

Want a real-world example?

On its LGBTQ community page, Kimpton Hotels and Restaurants spells out the organization’s commitment to diversity. In 2014, the hospitality giant became the first national hotel sponsor for The Trevor Project (the country’s largest organization that works toward crisis and suicide prevention for LGBTQ youth), donating hotel rooms, meeting spaces, and catering, in addition to hosting fundraisers for the organization across the country. Additionally, Kimpton often caters to LGBTQ guests through their blog, Life Is Suite, with posts like 5 Unique Trips LGBT Travelers Will Love and Our Favorite 10 Gay Bars from San Francisco to Philly.

4. Use SEO to Promote Your Site

When you have an LGBTQ-inclusive site, you want to ensure the community finds it — and there are tricks for making that happen. “Build external links and partnerships from LGBTQ-community websites and blogs to diversify and improve a site’s SEO backlink profile,” Becks advises.

Queen of Surfing emphasizes the value of a meta-tag to drive an audience. Essentially, a meta-tag is how people find your website. When you go online and input search terms in a search engine, those very words are meta-tags. To make your site pop up in first in searches, use these words repeatedly in your website.

“In a nutshell, to attract the lesbian, gay, and transgender community to your website, meta-tag it by repeatedly mentioning the words ‘lesbian,’ ‘gay,’ and ‘transgender’ along with your matching product or service organically and wherever appropriate within your website,” Queen of Surfing advises. The keyword opportunities are limitless, she says:

  • If your site promotes cruises, include content that specifically mentions ‘lesbian cruises.’
  • If you focus on charity events, create content targeted around the phrase ‘gay charity.’
  • If your site covers healthcare topics, include an article about ‘transgender healthcare.’

“You better believe when we go online, we don’t just search for a product or service,” Queen of Surfing adds. “We definitely input the words ‘transgender,’ ‘gay,’ or ‘lesbian’ with any product or service when we perform online searches.”

5. Educate yourself about LGBTQ issues and terminology.

“You can’t improve the user experience for your LGBTQ users until you understand where they’re coming from,” Strecker says. “This is an ongoing process. There are many ways to do it.” Here are a few examples:

  • Hire speakers to talk to your team about LGBTQ awareness.
  • Attend or sponsor events for LGBT people and allies in tech (for example, DreamHost sponsored an LGBT+Allies meetup during WordCamp US).
  • Follow blogs of LGBTQ advocacy organizations.
  • Get involved with local LGBTQ advocacy groups.
  • Support policies that promote diversity in the workplace.
  • Make LGBTQ resources available for employees.
  • If you have an LGBTQ person on your team, get their feedback. “They may have some valuable suggestions,” Strecker says. “But don’t put all the burden on them. Every member of your team should take responsibility for making the site more inclusive.”

Strecker points out that the LGBTQ community is an incredibly diverse group with many communities and different points of view, consisting of people of all races, ethnicities, and nationalities. “LGBTQ people are wealthy and poor, urban and rural, and across the political spectrum,” they say. “Different LGBTQ people talk about their identities in very different ways.”

Be sure to consult with the LGBTQ community for different aspects of your website. “Include LGBTQ representation in the website design, development, testing process, hiring, and vendor selection,” Becks adds.

6. Collect only the data you need.

“If your site is intended to be GDPR-compliant, you should already be doing this,” Strecker says. “Do you really need to ask your users what their gender is? If you don’t have a specific plan for how you’re going to use that data, don’t ask for it. If your users are participating in an online community, they may not need to know another user’s gender, but it can be helpful to know the pronouns to refer to that user (she/her, he/him, they/them, etc.). So, your user registration form can ask for the user’s preferred pronouns. To protect users’ privacy, this should be optional.”

Remember to think about why you are collecting this data in the first place. Consider your present and future needs, and what you plan to do with the details you amass. If there isn’t a valid purpose for it, reconsider your approach.

7. Tell users how you’re going to use their data.

If you do ask users for their gender, sexual orientation, or other personal information, Strecker advises telling them how you’ll use that information:

  • With whom will it be shared?
  • Will it be shown publicly?

“Because trans people may go by different names in different situations, when asking for a user’s name you should provide help text or other context to explain how that name will be used,” Strecker says.

For example, if you’re asking for a phone number, inquire what name they want to be addressed by if you’re going to call them. When you ask for an address, have a name field that goes with that address. If you’re collecting donations, what’s the name that should appear on the tax receipt? What’s your billing name if you’re asking for credit card information? If you’re hosting an event, ask what name should be on the badge.

8. Watch your language.

“When writing the content for your site be mindful of non-binary terms,” Egocheaga says. “Gender fluid people are not confused, and you must be mindful of that. All LGBTQ people want is to be respected and acknowledged for who they are.”

When asking for a user’s sexual orientation, there are so many possibilities — it’s not just lesbian, gay, or bisexual — so your best bet is to provide a text field, Strecker advises. When asking for a user’s title, in addition to the usual “Ms.”, “Mr.”, and so on, include the gender-neutral title “Mx.” and make the field optional.

Questions about relationship status should consider more than just married or single. “With more and more kids growing up in households with same-sex parents, it’s time to retire the perennial security question: ‘What is your mother’s maiden name?’” Strecker says. “These may seem like small things, but they can make a big difference in making LGBTQ users feel welcome on your site.”

9. Protect users from harassment on your site.

“More and more online communities are instituting community agreements that protect users from harassment and hate speech,” Strecker says. “A web search will turn up many templates and examples to help you get started.”

To make sure users understand your expectations, your community agreement should list some of the kinds of harassment that are banned, for example, “on the basis of race, ethnicity, disability.” This list should also include sexual orientation, gender identity, and gender expression.

“Have a plan for how to respond to homophobic and transphobic comments,” Strecker says. “This may include deleting the comment, speaking to the user, and/or suspending the user’s account. Empower users to protect themselves. Many sites let users flag inappropriate comments to bring them to the attention of a moderator (who should be knowledgeable about LGBTQ issues). If your site has private messaging, enable users to block other users.”

10. Use security best practices to protect users’ data.

“Leaked data is bad for any user, but the consequences can be especially dire for LGBTQ users,” Strecker says. “For LGBTQ individuals who are not out at work, being publicly outed could get them fired. LGBTQ youth who are not out at home are incredibly vulnerable. If their family finds out, they could be abused, subjected to conversion therapy, or kicked out of the house.”

In fact, a national survey by the University of Chicago found that lesbian, gay, bisexual, and transgender youth had a 120% increased risk of experiencing homelessness compared their peers who identified as heterosexual and cisgender.

11. Support a cause.

“If you’re a social enterprise make sure to showcase it on your site by showing exactly how you’re giving back to the LGBTQ community,” Egocheaga says.

Whatever you decide to support, show how you’re helping on your website.

“The LGBTQ community is known for having an open heart, and we tend to align ourselves with entities whose products or services are either sustainable in themselves, or entities who donate to worthwhile charitable causes and activism,” says Queen of Surfing. “Is your product or service eco-conscious in some way? I highly recommend overstating everywhere on your website wherever energetically appropriate each and every way your product or service is eco-friendly. This is guaranteed to attract the lesbian*gay*transgender*bisexual*queer pocketbook.”

12. Avoid making homophobic and transphobic remarks.

“I can’t tell you how many times I’ve seen someone do this, then dig themselves in deeper by saying, ‘It was only a joke,’” Strecker says. “If you mess up, own up to it, apologize, and be more mindful in the future.” This goes for all of your platforms. In addition to being careful about your website, keep the same policy in place for social media and any additional marketing materials.

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

LGBTQ Inclusion Matters

We all want to be treated with dignity and respect, regardless of who we are or where we come from. Your LGBTQ visitors deserve the same consideration you give your other users. And setting aside the very important issue of human rights for a moment, it just makes good business sense to make this diverse group feel at home when they visit your corner of the web.

Photo of Ian Hernandez
About the Author:

Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: