Как выбрать ширину сайта или Интернет-магазина?

У большинства владельцев сайтов и онлайн магазинов перед запуском возникает вопрос:

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

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

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

Прежде чего, давайте начнем от начала.

Ваш будущий покупатель или посетитель взаимодействует с вами посредством онлайн магазина или сайта через Веб-браузер.

Размер самого браузера ограничивается разрешением экрана, на котором пользователь можем просматривать страницу.

И тот, кто сможет правильно подобрать ширину экрана сможет больше показать информации, или продуктов на продажу.

Помните Правило Первой Страницы — пользователь сразу оценивает первую страницу магазина или сайта сразу же.

Он рассматривает видимую часть магазина или сайта.

Если ваш сайт занимает по вертикали два или три экрана, не факт, что пользователь захочет прокручивать их ниже.

Для этого ему придется искать полосу прокрутки или крутить колесо мышки.

Чем больше вы сможете «втиснуть» в этот первый экран — тем больше шансов у вас будет на покупку товаров в вашем магазине.

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

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

Вопрос: как узнать какое разрешение экрана у моих посетителей?

Прежде всего, если у вас уже есть или был сайт — вы можете поставить себе системы учета посещаемости — например — Google Analytics от Google или Метрика от Яндекса.

Это продвинутые счетчики позволят вам отследить все нужные параметры.

Кстати, эти системы бесплатные, вам не нужно платить за них.

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

Цель этой статьи не знакомить детально про эти системы, однако я рассматривал эти системы вскользь в своей предыдущей статье:

Анализ работы сайта Интернет-магазина с помощью Google Analytics советы для улучшения работы

 

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

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

Тут получается дилемма: что первично, курица или яйцо ?

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

В этом случае, я бы рекомендовал ориентироваться на мировые тенденции и общую статистику пользователей.
Если раньше , в 2007 или в 2010 основным стандартом для дизайнеров и разработчиков было разрешение 1024 х 768, то чем больше больших мониторов, тем больше становится разрешение.

Источник: Разрешение экрана для пользователей России за 2020 год.

На сейчас популярным разрешением для пользователей России является FullHD – 1920×1080 пикселей.

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

В последнее время, есть смысл посмотреть на эти тенденции и ориентироваться на них.

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

Прошу вас также обратить внимание на тот факт, что нужно ориентироваться на реальности.

Смотрите статистику по России , а не США или Европу.

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

Детальнее по России (статистика доступна на сайте ЛайвИнтернет)

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

Обычно, это адресная строка, строка меню в шапке окна, закладки браузера и дополнительные инструменты, например от Яндекса, Гугли или даже виджет погоды.

Причем у всех браузерах это высота не одинакова.

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

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

Посмотрите, какие зоны «захватывают» браузера на странице:
Красным цветом показываются сервисные зоны, необходимые браузеру для работы.

это Chrome, Safari, YaBrowser. К ним примыкает Edge – так как Майкрософт ставит его броузером по умолчанию в своих операционных системах.

На эти браузеры вам стоит ориентироваться.

Информацию про них вы можете найти в свой статистике по сайту. Она доступна в Google Analytics (Гугл), Метрика (Яндекс).

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

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

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

Сделать это можно с помощью дополнительных Аддона Web Developer, который можно бесплатно установить в бразузер FireFox или Chrome.

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

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

Кстати, в статистике Google Analytics есть подобный инструмент.

Он позволяет прикинуть , какая доля пользователей могла видеть страницу в процентом соотношении.
Эта ценна информация, которая позволит вам оптимизировать ваш контент, например поднять его выше, в видимую зону первого экрана.

Совет! Не забывайте про мобильные устройства

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

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

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

Посмотрите, как отличаются обычная и мобильные версии магазина

Мобильная версия — это уже абсолютно другой формат электронного магазина. Детальнее про этот формат я расскажу в моих следующих статьях.

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

На них мы и будем ориентироваться.

Вопрос: что нужно показывать в возможную ширину страницы?

Прежде всего, нужно оптимально распорядится с отведенной шириной вашего магазина.
Что нужно пользователю ?

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

Блок «Недавно смотрел» – в нем показываются товары, которые вы только что смотрели на данном магазине. Вдруг вы захотите вернутся к товарам и все же купить их.

Блок «Рекомендуем» – в этом блоке обычно владельцы магазина показывают самые интересные или популярные товары.

Блок «С этим товаром часто покупают» – если вы покупаете фотоаппарат, почему бы вам не рекомендовать еще купить аккумулятор, карту памяти, чехол, штатив, оптику.

Сейчас есть несколько популярных схем размещения.

Какую из схем выбрать для вашей ширины — решать уже вам.

Современные движки магазинов позволяют владельцам самим настраивать, какие именно блоки размещать на странице.

С помощью визуальных конструкторов вы можете просто передвигать блоки в нужное место.

Работает это и в магазине на платформе PrestaShop.