Optimizing your website for mobile devices is essential, as a large portion of web traffic now comes from smartphones and tablets. A well-designed mobile version ensures a better user experience, faster navigation, and improved SEO. With OzSpeed’s Website Builder, you can easily customize your site’s mobile view and make it responsive. Here’s a step-by-step guide on how to edit the mobile version of your website.
Step 1: Access the Mobile Editor #
To start editing the mobile version of your site, switch to the Mobile View in the hPanel editor.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Click the Mobile Icon (phone icon) in the top toolbar to switch to the Mobile View.
Tip: #
- Use the Preview option to see how your site currently looks on mobile before making any changes.
Step 2: Adjust the Layout for Mobile #
In Mobile View, you can rearrange and resize elements to fit smaller screens better.
How to Rearrange Elements: #
- Click and drag elements (e.g., text, images, buttons) to reorder them for a more streamlined mobile layout.
- Resize elements by clicking and dragging the corner handles.
- Use the Alignment Tools to center elements or align them left or right.
Tip: #
- Stack content vertically for a mobile-friendly layout, as this is easier to navigate on smaller screens.
Step 3: Hide Elements for Mobile Devices #
Some elements may look great on desktop but clutter the mobile view. You can choose to hide these elements on mobile devices.
How to Hide Elements: #
- Click on the element you want to hide (e.g., large images, complex animations).
- Go to the Visibility Settings tab in the settings panel.
- Toggle off the Show on Mobile option.
- Click Save.
Tip: #
- Keep only the essential content visible on mobile for faster loading and a cleaner look.
Step 4: Adjust Text Size and Spacing #
Ensure that your text is readable and well-spaced on mobile devices.
How to Edit Text for Mobile: #
- Click on any Text Block to open the settings panel.
- Adjust the font size, line height, and letter spacing for better readability.
- Check the padding and margin settings to ensure enough space around text elements.
- Click Save.
Tip: #
- Use a slightly larger font size for mobile (e.g., 16px or higher) to improve readability on smaller screens.
Step 5: Optimize Images for Mobile #
Resize and compress images to ensure they load quickly on mobile devices.
How to Optimize Images: #
- Click on the Image Block to open the settings panel.
- Resize the image to fit the mobile layout without taking up too much space.
- Enable the Responsive Image option for automatic scaling.
- Click Save.
Tip: #
- Use smaller, optimized images for mobile to reduce loading times and improve performance.
Step 6: Test Interactive Elements #
Ensure that buttons, forms, and links are easy to tap and interact with on mobile devices.
How to Test Interactive Elements: #
- Click on each Button and check its size. Make sure it’s large enough to tap (at least 44px in height).
- Test the forms and input fields to ensure they are easy to fill out on a touchscreen.
- Click Save.
Tip: #
- Use clear, concise labels for buttons and forms on mobile to avoid confusion.
Step 7: Preview and Test the Mobile Version #
Before publishing, preview your mobile design to ensure everything looks good and functions well.
How to Preview: #
- Click Preview in the top toolbar.
- Switch to Mobile View to see how the site looks on a smartphone.
- Test all interactive elements (e.g., links, buttons, forms) to ensure they work correctly.
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 8: Publish the Mobile Version #
Once you’re satisfied with the mobile layout and functionality, publish your changes.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm your changes to go live.
Tip: #
- Announce the mobile optimization update to your users, especially if it includes new features or improvements.
Troubleshooting Tips #
- Elements Not Displaying Correctly on Mobile:
- Check the Visibility Settings to ensure elements are not hidden on mobile.
- Use the responsive design settings to adjust the size and alignment of elements.
- Text or Images Too Small on Mobile:
- Increase the font size and image size for better visibility.
- Test the design on multiple devices to ensure readability.
- Slow Loading on Mobile Devices:
- Optimize images by reducing their size and using compressed formats (e.g., JPEG, WebP).
- Minimize the use of animations or large background videos that can slow down mobile performance.
Additional Tips: #
- Keep It Simple: Mobile users prefer straightforward designs. Focus on the essentials and remove any unnecessary elements.
- Use Mobile-Specific Features: Consider adding mobile-friendly features like a click-to-call button or a sticky navigation menu for better user experience.
- Test Across Devices: Test your site on different devices and browsers to ensure consistent performance.
