Mobile Portfolio Design: Make the Core Tasks Work Everywhere

Start With Tasks, Not Traffic Myths

Do not build around a universal mobile-traffic percentage or an invented attention span. Identify what a reviewer must be able to do in the context you care about:

• Understand your role, focus, and level.
• Open a relevant project and grasp its context.
• Read case-study evidence without pinch-and-pan workarounds.
• Play meaningful media with accessible controls.
• Open a resume or external artifact.
• Contact you or continue on another device.

Prioritize Responsive Content

Narrow screens expose weak hierarchy. Preserve meaning rather than hiding essential content by breakpoint.

• Lead with role, project type, your contribution, and the central result or open question.
• Turn comparison grids into a logical stacked order.
• Use captions that still make sense when image and text move apart.
• Replace dense process walls with headings, summaries, and optional depth.
• Keep meaningful data in live text, not only inside a screenshot.
• Do not remove evidence from mobile merely to shorten the page.

Design the Layout to Reflow

• Use flexible containers and content-driven breakpoints rather than device names.
• Set a readable measure for long-form text and avoid full-width paragraphs on wide screens.
• Reserve image dimensions so content does not jump as media loads.
• Allow text to wrap and grow when users zoom or increase text spacing.
• Test both portrait and landscape; do not lock orientation.
• Avoid horizontal scrolling for ordinary page content. Give genuinely two-dimensional artifacts a labeled, usable treatment.
• Keep fixed headers, banners, and bottom controls from covering focused or anchored content.

Support Touch and Keyboard

Responsive does not mean touch-only. Tablets and phones can use keyboards, switches, pens, voice control, and assistive technology.

• Use real links and buttons with visible focus states and accessible names.
• Provide the same information and actions without hover.
• WCAG 2.2 Level AA defines a 24 by 24 CSS-pixel target minimum with specific exceptions; spacing and larger targets can improve comfort further.
• Do not require complex multi-finger gestures when a simple control can perform the action.
• Keep controls away from operating-system gesture areas when practical.
• Test form keyboards, labels, errors, autofill, and success feedback.

Keep Mobile Navigation Clear

• Use descriptive top-level labels and keep the highest-value destinations easy to reach.
• If navigation collapses, label the menu button, expose its state, manage focus, and close it predictably.
• Show the current page or section when orientation would otherwise be unclear.
• Make “next project” destinations descriptive enough to support deliberate browsing.
• Keep resume and contact routes available without relying on a hover-only footer.

The deeper review lives in portfolio navigation best practices.

Handle Images, Video, and Motion

• Provide responsive image candidates with accurate size hints so the browser can choose an appropriate resource.
• Use art direction when a wide composition becomes illegible on a narrow screen.
• Do not lazy-load the image likely to be the page's Largest Contentful Paint element; defer noncritical offscreen media.
• Provide poster images, captions, transcripts, and labeled controls for meaningful video.
• Respect reduced-motion preferences and avoid scroll effects that interfere with reading or control.
• Check image crops at the actual rendered size; “high resolution” does not guarantee legibility.

Use the image optimization guide for format and delivery decisions.

Test Conditions, Not Just Viewports

1. Viewport range: narrow, medium, and wide widths; portrait and landscape.
2. Input: touch, keyboard, and screen reader.
3. Adaptation: 200% zoom, larger text, increased text spacing, reduced motion, and high contrast where available.
4. Network and hardware: throttled connection plus at least one representative mid-range device.
5. Browser: current Safari and Chrome at minimum; add browsers that matter to your audience.
6. Content extremes: long titles, dense diagrams, tall images, missing images, and embedded media.
7. Tasks: homepage to project, project to next project, resume access, contact, and recovery from errors.

Standards and Current Tools

• W3C: WCAG 2.2 — reflow, target size, keyboard, focus, orientation, motion, and media criteria.
• MDN: Responsive images — srcset, sizes, and art direction.
• PageSpeed Insights and Lighthouse — lab and, when available, field diagnostics.
• Google Search Central: Mobile-Friendly Test retired — retirement notice for the former tool and report.