📱 Case Study (Part 2): Designing Responsive Experiences for Mobile & Tablet

The mobile version became a middle ground between immersion and clarity.

The second part of the project focused on translating the desktop portfolio into a flexible, responsive system. The goal was to keep the interface immersive and playful while adjusting proportions, spacing, and touch behavior for each device. Desktop, tablet, and mobile follow the same logic, but each reacts differently to space so the experience feels intentional on every device.

Also part of the Game-Inspired Portfolio series:

🎮 Case Study (Part 1): Designing My Own Game-Inspired Portfolio

1. The Goal

The challenge was to make the site feel as immersive on smaller screens as it does on desktop. The theme and structure had to stay intact, but performance, readability, and flow needed to adapt to touch interaction.

My goal was to protect the atmosphere of the original design while improving comfort, by keeping the navigation light, text clear, and transitions smooth. Every change had to feel intentional, not a compressed version of the desktop layout.

2. The Constraints

• Smaller viewports → limited horizontal space.

• Touch input → larger targets and fewer hover-only cues.

• Dark theme → careful contrast and readable line height.

• Mobile performance → lighter assets and shorter transitions.

• Wix Studio breakpoints → fixed width ranges, iPad Pro can be identified as desktop.

Early mobile wireframes: layout focused on clarity, thumb flow, and simplified structure.

3. Mobile

▹ Mobile First (But not always) :

While most responsive systems start with mobile first, this portfolio followed a desktop-first logic. The reason was practical: the core experience (animation rhythm, hover layers, grid transitions) was designed for large-screen immersion.

Mobile and tablet came next as intentional adaptations, not compressed replicas. They work like previews of the full experience rather than simplified copies, refined to protect hierarchy, rhythm, and clarity on smaller screens.

Designing mobile “second” didn’t mean neglecting it. Each layout was adjusted for thumb comfort, readability, and loading efficiency, so even as the form changes, the intent stays the same. The goal isn’t a fixed order, it’s consistent intent across every screen.

Mobile flow designed as a vertical story with clear rhythm and consistent touch behavior.

▹ Typography Notes :

The main site uses 16px body text on desktop and 14px on mobile with 1.6 line height. That choice is intentional. The site behaves like a UI surface, not a reading surface, so compact type keeps spacing tight and the interface feeling precise. It works because:

• The design is image-led and text is supporting UI, not long copy.

• High contrast and generous line height keep 14px readable.

• Tap targets follow a 44px minimum, so touch comfort is not tied to font size.

• Headings and labels scale up, preserving hierarchy.

The blog stays at 17px across breakpoints (Wix Blog uses one size) with 1.6 line height for continuous reading comfort. In short, display UI ≠ content UI. The portfolio uses a compact UI scale for structure, and the blog uses a larger reading scale for flow.

4. Tablet

Tablet sits between immersion and practicality. It keeps more of the desktop rhythm, using two-column grids when space allows.

Generous side margins open the layout so elements breathe without feeling sparse. Interactions stay consistent with desktop, but timing and spacing are tuned for touch. It feels close to the cinematic version: just lighter, sharper, and easier to handle.

Responsive layout adapting between desktop, tablet, and mobile. Same idea, different needs.

5. Spacing as a system (margins, padding, and layout rows)

Margins and padding became rules instead of guesses. I defined a few repeatable insets and reused them across sections, which improved readability and gave the dark theme more structure.

CSS layout rows provided vertical rhythm. Instead of fine-tuning each element, I worked with predictable rows that scale with content.

Unity-style anchors mindset: If you’ve used Unity, this will feel familiar: you “pin” elements to safe edges and let them scale within those anchors. This previous experience with the program made Wix Studio’s constraints easier to work with. I anchored key elements to consistent insets, then let the content adapt inside that frame.

6. What Changed

• Typography → one body size, context-based line height (UI 1.2, excerpts 1.4, body 1.6).

• Layout → max text width capped for reading comfort, components adapt in clear steps.

• Interaction → hover cues translated to taps, focus states clarified.

• Media → images scale by breakpoint, and captions stay tied to the image width.

• Pace → transitions shorten on mobile, keeping only key moments.

7. The iPad Pro reality (and what I did)

▹ What happens :

iPad Pro (1024 × 1366) sits in tablet width, but Wix Studio often identifies it as desktop. The result is that the desktop layout loads without proportional scaling, the canvas anchors to the top-left and the intended framing breaks.

▹ Why it matters :

This is a platform limitation in Wix Studio’s breakpoint logic. There are no custom device overrides to force a true tablet layout without duplicating pages.

▹ Decision :

I kept iPad Pro on the desktop layout and focused effort on delivering the intended experience for desktop, mobile, and standard tablets. This prioritizes consistency, performance, and simpler maintenance.

▹ Long-term plan :

If stricter tablet targeting becomes important, I will either add a lightweight iPad Pro layer or migrate to a platform with fluid breakpoints and custom ranges (like Framer or Webflow).

8. Takeaway

Full responsive system in Figma. More layers than I’d like to admit.

Responsiveness isn’t only about shrinking things. It’s about choosing what stays, what moves, and what waits its turn. Treating margins, padding, and rows as a system (with an anchors mindset) kept the tone consistent while making the UI clearer and easier to use on every screen.

Continue reading the series:

Part 1 | Part 3 | Part 4 | Part 5