The Mobile-First Imperative
India is a mobile-first internet market. Over 75% of web traffic in India comes from smartphones — and this proportion is higher in tier-2 and tier-3 cities. A website that performs beautifully on a desktop and poorly on mobile is, for most Indian businesses, a website that performs poorly for most visitors.
For 3D websites specifically, mobile optimisation is a non-trivial challenge. The parallax effects, 3D CSS transforms, and scroll-choreography that make these sites immersive on desktop require careful adaptation for mobile performance constraints.
Pre-Launch Mobile Checklist
Layout and Readability
- All text is legible at standard mobile zoom (16px minimum for body text)
- No horizontal scrolling on any page at 375px viewport width
- All touch targets (buttons, links, menu items) are at minimum 44×44px
- Hero section is fully readable and not cropped on mobile
- Navigation menu collapses to a mobile hamburger pattern
3D and Animation Performance
- Parallax effects are disabled or reduced on mobile (CSS `@media (prefers-reduced-motion)` respected)
- Scroll-pinned sections work correctly on iOS Safari (check specifically — iOS has unique scroll behaviour)
- No layout jank during scroll on mid-range Android devices
- 3D CSS transforms are GPU-accelerated (use `translateZ(0)` or `will-change: transform`)
- Three.js canvas (if used) has `antialias: false` for mobile performance
Performance
- Mobile page speed above 70 in Google PageSpeed Insights (mobile report)
- Images served as WebP with appropriate size for mobile (not desktop-scale images)
- Hero image or video does not exceed 300KB on mobile
- No blocking JavaScript that delays first render
Forms and Conversion
- Contact form is fully usable on a 375px screen
- WhatsApp button is prominently visible on mobile (not hidden behind desktop layout)
- Phone numbers are `tel:` linked (tap to call)
- Booking or inquiry CTAs are visible without scrolling on mobile (above the fold)
iOS and Android Specific
- Tested on iOS Safari (the most common browser for Indian iPhone users)
- Tested on Chrome for Android
- No `position: fixed` elements that cause iOS scroll bounce issues
- Viewport meta tag is set: ``
Draftly's Built-in Mobile Optimisation
Draftly-generated 3D websites are built mobile-first by default. The AI applies responsive breakpoints, reduces animation intensity on mobile, and uses performance-optimised asset delivery automatically. The checklist above is for verification after generation — confirm every item before publishing to your custom domain.
