Мысли о разрешении экрана. Год спустя

В последнее время при разработке сайтов все меньше и меньше учитывается разрешение 800х600, что само по себе не удивительно, если взглянуть на статистику. Соответственно, либо сайты оптимизированы под 1024х768 и выше, либо они “резиновые”, что встречается реже.

Ситуация закономерная и соответствует развитию рынка мониторов и стремлениям дизайнеров/разработчиков. Я уже размышлял над этим год назад. Так вот, год спустя мои мысли приобрели немного другое направление.

Количество посетителей сайтов с разрешением 800х600 не только не уменьшится, а увеличится. Связано это напрямую с развитием субноутбуков, кпк, мобильников и прочих переносимых девайсов. Добрая половина субноутбуков уже сейчас имеет разрешение 1024х600, но сайт, оптимизированый под 1024х768, открытый на таком экране, в большинстве случаев будет неудобоваримым так как займет всё окно браузера. А в дизайне, как известно, важны пустоты.

Поэтому я предлагаю перестать игнорировать 800х600 и начать смотреть на этот вопрос под другим углом. Мне кажется разумным:

  • Создавать отдельный файл стилей, оптимизированый под маленькие разрешения экрана, для всех мобильных устройств .
  • С помощью PHP/JS создать функциональную возможность переключения файла стилей для владельцев настольных компьютеров с малым разрешением экрана.

Таким образом, мы убиваем одним выстрелом двух зайцев. У сайта появляется полноценная мобильная версия, и мы заботимся о посетителях с маленьким… разрешением.

Добавление файла стилей для мобильных устройств делается так:

<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

Про корректное оформление мобильной версии сайта можно почитать на старом добром ресурсе A List Apart.

Переключать стили можно с помощью JQuery вот так или так.

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

12 thoughts on “Мысли о разрешении экрана. Год спустя

  1. >> Добрая половина субноутбуков уже сейчас имеет разрешение 1024х768, но сайт, оптимизированый под 1024х600,

    Здесь ничего не перепутано?

    По теме – пользователи субноутов чаще всего сами знают на что идут. Лично меня спасает клавиша F11. С другой стороны – сетевые магазины активно рекламируют “настоящий ноутбук за смешные деньги”, поэтому среди пользователей есть и простые люди, не маньяки.

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

  2. @Михаил

    Спасибо, исправил.

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

  3. Да, к тому и идет, что маленькие разрешения перестанут игнорировать вовсе – пусть у моего еееПиСи с этим все неплохо, но порой многие элементы слишком уж малы – а ведь он 900-ка с достаточно большим экраном. “Более” мобильные устройства требуют еще большего отношения к отображению сайта на них. Во многих случаях нужно предоставлять даже совсем другое расположение функциональных блоков. Ново это все пока.

    “оптимизорованый” поправь, опечатка вкралась :)

  4. @marapper

    Вот я и предлагаю задуматься пока все еще ново :)

    Спасибо, исправил ачипятку.

  5. А вот сайтов оптимизированных под большее разрешение не встречал.На здоровых мониках по бокам огромные белые пространства которые режут глаз

  6. @Fay, ну почему, уже появляются. Я некоторые сайты оптимизирую под 1280, под большее разрешение пока не вижу смысла делать.

  7. Я оптимизирую под 1024, но так же забочусь, что бы небыло больших белых полос по бокам.
    На своем сайте: http://www.dnage.ru – если используется разрешение 1024х768, тогда видна страница на белом фоне.
    В случае, если разрешение 1280х1024 и выше – тогда пользователь уже видит голубой фон вокруг, что выглядит более приглядно, нежели был бы просто белый фон.
    На некоторых сайтах, я делал ширину страницы 80%, и по 10% оставлял по краям под фон. Тем самым: 1600х0.8=1024, т.е. для адекватного отображения картинки в шапке при 1600х1200, достаточно предусмотреть ее размер 1280 по ширине и т.д. Одним словом – тоже бывает довольно удобно.

  8. По теме:
    Конечно настроения которые звучат в статье и в комментах – довольно правильные. Хорошо когда сайт смотриться одинаково привлекательно и на большом мониторе, и на субноутбуке, и на мобильном телефоне. Но стоит заметить, что разработка сайта под различные разрешения (в том числе для мобильных телефонов) однозначно ведет к увеличению срока разработки, а следовательно и стоимости. Могу предположить, что версия сайта для мобильных телефонов увеличит стоимость разработки сайта в полтора раза, а то и больше (для небольших проектов где основную стоимость состовляет дизайн сайта и его верстка). В общем, веду к тому, что не многие станут доплачивать за мобильную версию сайта, а потому тенденция разрабатывать сайты под 1024 – сохраниться ещё долго. ИМХО.

    2 DNage:

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

    Вначале не понял, что это предложение означает. А потом зашёл на сайт, присмотрелся… и мне понравилось :). Довольно интересное решение. Действительно хорошо выглядит. Буду именть ввиду ;-)

  9. А есть гарантия, что handheld-устройства смогут обработать JQuery?

    Передо мной сейчас такая задача стоит, – придумать хорошее решение для больших разрешений, как на Widescreen или iMac.

  10. @azimsky, переключение через Jquery я привел в пример как опцию для переключения для субноутбуков, с телефонами действительно не все так гладко и не факт что отработает.

  11. Верстать надо нормально. Шрифты в em, блоки в %. Понажимайте Cmd-плюс, Cmd-минус здесь, на myfreeweb.ru и chikuyonok.ru. Не говоря о ресайзе окна.

    А для мобильников есть mobify.me, кстати, русские делают :)

Leave a Reply

Your email address will not be published. Required fields are marked *