Разрешение экрана и разметка страниц
Один из самых задаваемых вопросов на моём курсе по «Вебу» — «Под какое разрешение нам стоит делать свои дизайны?» Полный ответ будет немного мудреным, но основные советы очевидны:
* Оптимизируйте под 1024х768 — это самый распространённый размер экрана. Несомненно, ориентироваться нужно на разрешение экранов вашей целевой аудитории, и в будущем размер будет меняться. Размер уже может быть другим, если, скажем, вы создаёте интранет для компании, которая выдает своим сотрудникам большие мониторы.
* Не надо создавать сайты только под определённый размер экрана, так как размеры экранов пользователей различаются. Самих различий очень много, так как пользователи не всегда «максимизируют» свои браузеры (особенно если у них большие экраны).
* Используйте «плавающие» дизайны, которые растягиваются под конкретный размер окна пользователя (избегайте статичных дизайнов, которые всегда одного размера).
На сегодняшний день около 60% всех мониторов настроены под разрешение в 1024х768 пикселей. Для сравнения — около 17% выставляют 800х600, поэтому вполне очевидно, что не так важно нацеливаться именно на пользователей с маленькими дисплеями. Также очевидно, что нельзя игнорировать эти 17% и предоставлять своим пользователям такую разметку страницы, которая требует больше свободного пространства, чем есть у пользователя на самом деле.
Оптимизация под 1024х768
Когда я говорю «оптимизация», я имею в виду то, что ваша страница должна выглядеть и работать оптимально на самом распространенном разрешении. При этом она должна хорошо выглядеть и работать на других размерах, поэтому я и рекомендую «плавающий» дизайн. Но он должен быть лучшим при разрешении 1024х768.
Три самых главных критерия для оптимизации интернет-страниц под определённый размер экрана:
* Изначальный обзор: видна ли пользователям вся ключевая информация без прокрутки страницы? Это является компромиссом между количеством показанных предметов и насколько детально показан каждый предмет.
* Удобочитаемость: насколько легко прочитать текст в разных колонках с определённой шириной?
* Эстетика: насколько хорошо выглядит ваша страница, когда у всех элементов правильный размеры и правильное расположение? Все ли элементы правильно выстраиваются — например, находится ли подпись рядом с фотографией, и т.д.?
Вам необходимо держать в голове эти три критерия при всех возможных разрешениях, постоянно изменяя размер окна браузера от 800х600 до 1280х1204. Всё должно выглядеть на высоком уровне при всех разрешениях.
Также ваш сайт должен работать при более маленьких и при более больших размерах, но такие ситуации менее критичны. Меньше чем полпроцента пользователей работают с разрешением 640х480. При этом для таких пользователей ваш сайт должен отображаться вполне приемлемо с допустимыми отклонениями.
Как говорит первый критерий — нужно всегда брать во внимание прокрутку страницы. Обычно пользователям не нравиться прокрутка (в моей новой книге это детально описано вместе со статистикой, которая показывает, сколько пользователей прокручивают различные типы страниц). Итак, когда вы делаете дизайн, вы должны учитывать сколько информации увидят пользователи если прокрутят один или два полных экрана.
Прокрутка и изначальный обзор зависят от размера экрана: чем больше экран, тем больше информации он показывает и тем меньше нужно делать прокруток. Здесь вы и должны заниматься оптимизацией для 1024х768: показать самый важный материал не прибегая к прокрутке (вместе с этим необходимо убедиться, что критическая информация останется видимой при разрешении 800х600).
Итак, как на счёт крошечных экранов, например мобильные устройства. «Плавающий» дизайн должен изменить свой масштаб под мобильный телефон, но не думайте, что так надо делать сайт вашей компании. Среда мобильных телефонов имеет свою специфику; чтобы оптимизировать сайт под мобильное устройство, необходимо создать отдельный сервис, который будет предоставлять меньше функций, будет написан более сжато, и который будет ориентирован на содержание сайта.
Большие экраны
У многих пользователей большие экраны. В настоящий момент около 18% используют как минимум разрешение равное 1280х1024 пикселям. Процент пользователей с большими экранами растёт, но не так как я бы этого хотел.
Большие мониторы — самый простой способ повысить производительность, и любой, кто зарабатывает минимум $50,000 в год, должен иметь разрешение экрана не менее 1600х1200. Плоский дисплей с таким разрешением стоит меньше $500. Поэтому пока большие дисплеи повышают производительность как минимум на 0.5%, вы окупите своё вложение меньше чем за год (типичные корпоративные накладные удваивают издержки компании на сотрудника; всегда помните, что в любом подсчёте производительности необходимо использовать стоимость работ, а не зарплату).
Apple и Microsoft опубликовали отчёты, цель которых была подсчитать рост производительности от больших мониторов. К сожалению, результаты не дали хороших цифр потому, что присутствовали методологические ошибки. Мой опыт показывает, что когда пользователи делают свои работу на больших мониторах, то примерный рост производительности равняется 5-10%. Эти проценты переводятся в рост производительности примерно в 0.5-1% на одного человека, который делает работу, ориентированную на использование монитора 10% от одного дня. Нет сомнений, что большой монитор стоит своих денег.
Лично я использую дисплей с разрешением в 2048х1536 пикселей, и я даже не называю такой монитор большим. В течении следующих 10 лет, я ожидаю, что использование 5000х3000 мониторов станет обычным делом, как минимум среди профессионалов.
Начиная с 1600х1200, пользователи редко растягивают свои браузеры во весь экран потому, что мало интернет-сайтов хорошо работают на таких разрешениях. Большие окна — это волшебство во время работы с таблицами, с графическим дизайном, и с многими другими задачами, но не с настоящей парадигмой интернет-сайтов. Сегодня, интернет-пользователи с большими экранами утилизируют дополнительное свободное пространство несколькими окнами и параллельным серфингом в интернете.
Чтобы в будущем угодить интернет-пользователям, скорей всего нам будут нужны не индивидуальные страницы, а какая-то другая парадигма. А может даже метафора, похожая на новостную газету или на другую информационную доску, проявит себя в лучшем свете.
В любом случае, нужда в новой парадигме не изменит настоящих рекомендаций: оптимизируйте под 1024х768, но не создавайте дизайн только для этого размера. Ваши страницы должны работать на любом разрешении, от 800х600 до 1280х1024 и более.


Поделиться статьей:
Акция: Закажи любой сайт до окончания акции и получи скидку + подбор семантического ядра + поисковую оптимизацию сайта Это позволит Вам получать еще больше трафика и соответственно клиентов из Интернета!
До конца акции осталось
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
|
Узнайте подробности акции у менеджеров компании по телефонам: 8-924-200-7194 г.Хабаровск 8-800-550-9899 Бесплатно по России (с 3 до 11:30 по Мск) |
Новые статьи и публикации
- 2021-01-22 » PHP и регулярные выражения: азы для новичков
- 2021-01-22 » Факторы ранжирования-2021
- 2021-01-19 » Вопросы юзабилити: на что обратить внимание в 2021 году?
- 2021-01-12 » Алгоритм YATI: новая разработка Яндекса
- 2020-12-29 » DdoS-атаки: суть и способы защиты от них
- 2020-12-21 » Оплата за конверсии в Яндекс.Директе: в чём выгода и как проходит подключение?
- 2020-12-14 » Предновогодняя суета: как привлечь клиентов и активизировать продажи?
- 2020-12-03 » Ведение блога: на своём сайте или на специальной платформе?
- 2020-11-30 » Виджеты для веб-сайтов: влияние кнопок на продажи
- 2020-11-30 » CRM: что это и как помогает бизнесу?
- 2020-11-13 » Тепловые карты сайта: особенности и возможности для продвижения
- 2020-11-11 » Яндекс.Клиенты: всё о новых возможностях георекламы
- 2020-10-27 » Описания товаров для интернет-магазинов: секреты успешных продаж
- 2020-10-27 » Увеличиваем мобильный трафик: 10 способов привлечь новых клиентов
- 2020-10-14 » Определение CMS сайта: как это сделать?
- 2020-10-13 » Сайты-агрегаторы: сотрудничать или бороться за ТОП?
- 2020-10-05 » Интернет-магазин в Instagram: как его открыть?
- 2020-09-28 » Интернет-тролли: как с ними бороться и не подмочить репутацию?
- 2020-09-17 » Bing: обновление для веб-мастеров
- 2020-09-15 » Подключение платформы Яндекс.Диалоги на веб-сайт
- 2020-09-07 » Яндекс.Вордстат: как это работает?
- 2020-08-27 » Настройка аудиорекламы в социальных сетях: как её выполнить?
- 2020-08-21 » Текст для карточки товара: как сделать идеальное описание?
- 2020-08-17 » Сайты-визитки: какими они должны быть?
- 2020-08-10 » Оценка страниц Google: как это работает?
- 2020-07-30 » Онбординг: получаем признание клиентов за несколько секунд
- 2020-07-23 » Особенности YMYL в Google
- 2020-07-21 » Лид-магниты: секреты притяжения клиентов
- 2020-07-09 » Проверка оптимизации сайта: выполняем SEO-анализ самостоятельно
- 2020-07-07 » Игра в портретиста: как определиться с целевой аудиторией?
Предоставляем полный комплекс услуг по созданию, обслуживанию и продвижению сайтов по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.