Best Practices for Building an ADA-Compliant, Mobile-First Website with WordPress

Both WordPress and Wix are popular tools for creating websites, and each has its unique benefits. However, for a variety of reasons including total owner control over design elements and stronger SEO functionality, many businesses and professionals might find WordPress more suitable.

First, let’s look at WordPress side-by-side with Wix.

In the area of Mobile-First Web Design

  1. WordPress: Mobile-first design is inherently supported in WordPress due to the vast variety of responsive themes available. Developers have more control over how the mobile version of a website appears and functions. Many plugins and tools are available to fine-tune the mobile experience, including menu design, image optimization, and load times. This total owner control is beneficial in creating a unique, consistent brand experience across devices.
  2. Wix: Wix also supports mobile-first design with a dedicated mobile editor to adjust how your site looks on mobile devices. However, compared to WordPress, it is more restrictive. Wix templates are automatically responsive, but there is less flexibility for customization on mobile views compared to the desktop version of the site.

In the area of Owner Control Over Design Elements

  1. WordPress: WordPress excels in this aspect. It allows for total owner control over every aspect of the website design. The themes and plugins available for WordPress are extensive, providing the freedom to customize every single detail. This includes layout, typography, color schemes, navigation, functionality, and more. Additionally, for those with coding knowledge, WordPress sites can be edited at the code level for even more customization.
  2. Wix: Wix offers a simpler, drag-and-drop interface for website design that is easy for beginners to use. It has a range of design elements that you can add to your site. However, its design flexibility is not as extensive as WordPress. It offers a set of pre-made templates and customization options, but you don’t have the same level of granular control.

In the area of Search Engine Optimization Functionality

  1. WordPress: WordPress offers excellent SEO tools and plugins (like Yoast SEO) that allow for detailed control over all aspects of SEO. This includes meta tags, URL structure, XML sitemaps, schema markup, etc. WordPress also boasts excellent site speed, which is a key SEO factor. It enables users to choose their own hosting service, which can significantly improve site speed.
  2. Wix: Wix offers built-in SEO tools that can be used to optimize your site for search engines. It’s user-friendly for those without SEO experience, but it doesn’t offer the same depth of control as WordPress. Moreover, Wix websites tend to load slower due to shared hosting, which could potentially affect your SEO negatively.

Both platforms have their pros and cons. Wix might be a good choice for those looking for a simpler, more user-friendly platform. However, for those looking for more control over design elements and stronger SEO capabilities, WordPress is the preferable choice. Its mobile-first design approach, complete design control, and superior SEO features make it a robust platform for creating fully customized, search engine friendly websites.

Before going too much further, let me say upfront that I am a WordPress website developer…note, I have not always built sites in WordPress, there was a time when I drifted away from WordPress because of a security flaw in the core design.  I built more than 300 websites using Adobe Muse, another couple hundred using another web builder app, and still a few hundred using Dreamweaver…but I eventually came back to WordPress where I have build nearly 2,000 small business websites.

While WordPress is a highly versatile and popular content management system, it does present some challenges to website owners, especially those who lack technical knowledge. Here are some potential challenges to consider:

  1. Complexity: WordPress has a steep learning curve, especially when compared to more user-friendly platforms like Wix or Squarespace. For users without much technical expertise, setting up and managing a WordPress website can be complex.  However, there are tens of thousands of YouTube videos that will teach you everything you need to learn.
  2. Maintenance: WordPress requires regular updates for core software, themes, and plugins. While these updates are essential for security and functionality, they can occasionally cause compatibility issues.
  3. Security: While WordPress itself is secure, the open-source nature of the platform makes it a target for hackers. Outdated plugins and themes can provide vulnerabilities that are exploited by malicious actors. Regular updates and security measures are crucial.
  4. Performance: The performance of a WordPress site can be influenced by numerous factors, such as the quality of your hosting provider, the optimization of your images, the configuration of your caching, and the number and quality of plugins you use.
  5. Quality of Plugins and Themes: While there are thousands of plugins and themes available, their quality can vary significantly. Poorly designed plugins or themes can slow down your website, create security issues, or cause other problems.  I severely limit the number of plug-ins I use!
  6. Support: While there is a large community around WordPress, there’s no official support team if you run into trouble. You have to rely on forums, blogs, and tutorials, or hire a professional for help.
  7. SEO: Although WordPress has excellent SEO tools, using them correctly requires knowledge and effort. Failure to properly use these tools can result in poor search engine rankings.

Despite these challenges, the benefits of using WordPress often outweigh the potential drawbacks. With the right knowledge and resources, these challenges can be effectively managed to create a powerful, flexible, and successful website.

Back to our mobile-first discussion.

Designing a mobile-first website requires careful planning and consideration of several key elements. The priority should be creating a seamless and intuitive user experience across various mobile devices. Below are some crucial elements to consider, including ADA compliance.

  1. Responsive Design: A mobile-first website should automatically adjust its layout and content based on the screen size and orientation. This ensures a consistent user experience across all devices.  Note, not all of your content needs to be visible on the mobile vs. desktop version of your website.  I will go into this in much more detail in a future podcast episode.
  2. Navigation: It’s essential to simplify navigation for mobile users. Hamburger menus, bottom navigation bars, and clear, concise menu options help users navigate your site effortlessly.
  3. Load Speed: Mobile users often have slower internet connections, so it’s vital to optimize your website to load quickly. This can be achieved through optimizing images, leveraging browser caching, minifying CSS and Javascript files, among other techniques.
  4. Tap Targets: Ensure that links, buttons, and other interactive elements are large enough to be easily tapped on a small screen. According to Google, a recommended target size is a minimum of 48 CSS pixels wide/high.
  5. Legible Text: The text should be easy to read without zooming in or scrolling horizontally. It’s recommended to use a base font size of 16 CSS pixels for body text.
  6. Accessible Media: Images and videos should be responsive to fit the screen, and all media should have alt tags or captions for accessibility purposes.  Note, the Alt Tags are critical!  Content access for the blind is the number one reason why sites are tagged non-ADA compliant.

Speaking of ADA compliance, the legal profession has expended their target court offerings.  It use to just be ambulance chasers…now thousands of attorneys are chasing non-ADA compliant websites.  

As for ADA compliance, this is indeed a critical aspect to consider when designing your mobile-first website. ADA (Americans with Disabilities Act) compliant websites ensure digital accessibility for all users, including those with disabilities.

  1. Font Size: ADA compliance requires font sizes to be legible and easy to read, as stated above. Using a base font size of 16 CSS pixels for body text generally meets this requirement, but consider user ability to increase font size if necessary.  There is also the font weight and kerning (spacing between letters) to be considered.  While those fancy fonts available through Google are cool, they are sometimes very difficult to read when one is visually impaired.  Note, I am not talking about folks who are blind and using a screen reader, but people with visual limitations.
  2. Color and Contrast: Colors should not be the only method of conveying important information, as this can exclude users who are color blind or have low vision. There should also be sufficient contrast between text and its background to ensure that it is easily readable. A contrast ratio of at least 4.5:1 for normal text and 3:1 for large text is recommended by the Web Content Accessibility Guidelines (WCAG).
  3. Spacing: Adequate spacing helps users with mobility issues who may struggle with precision tasks, such as tapping a small link or button. Also, sufficient spacing between lines of text improves readability for all users.
  4. Accessible Forms: If your site includes forms, ensure they are accessible. Label all form fields correctly, provide clear error messages, and make sure forms can be navigated and submitted using only a keyboard.
  5. Alt Text for Images: Provide descriptive alternative text for images so screen reader users can understand their context.  This field use to be a favor keyword stuffing field.  Google now punishes websites that try keyword stuffing.  The Alt field is a description of the image.
  6. Keyboard Navigation: Ensure the site can be fully navigated using a keyboard. This is important for users who can’t use a mouse or touchscreen.

As a small business website owner/operator, you will be SPAMed by people trying to sell you on the idea of avoiding law-suites over website ADA compliance.  ADA compliance is a serious factor, but don’t waste thousands of dollars on assessments and consultants.  Use common sense and the information above.  Once you start looking at your website through the eyes of someone visually impaired, then you will naturally design for ADA compliance.

Let me say one more thing about law suites.  People can, and do, sue over anything.  If someone is targeting you or your company for a cash draw, then the most ADA compliant website is not going to keep them at bay.  In court battles, you need only show effort and intent.  So long as your design addressed ADA design elements, and you can prove it, then you will prevail in court.  Here is a funny…ask two lawyers about my above statement and you will get five different answers and sixteen case citations.

There are several additional factors that are important to consider when building your mobile-first website:

  1. Touch-Friendly Elements: Since mobile users interact with the website through touch rather than mouse clicks, design your site to accommodate this. Interactive elements like buttons, forms, or links should be adequately sized and spaced to allow easy interaction.  Going back through the above…this is the second most important element to mobile-first and ADA compliant website design.  If your website is not touch friendly, Google is going to hate your website.
  2. Prioritize Important Content: Due to limited screen size, it’s important to display the most vital information prominently. Users should be able to find what they need without excessive scrolling or navigation.  There is always fluff on your webpage.  Get rid of the fluff on a mile version.  If the content does not solve a problem or provide evidence for your keyword target, then hide it on the mobile version.

This is important because mobile screen are SHORT.  Your visitors should not have to scroll 30 times to reach the content us button.  Unless your website is build as an encyclopedia, it is a lead capture system meant to connect you to new customers.  Your goal should be to get people off your website and in a relationship with YOU as quickly as possible.

  1. Avoid Flash: Flash is not supported on many mobile devices, including all Apple devices. Therefore, avoid using Flash for animations or other elements on your mobile website.

I contemplated not even including this…does anyone use Flash anymore?  I opted to include because Flash was the cool animated wiz bang of the day.  Today we use Java Script and HTML 5.  My suggestion is avoid these gimmicks.  If the static image and supporting text is not enough, then consider buying TV commercial time.  People searching for a company to mow their lawn is not going to be swayed by a ten minute animation on your website—especially if that animation is the reason why Google did not rank your website in their search!

  1. Minimal Use of Pop-Ups: Pop-ups can be very disruptive on a mobile device due to the smaller screen size. If you must use pop-ups, ensure they can be easily closed and don’t hinder the user experience.
  2. Optimized Images: Ensure that images are optimized for mobile to improve load times and save data. This might include using the correct file format, compression, and ensuring images are served at the correct size for the device’s screen.

I can not tell you the number of times I’ve been called by a client saying their website does not rank on Google anymore, only to find photos they took in the field on their iPhone posted straight over to their website.  I’ll do an entire podcast episode on graphic resolution on a website.  Great photos are important, but 300 DPI on an image that is 2600 pixels wide is too big for your website.  Keep in mind your website is only 1100 pixels wide and only displays images at 72 DPI.

  1. Testing on Multiple Devices: There is a wide range of mobile devices with varying screen sizes and operating systems. Test your mobile website on as many different devices and browsers as possible to ensure a consistent experience.
  2. Mobile-First SEO: Mobile-first indexing is now the standard for Google’s search engine. This means that Google predominantly uses the mobile version of the content for indexing and ranking. Therefore, ensuring your mobile site is fully optimized for SEO is crucial.
  3. Simple Design: Avoid complex designs that might look good on desktop but will clutter a mobile screen. Keep designs simple and clean for the best mobile user experience.
  4. Calls to Action (CTAs): Ensure your CTAs are clear, concise, and easily tappable. A good mobile CTA should be straightforward and tell users what to do next.
  5. Local SEO: If you have a local business, consider integrating local SEO strategies into your mobile site. This can include features like click-to-call buttons and maps.

In conclusion, building a mobile-first website is about more than just ensuring your site looks good on a smaller screen. It involves a comprehensive strategy that considers user experience, performance, content prioritization, SEO, and accessibility.

Wrapping up…I suggest you give serious consideration to using WordPress for your website.  Design first for mobile devices is mission critical and ADA compliance a must.  In the end, the best looking website that Google will not rank is worthless.


I have been in the music and entertainment business since 1977. I love podcasting and audio production as a business model and enjoy helping business grab new customers with engaging audio and video.

Helpful Links