И так, коротко, на что нужно обращать внимание при создании мобильной версии сайта:
—
оптимизация фотоконтента: обязательно нужно проводить оптимизацию для более быстрой загрузки изображений, как привило лучше всего использовать формат
webp; отдельно упомяну о важности включения отложенной загрузки и установки адаптивных размеров изображения, что безусловно будет влиять на скорость загрузки страницы;
—
убрать все крупные элементы в более лаконичные пользовательские интерфейсы: например, на десктопе у нас есть меню на весь экран, а на мобильно версии мы его спрячем в бургер, так будет лаконично и удобно;
—
увеличение кликабельных элементов: на десктопе у нас кнопки могуь быть любого размера, лишь бы они были уместно встроены в дизайн сайта, а вот на мобильной версии всё внимание при планировании интерфейса строиться от удобства, а значит мы должны понимать, что главное это возможность быстро и без труда попасть пальцем по кликабельному элементу, то есть мы должны учесть не только расстояние между такими элементами, чтобы случайно не попал пользователь не туда, но и учесть сам размер кнопки.
—
типографика: от того, как мы отнесёмся к текстовому контенту, будет зависеть, останется на сайте посетитель или сразу же уйдёт:
- размер текста: важно правильно определить в зависимости от выбранной гарнитуры размеры заголовков, подзаголовков и наборного текста, как правило наборный текст имеет наибольшие проблемы (рекомендуется устанавливать для него размер не менее 12 px, всё что менее либо для технической информации подходит, либо для тех гарнитур, которые будут сами по себе крупнить контент);
- отступы: также стоит обратить внимание на межстрочные интервалы (для наборного текста лучше всего от 140% до 160% (если у вас большой массив текста), при этом если у вас заголовок и буквы, соответственно, большие, то тут наоборот лучше всего это расстояние уменьшать, для лучшего восприятия текста для единого композиционного элемента), интерлиньяж (расстояние между букв) так же важно правильно выставить, чтобы не было ощущения, что каждая буква живёт своей жизнью (как правило это расстояние уже заложено и рассчитано идеально при создании гарнитуры и рекомендуется выдерживать значение 0, если это не мешает вашей дизайн задумке);
- жирность текста: в мобильной версии и в целом на сайте важно понимать, когда и где расставлять акценты, а главное, чтобы те же заголовки было видно на фоне самого экрана;
—
расположение контента или элементов взаимодействия: когда мы говорим про мобильную версию сайта, то мы должны учитывать тот момент, что пользователь будет держать мобильный телефон правой рукой и скорее всего её одной, а значит все кнопки и ссылки желательно размещать так и там, чтобы он смог их легко достать большим пальцем, а значит скорее всего либо по середине экран, либо справой стороны;
—
замена видео на изображения: иногда в целях оптимизации сайта лучше всего видео контент, при его, возможно, долгой загрузке отключить на мобильных устройствах и разместить вместо него изображение, на качество сайта это не повлияет и его восприятие, а вот на оценку при индексации поисковиком, да;
—
темная тема для сайта: конечно, темная тема — скорее про весь сайт в целом, но всё же если иметь ввиду использование сайтов на персональных компьютерах, то их мы используем как правило на столе с подсветкой и поэтому отсутствие темной темы не критично, а вот в мобильной версии сайта она на мой взгляд наиболее интересна для пользователя, тем более, если мы подразумеваем, что бОльшая часть посетителей всё же приходят через смартфоны. Независимо от того к какой сфере относиться сайт, в идеале лучше всего создавать темную версию сайта и закладывать на это бюджет.
Завершая свою небольшую статью, хотел бы отметить, что способов и технологий сделать сайт ещё более удобным для пользователя смартфона, конечно, больше, вы даже можете в комментариях дописать свои варианты. Верно лишь одно, наше с вами дизайнерское призвание требует в первую очередь делать сайты удобными и привлекательными не в угоду заказчику, а посетителю, поэтому без глубинной аналитики и хорошей насмотренности нам никуда.
