Great page layout makes your website accessible from the first moment


May 9, 2023

When working with a new client, we all know that new challenges come along. Building a website can sometimes seem like a repetitive task, but who among us really focuses on how to best help visitors achieve their desired goals? To create a great and functional website, there are countless steps involved that the client, who is not in the industry, may not even be aware of. From preparing content, selecting typography, and setting up graphic libraries and assets, to integrating analytical tools and filling in the content.

Creating a website is a science that requires expertise. The internet is filled with countless polished web pages that look luxurious, but are not entirely functional, or even worse, do not provide the end clients with the intended value.

When building a website, it's important to have a deep understanding of your target audience. Without this knowledge, you may struggle to apply the right layout sections.

Less or more, layout plays the main role in accessibility

Creating an accessible layout is like building with LEGO blocks. Just as you carefully plan and arrange the LEGO pieces to create a structure that is both functional and aesthetically pleasing, you must also carefully plan and arrange the layout of a website to make it accessible and easy to use.

Like using different-sized LEGO blocks to create a structure, you must use headings, subheadings, and other design elements to create a clear content hierarchy and guide users through the site. And just as you wouldn't give a young child a LEGO set meant for older children, you must also consider the needs and abilities of your website's users and design with accessibility in mind.

To be honest, when you're selling coffee online, you don't need flashy interactions that just stroke your ego. What you really need is a website that's easy to navigate and find what you're looking for. You want all the important content, like filters and categories, to be easily accessible so users can make quick decisions and complete their purchases. Sure, having a beautiful website is great, but it's more important to focus on what your users actually need and prioritize accessibility.

Make sure your website is designed in a way that's intuitive and user-friendly, and that everything users need is easily accessible. By focusing on accessibility and ease of use, you'll create a better overall user experience and increase the chances of users becoming customers.

Dropbox Homepage - Very tasty and accessible.

Dropbox is a great example of an extraordinary grids layout with a great user accessibility

Dropbox's website layout is amazing! They've put a lot of thought into the design and it really shows. The clear headings and subheadings make it easy for users to find what they need, and the high-contrast color scheme and large font sizes are great for accessibility. The site's navigation is also super intuitive and easy to use, which is a huge plus. It's a great example of how taking accessibility into account can lead to a website that's both beautiful and functional. I would just change the buttons from black to white as there might be a color contrast issue.

Only your conversions will say if you have accessible layouts on the site or not

We know that there are certain HTML hierarchy rules we should follow when building a website. However, at the end of the day, it's the users who determine whether our design is successful or not. A well-designed layout can help users easily locate the information they need, while a poorly designed one can create frustration and confusion. If a layout is cluttered or disorganized, it can make it challenging for users to navigate the site, resulting in a negative user experience. In contrast, a clean and organized layout can make it simple for users to find what they're looking for and interact with the site's features.

Here are strategic rules you should consider when creating accessible website layouts

Keep it simple and clear

Use language that is easy to understand, and avoid cluttered or overly complex designs. Utilize visual cues such as headings and buttons to help users navigate the site and find what they need.

Optimize for different devices

Make sure your layout is optimized for various devices and screen sizes, including mobile phones, tablets, and desktop computers. This will ensure that users can access your site from any device they choose.

Consider user needs

When designing your layout, take into account the needs of your users, including those with disabilities. Add accessibility features such as alt text for images and captions for videos to ensure that everyone can access and enjoy your site.

In my case always helps to sit down and put the notes together by answering these questions:

Who is the target audience for the website?

This is a crucial question to consider when building a new site. Once you understand your audience, you can tailor the layout and design to their specific needs and preferences. I am not going to dive deeper as there are a lot of articles about finding your website's target audience.

What color scheme and typography (type and size) should be used?

Considering the color scheme plays a major role in determining the direction of a design. It is important to select colors that cater to the user's needs and ensure that they have a great contrast aspect ratio for accessibility. Similarly, typography and font size must prioritize readability for end users. For instance, when designing a magazine for older people, it is crucial to use larger font sizes and adjust the spacing for clearer navigation.

What is the primary purpose of the website?

Knowing the purpose of the site is crucial in defining the content strategy. Once you determine whether the site will serve as a catalog, lead capture form, or something else, you can decide what content should be placed on the page and how to organize it.

How can the content be organized to make it easy to find?

A content-first strategy is a winning approach for designers. When you have thoroughly researched and understood the content, it's like a dream come true. Armed with this knowledge, you can then confidently play around with different design elements while employing the best layout practices to create a truly engaging and effective website.

What are the key actions users will take on the website, and how can they be made more intuitive?

It's important to consider the key actions that users will take and how they can be made more intuitive. By understanding the user's journey on the site, you can identify pain points and find ways to enhance the user experience. It's also helpful to take a step back and ask yourself how you can go beyond just meeting their needs and offering something extra.

As we come to an end, my advice is to prioritize designing an accessible layout in order to create a positive user experience and make your website accessible for all users. This means using clear headings, high contrast, and large font sizes, as well as optimizing for different devices. Additionally, consider the user's behavior and continuously test and iterate your layout.

And still don't forget to experiment tho!

Tags that may be worth your interest:

Have you faced challenges designing accessible website layouts? Let's chat on Twitter @BilekUI and share our experiences.

Petr Bilek - Visual Designer. Small Avatar for Social Media.

Join me on Twitter
and stay in touch.

Need Webflow Development?

I'm here as your dedicated Webflow Expert, ready to weave magic into your website. From Design to Fully running site.

Petr Bilek Webflow Professional.
Webflow logotype mark.
Official Webflow Expert

The prices starting from

Thank you! Your submission has been received! I will get back to you shortly. Meantime enjoy my website content.
Oops! Something went wrong while submitting the form.