В последнее время при разработке сайтов все меньше и меньше учитывается разрешение 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 вот так или так.
Решения, конечно, могут быть другими, но главная мысль состоит в том, чтобы заботиться о всех посетителях сайта, вне зависимости от разрешения монитора.
>> Добрая половина субноутбуков уже сейчас имеет разрешение 1024х768, но сайт, оптимизированый под 1024х600,
Здесь ничего не перепутано?
По теме – пользователи субноутов чаще всего сами знают на что идут. Лично меня спасает клавиша F11. С другой стороны – сетевые магазины активно рекламируют “настоящий ноутбук за смешные деньги”, поэтому среди пользователей есть и простые люди, не маньяки.
Кроме разрешения у субноутов есть ещё проблема маленькой диагонали. Зачастую, шрифт, который был нормально читаем на полноценном мониторе, становится аццки мелким на сабноуте.
@Михаил
Спасибо, исправил.
Так или иначе, эта тема уже становится вопросом, который нельзя продолжать игнорировать.
Да, к тому и идет, что маленькие разрешения перестанут игнорировать вовсе – пусть у моего еееПиСи с этим все неплохо, но порой многие элементы слишком уж малы – а ведь он 900-ка с достаточно большим экраном. “Более” мобильные устройства требуют еще большего отношения к отображению сайта на них. Во многих случаях нужно предоставлять даже совсем другое расположение функциональных блоков. Ново это все пока.
“оптимизорованый” поправь, опечатка вкралась :)
@marapper
Вот я и предлагаю задуматься пока все еще ново :)
Спасибо, исправил ачипятку.
А вот сайтов оптимизированных под большее разрешение не встречал.На здоровых мониках по бокам огромные белые пространства которые режут глаз
@Fay, ну почему, уже появляются. Я некоторые сайты оптимизирую под 1280, под большее разрешение пока не вижу смысла делать.
Я оптимизирую под 1024, но так же забочусь, что бы небыло больших белых полос по бокам.
На своем сайте: http://www.dnage.ru – если используется разрешение 1024х768, тогда видна страница на белом фоне.
В случае, если разрешение 1280х1024 и выше – тогда пользователь уже видит голубой фон вокруг, что выглядит более приглядно, нежели был бы просто белый фон.
На некоторых сайтах, я делал ширину страницы 80%, и по 10% оставлял по краям под фон. Тем самым: 1600х0.8=1024, т.е. для адекватного отображения картинки в шапке при 1600х1200, достаточно предусмотреть ее размер 1280 по ширине и т.д. Одним словом – тоже бывает довольно удобно.
По теме:
Конечно настроения которые звучат в статье и в комментах – довольно правильные. Хорошо когда сайт смотриться одинаково привлекательно и на большом мониторе, и на субноутбуке, и на мобильном телефоне. Но стоит заметить, что разработка сайта под различные разрешения (в том числе для мобильных телефонов) однозначно ведет к увеличению срока разработки, а следовательно и стоимости. Могу предположить, что версия сайта для мобильных телефонов увеличит стоимость разработки сайта в полтора раза, а то и больше (для небольших проектов где основную стоимость состовляет дизайн сайта и его верстка). В общем, веду к тому, что не многие станут доплачивать за мобильную версию сайта, а потому тенденция разрабатывать сайты под 1024 – сохраниться ещё долго. ИМХО.
2 DNage:
Вначале не понял, что это предложение означает. А потом зашёл на сайт, присмотрелся… и мне понравилось :). Довольно интересное решение. Действительно хорошо выглядит. Буду именть ввиду ;-)
http://www.w3.org/TR/css3-mediaqueries/
@media all and (max-width:1024) {
}
А есть гарантия, что handheld-устройства смогут обработать JQuery?
Передо мной сейчас такая задача стоит, – придумать хорошее решение для больших разрешений, как на Widescreen или iMac.
@azimsky, переключение через Jquery я привел в пример как опцию для переключения для субноутбуков, с телефонами действительно не все так гладко и не факт что отработает.
Верстать надо нормально. Шрифты в em, блоки в %. Понажимайте Cmd-плюс, Cmd-минус здесь, на myfreeweb.ru и chikuyonok.ru. Не говоря о ресайзе окна.
А для мобильников есть mobify.me, кстати, русские делают :)