Any Tips on How to Make a Site Mobile-Friendly?

For those looking for how to set up mobile versions of pages, here’s a quick video overview.

A few other tips:

  • For inputs, it’s best to set the font size to 16px or greater. Otherwise, for users on Apple (iOS) devices, it may “auto zoom” in on the page, causing inadvertent clipping.
  • Definitely spend time working in the responsive mode editor and simulate with different page sizes. (What looks good at 450px may not look good at 380px).
  • You can use conditional logic that applies based on page width - say for an individual text element, you can adjust things like text size (ex. 32px to 24px) or the actual text displayed (ie. on desktop, show a longer description; mobile, a short version).
  • For buttons and inputs, a good rule of thumb is to have your targets be at least 30px in height. Otherwise, it may be difficult to accurately press.

Dan (creator of LearnTo - a whole lot more Bubble tutorials there)