More than 60% of your visitors view your website on a smartphone or tablet. A website that does not work well on mobile loses visitors and customers. Sitebuilder makes it easy to ensure your website works perfectly on any screen size.

Why Mobile Optimization is Important

The impact of mobile users:

  • Google uses mobile-first indexing for rankings
  • Visitors leave slow mobile sites within 3 seconds
  • Poor mobile experience harms your brand image
  • Mobile conversions are growing faster than desktop
  • Many visitors come only via mobile

Responsive Design Basics

What is Responsive Design

Responsive design automatically adjusts your website to fit the screen. Elements rearrange, text scales, and images adapt.

How Sitebuilder Handles This

Sitebuilder is fully responsive out of the box:

  • Columns stack automatically on small screens
  • Text size adjusts
  • Navigation becomes a hamburger menu
  • Images scale proportionally

Mobile Preview

Viewing the Mobile Display

  1. Open the page editor
  2. Click on the mobile icon in the toolbar
  3. You will now see the mobile view
  4. Click on the tablet icon for that view

Testing Different Screen Sizes

Test on multiple formats:

  • Desktop (1920px and wider)
  • Laptop (1024-1366px)
  • Tablet (768-1024px)
  • Large phone (414-768px)
  • Small phone (320-414px)

Adjusting Elements per Device

Visibility per Device

Hide or show elements specifically for mobile:

  1. Select an element
  2. Go to Settings
  3. Find Visibility
  4. Choose:
    • Show on desktop
    • Show on tablet
    • Show on mobile
  5. Toggle on or off per device

When to Hide Elements

Good reasons to hide on mobile:

  • Large images that distract
  • Sidebars that do not fit
  • Secondary content
  • Complex tables

Mobile-Specific Content

Add alternative content for mobile:

  1. Create a simplified version
  2. Show only on mobile
  3. Hide the complex version on mobile

Optimizing Navigation

Hamburger Menu

On mobile, your menu automatically becomes a hamburger menu:

  1. Go to Header settings
  2. Configure the Mobile menu
  3. Choose:
    • Menu icon (hamburger, cross, etc.)
    • Animation
    • Background color

Keep the navigation visible while scrolling:

  1. Select the header
  2. Toggle Sticky on
  3. The header stays at the top while scrolling
  4. Test if this works well on mobile

Ensure links are easy to tap:

  • At least 44x44 pixels
  • Sufficient space between links
  • Clear visual feedback on touch

Adjusting Typography

Text Size per Device

  1. Select a text block
  2. Switch to mobile view
  3. Adjust the text size for mobile
  4. Headings often 20-30% smaller

Line Height and Spacing

On small screens:

  • Increase line height for readability
  • Reduce margins between paragraphs
  • Maintain sufficient white space

Font Optimization

  • Use a maximum of 2 fonts
  • Choose readable fonts for small screens
  • Avoid overly thin fonts

Optimizing Images

Responsive Images

Sitebuilder automatically loads the correct image size:

  • Smaller versions for mobile
  • Saves bandwidth and loading time
  • Maintains quality

Image Format

  • Use WebP where possible
  • JPEG for photos
  • PNG for graphics with transparency
  • SVG for logos and icons

Lazy Loading

Load images only when they come into view:

  1. Go to Site settings
  2. Toggle Lazy loading on
  3. Images load during scrolling

Forms for Mobile

Touch-Friendly Input Fields

  1. Make input fields large enough
  2. Add sufficient space between fields
  3. Use the correct input type:
    • email for email addresses
    • tel for phone numbers
    • number for numbers

Keyboard Optimization

The correct keyboard appears automatically:

  • Email field: @ key readily available
  • Phone: numeric keyboard
  • URL: .com button available

Submit Button

  • Make the button wide enough
  • Place it at the bottom of the form
  • Use a clear call-to-action

Speed Optimization

Mobile Loading Time

Mobile users expect speed:

  1. Go to Settings and select Performance
  2. Toggle Caching on
  3. Activate Code minification
  4. Toggle Lazy loading on

Critical Content First

  1. Ensure above-the-fold content loads quickly
  2. Set priority for important images
  3. Avoid blocking scripts

Consider AMP

For content-focused sites:

  • AMP versions load incredibly fast
  • Good for news articles and blogs
  • Requires specific implementation

Touch Gestures

Scroll Behavior

  • Ensure smooth scrolling
  • Avoid horizontal scrolling
  • Test long pages on mobile

Swipe Actions

Some elements support swiping:

  • Image carousels
  • Product galleries
  • Testimonial sliders

Testing and Debugging

Real Device Testing

Nothing replaces real testing:

  1. Open your site on your phone
  2. Test all pages and functions
  3. Try filling out forms
  4. Check the checkout flow

Chrome DevTools

Test in your browser:

  1. Open Chrome DevTools (F12)
  2. Click on the mobile icon
  3. Select a device
  4. Test the interaction

Common Issues

Check for:

  • Text that is too small to read
  • Buttons that are too close together
  • Images that fall off the screen
  • Forms that are difficult to fill out

Mobile-First Checklist

Check for each page:

  • Does the page load within 3 seconds?
  • Are all elements visible and readable?
  • Does the navigation work well?
  • Are forms easy to fill out?
  • Do all links and buttons work?
  • Is there no unwanted horizontal scrolling?

Need Help?

We are here for you! Are you facing any issues or do you have questions? Our support team is happy to assist you personally. Send us a message via the ticket system - we usually respond within a few hours and are happy to help you.