Mobile Responsive Notes & Best Practices

Mobile Responsive Notes & Best Practices

This Article Is For:
  1. All users
  2. Is applicable to: all themes


When a website is responsive , the layout and/or content responds (or, adapts) based on the size of the screen it’s presented on. A responsive website automatically changes to fit the device you’re reading it on.

Web images and content must adapt to varying layouts in order to be optimized for readability and presentation across a variety of screen sizes and uses.

Ensuring that your website is optimized for your users, no matter how or from where they are accessing your content, helps to maintain if not increase your site traffic, and to limit your bounce and abandonment rates

Things To Consider :

  1. Modern users now access web content on a wide and growing range of devices and screen resolutions from across the globe, e.g. small to large mobile devices, tablets, e-readers, screen readers, laptops, desktops, tv's, other web-enabled devices, etc.

  2. Additionally, web content also needs to be optimized for a variety of different use cases, e.g. browser window re-sizing, portrait vs landscape orientation, multi-tasking, split screen mode, multi-screen use, etc.

Best Practices :

  1. Please note that while all SoCast websites and mobile apps are built to be optimized for mobile responsiveness, there are still other details that you must take into consideration when designing and building your website and/or mobile app content.

  2. Critical content should always be readable and viewable at all times on any screen.

  3. Critical content including text, should never be embedded as part of an image if the content is not readable or cannot be deciphered when the image is resized to the width of a small screen, such on as a mobile device.

    1. Such content can only be embedded as part of an image if the image is complementary to the content but not the sole means of communicating the content.

  4. Note that some browsers and e-readers may block images altogether to optimize page speed and/or to adhere to preferences configured in user settings.

  5. Website visitors with visual impairments may be using screen readers that convert text to speech and may not be able to see your images.

  6. For these reasons, text and other critical content, e.g. logos, should always be created as separate web elements (in HTML), and not embedded within an image when possible.

  7. Mobile responsive images are intended to be decorative for aesthetic or branding purposes, or complementary to content for visual reference, but should never be relied upon to be the sole website element to communicate critical content.

  8. By keeping all critical content elements as separate pieces, it allows the content layout to adapt seamlessly across various sizes while maintaining the readability of text and the overall integrity of the content.

  9. Your website content should ideally be optimized for the most popular desktop and mobile screen resolutions used by your visitors according to your website analytics, e.g. Google Analytics.

    1. Maximum images sizes can be optimized according to the screen resolutions of your target audience as well as your specific website theme specifications.

    2. Minimum image sizes also need to take into account their context of use, e.g. Does the image appear in a side, bar, within a column layout, as a background, etc.

    3. Image and content presentation for mobile responsiveness can be easily previewed and tested by resizing the browser window on a desktop device to see how it adapts, and then make any necessary changes to optimize the presentation

    4. For maximum image sizes, and more on the media library see:

    • Related Articles

    • Why do my app splash screen images get resized in the media library?

      When you upload an image, the media library will scale it down to be optimized for web use. However, our system retains the original image, which is linked from the attachment details. If you click on this original image, you will see the image size ...
    • What Browsers Are Supported By The SoCast Platform?

      This Article Is For: All Users Applicable To: All Themes Notes: We do not support Microsoft Edge The browsers listed below are the supported browsers for use with the SoCast Platform ( ) and/ your website ( www.your.url ).  In ...
    • Managing Your DNS Changes to launch your Socast website

      One of the final parts of the onboarding process requires some modification to your domain's DNS configuration. This is normally hosted with your domain's registrar (where you've purchased your domain from), but in some cases may also be hosted by a ...
    • How To Optimize Your Website For The Best User Experience

      Questions To Ask While Building Your Site Does content layout work well on desktop and mobile? Does content layout and naming make sense to a first-time visitor? Is it easy to understand if the visitor is unfamiliar with the site or station ...
    • How Do I Start To Build My Website? A Step By Step Guide

      This Article Is For: SoCast Account Admins, Content Editors, Promotions Staff This is applicable to: All Themes Quick Reads: Redesigning Your Station's Website? Here's 4 Things To Consider With your theme chosen, you’re ready to start creating ...