Ширина мобильной версии сайта

Впервые столкнувшись с задачей разработки дизайна адаптивного сайта, возникают вопросы, связанные с размерами макета. Эти вопросы возникают не только у дизайнера, но и часто у клиента. Дизайнер задает вопрос клиенту, под какие разрешения необходимо разработать макет, а клиент отвечает, под все. И тут возникает ступор, ведь разрешений множество, а если нет опыта, то все кажется сложным. Давайте будем разбираться.

Для начала нужно понимать, что при верстке сайта верстальщик работаем с диапазонами размеров, в которых дизайн корректно отображается.

Разрабатывая же макет будущего сайта в графическом редакторе (Photoshop) или сервисе (Figma), дизайнер не можем работать с диапазонами, ему приходится задавать жесткие размеры макета. Эти макеты веб-дизайнер создает с учетом минимального и максимального разрешения популярных экранов, которое определяет для проекта.

Для ПК версии возьмем разрешение 1920 px с контентной частью в 1280 px. Контентную часть можно сделать и больше, например 1440 px, или во всю ширину, если создается, например сервис или административная панель. На данный момент чаще используемый первый вариант. Для смартфонов самым минимальным разрешением считается 320 px. Таким образом, определили максимальное и минимальное разрешения. Далее нужно определиться с промежуточными разрешениями.

К таким разрешениям, относим планшет с горизонтальной и вертикальной ориентацией на 1024 и 768 px. А также макет для мобильных устройств на 480 px в горизонтальной ориентации. Если не создавать макет на 480, получается слишком большой диапазон разрешений попадающих между 768-320 px. Дизайн на таком промежутке за счет версии в 480 px будет гораздо лучше продуман и удобен.

Иногда вместо 320 и 480 разрабатывается один макет на 360 px. Но тогда верстальщику придется самому проверить дизайн после верстки на разрешение в 320, иначе получим сайт с некорректным отображением.

Итак, определились с разрешениями, под которые требуется создать макеты и таких макетов будет пять.

• ПК – 1920 px файл, контент под 1280 px без учета отступов на скролл и отступов справа и слева;
• Планшет 1024 px без учета отступов на скролл и отступов справа и слева;
• Планшет 768 px без учета отступов справа и слева;
• Смартфоны 480 px без учета отступов справа и слева;
• Смартфоны 320 px без учета отступов справа и слева;

Раньше на скролл отнималось 21 px как стандарт, но ширина скроллинга у браузеров изменилась и отличается. Но это не так важно, главное не забыть и учесть скролл при создание макета для ПК. Подробнее о том, как учесть скроллинг в макете читайте здесь.

Холст 1920 px создавайте только для ПК версии, на остальных разрешениях в размер. Разрешение в 1920 px дает возможность размещать фоновые изображения в блоках дизайна на ширину экрана.

Что касается отступов по краям

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

Обычно использую следующие отступы:

• Мобильные 10-15
• Планшет 15-20 px. Для разрешения в 1024 px использую холст на 1000 px это за вычетом скроллинга, потом от него отнимаю отступы.
• ПК контентная часть делаю в размер 1200 px, отступы зависят от сетки.

Подходы к созданию макета сайта Mobile First или Desktop First?

Кроме вопроса: «Какой размер макета сайта делать, создавая адаптивный дизайн?»

Задается еще и сопутствующий вопрос: «Какой из подходов создания правильнее Mobile First или Desktop First?»

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

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

Возможно, этот подход мне ближе, так как создаю дизайн сайтов давно. Изначально не приходилось разрабатывать столько макетов, а делалась лишь одна версия для ПК.

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

Как быть с плотностью пикселей экранов устройств?

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

В этом случае стоит обратить внимание на множитель плотности пикселей, который позволяет картинке отображаться на устройстве в несколько раз четче.

Зная множитель плотности пикселей, вы с легкостью определите какой макет и на каком устройстве будет отображаться.

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

Все больше и больше пользователей заходят на веб-сайты с мобильных телефонов. Компания Gfk опубликовала данные новых исследований: по статистике доля пользователей, которые используют мобильные устройства для поиска в интернете составляет 61%. Однако, дизайнеры часто совершают ошибки в проектировании макетов для мобильных телефонов. В этой статье мы поговорим об основных правилах дизайна сайта для мобильных устройств и приведем реальные примеры.

Правило 1. Адаптивность

Самое главное в дизайне сайта для мобильных телефонов – адаптивность. Если дизайнер не продумает расположение блоков, элементы могут «поехать», накладываться друг на друга или остаться очень мелкими и пользователю придется пользоваться зумом. Например, на сайте интернет-магазина книг блоки расположены также, как и на десктопной версии сайта, поэтому текст и изображения мелкие, приходится увеличивать макет и перемещаться по экрану в разных направлениях (нет скроллинга и навигации):

Чтобы этого не произошло, дизайнеру нужно позаботиться об адаптивности сайта. Мобильные устройства имеют ряд ограничений:

• маленький размер экрана;
• низкая скорость загрузки, по сравнению с компьютерами;
• сложности при вводе данных;
• некоторый контент не может быть отображен или отображается некорректно.

Все это учитывается при разработке адаптивной версии. Кроме того, наличие мобильной версии сайта повышает позиции ресурса в поисковых сетях, что влияет на количество переходов на сайт и, соответственно, количество потенциальных клиентов. Так выглядит адаптивная версия сайта IDBI:

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

Остальные правила относятся к проектированию адаптивной версии сайта.

Правило 2. Большие размеры

Так как телефоны имеют маленький размер экрана, элементы сайта должны быть видны пользователю, не должно быть затруднений при взаимодействии с интерфейсом. Например, кнопка «Купить» или «В корзину» должна быть заметна для пользователя, удобной для нажатия пальцем.

На примере – мобильная версия интернет-магазина «Озон». Кнопка зафиксирована внизу экрана, чтобы при прокрутке всегда была перед глазами. Выделена контрастным синим цветом для привлечения внимания. Достаточно крупная, для удобства при нажатии и при переходе в корзину. Также разработчики указали конкретное целевое действие: добавить в корзину товар определенной цены.

То же самое касается других элементов – форм, изображений, надписей и других блоков. Если элемент не привлекает внимание, неудобен для нажатия (например, пользователь «промахивается» и переходит на другую страницу), то есть большая вероятность, что клиент закроет сайт и уйдет к конкурентам.

Рекомендации по размерам элементов для нажатия: минимальный размер 26 px. Компания Apple рекомендует использовать размеры 44×44 px.

Правило 3. Крупная типографика

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

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

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

Правило 4. Ничего лишнего

Так как сайты на мобильных устройствах не смогут обеспечить пользователей всей функциональностью десктопных версий, дизайнерам следует отделить необходимую информацию и сделать контент полностью доступным. Для этого нужно убрать все лишние детали, которые усложняют дизайн и функционал сайта. Так выглядит десктопная и мобильная версия интернет-магазина одежды Lady Maria:

Десктопная версия

Мобильная версия

Как видно из примера, в мобильной версии убрали большое изображение с главного экрана и пользователь сразу переходит к категориям товара. Также уменьшили блок «Распродажа» – на мобильных устройствах акция отображается вверху в шапке, для привлечения внимания используется красная иконка со знаком %.

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

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

Правило 5. Контент в одной колонке

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

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

Правило 6. Нет поп-апам и виджетам

Некоторые инструменты на сайтах корректно отображаться могут только на десктопных версиях. Например, к ним можно отнести различные чаты с онлайн-консультантами, появляющиеся формы для подписки, поп-апы и прочее. На мобильных версиях они, как правило, раздражают пользователей или неадаптированы под меньший размер экрана («наезжают» на другие блоки, слишком нагружают сайт и прочее).

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

Если же без поп-апов не обойтись, лучше адаптировать их под размер устройства:

На сайте «Билайн» есть всплывающее окно с предложением оформить SIM-карту. Чтобы собрать лиды и не раздражать при этом другую группу пользователей, на всплывающем окне отчетливо видно значок закрытия, разработана очень простая форма: телефон и кнопка.

Правило 7. Доступные контактные данные

Основная цель сайтов с мобильной версией – призыв пользователя к целевому действию. В отличие от десктопной версии, главное целевое действие для мобильных устройств – получить звонок от клиента. Для этого делают следующее:

• размещают кнопку для телефонного звонка;
• контактные данные размещаются на первом экране, чтобы пользователь сразу обратил на них внимание;
• телефон компании делают кликабельной ссылкой, которая перенаправляет пользователя в контакты или сразу выполняет вызов.

Например, на нашем сайте значок телефона ведет пользователя сразу к совершению вызова через приложение на устройстве:

Пример 8. Социальные сети

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

Пример 9. Короткие формы

Заполнять длинные анкеты на телефоне – медленно и неудобно. Чтобы упростить пользователям ввод данных и побудить к целевому действию, формы разрабатывают следующим образом:

• если анкета предполагает большое количество полей, форму разбивают на несколько этапов;
• поля и кнопки делают больших размеров для удобного нажатия;
• кнопки выделяются, чтобы привлечь внимание пользователя;
• количество полей сводится до минимума;
• для некоторых полей применяется автозаполнение или размещается маска. Например, при заполнении поля «номер телефона» используется маска на ввод.

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

Вот как разработали форму для получения кредитной карты дизайнеры банка «Тинькофф»:

Достаточно сложная форма разбита на несколько шагов, добавлены различные интерактивные элементы (ползунок для выбора лимита), мотивация к действию (50% вероятность одобрения). Также добавлена маска для ввода телефона, поля крупные, добавлены подсказки на каждом шаге.

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

Правило 10. Пространство

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

Десктопная версия

Мобильная версия

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

Правило 11. Проектирование навигационных элементов

Чтобы пользователь понимал, где он находится, легко ориентировался на сайте и воспринимал контент, важно продумать навигацию на сайте. Более подробно мы писали об этом здесь. Для мобильных устройств это также важно: клиент должен быстро находить нужную информацию и знать, как заказать товар.

Самый распространенный прием – фиксированное меню. При скроллинге такое меню остается перед глазами и позволяет быстро переходить из раздела в раздел:

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

Правило 12. Целевая аудитория

Самый важный инструмент для анализа уровня конверсии сайта – использование аналитики. Сейчас есть множество сервисов и программ, которые позволяют отслеживать трафик, анализировать качество контента на сайте, выявлять целевую аудиторию сайта.

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

Также это правило касается используемых технологий на сайте. Пользователи iPhone не могут просматривать контент, который создан с помощью устаревшей технологии Flash-анимации. Поэтому нужно заменять такие инструменты на более современные, если большинство ваших клиентов используют устройства Apple.

Студия дизайна IDBI всегда разрабатывает несколько вариантов дизайна: для десктопа, планшетов, мобильных телефонов. Такой подход помогает предпринимателям получить большую прибыль с сайта, а пользователям – быстро найти нужный товар, связаться с менеджерами для уточнения информации. Примеры наших работ можно посмотреть в разделе «Портфолио».

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

Если кратко

Дизайн с резиновой версткой при минимальной ширине в 320 пикселей с элементами достаточно большими для удобного нажатия кончиками пальцев — наилучший вариант реализации мобильного веб-сайта.

Под какие устройства и разрешения экранов оптимизировать сайт

Однозначного ответа нет. Нужно смотреть с каких устройств на сайт заходит целевая аудитория. Но нужно принимать во внимание, что:

• Наиболее распространенный формат Андроид — 480×800 (hpdi), он соответствует всем смартфонам Samsung и большинству популярных Nokia.
• Второй по популярности формат — mdpi, 320×480
• Большинство смартфонов оснащены тач-скрином.

Макет сайта должен быть сделан в Фотошопе (или в таких программах как Figma). Обязательно должны быть адаптивные макеты. Каждая страница в базовых разрешениях.

Идеальный вариант когда шаблон сайта будет адаптивен и корректно отображаться при любом разрешении экрана. Или хотя бы под такие:

• 320×480 px — iPhone5
• 480×800 — HTC Desire, Nexus One, i9000 Galaxy S и другие
• 768×1024 — iPad
• 640×960 — iPhone 4
• 1000 и более×бесконечность — планшеты и десктоп

Базовая ширина экранов разных устройств

1. 320 px — Мобильные устройства (портретная ориентация);
2. 480 px — Мобильные устройства (альбомная ориентация);
3. 600 px — Небольшие планшеты;
4. 768 px — Планшеты (портретная ориентация);
5. 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
6. 1280 px и более — PC. (Сейчас распространенное разрешение на ноутбуке 1366 px. Есть и больше, как ПК, но редко встречаются).

320px	iPhone 5	портретная ориентация
384px	Android (Nexus 4)	портретная ориентация
480px	HTC Desire, Nexus One, i9000 Galaxy S и др.
568px	iPhone 5	альбомная ориентация
375px	iPhone 6	портретная ориентация
667px		альбомная ориентация
414px	iPhone 6 Plump	портретная ориентация
736px		альбомная ориентация
600px	Android (Nexus 4)	альбомная ориентация
768px	iPad	портретная ориентация
1024px		альбомная ориентация
1280px и более	PC	портретная ориентация

Какие факторы учитывать

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

• тип клавиатуры (физическая, тачскрин)
• разрешение и соотношение сторон экрана
• поддержка изменения ориентации экрана
• скорость передачи данных (2G, 3G, 4G)
• операционная система
• возможности браузера (масштабирование, поддержка Flash и AJAX)
• простота навигации (перейти на страницу всего в три нажатия, скроллинг должен быть вертикальным, а не горизонтальным, неплохо добавить кнопки переходов в самый верх страницы и на главную страницу сайта – это значительно повысит уровень удобства использования, обязательное наличие поиска по сайту.

Разрешения экранов мобильных устройств

240×320

• Nokia 6300, Nokia N92, Nokia N95, Nokia N95 8GB, Nokia N96
• Sony Ericsson W850i & W890i, Sony Ericsson W880i
• Apple iPod Nano 3rd & 4th generation
• HTC Wizard, HTC Tattoo, HTC Touch2

320×240

• Blackberry: Curve 8530, Pearl Flip
• Andro >320×480

• Apple OS: iPhone, iPod
• Andro >

480×360

Blackberry: Torch, Storm, Bold

360×640

Symbian OS: Nokia N8, Nokia C6-01 и другие

480×800

• Andro >768×1024

640×960

1280×800

• Andro >2048×1536

У iPad 3 дисплей Retina при плотности 264 пикселя на дюйм (это даже больше, чем в 15-дюймовых MacBook Pro).

У iPhone 4S — 326 ppi.

One Web

Учитывая большое количество разрешений, правильным решением было бы реализация проекта «One Web». One Web — означает создание, насколько это возможно, одинаковых условий для использования и отображения информации на всех устройствах. Но это не означает, что одна и та же информация будет выглядеть абсолютно одинаково на разных устройствах.

Как определить разрешение с помощью CSS

Определить ширину экрана, положение и соотношение сторон с помощью media-запросов, которые появились в CSS3.

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

Чтобы сократить количество запросов, можно использовать один файл таблиц стилей.

Сервис для проверки адаптивности

• responsinator.com

Насколько актуальна эта информация? Хотелось бы узнать современную статистику (по 2015г) по разрешениям мобильных устройств

Информация вполне актуальна.

Уважаемый, не вводите людей в заблуждение.

Вообще-то, в вебе разрешения экранов мобильников отличается от заявленного производителем, например, для верстки под iPhone4 нужно прописывать в медиаквери 320х480, а для большинства андройдов на 5′ — 360х640.

По факту, телефон может быть FullHD, а в вебе — 360х640 (пример — Google Nexus 5). Под 6-й iPhone вообще верстать приходится отдельно, так как у него в вебе разрешение — 375х667.

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

В наше время люди всё больше и больше стали отдавать предпочтение мобильному устройству, нежели персональному компьютеру. Поэтому для более удобной работы в интернете нужно адаптировать свои сайты для мобильных устройств. Всё сразу становится гораздо проще. Не нужно менять масштабирование, ориентацию и т.п. Иногда можно встретить довольно печальную картину — сайты на мобильном устройстве теряют свой дизайн, теряют удобство и привычное оформление, нежели при просмотре на персональном компьютере. В любом случае, адаптировать свой сайт можно на http://www.mobile-version.ru/ , низкая цена, быстрота выполнение работы и качество гарантированы.

Спасибо за обратную связь. Верстку поправим.

Мой интернет магазин работает почти полтора года, а мобильной версии у него до сих пор нет. Я решила, что удобство заказа со смартфона значительно повысит продажи. Времени разбираться с созданием адаптивного дизайна у меня совершенно нет, потому я решила обратиться к профессионалам. Именно адаптивный дизайн я считаю оптимальным вариантом — пусть сайт самостоятельно подстраивается под разные размеры экранов, не требуется кнопка перехода в мобильную версию. На одном из форумов мне посоветовали обратиться в mobile-version.ru. Откровенно говоря, я очень боялась за безопасность сайта, но прочитав особенности работы команды и отзывы, я стала значительно спокойнее. Здесь http://www.mobile-version.ru/ я отправила запрос на проверку, указала свои пожелания и выбрала способ оплаты ( в моём случае это перевод на карту Сбербанка). После предзаказа ребята со мной связались, пообещали выполнить работу не более, чем за неделю. Уже черз три дня (3!) адаптивная версия моего сайта была готова. Их работой я более чем довольна, а если учесть те копейки, которые я за нее заплатила, команда работает за спасибо. Кстати, по моей просьбе они устранили некоторые ошибки сайта, которые были до их работы. В целом я осталась очень довольна и всем своим друзьям я уже порекомендовала mobile-version.ru

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

Серебряной пули нет и не может быть. Только профессиональный дизайн с продуманным размещением каждого элемента по принципу mobile first и качественная верстка обеспечит удобство пользования интернет-магазином.

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

Не знаю, кто там в какие заблуждения ввёлся, но в статье всё чётко и по делу, все цифры по разрешениям можно легко проверить. Полезная и актуальная информация, но соглашусь, что данный сайт неплохо было бы подкорректировать на мобильных устройствах, убрать сайдбар, уменьшить шрифт, тогда в том числе и таблицам возможно вовсе и не понадобился бы горизонтальный скролл.
От себя добавлю, что если объединять стили, то лучше писать mobile first, чтобы стили переписывались под ПК или ноут, если потребуется, а на мобильниках грузились по минимуму, т.к. производительность на ПК заметно выше, нежели чем на мобильных устройствах и там это не будет особо критичным.