LOGO

Improve Web Readability: Mobile & Desktop Tips

September 10, 2015
Improve Web Readability: Mobile & Desktop Tips

Enhancing Your Reading Experience: The Benefits of Reader Mode

Have you ever encountered a website on your mobile device that presents a frustrating experience due to poor formatting, intrusive advertisements, or slow loading times? Reader mode offers a streamlined solution, allowing for distraction-free web page viewing with a single tap.

Availability Across Platforms

This functionality is natively built into Safari on iOS devices. Furthermore, it can be activated as an experimental feature within Chrome on Android platforms.

Reader mode isn't limited to mobile browsing; it’s also readily accessible in the majority of desktop web browsers.

How Reader Mode Improves Web Browsing

  • Removes Clutter: Eliminates distracting elements like ads, sidebars, and unnecessary images.
  • Optimizes Formatting: Adjusts text size and layout for comfortable reading on any screen.
  • Improves Performance: Loads only the essential content, resulting in faster page loading and smoother scrolling.

By stripping away extraneous elements, reader mode focuses your attention on the core content of the webpage. This leads to a more enjoyable and efficient reading experience.

Ultimately, utilizing reader mode transforms potentially frustrating web browsing sessions into seamless and focused reading opportunities.

Safari on iPhone and iPad

Related: 8 Tips and Tricks for Browsing with Safari on iPad and iPhone

An integrated Reader Mode is available within Safari on both iPhone and iPad, offering a streamlined browsing experience.

Once a web page is loaded in Safari, a specific icon becomes visible on the left side of the address bar, located at the top of the application.

This icon’s appearance is conditional; Safari must identify the loaded page as an “article” for it to be displayed, meaning it won't be present on all websites.

Selecting this button after a page loads isolates the core text content. The reading view effectively circumvents intrusive pop-up screens and conceals distracting elements like navigation bars, social media buttons, and persistent advertisements.

This allows users to focus solely on the information they intended to access from the webpage.

Significant effort has been dedicated to optimizing How-To Geek’s mobile website. Therefore, the visual difference in the screenshot below may appear subtle.

However, this feature proves particularly beneficial when navigating mobile websites with more complex and cluttered layouts.

how-to-make-the-mobile-web-more-readable-and-the-desktop-web-too-1.jpg

Chrome on Android

Chrome for Android is currently receiving a reading mode feature, though it's not yet widely available. This functionality is presently accessible as an experimental flag, meaning its future availability isn't guaranteed.

Google’s implementation arrives later than similar features in other browsers. The experimental status indicates it may become a standard option or be removed entirely.

Enabling Reader Mode

To activate the reading mode now, navigate to chrome://flags within Chrome’s address bar and press Enter. This will open Chrome’s experimental features page.

Scroll through the list to find the "Enable Reader Mode Toolbar Icon" option. Select "Enable" from the dropdown menu.

After enabling the flag, a "Relaunch Now" button will appear. Tap this button to restart Chrome and apply the changes.

Following the relaunch, a reading mode icon will be visible on web pages identified as articles. Selecting this icon will activate Reader Mode, similar to other browsers.

how-to-make-the-mobile-web-more-readable-and-the-desktop-web-too-2.jpg

Alternative Browsers

Should Google discontinue this experimental feature, alternative browsers provide built-in reading modes. Firefox for Android, for instance, includes a Reader View.

When browsing articles in Firefox for Android, a "Reader View" icon will automatically appear in the address bar. Tapping this icon displays a simplified, decluttered version of the webpage.

This offers a comparable reading experience even if the feature is removed from Chrome.

Saving Articles for Later Consumption, Even Without an Internet Connection

Pocket stands out as a preferred choice among numerous read-it-later services. It differs from a standard reading mode; its primary function is to preserve web pages for future reading, rather than immediate consumption.

Upon adding a webpage to Pocket, the service extracts and downloads only the article's text and crucial images. This allows users to access and read these saved articles through the Pocket application on their mobile devices, even in the absence of an internet connection.

Utilizing Pocket offers a streamlined experience compared to traditional bookmarking and subsequently activating reading mode upon revisiting the article. Browser extensions for desktop environments are readily available, and articles can also be easily shared to the Pocket app via the built-in sharing capabilities of both iOS and Android operating systems.

Consider Pocket as a superior alternative to simply saving a link. It proactively prepares the content for an optimal reading experience.

Key Benefits of Using Pocket

  • Offline Access: Read saved articles anytime, anywhere, regardless of internet connectivity.
  • Clean Reading View: Pocket strips away distractions, presenting only the essential text and images.
  • Cross-Platform Synchronization: Access your saved articles on various devices.
  • Easy Sharing: Seamlessly save articles from your browser or mobile device.

The convenience of Pocket lies in its ability to curate a personalized reading list, accessible at your convenience. It’s a powerful tool for managing information overload.

Desktop Web Browsers

A Reader Mode or Reader View is now commonly available within most desktop web browsers. This feature allows for a streamlined reading experience by removing distractions from web articles on your laptop or desktop computer. While less crucial on larger screens, its utility remains.

Accessing this mode is straightforward. Simply navigate to an article on your preferred browser and click the corresponding icon located in the address bar. This functionality is integrated into Mozilla Firefox, Microsoft Edge, and Apple's Safari.

In both Firefox and Edge, the Reader Mode icon is visually represented as a book shape, positioned on the right side of the address bar.

how-to-make-the-mobile-web-more-readable-and-the-desktop-web-too-3.jpg

Safari, mirroring its mobile counterpart, utilizes an icon displaying a series of horizontal lines, found on the left side of the address bar.

how-to-make-the-mobile-web-more-readable-and-the-desktop-web-too-4.jpg

Currently, Google Chrome is the only major browser lacking a native reading mode. Enabling the experimental version on desktop requires additional steps. Consider installing a browser extension, such as Readability, or utilizing a bookmarklet as alternatives.

To experiment with Chrome’s reading mode, modify the desktop shortcut used to launch the browser by adding the following switch:

--enable-dom-distiller

Following this change, close and relaunch Chrome using the modified shortcut. You can then select "Distill Page" from the menu to activate reading mode. Note that Google reserves the right to remove this experimental feature; a fully implemented reading mode would be ideal.

how-to-make-the-mobile-web-more-readable-and-the-desktop-web-too-5.jpg

This technique provides a convenient way to enjoy web content on mobile devices without unnecessary clutter. Importantly, most websites do not object to this practice. Advertisements typically load prior to entering reading mode, ensuring the website receives its intended ad impressions while you benefit from a cleaner reading experience.

#web readability#mobile web#desktop web#user experience#content design#website tips