1. Ignore Accessibility
Q: What is accessibility and why is it important?
A: Maybe you've broken your arm and can only type using one-hand, or are relying on voice commands. What if you are in a quiet environment and need captions on a video you want to watch? Suppose you are looking at your phone outside, in the bright sunshine.
Accessibility done right means your site is usable by everyone, wherever they are, and not only people with disabilities. To improve your site's accessibility, make sure you:
- Use sufficient colour contrast,
- Provide text alternatives for images,
- Ensure keyboard navigation works.
- Structure your content with proper heading hierarchy.
- Use fluid typography
- Make sure your forms have correct labels
- Webflow's accessibility panel to check for common issues.
2. Non-Responsive Design
Q: What are the benefits of responsive websites?
A: Over 60% of web traffic comes from mobile devices, so responsive design is non-negotiable. It ensures your website looks great on all devices and is accessible to people in all kinds of different circumstances. It's not just for mobile users; it benefits:
- Those who zoom content for better visibility
- Users who connect keyboards to smaller devices
To develop responsively in Webflow, start with the base (desktop) breakpoint and adjust layouts for smaller devices in this order:
- Tablet
- Mobile landscape
- Mobile portrait
Want to develop mobile first? Fine, but remember that in CSS, styles cascade (the C in "CSS") down. This means that, in Webflow, you will need to apply your styles again to all the larger breakpoints.
3. Overcomplicating Your Layouts
Q: How can I design a simple website?
A: I don't like using the word "clean" to describe layouts, but we do want to keep layouts user-friendly, with some breathing room, and without creating a huge cognitive load. This generally means a 'less is more' approach.
- Maintain consistent spacing with a definite naming convention.
- Use CSS grid or Flexbox, both native to Webflow
- Pay attention to content hierarchy
The value to your project will be an enhanced user experience and reduced load times. Stuff search engines love!
4. Busy Navigation Structure
Q: How to create website navigation?
A: Keep it clear and consistent.
Make your navigation intuitive by using straightforward, jargon-free labels that your target audience will understand immediately. Maintain the same menu structure across all pages of your website. This consistency creates a sense of familiarity, allowing visitors to navigate your site with confidence regardless of where they land.
Example: Instead of "Product Offerings," simply use "Products." Keep this label the same on every page.
Nielson Norman recommends to "include clear wayfinding (e.g., breadcrumbs, local subnavigation) that shows users where they currently are in the IA"
5. Inconsistent Styling
Q: What is consistent website styling?
A: Use similar design elements and layout to remain consistent.
- Create a style guide at the beginning of your project, defining colours, typography, and common elements
- Use combo classes for variations of base styles.
- Regularly audit your design for inconsistencies (!important).
As you tweak and fettle, inconsistencies can easily creep in. Consistent styling not only looks professional but also improves user experience and streamlines your workflow.
Now, I know what you're thinking. 'What have these points got to do with my website being found and visited?' Well, it turns out that, Google has made page experience a significant ranking factor, meaning that websites that provide a smooth, high-quality user experience are more likely to rank higher in search results. This is because Google wants to surface the most helpful and usable websites to its users. So if you want your website to be discovered and visited by more people, optimising your page experience should be a key priority.
These common mistakes might seem basic, but they're surprisingly easy to overlook when you're deep in development. The good news? Webflow gives us all the tools we need to create websites that are accessible, responsive, well-structured, easy to navigate, and consistently styled, and found by your ideal audience.
