Tips
New Website: How We Designed a Page That Works Equally Well on Desktop and Mobile
A behind-the-scenes look at how we designed the new VEXiON cards website with mobile and desktop in parallel, using bento grids and performance optimization.
VEXiON Team·Jul 19, 2025

Our Process for Designing the New Website
- We Started with a Question: What Does the Site Need to Deliver?
Before we sketched the first screens, we defined what the website had to achieve. For us it was clear — it has to clearly explain the whole product, show what loyalty cards can do, and feel modern and simple.
All of that equally well on mobile and on desktop.
- We Built a Clear Content Skeleton
We laid out the main sections of the site and thought carefully about the order, so the visitor could understand the product as quickly as possible. We knew that what works on desktop might not be equally effective on mobile, so from day one we planned the information so it would be concise, clear, and easy to read on any device.
- We Designed Mobile and Desktop in Parallel
We didn't go down the classic path of designing for desktop first and shrinking later. We designed every section in parallel for both, so site visitors never lose any information or experience.
- Speed and Performance Optimization
Before launch we tested the site on different devices and showed it to people across age groups. We wanted to know whether they could navigate it just as easily regardless of their age or device. That process let us polish small details that improved the overall experience for everyone.
Why a Website Needs to Be Consistent Across Devices
Most readers today visit websites primarily on their phones. Despite that, many sites are still designed as desktop projects that only get adjusted for smaller screens afterwards. That often makes the mobile version feel stripped down, incomplete, or simply not natural to use.
People like to browse on mobile first, and if the content grabs them, they come back to it later on a computer. If the experience feels different on each device, they can lose their orientation — or their trust — quickly. Consistency is therefore key, not just visually but also functionally and in terms of content.
When designing a site that works equally well everywhere, it helps to keep a few principles in mind:
- Clear, unified navigation — the user should move around just as intuitively whether they're on mobile or desktop.
- Visual unity — colors, typography, and the overall style should be aligned across devices.
- Content structure preserved — the order of sections and key information should always live in the same place or order.
- Device-appropriate interactions — swipe and horizontal scroll on mobile, wider layouts and hover effects on desktop.
- Performance optimization per device — load speed is even more important on mobile, so the site has to be lightweight and efficient.
When these principles are respected, users will remember the site as clear, reliable, and comfortable no matter where they open it. At a time when mobile is the primary device for most people, this is the foundation without which no good website can exist.

What We Focused On to Make the Site Truly Mobile-Friendly
Interaction with the site matters most — clickable elements have to be large enough and spaced apart so accidental taps don't happen. Navigation should be simple and clear, and shouldn't require too many steps to get the information the user needs.
When designing our new website we focused on several principles that make the mobile experience exceptional. One of the core elements of our design is the bento grid. On desktop, it displays as a standard grid layout that's clear and aesthetically pleasing.
On mobile, we designed the bento grids to be horizontally scrollable, which maximizes the use of space and improves the user experience. This lets users browse content easily without losing clarity, while keeping the look modern and organized.
Beyond bento grids, we also emphasized content structure and readability when optimizing for mobile. Every section is visually separated, and we added enough spacing between blocks to improve clarity. Headings clearly mark where new topics begin, which makes quick orientation during scrolling much easier. Body text sizes and line heights are adapted on mobile so reading is comfortable even on smaller screens. We also enlarged clickable elements and adjusted their dimensions so they can be operated with a single thumb. Together these tweaks ensure the site delivers a consistent, intuitive experience regardless of device.
Conclusion: A Website That Works Equally Well Everywhere
Designing a website that works equally well on desktop and mobile takes more than just technical responsiveness. It's about understanding user behavior, thoughtful structure, and the small details that decide whether someone actually finds their way around.
You can see the result directly on our new site: www.vexioncards.one — on your computer, phone, or tablet.
If you have feedback, a suggestion, or want to learn more about our product, reach out at info@vexioncards.one.