New website: How we designed a page that works equally well on desktop and mobile

Our process for designing a new website

1. We started with the question: What should the site achieve?

Before we sketched out the first screens, we defined what the website should achieve. For us, it was clear - it must clearly explain the entire product, showcase loyalty card options, and appear modern and simple.

All of this equally well on mobile and desktop.

2. We created a clear content structure

We defined the main sections of the website and thought about the order in which they should be displayed so that visitors can understand the product as well as possible. We knew that what works on desktop might not be equally effective on mobile, so from the beginning, we planned the information to be concise, clear, and easy to read on any device.

3. We designed mobile and desktop in parallel

We did not follow the traditional path of first designing for desktop and then reducing. We designed each section in parallel to ensure that visitors were not deprived of any information or experience.

4. Optimization of speed and performance

Before launching, we tested the website on various devices and showed it to people from different age groups. We were interested in whether they could navigate the site as easily regardless of age or device. Thanks to this, we could adjust small details that improved the overall experience for everyone.

Why a website must be consistent across devices

Most readers today primarily visit websites through mobile devices. Nevertheless, many websites are still designed as desktop projects that are only later adapted to smaller screens. This often leads to the mobile version appearing truncated with information, incomplete, or simply not functioning naturally.

Users appreciate browsing the web on mobile, and if the content appeals to them, they will return to it later on a computer. If the web experience is different on each device, it can easily lose orientation or trust. Consistency is therefore key, not just visually, but also functionally and content-wise.

When designing a website that works equally well everywhere, it's good to keep a few principles in mind:

• Clear and consistent navigation - the user should be able to navigate just as intuitively regardless of whether they are on mobile or desktop.

• Visual unity - colors, typography, and overall style should be coordinated across all devices.

• Maintaining content structure - the order of sections and main information should always be in the same place or in the same order.

• Customized interactions per device - swipe and horizontal scroll on mobile, wider layouts and hover effects on desktop.

• Performance optimization for each device - loading speed is even more important on mobile, so it's essential to think about the lightness and efficiency of the website.

If these principles are followed, users will remember the site as clear, reliable, and comfortable, no matter where they open it. In an era when mobile is the primary device for most people, this is a foundation without which a good website cannot exist.

What we focused on to make our website truly mobile-friendly

Interaction with the website is important, clickable elements must be large enough and spaced out to avoid unintended clicks. Navigation should be simple, clear, and not require too many steps to obtain the needed information.

When designing our new website, we focused on several key principles that ensure an exceptional mobile experience. One of the main elements of our design is the so-called bento grids. On computers, they are displayed in a standard grid layout that is clear and aesthetically pleasing.

On mobile devices, we designed the bento grids to be scrollable sideways, maximizing space utilization and enhancing the user experience. This solution allows users to easily navigate content without losing clarity while maintaining a modern and organized appearance.

In addition to bento grids, we emphasized the structure and readability of content during optimization for mobile. Each section is visually separated, and we added sufficient spacing between individual blocks to increase clarity. We set the headings to clearly define the start of a new topic, which facilitates quick orientation when scrolling. Texts are adjusted in size and line spacing on mobile to ensure comfortable readability even on smaller screens. We also enlarged clickable elements and adjusted their dimensions to be easily manageable with one hand. These adjustments together ensure that the website offers a consistent and intuitive experience regardless of the device.

Conclusion: A website that works equally well everywhere

Designing a website that works equally well on desktop and mobile requires more than just technical responsiveness. It involves understanding user behavior, thoughtful structure, and details that determine whether someone can truly orient themselves on the site.

You can view the result directly on our new website: www.vexioncards.one - whether on a computer, mobile, or tablet.

If you have feedback, ideas for improvement, or if you would like to learn more about our product, feel free to write to us at info@vexioncards.one.