Адаптивный сайт это уже давно само собой разумеющийся факт. Встретить на просторах Интернета сайт без мобильной версии – большая редкость. Оттого при разработке сайта нужно уделить максимум внимания готовке дизайн-макета. На что обратить внимание и какие могут быть трудности – сегодня об этом.
Подготовка
Если вы заказываете разработку макета сайта, то дизайнер сам вас спросит про адаптивную версию. Порекомендует что-то от себя, поспрашивает вас, узнает пожелания. И вот тут то он и спросит про количество макетов для разных разрешений.
И здесь есть, как минимум, два варианта:
- вам нужна, скажем так, просто адаптивная версия сайта. Чтобы всё умещалось на экране, нормально читалось и масштабировалось;
- вы ориентируетесь на конкретные разрешения экранов (или конкретные устройства).
В первом варианте всё предельно просто. Здесь можно даже и не готовить дизайн такой версии, а чуть позже сказать разработчику, что нужна адаптивная версия без особых требований к ней. То, что в ней всё должно быть читаемо и в пределах экрана – и так понятно. Но если есть возможность – лучше всё же сразу сделать дизайн мобильной версии. Это поможет вам сразу понять, как будет выглядеть сайт на телефонах.
А вот второй вариант чуть сложнее. Особенно, если задача – на каждый экран вмещать строго определённый объём информации. Ни больше, ни меньше. В этом случае важно обращать внимание на количество контента для каждого экрана. Потому что всё равно есть некий критический объём, который будет влезать в экран при адекватно читаемом размере шрифта. Всё, что больше – будет либо вылезать на следующий экран, либо будет нужно уменьшать размеры всех элементов (картинки и текст).
Дизайним
Итак, если вам важен именно второй вариант, то в первую очередь нужно определить, какими устройствами пользуется ваша целевая аудитория. Чтобы банально узнать размеры экранов их телефонов/планшетов/ноутбуков.
Но даже если такой информации нет, то нужно её где то добыть. Или самостоятельно выбрать джентльменский набор размеров экрана, под которые будет нужно сделать адаптацию. Здесь есть очень (очень-очень) важный момент. Обязательно закажите разработку макета под ваши личные устройства. Если в итоге сайт будете принимать лично вы, то скорее всего вы и смотреть на сайт будете со своего ноутбука или смартфона.
А теперь представьте такую ситуацию: у вас готов один макет под настольные компьютеры (десктопная версия) и один под смартфоны. Для десктопа это будет 1920х1080 пикс., а для смартфона 390×844 пикс. (это iPhone 12, для примера). А вы пользуетесь iPhone 5 с его 320х568 пикселей.
Ясно дело, что на вашем телефоне контент запросто может не помещаться на экране. Просто потому что под ваш экран адаптации не сделано. А разница в пикселях хоть и небольшая, но всё-таки есть. И где-нибудь, это да вылезет боком при просмотре.
То же самое в ситуации с ноутбуком. Сайт свёрстан под разрешение 1920 по ширине, а ваш ноутбук выдаёт 1366. Маловато будет, вообще то. Так что не жалейте ни времени, ни денег, если для вас это действительно важный момент. Потому что здесь и начинается “на компьютере/телефоне нашего руководителя всё не так, нужно исправить”.
Вы только представьте себе – идёт стройка вашего дома. Готов первый этаж, почти готов второй. И в этот солнечный день вы приезжаете на стройку и говорите строителям: “Моя тётя посмотрела чертёж и ей кажется, что окно на первом этаже нужно передвинуть на 3 метра левее. Я тоже так считаю, поэтому давайте сделаем корректировочку. В рамках бюджета, естественно. Вам что, сложно обычное окно немного подвинуть?”.
Сайты-помощники
Чтобы избежать таких ситуаций, нужно изначально выбрать несколько размеров экрана, которые и будут в нашей контрольной группе. Обязательно нужно учитывать тот момент, что физическое разрешение экрана смартфона размер его видимой области это разные числа.
Ну то есть, тот же iPhone 12 имеет разрешение экрана 1170х2532 пикселя. При этом размер его видимой области при просмотре сайтов – всего 390х844 пикселя. Прямо сейчас зайдите на этот сайт и увидите viewport size – тот самый размер видимой области вашего экрана.
Для моего монитора разрешением 1920х1080 это будет 1903х927 пикселей. Куда же делась разница? Прикол в том, что здесь показан именно видимый размер экрана. 17 пикселей по горизонтали съела полоса прокрутки в браузере. 927 вместо 1080 по высоте – из-за панели задач Windows, полосы закладок браузера, его вкладок, адресной строки и так далее. Вот и получается, что ориентироваться нужно не столько на физическое разрешение экрана, сколько на его вьюпорт (размер видимой части).
Но если переключить браузер в полноэкранный режим, то по высоте мы сразу получим исходные 1080, хотя по ширине будет так же 1903 (полоса прокрутки никуда не делась). И вот интересно – часто вы смотрите сайты в полноэкранном режиме?
Есть другой сайт, который не учитывает полосу прокрутки, зато на нём можно посмотреть вьюпорты самых разных устройств. И оба сайта – отличные помощники при разработке дизайн-макетов.
Итого
Чем, значит, точнее будут цифры в самом начале работы, тем меньше волокиты и ненужных потерь времени будет в финале. Особенно всё это важно, когда вокруг нас уже и умные холодильники есть со своими собственными мониторами. А верстать сайт ещё и под холодильник – дело совсем недалёкого будущего.