8 способов адаптировать ваш сайт для смартфонов

С тех пор, как мир перешел от настольных компьютеров к мобильным девайсам, дизайнерам нужно все больше фокусироваться на пользовательском интерфейсе. Но если они сделают привлекательный, удобный, уникальный сайт, который, однако, не оптимизирован под смартфоны, то получится лишь дизайн ради дизайна. Чтобы избежать этого, надо помнить о следующих правилах:
1. Не пренебрегайте стратегией «mobile first»
Количество мобильных веб-пользователей во всём мире уже достигло 1,2 миллиарда и в ближайшее время, скорее всего, будет только увеличиваться. Если вы уверены, что на ваш сайт будут заходить в основном с мобильных устройств, то не бойтесь в первую очередь обдумать, как он будет выглядеть на смартфонах, а потом уже на компьютерном мониторе. Это может показаться сложным, но стоит попробовать, если вы заинтересованы в удобстве ваших пользователей. Отличный пример такой работы: простой и понятный сайт Karimrashid.com .
2. Делайте верстку резиновой
Существует огромное количество экранов различных размеров, и невозможно выбрать только один, под который нужно создавать дизайн. Вам стоит создать макет, который максимально одинаково будет адаптироваться под различные разрешения. В данном случае при дизайне нужно опираться на размер в процентах, а не в пикселях.
3. Основная цель — функциональность
Функциональный сайт умеет предложить посетителям что-то сделать, и сделать быстро. Поэтому самые основные разделы сайта, например, поиск ближайшего магазина, поиск по продуктам, описание продуктов должны быть на виду, чтобы помогать посетителю достигнуть цели как можно быстрее. Это должно учитываться и в мобильной версии сайта: пусть в навигации сохранятся колонки, кнопки, инструменты и узнаваемые элементы дизайна. Пример: Purina.
4. Знай своего пользователя
Не пытайтесь угнаться за всеми трендами сразу, это может отпугнуть обычного пользователя. Сначала поймите, кто он, представьте, как обычно он ведет себя на сайтах. Современные пользователи делятся на две группы: одни занимаются бесцельным интернет-сёрфингом, а другие заходят туда только чтобы решить чётко поставленную задачу. Каждая группа требует особого подхода, главное понять, в какую из них вошла ваша аудитория.
5. Всегда пользуйтесь гайдами и библиотеками для разработчиков
В планировании пользовательского интерфейса стоит отталкиваться от платформы, на которой будет использоваться сайт. Учитывайте, что некоторые из них гибкие, другие — не очень. В любом случае, основные фишки сайта должны сохраняться и в варианте для смартфонов. Разработчикам под iOS нужно обращать особое внимание на основы дизайна, его стратегии, изображения и тому подобное (поможет iOS Human Interface Guidelines), а разработчикам Android — почитать побольше про юзабилити, стиль, компоненты сайта и верстку (поможет Android developers guide).
6. Весь контент должен быть доступен любому пользователю
Некоторые дизайнеры вместо того, чтобы сделать резиновую верстку, просто убирают кое-что из мобильной версии. Не лучшая идея. Делать урезанную версию сайта нечестно по отношению к пользователям смартфонов, это может привести к потере клиентов. Хороший пример, как поместить всё в мобильную версию: сайт BBC.
7. Дизайн, который будут трогать
Важно помнить, что у пользователей смартфонов не будет курсора, вместо него будет палец. Поэтому ваш дизайн должен быть удобным для пальцев всех размеров и форм. В этом вам поможет Touch Table.
8. Используйте инструменты сжатия
В наше время существует масса инструментов, способных сделать жизнь дизайнера проще. Например, можно воспользоваться этими скриптами для сжатия: HTML compressor и Gzip. Они автоматически удалят лишние компоненты. CSS minifier и CSS compressor помогут с CSS кодом. Для изображений используйте EWWW ImageOptimizer, smush.it , optiPNG, и jpegtran. Пример шикарной оптимизации изображений — сайт RyJohnson (правда, сейчас там пусто. Возможно, так автор статьи хотел сказать, что лучше всего оптимизации поддаются изображения, которых нет вообще. Ну или стоит зайти на сайт попозже).
Вывод: Мы и раньше догадывались, что дизайн на смартфонах будут трогать. Так что главный вывод из этой статьи — не бойтесь говорить банальности!