Mobile Responsive Notes & Best Practices

Mobile Responsive Notes & Best Practices



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

NEEDS RELINKING

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: https://cs.socastdigital.com/portal/en/kb/articles/how-do-i-add-media-files-to-the-media-library


    • Related Articles

    • 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 ...
    • Getting Started

      Welcome to SoCast! This section will provide you with all the information you need to get started and prepare your website for launch. Setting up Your SoCast Account SoCast Client Preparation List How To Optimize Your Website For The Best User ...
    • How To Build Your 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 ...
    • 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 ( admin.socastsrm.com ) and/ your website ( www.your.url ).  In ...
    • Key Benefits & Differences Between RSS Subscription, Premium Feeds, Page Cloning And Page & Blog Syndication

      This Article Is For: All Clients Is Applicable To All Themes In the chart below is listed the key differences between the following features: RSS Subscription Settings Premium Feeds Syndicated Pages Blog Syndication Page Cloning If you have any ...