Categories
Planning

How to make the mobile web more readable (and the desktop web too)

Chris Hoffman is Editor-in-Chief of How-To Geek. He’s written about technology for over a decade and was a PCWorld columnist for two years. Chris has written for The New York Times and Reader’s Digest, been interviewed as a technology expert on TV stations like Miami’s NBC 6, and had his work covered by news outlets like the BBC. Since 2011, Chris has written over 2,000 articles that have been read nearly one billion times—and that’s just here at How-To Geek. Read more.

How often do you load a web page on your phone only to be confronted by awkward layouts, ads that get in the way, and heavy pages that stutter as you scroll them? “Reader mode” is a one-tap solution to reading web pages without the frustration.

This is integrated into Safari on iOS and can be enabled as an experimental feature on Chrome for Android. It’s available in most desktop web browsers, too.

Safari on iPhone and iPad

Safari has an integrated “Reader Mode” feature on iPhone and iPad, and it’s easy to use.

After you load a web page in Safari, you’ll see an icon at the left side of the address bar at the top of the app. This icon will only appear if Safari detects the current web page is an “article,” so it won’t be available on every web page. But this is only useful if the web page is a text article you want to read, anyway.

Tap this button after loading a web page to get just the text. Reading view will bypass most interstitial screens and hide all those pesky navigation elements, social sharing buttons, and always-on-screen ads so you can get just the information you came to the web page to read.

We’ve put a lot of work into making How-To Geek’s mobile website awesome, so the below screenshot might not look like a huge change — but it helps a lot on mobile websites that are much more cluttered.

Chrome on Android

Google is late to the party here. Chrome for Android does have a reading mode, but it’s a hidden experimental flag you have to enable at the moment. This could graduate to being a stable feature, or Google could remove even the experimental flag from Chrome. We don’t know what will happen.

But, to use it now, type chrome://flags into Chrome’s address bar and tap the Enter button. Scroll down, locate the “Enable Reader Mode Toolbar Icon” option, and tap “Enable.” Tap the “Relaunch Now” button that appears to relaunch Firefox.

Once you have, you’ll get a reading mode icon in Chrome on web pages it detects are articles. Tap the button to use Reader Mode just like you would in other web browsers.

If Google removes this feature, that’s fine — you can always use other browsers with it built-in. For example, Firefox for Android offers a Reader View. Just load a web page that’s an article and the “Reader View” icon will appear in the address bar. Tap it to load a decluttered version of the web page.

Pocket for Reading Just the Text Later, Even Offline

Pocket isn’t the only read-it-later service, but it is our favorite. This isn’t quite the same thing as reading mode — it’s for web pages you want to read later, not ones you want to read right now. But, add a web page to Pocket and Pocket will download only the text and essential images from the article on that page. You can then load the Pocket app on your phone and read all these articles — even while you’re offline.

If you want to read a web article later, using Pocket is a more convenient solution than bookmarking it and manually enabling reading mode when you come back later. Pocket browser extensions are available for desktop web browsers, and you can share articles to the Pocket app with the sharing features integrated into iOS and Android.

Desktop Web Browsers

Most desktop web browsers offer a Reader Mode or Reader View now, too. You can use this same trick to read web articles in a clutter-free way on your laptop or desktop PC. it’s much less important on the desktop, of course, where you have a large screen and a more powerful web browser. But it can still be useful.

To access Reader Mode, simply load a web page that’s an article in your web browser of choice and click the icon in your address bar. This works in Mozilla Firefox, Microsoft Edge, and Apple’s Safari — all of which have this built in.

In Mozilla Firefox and Microsoft Edge, you’ll see the book-shaped Reader Mode icon at the right side of the address bar.

In Apple’s Safari, it’s the icon with the series of horizontal lines at the left side of the address bar — just like on mobile Safari.

Google Chrome is the only big mainstream web browser left out here. On the desktop, it’s a bit harder to enable the experimental reading mode. You might want to just install a browser extension or bookmarklet like Readability.

If you’d like to play with Chrome’s experimental reading mode, you can change the desktop shortcut you use to launch Chrome and add the following switch: –enable-dom-distiller

After you do, exit Chrome and relaunch it with that shortcut. You can then click the menu button and select “Distill Page” to enable reading mode. Google may remove this feature at any time — ideally, they’ll just implement a proper reading mode by default.

This is a powerful trick for reading the mobile web without the hassle. And, if you’re wondering, most websites won’t really mind you doing this. The ads load before you enter reading mode — which hides them — so the website gets the ad views it wants and you get an uncluttered page to read.

Мобильные устройства изменили нашу жизнь. Все больше людей постоянно общаются и ищут информацию с их помощью. Во многих странах пользователей смартфонов уже больше, чем пользователей компьютеров. Поэтому очень важно адаптировать сайты для мобильных устройств.

Зачем делать сайт удобным для пользователей мобильных устройств?

Обычные сайты, как правило, неудобно просматривать на смартфонах. Чтобы прочесть содержимое страницы, пользователям приходится изменять ее масштаб. В конце концов им надоедает это делать, и они уходят с сайта. В отличие от обычной версии, мобильная не вызывает таких трудностей.

Мобильные технологии важны для любого сайта, будь то блог о спортивной команде, страница любительского театра или интернет-магазин. Ваш сайт должен быть удобен для тех, кто заходит на него со смартфона или планшета.

С чего начать?

Прежде чем приступать к оптимизации сайта, рекомендуем оценить имеющиеся ресурсы, бизнес-модель и свой опыт разработчика. На рисунке ниже показано, как стандартный сайт может выглядеть на мобильных устройствах.

При оптимизации сайта для мобильных устройств самое важное – структурировать имеющиеся разделы контента так, чтобы они корректно отображались на маленьких экранах. Чтобы узнать больше о технической стороне создания мобильной версии, изучите способы адаптации сайта для мобильных устройств.

Три принципа создания сайтов для мобильных устройств

1. Сайт должен быть удобным.

Помогите посетителям своего сайта найти то, что их интересует: записи в вашем блоге, адрес компании или отзывы о ваших товарах. Сделайте так, чтобы пользователям на сайте было удобно и чтобы выполнение действий на нем не вызывало трудностей.

Проанализируйте действия, которые совершает пользователь при посещении сайта, чтобы сделать их максимально простыми для владельцев мобильных устройств. Подумайте, нельзя ли сократить количество таких действий, и в целом постарайтесь сделать интерфейс как можно более удобным. В примере выше клиент попадает на сайт после того, как вводит поисковый запрос “Купить лампу” (экран 1), просматривает ассортимент (экран 2), а затем покупает понравившийся товар (экран 3).

2. Чем проще взаимодействовать с сайтом на мобильных устройствах, тем он эффективнее.

Заранее расставьте приоритеты и определите, с какими целями мобильные пользователи заходят на ваш сайт чаще всего. По возможности минимизируйте количество действий, которые им приходится выполнять, чтобы достичь этих целей. Именно от этого во многом зависят впечатления посетителей. Сделайте сайт максимально удобным, а его интерфейс – одинаково понятным и доступным на любых платформах.

Согласно исследованию компании MediaPost, 48 % покупателей в интернет-магазинах называют удобство взаимодействия самым важным качеством мобильных сайтов.

3. Шаблон, тема или дизайн мобильной версии должны быть выполнены в одном стиле для всех устройств (для этого можно использовать адаптивный дизайн).

Адаптивный дизайн подразумевает, что у страницы одинаковый URL и код на всех устройствах и она автоматически подстраивается под экран компьютера, планшета или смартфона. Google рекомендует использовать именно этот вариант. Его преимущество заключается в том, что вам нужно будет поддерживать всего один сайт вместо двух. Например, если у вас было два сайта ( www.example.com для компьютеров и m.example.com для мобильных устройств), то останется только www.example.com для всех посетителей.

Страница сайта с адаптивным дизайном подстраивается под размеры экрана. При этом ни ее URL, ни код не изменяются. На всех трех устройствах, показанных выше, открыт один адрес – www.example.com , а не отдельные версии для смартфонов ( m.example.com ) и планшетов ( t.example.com ).

“Благодаря адаптивному дизайну сайт Baines & Ernst одинаково хорошо выглядит на экранах разных размеров. При этом специалистам компании не пришлось создавать несколько его версий. В результате пользователи за один визит стали посещать на 11 % больше страниц, а количество конверсий с мобильных устройств увеличилось на 51 %.”

Конверсии – это нужные вам действия, которые выполняет посетитель сайта, например покупка товара, звонок в компанию или подписка на рассылку.

Подробную информацию об адаптивном дизайне можно найти в руководстве Основы веб-дизайна. Если вы хотите сопоставить плюсы и минусы различных способов реализации мобильных и обычных версий сайтов, прочитайте статью о разработке для разных платформ.

Три совета для начинающих создателей сайтов

  1. Не забывайте о своих мобильных пользователях. Помните, что посетители заходят на ваш сайт с определенной целью, например прочитать интересную статью или узнать адрес вашего магазина. Создавая мобильную версию, постарайтесь упростить им эту задачу. Недостаточно просто урезанной версии в мобильном формате. Нужно создать сайт, который адаптирован для мобильных устройств (т. е. действительно удобен для пользователей и оптимизирован для выполнения стандартных задач).
  2. Не размещайте мобильную версию сайта в другом домене, субдомене или подкаталоге. Google поддерживает различные конфигурации сайтов для мобильных устройств, однако чем больше у вас разных URL, тем сложнее обслуживать и обновлять сайт и тем чаще возникают технические проблемы. Гораздо проще использовать адаптивный дизайн, чтобы обычная и мобильная версии сайта находились по одному и тому же URL. Google рекомендует именно этот вариант.
  3. Не бойтесь использовать проверенные решения. Вы всегда можете найти хорошие идеи или подходы на других сайтах. Даже если конкуренты создали мобильный сайт раньше вас, никто не запрещает вам перенять их опыт.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Account Information

Share with Your Friends

How to adjust your settings to make your screen easier to read

How to adjust your settings to make your screen easier to read

If you’re straining to read this, you might need to adjust your screen or font size. Learn how to change the settings on your desktop, tablet, or phone, and ease your eyes.

I saw my client squint at the screen. Then I noticed that the monitor had been moved closer to her face.

“Would it help if the text was a bit bigger?” I asked.

What’s hot at TechRepublic

  • iOS 16 cheat sheet: Complete guide for 2022
  • The top 15 states with the most remote work positions: How does your state stack up?
  • Best SEO tools 2022: How to increase website traffic
  • Humans still weakest link in cybersecurity

After an affirmative answer, I helped her adjust settings on both her desktop and phone to make the content on the screens easier to see. She’s not alone in her struggle to see things on her screen.

According to a 2012 survey by The Vision Council, “nearly 70 percent of U.S. adults experience some form of digital eye strain while using their electronic devices.” The Vision Council defines eye strain as “physical discomfort after screen use for longer than two hours at a time.” Of course, many factors can contribute to eye strain, including screen brightness, color, resolution, room lighting, distance, lenses, and time.

Fortunately, items on a screen can change size. All four of the major operating systems let you scale your screen. Here are settings you can tweak to make content on screens easier to see.

Scale everything

Scaling adjusts the display so that the resolution you choose fits to the native resolution of the screen. When you select a lower resolution than the native resolution, such as selecting 1600 x 900 on a native 1920 x 1080 screen, everything appears larger. This means menus, icons, text, and images all look bigger.

Windows

Windows 10 includes the ability to adjust text size, apps, and other items with a setting. In Settings > Display > Scale and layout, choose a scaling percentage larger than the default 100%. In the example shown, the setting is at 125%. Other Windows systems offer display settings such as small (100%), medium (125%), or large (150%).

macOS

macOS also includes a display scaling option. In my client’s case, I adjusted the setting on her iMac from 1920 x 1080 to 1600 x 900. To change the setting, go to System Preferences > Displays > Display tab, then choose one of the available scaling settings.

Apple offers a variant of scaling on the iPhone and iPad: Standard vs. Zoomed mode. Go to Settings > Display & Brightness > Display Zoom (at the bottom of the page of options). Select the view setting, then tap “Zoomed” for a larger, scaled version, then tap “Set.” You’ll see a message the device needs to reboot, but the screen should only go dark for a few seconds. (Tip: The “Zoomed” setting affects most apps on your device, including apps such as Google Docs, that aren’t otherwise affected by font size changes as of December 2017.)

iOS also lets you adjust text size in Settings > General > Accessibility > Larger Text. Slide the selector toward the right to make text bigger. If you need extra large sizes, enable the “Larger Accessibility Sizes” slider, then choose your preferred size.

Android

Android 7.0 or later gives you two settings to control the display. First, Settings > Display > Display Size allows you to adjust the overall display size. Additionally, you can also adjust font sizing: Settings > Display > Font > Font size.

Adjust an app

Many applications and sites let you adjust text sizes, as well. Where the system scaling settings above affect everything on the screen, these settings more typically affect the content, not icons or controls. You can adjust these settings — in addition to the system scaling — to make text in an individual app easier to see.

Browsers, for example, allow temporary or permanent size adjustments. The combination of the CTRL key and + makes items larger (and the CTRL key and – similarly reduces display size). A combination of Chrome settings control Page Zoom and Font sizes let you adjust web pages to a suitable scale. Both settings are found in the Chrome Settings > Appearance section. As an initial adjustment, you might change the Page Zoom to 125%, along with a Large font size.

Some individual apps also offer customization. In a desktop browser, for example, you can adjust the Google Docs view setting to “Fit” the screen, or to a specific scaled percentage. On iOS, the Twitter app includes a font size setting (Settings and privacy > Display and sound > adjust slider to suit). On Android, Chrome offers a Text scaling (Settings > Accessibility > adjust Text scaling slider). But customized settings aren’t always available across platforms: as of December 2017, Twitter on Android omits app-specific font size controls, as does Chrome on iOS.

Small change first

Organizations often encourage people to use collaborative apps, eliminate paper processes, and adopt mobile workflows. And in most organizations, people rely on screens for these tasks. Yet as we focus on our major change initiatives, we often overlook the relatively simple changes that make these screens easier to see. A small change in screen size can help reduce eye strain– and make larger changes easier to implement.

Have you adjusted the scaling or font sizes on your screens lately? Or have you helped someone else adjust their device settings to ease eye strain? Let me know in the comments on on Twitter (awolber).

Do you want to make your WordPress website mobile-friendly?

The reality is that a mobile-friendly website is no longer a “nice-to-have.” It’s an absolute must.

With over 55% of all web traffic coming from mobile devices, your website needs to support mobile responsive features and appear beautifully across screens of all shapes and sizes.

That’s why, in this article, we’ll show you how to make a WordPress website mobile-friendly.

Why Should You Make Your WordPress Website Mobile Friendly?

If your WordPress website isn’t fully responsive or mobile-friendly, then you’re letting tons of traffic fall through the cracks. Not convinced?

Here are a few reasons why your WordPress website should be fully mobile responsive.

Search Engines: If you want to rank in search engines, then it’s mandatory to make your WordPress website mobile-friendly. Search engines like Google encourage mobile responsive websites and discourage non-responsive sites.

Display and Visibility: A mobile-friendly WordPress website looks better on small screens and tablets. If your site isn’t responsive, then your visitors are more likely to leave right away, and your bounce rates increase. This has a negative impact on your SEO efforts.

Usage: Like we said earlier, more than half of all web traffic in the world comes from phones and tablets. You need to make your WordPress site mobile-friendly to connect with a broader audience.

Now that you know the importance of having a responsive website, let’s take a look at how to make a WordPress website mobile-friendly.

Method 1: Use a Mobile Responsive WordPress Theme

The easiest way to make your WordPress website mobile-friendly is to choose a mobile-responsive theme from the start. But what should you do if you’re already using a non-responsive theme?

In that case, it’s definitely worth your time to make an upgrade or switch to another mobile-friendly WordPress theme.

Luckily, most new WordPress themes are fully responsive by default. And many other non-responsive themes are updating their services to provide users with a mobile-friendly environment.

For our users, we’ve hand-picked the best WordPress themes. Take a look…

1. Divi – Comes With 100+ Pre-made Theme Packs

Divi is the most popular WordPress theme in the world. Aside from pre-made theme packs, Divi also comes bundles with Divi Builder, a drag and drop page builder.

That means regardless of your skillset, you can build a blog the way you want.

2. WP Astra – Free Theme From WordPress.org

WP Astra is one of the popular free themes in the WordPress.org repository. It works seamlessly with any WordPress page builders and is a good fit especially for those who are on a tight budget.

Each of these themes are mobile-ready and fully responsive from the get-go. That means your website will be ready to support your mobile traffic with little-to-no effort required on your end.

Method 2: Use Plugins to Make Your WordPress Website Mobile-Friendly

WPTouch Pro is a premium WordPress plugin with powerful settings to make your website mobile-friendly.

You need to create an account on WPTouch Pro using your email address and download the premium plugin. Your License Key show up in the dashboard, which you’ll need for later.

After that, you need to install and activate the WPTocuh Pro plugin. If you’ve never installed a plugin before, no worries. Just check out this step-by-step tutorial on how to install a WordPress plugin.

Once your plugin is activated, you need to click on the WPTouch Pro tab in your WordPress admin area. It’ll show you a setup wizard where you can start by selecting a language:

After that, you need to add the email address that you used to create your WPTouch Pro account. Then you’ll enter the license key from your WPTouch Pro dashboard.

When you’ve entered that information, click on the Activate License button and then on the Next arrow button:

Now you’ll see multiple themes for a website, blog, or online store. You can select a theme that best fits with your website and click on the Next arrow button:

To save time, you can skip all the other options and go directly to the last section, where you can click on the Configure Settings button:

This will automatically redirect you to the WPTouch Pro » Settings » General page. The settings include site title, landing pages selection, and the ability to enable or disable multiple options:

From there, you can visit the Site Compatibility tab to manage the settings for shortcodes, caching, and active plugins:

It also lets you enable or disable active plugins for your mobile site.

Now, you can go to the Devices tab to enable or disable mobile devices and browsers for your mobile website:

After that, you can click on the Menu Settings tab to manage the options for your mobile site’s navigation menu:

To customize your website’s navigation menu, you can visit the Appearance » Menus page in your WordPress admin area:

You need to go to the Menu Locations tab to add your mobile site menu to the WPTouch Pro Header Menu area.

If you don’t have a separate menu, you can create a new navigation menu for your mobile site. You can also use any other menu for the mobile view.

If you want to customize your mobile site theme, then visit WPTouch Pro » Settings page. From there, you need to go to Themes » Customize Theme tab and click on the Go to the Customizer button:

This takes you to the WordPress customizer where you can see a live preview of your website. You can easily manage your site title, colors, background, and other custom settings.

We hope this article helped you learn how to make a WordPress website mobile-friendly. You may also want to check out our article on best WordPress themes for mobile apps and software.

If you enjoyed this post, let us know in the comments section below, we’d love to hear from you!

Many websites, including How-to Geek, display a mobile version for users that are browsing the site on their phone. This is done to reduce bandwidth and look better on a smaller screen and resolution, but sometimes you really just want the full desktop version of a website. Read on to find out how to view the desktop version of any website on your phone.

There are plenty of reasons why you might want to use the full desktop version of a website on your mobile device. Some websites disable certain features from their mobile version that they may deem unnecessary or bandwidth-intensive. Other times it can just be a pain to navigate a mobile website when the data you need is displayed much more easily on the desktop version.

There are a lot of websites that don’t offer us a choice in how we view their site, so we have to take matters into our own hands. Knowing how to do this is also especially useful when you’re on a Wi-Fi network, in which case the mobile version of a website won’t really load any faster than the desktop version anyway.

Disabling the Mobile Version of a Website on iPhone or iPad

Since iOS 9, you can very easily switch to the desktop version of a website — there are two ways to do it. The first is to use the Share (the arrow) menu, and then choose Request Desktop Site.

The second way is to long-press on the reload button and choose Request Desktop Site from the menu.

Pretty simple, really.

Disabling the Mobile Version of a Website on Android

Google makes it much simpler and includes an option to enable desktop view in the default Chrome browser. Just click on the settings menu in the upper right corner and then check “Request desktop site.”

There are a lot of Android apps on Google Play that also carry this functionality, but downloading them just for this ability would be pointless since the default browser is able to do it. The only drawback to using the default browser on Android is that there isn’t a way to permanently enable desktop view. If you decide that, by default, you’d like to view every website in desktop view, you’ll need a third party app.

Disabling the Mobile Version of a Website on Windows

You can disable the mobile version of a website with Window’s default browser, Internet Explorer. To configure this setting, open Internet Explorer > More > Settings > Website preference.

The Simplest Method, Sometimes

Of course, the easiest way to get to the desktop version of a website is by selecting the desktop view link on the page itself — although most pages don’t have one.

Not every website has this option, so you can use the methods in this article as a quick workaround. Just remember that websites force you into mobile view to maximize your experience on their website, reduce your load time, and save you cellular data.