SISO LABSWhy phones come first#
When someone looks for a shop, they often do it on a phone. They search on the bus, in a queue, or while walking along the street. A website built first for a large desktop screen can look cramped and awkward on a small one, and the visitor may leave before reading anything useful. Designing for the phone first means starting with the smallest screen and then adding space for larger ones, rather than shrinking a wide page down afterwards.
This order matters because the phone is the harder test. It has less room, a slower connection in many places, and a finger instead of a mouse. If a page works well there, it will usually work well everywhere else. The reverse is not always true.
Layout on a small screen#
A phone layout should show one clear idea at a time. The main heading goes first, followed by a short line that explains what the shop is and where it is. Information should stack down the page in a single column, so the visitor scrolls in one direction without zooming or sideways scrolling. Long blocks of text are harder to read on a small screen, so short paragraphs with clear headings make a real difference.
Images need care too. A large hero picture can push the useful words far below the first view. The budget for the main image is kept small, at 120 KB or less, so that it loads quickly on a mobile connection and the text appears without a long wait. A picture that arrives late makes the whole page feel slow, even when everything else is in order.
Buttons and thumbs#
On a phone, buttons are touched with a thumb, not clicked with a pointer. A button that is too small or too close to another one causes wrong taps and frustration. Buttons should be large enough to hit easily, with plenty of space around them. The most important action on a page should be obvious, and there should not be several competing buttons fighting for attention in the same place.
It also helps to keep the thumb's natural reach in mind. Actions that people use most often are easiest to reach when placed where a thumb can comfortably touch, usually in the lower part of the screen. Links should be plain and descriptive, so the visitor knows where a tap will take them before pressing it.
Speed and offline use#
Speed is part of the design, not an afterthought. The performance budget for this site is set for a phone on Thai 4G. The aim is for the largest visible block of content to appear within 2.5 seconds, and for the hero image to be 120 KB or less. These limits keep the first screen quick to appear on an ordinary connection.
The site can also be installed on a phone like an app, from the browser menu. Once a visitor has opened it, the pages they have seen keep working when the connection drops, which helps in lifts, basements and other places with poor signal. An owner does not need to understand the technical detail. What matters is that the shop's information stays available at the moment the visitor wants it. Thai rules limit how cannabis may be advertised, so check your plans with a lawyer.