Optimising your Oxygen content for mobile devices – The basics and examples
In this video, James provides a tutorial on how to update and optimize content for mobile devices. Here are the key points:
- Importance of Mobile Optimization: If 123 Online have built your content or website, they ensure it’s optimized for mobile. However, if you’re creating your own content, it’s crucial to ensure it displays well on mobile phones and tablets.
- Screen Widths: The video introduces different screen widths in pixels, such as less than 992 pixels, less than 768, and less than 480. Changes made for a particular screen width will apply to all sizes smaller than that width unless further adjustments are made.
- Adjusting Content: James demonstrates how to adjust content for various screen sizes. For instance, he shows how a heading that looks fine on a desktop might appear too large on a tablet or mobile device. He then adjusts the font size accordingly.
- Testing on Actual Devices: It’s recommended to check the changes on actual mobile devices to ensure the content displays correctly. Users might also need to clear their website’s cache for changes to reflect.
- Element Properties: Users can change various properties of an element, such as font size, color, and layout, for different screen sizes. Most properties will adjust for smaller screen sizes, but some might need manual adjustments.
- Practical Example: James provides a real-world example by adding an image and text to a section. He then demonstrates how to adjust the layout and spacing for different screen sizes, ensuring the content looks good on both desktop and mobile devices.
- Conclusion: The video concludes with a reminder of the importance of optimizing content for mobile devices to ensure a seamless user experience.
