How I Designed One CMS Workflow Across Desktop and Mobile
Cross-device products often fail in one of two ways.
Either the mobile version becomes a stripped-down companion app, or the desktop interface is compressed until it technically fits on a phone.
I did not want either model for Smart Sync.
Start with the workflow, not the screen size
The important part of Smart Sync is not a particular layout. It is the sequence of decisions around CMS work:
Select → Prepare → Validate → Review → Approve → Publish
That logic should remain stable whether the user is at a desk or holding a phone.
One backend, different interfaces
Desktop and mobile connect to the same Smart Sync backend and the same Webflow environment.
They are not separate products with duplicated data.
This means a user can work with the same sites, collections and CMS items across devices while the interface changes to match the context.
Desktop is for large operations
The desktop workspace is better suited to tasks such as large imports, field mapping, wide review tables and batch operations.
It gives the user enough space to understand a large dataset before approving changes.
Mobile is for immediate CMS work
The mobile PWA is designed around tasks that make sense away from a desk.
That includes browsing connected sites, opening collections, creating and editing items, uploading photos directly from the phone, reviewing content and publishing.
The mobile product is not a reduced demo of the desktop version. It is another interface into the same system.
Images changed the value of mobile
Photos often originate on a phone. Forcing users to transfer them to a computer before starting a CMS operation creates unnecessary friction.
In testing, I uploaded a batch of 60 photos directly from the mobile PWA.
Secure device handoff
The phone is connected from an authenticated desktop session using a temporary, single-use handoff code. After the device is authorized, the mobile browser receives its own session.
Consistency does not mean identical UI
The same system does not need the same screen. Consistency comes from shared logic, states and product rules.
The desktop interface can prioritize data density. The mobile interface can prioritize direct actions and touch-friendly navigation.
The design rule
Preserve the product logic. Adapt the interface to the context.
That is how Smart Sync can feel like one product across desktop and mobile without forcing one layout to do everything.