Most dispensary traffic arrives on a phone held in one hand, so design the phone layout first and let the desktop version grow from it. Big tap targets, a sticky order button, a viewport meta tag, and Core Web Vitals that pass on a real phone do more for sales than any desktop flourish.
Draw the phone layout before the desktop one
Mobile-first is an order of operations, not a screen size. You start with the narrowest layout and the tightest constraints, get that right, then add columns and space for bigger screens. The alternative — designing a wide desktop page and shrinking it — is how you end up with a three-across product grid that stacks into a mile-long scroll and a menu that needs pinch-zoom. Every page begins with the viewport meta tag already in the head of these files, width=device-width, initial-scale=1, which tells the phone to render at its own width instead of pretending to be a desktop.
Size everything for a thumb
Fingers are not cursors. Make tap targets about 44 by 44 pixels and leave space around them so a shopper reaching for Add to cart does not hit the strain link beside it. Put the primary actions in the lower and middle third of the screen where a thumb rests, and keep the account and menu controls reachable without shifting grip. A dispensary I looked at had a filter bar with eight 22-pixel checkboxes packed edge to edge; doubling their size and spacing cut the mis-taps their session recordings kept showing.
Keep the buy action on screen with a sticky CTA
On a long product page the shopper decides somewhere in the middle, not at the top where the button usually sits. A sticky CTA pinned to the bottom of the viewport keeps Order now one tap away no matter how far they have scrolled. Hold it to a single button. Two or three competing sticky buttons eat the small screen and make the choice harder, which is the opposite of the point.
Pass Core Web Vitals on an actual phone
Speed on mobile is not a nice-to-have, it is measured and it is where slow pages get caught. Google's three thresholds are Largest Contentful Paint at 2.5 seconds or less, Interaction to Next Paint at 200 milliseconds or less, and Cumulative Layout Shift at 0.1 or less. The usual mobile killer is a hero image or a menu that loads late and shoves the content down, spiking CLS and causing the shopper to tap the wrong thing. Set width and height on images so the space is reserved before they load.
Test on real devices, then scale up
An emulator lies about how a mid-range Android on spotty signal actually feels. Load the page on a real phone, one-handed, and try to complete a purchase without zooming. Once the phone flow works, widening it for tablet and desktop is the easy part, because you are adding room rather than fixing a cramped design after the fact.
Key takeaways
- Build the phone layout first, then scale up. Shrinking a desktop design is where mobile problems come from.
- Tap targets around 44px with spacing, primary actions in the thumb zone.
- A single sticky CTA keeps the buy button reachable on long pages.
- Hit LCP 2.5s, INP 200ms, CLS 0.1 on a real phone; set image dimensions to stop layout shift.
Frequently asked questions
How big should tap targets be on a cannabis site?
Aim for about 44 by 44 pixels with a little space between them. That is roughly the size of a fingertip, so shoppers hit the Add to cart button instead of the link next to it. Small links crammed together are the most common reason a mobile menu feels frustrating.
What is a sticky CTA and should a dispensary use one?
A sticky CTA is a button that stays fixed to the bottom of the screen as the shopper scrolls, usually Order now or Add to cart. On a long product page it means the buy action is always one thumb-tap away. Keep it to one button so it does not crowd the screen on a small phone.
Which Core Web Vitals matter most for mobile cannabis pages?
Largest Contentful Paint at 2.5 seconds or less, Interaction to Next Paint at 200 milliseconds or less, and Cumulative Layout Shift at 0.1 or less. Google measures these on real mobile visits, and a phone on a weak connection is where they tend to fail first.
Is mobile-first the same as responsive design?
No. Responsive design makes one layout adapt across screen sizes. Mobile-first is the order you design in: you start with the phone layout and its constraints, then add for larger screens. A site can be responsive and still have been drawn on a desktop and squeezed down.
Want this done for your brand?
We build cannabis & CBD search visibility with full transparency, for dispensaries, brands, and MSOs.
Get a free cannabis SEO audit ›