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

    В последнее время при разработке сайтов все меньше и меньше учитывается разрешение 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 вот так или так.

    Решения конечно могут быть другими, но главная мысль состоит в том, чтобы заботиться о всех посетителях сайта, в не зависимости от разрешения монитора.
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 100

      +2
      btw Может быть 1024x600? а то 1024х768 немного из другой оперы.
        +10
        Я не ошибся. 1024х768 — одно из разрешений стандартного 4:3 монитора. Widescreen — другой разговор, но принцип тот же.
          0
          Добрая половина субноутбуков уже сейчас имеет разрешение 1024х768.
          Asus eee 90x, msi wind, acer one и еще пачка современых девайсов имеет 1024x600.
          4:3 у них немного не в почете. Я даже затрудняюсь назвать современное устройство с 1024х768. Не просвятите, если их все-таки половина.
            +4
            Ок, теперь я понял о чем вы. Сейчас исправлю. Это я записался
              +10
              Кстати высота в данном случаее менее критична, в основном учитывается ширина.
                +3
                А владельцам ноутов с разрешением 1024x768 советую найти на клавиатуре кнопочку F11.
                  0
                  да и всем остальным можно ее посоветовать )
                    0
                    За совет спасибо. ) Горячие клавиши еще только изучаю и ваш совет пришелся весьма кстати.
                    +2
                    И высота важна, так что, надо задумываться как наиболее эффективно использовать большую ширину при маленькой высоте.
                      0
                      Высота очень даже критична. Просто представим такую ситуацию, что макет рисуется под 768. Из них рабочих получается 550-600 пикс. Представьте что на морде идет контент и он влезает в эту высоту-а теперь отнимаем 168 пикс-и получается что нужно постоянно скролить чуть вниз0это иногда очень бесит-особенно если работаешь с сайтом постоянно.
                  +5
                  А также другого ФФ и ИЕ. Сорри за оффтоп :)
                    +3
                    У вас кстати какая версия Оперы? ))
                  • UFO just landed and posted this here
                      +8
                      Люблю когда вещи делают методично и с упорством, даже если это минусование комментариев ))
                        +1
                        Я бы наверное даже пытался определить клиента, чтобы неподготовленный пользователь не пугался.
                          +1
                          Я имел ввиду автоматическое переключение стилей.
                          0
                          Сам часто пользуюсь этим способом для указания отдельной таблицы стилей для принтера. Только в коде кавычки двойные нужны, а не такие, как у вас.
                            +4
                            Парсер — лох
                            +1
                            действительно, у тех же таблеток от нокии разрешение экрана по горизонтали -800 точек
                            Так что за счет мобильных устройств парк машин с такими характеристиками экрана только будет пополняться
                              +1
                              да, 800x480, сам владелец такой таблетки.
                              Ну на сердце руку положа — вам всякие сайдбары в блогах нужны? вот с тем развесистым облаком тэгов и ворохом кнопочек и рекламы?
                              так что даже в случае такого экстремального разрешения раз на раз не приходится. А если учесть ещё желание увеличить раза в 2-3 размер шрифта, чтобы глаза не ломать, про оригинальную вёрстку остаётся только забыть.
                              0
                              где-то читал что рекомендовались как наиболее универсальный вариант резинки от 720×480 делать, и просматривать во всех режима
                                0
                                Логично, для разрешения 800х600 максимальная ширина окна браузера составляет 760px. Если учесть наличие небольших отступов от краев, то приблизительно так и выходит 720px. Другое дело что далеко не всегда реально реализовать «резину».
                                  0
                                  тут логика в другом ;) такая картинка уже проходит в тв и не требует спец адаптации, а ниже ужа начинаются vga режимы требущие спец адаптации
                              • UFO just landed and posted this here
                                • UFO just landed and posted this here
                                    +1
                                    Я в своем «прогнозе» забежал немного вперед, тем более Рунет не лучший показатель, но это вопрос времени. Как говорится «готовь сани летом...».
                                    • UFO just landed and posted this here
                                        0
                                        Дык с КПК в инет особо не полазишь пока. Вай Фай далеко не везде, гпрс тупой до ужаса, 3Г еще нету (в моем регионе точно — у вас не знаю). А если от домашней точки вайфаевской — то нафиг тогда с кпк сидеть? :)
                                        +1
                                        на графике нет 800 на 480 — широкоформатных кпк
                                        например, Toshiba Portege G9xx
                                        • UFO just landed and posted this here
                                            0
                                            Пока еще.
                                              +1
                                              Вы забыли о ASUS Eee PC 7xx. Не знаю сколько таких устройств в процентах, но нашумели они это уж точно.
                                            +2
                                            Что случилось в августе 2007? о_О
                                              0
                                              Хех, хороший вопрос :) Видимо упали цены на Widescreen
                                                +2
                                                Не совсем верно. Как видно из графина до августа 2007 Liveinternet считал 1280х800 и 1280х1024 вместе. В пользу последнего.
                                                  +1
                                                  Извиняюсь, опечатка *из графика, конечно :)
                                                    +2
                                                    Симпатичная опечатка получилась ))
                                                  • UFO just landed and posted this here
                                                0
                                                также на графике не хватает количества пользователей с очень большим разрешением… 1920*1200 к примеру

                                                0
                                                Месяц назад дали задание по-быстрому сделать сайт. Наваял не парясь структурку шириной в 1024 пикселей, думал 800 * 600 уже никто не юзает. Очень огорчил тот факт, что тётки за 50 в компании любят это(800*600) разрешение. Пришлось сжимать верхнюю менюшку до пяти разделов:(
                                                  +7
                                                  Любят потому, что при этом разрешении «все такое большое и все хорошо видно» :)
                                                    +4
                                                    Обычно, таких «продвинутых» пользователей можно игнорировать по причине их практически полной недееспособности в сети. Тяжко, конечно, приходится если они попадают под ЦА.
                                                    • UFO just landed and posted this here
                                                        0
                                                        Читайте внимательнее «Тяжко, конечно, приходится если они попадают под ЦА. „

                                                        Нет, я всё понимаю. Те, кто минусовал, видимо, не знакомы с аббревиатурами из лексикона проф. деятельности в сфере ПР.
                                                        • UFO just landed and posted this here
                                                    +1
                                                    Резину надо делать ^__-
                                                      0
                                                      Та эт понятно, было б всё так просто в ксске всё измерял бы в em'ах, но там я натягивал дизайн на движок Джумловский с компонентом отображения менюшки, там особенно неразвернёшься с настройками размеров(
                                                    –4
                                                    У меня дома моник 15 дюймовый (ну влом мне его менять!) — постоянно сталкиваюсь с этой проблемой и вынужден писать в поддержку сайтов о несправедливости. Что самое забавное — многие из них не могут найти такой монитор чтобы посмотреть самим как это выглядит — отсылаю скрины :). Это не просто неудобно пользоваться — а часто и невозможно добраться до ряда функций. Пример Хабр — «прямой эфир, облако тегов, компании» у меня в данный момент висят в одну колонку под комментариями (хотя это лучше чем над топиком как раньше :)), с некоторых страниц не могу отослать сообщение об ошибке — потому как кнопка «отправить» оказывается под текстом — я грешу на эффект 15 дюймов. Аналогичная ситуация и на ряде других крупных проектов.

                                                    Товарищи разработчики — пользуйтесь хотя бы http://browsershots.org/ — должна показывать как выглядит сайт в 80 браузерах — там же можно выбрать и разрешение экрана.
                                                      +17
                                                      У меня дома маленькие 5 ватные декоративные колонки — и я постояно сталкиваюсь с проблемой — невозможно слушать музыку, поэтому я уже написал очень много писем сотням музыкантам и десяткам студиям. Меня не просто не устраивает то, что басов как таковы у меня нет, верха шумят, а середина проваленна, что ниже уже некуда. Но больше всего меня бесит то, что я даже не могу различить слова, и насладится стерео панорамой трека.

                                                      Товарищи музыканты и звукорежисеры, выкиньте свои стуйдийные мониторы и купите в ближайшем переходе колоночки геньюс, и сводите по ним — вы знаете как это облегчит мне жизнь.

                                                      В заключении: Монитор то хоть цветной?
                                                        –1
                                                        Оффтоп: Д-Ж-И-Н-И-У-С! Д-Ж-И-Н-И-У-С!
                                                          –1
                                                          Ой, да хоть свен или дефендер. Суть то не в этом…
                                                            0
                                                            «Оффтоп: Д-Ж-И-Н-И-У-С! Д-Ж-И-Н-И-У-С! „

                                                            Интересно =)
                                                            У этого комментария сейчас рейтинг -0.
                                                            Два вывода:
                                                            1) рейтинг комментариев на хабре не целое число, а действительное;
                                                            2) разработчики проморгали не очень заметный, но все же классический баг (однажды на олимпиаде у меня была похожая ситуация, когда моё правильное решение выводило -0 а не 0 и тестирующая система считала это неправильным ответом).
                                                              0
                                                              Это значит, что сначала кто-то коммент минусанул, а потом некто плюсанул. -0 показывает в данном случае, что комментарий раньше имел отрицательный рейтинг.
                                                          • UFO just landed and posted this here
                                                              –16
                                                              Смешно. Также примерно реагируют некоторые кого я предупреждаю. К счастью в основном попадаются адекватные люди которым важны и те 2-3 процента аудитории лояльность которых (и свою профрепутацию) сохраняют одним небольшим исправлением.

                                                              Отношение к продукту складывается из мелочей. Юмористы.

                                                              В заключениЕ: аншлаг много потерял в Вашем лице.
                                                                –5
                                                                Монитор значит «влом» менять, а до разработчиков не влом докапываться? Очевидно что проблема в другом. Мне кажется, Вы уже осознали свою неправоту и глупость в данном вопросе.
                                                                  0
                                                                  Попрошу без оскорблений — никакой глупости нет. Разработчики на мне и на еще куче такого же народа (около 4 %) — зарабатывают — я их информирую и прошу принять меры. Дальше — если им дешевле привлечь по новой эту потерянную категорию (то есть например потратиться на рекламу) — они игнорируют, если они знакомы с маркетингом — они немного шевелятся и удерживают эти проценты (т.е. зарабытывают на 4 % больше на рекламе). В совокупности в зависимости от принятого решения они могут потерять/заработать до 8 % от дохода.
                                                                  На счет влом/не влом — мне проще покинуть проект где неудобно (думаю так делают и многие другие).

                                                                  А вообще — мне надоело тут что-то доказывать. Кому надо — мысль понял, остальное это клоунада. В итоге разработчик сам решит — что интереснее, пошевелить задницей (его работа) или разглагольствовать о малых процентах.
                                                                    +3
                                                                    4% имхо не то количество ради который стоит делать неудобно остальным. Тем более, что если у человека 15« моник, то как правило и для рекламодателей он неинтересен (раз уж даже на монитор деньги не выделил и мучает себе глаза, то и товар не купит).
                                                                    Можно еще Эксплорером 4м пользоваться и рассказывать как все сайты плохо смотрятся, и какие разработчики мудаки.
                                                                      0
                                                                      4% будут довольны, а 96% потеряют в функциональности. Посчитать баланс? :)
                                                                        +2
                                                                        заботиться о таких меньшинствах как 4% будут только в очень конкурентной среде.
                                                                          0
                                                                          Осознайте же! =)
                                                                  • UFO just landed and posted this here
                                                                      +3
                                                                      >> Что самое забавное — многие из них не могут найти такой монитор чтобы посмотреть самим как
                                                                      >> это выглядит — отсылаю скрины :)

                                                                      падсталом, отжигаешь про тестирование :))

                                                                      если девелоперам нужен 15'' моник, чтобы потестить как оно там в 800 на 600, то это психушка уже, а не девелоперы :))… даешь разные моники для разных разрешений под тесты сайтов :)))
                                                                        0
                                                                        Хотите тогда еще развеселю? Это происходило и происходит на очень популярных проектах (и с их разработчиками значит). Весьма вероятно что сами пользуетесь из проектами. Называть не буду — но 4 % для них это существенная доля посетителей. Они сами оказывают помощь в создании проектов.
                                                                        И они действительно просили прислать скрины. Причем недавно. Считаете что несмотря на десятки тысяч посетителей на ресурсах — они тупее Вас?
                                                                          +4
                                                                          причем здесь тупее меня, надо обязательно со мной сравнить? что это за показатель такой оригинальный? коэффициент тупости относительно w3coder'a? :) все, кто больше 1,35 молодцы? :))

                                                                          по вопросу, если нужно разжевать, пожалуйста:
                                                                          — я считаю, что разработчик не идиот, если ему нужен скриншот, чтобы проверить, как выглядит сайт у конкретного пользователя
                                                                          — я считаю, что разработчик абсолютный идиот, если ему нужен 15'' монитор, чтобы проверить, как выглядит сайт в разрешении 800х600
                                                                          — я считаю, что разработчик не идиот, если он в состоянии нажать кнопку «resize» в dev tool bar или поменять разрешение своего рабочего монитора, чтобы проверить, как выглядит сайт в 800х600
                                                                            0
                                                                            может они знают, но проверяют настойчивость пользователя? ;-)
                                                                        0
                                                                        Теряете Вы — приобретают другие. Оглядываются на Вас — недодают основной массе.
                                                                        Что полезнее для большинства?
                                                                          0
                                                                          насчёт «не могут найти монитор» — скорее всего обманывают. помоему 800x600, что на 15 дюймов, что на 21 дюйм невлезать будут одинаково.
                                                                            0
                                                                            browsershots.org весьма полезный сервис, спасибо за ссылку.
                                                                              0
                                                                              Ага. А ещё можно бодаться с разработчиками игр, что на моем трехгодичной давности нотбуке не идёт последний 3Д шутер.
                                                                              • UFO just landed and posted this here
                                                                                  0
                                                                                  Только мерцал при этом страшно, если память не изменяет максимум на таком разрешении он даёт 60 Гц.

                                                                                  А так да, пятнашки в основной своей массе спокойно держат 1024х768@85 или хотя бы 75 Гц.
                                                                                  • UFO just landed and posted this here
                                                                                +1
                                                                                Еще, доля 15 дюймов как минимум сохранится, так как в сеть постепенно доступ получают бюджетные учреждения и госструктуры — на нижестоящих уровнях бюджет не всегда позволяет менять мониторы по желанию (обычно они это делают по факту выхода из строя) — то есть выйдут в сеть они с мониторами образца даже 90-х годов. А это довольно много народу, и не всегда старушки и часто неплохо ориентируются в сети.
                                                                                  0
                                                                                  Я некоторые время назад был весьма удивлен той активностью, с которой даже в богом забытых конторах меняют элтшки на «плоские мониторы». Тоже 15'', но разрешение у них все-таки побольше.
                                                                                  +2
                                                                                  Преодолел лень и сходил посмотреть статистику разрещений экрана у посетителей моих творений. 800x600 — от 2% до 3% аудитории на разных сайтах, показатель стабилен (при том, что все они нормально смотрятся в этом разрешении). 320x240 немного ползет вверх. И еще становится все больше каких-то непривычных разрешений (видимо, из-за netbook'ов и прочих разных портативных игрушек).
                                                                                  То есть для себя смысла подгонять под что-то меньшее 1024x768 я не вижу. Но оно как-то само получается из-за вменяемой верстки :).
                                                                                  • UFO just landed and posted this here
                                                                                      0
                                                                                      Дизайнер может читать свой сайт на коммуникаторе во время прогулки. Поменьше попыток угадать пользовательские желания и побольше выбора дял пользователей.
                                                                                      +3
                                                                                      По ссылке, приведенной автором, типичный пользователь интернет в июле это американец, сидящий под Windows XP на IE6 с монитором 1024*768. :-). Просто так. Констатирую факт.
                                                                                        0
                                                                                        Это называется найти компромисс между технологичностью и красотой дизайна.
                                                                                        Для КПК и мобильных девайсов как верстать?
                                                                                        Отдельно?
                                                                                        Знаете очень неплохо реализовывать это посредством cms ( нормальной ), обычными «темами», только вот я не знаю не одной которая бы ГИБКО работала с темами (туда же относятся модули), знаете почему — правильно отсутствие унификации и дебилоподобная (по отношению к обычному юзеру) архитектура работы с моделями данных и вывода. Назовите нормальные?
                                                                                        Обязательно какие нибудь траблы… особенно мне «нравятся „когда таскают модули по коду ядра… а за echo "<div>трали вали</div>"
                                                                                        руки надо отрывать сразу, также как и за $content.=$content_module;
                                                                                        Нету дружественных cms (что freeware что коммерческих) в этом вопросе.
                                                                                          +1
                                                                                          Сила семантической css-верстки в том, что в большинстве случаев для создания мобильной/другой версии сайта достаточно изменить файл стилей.
                                                                                            0
                                                                                            Вы знаете, иногда мало просто изменить сайт внешне. Так как у компьютера и КПК соверженно разные юзкейсы и, как следствие, юзер-экспириенс. Так что зачастую приходится делать два разных сайта.
                                                                                              0
                                                                                              Не спорю. Если целесообразнее сделать отдельную версию — то так и надо сделать.
                                                                                                0
                                                                                                Зачем два разных сайта?
                                                                                                Неужеле нельзя разрулить темами или модулями?
                                                                                                  0
                                                                                                  Вы понимаете, что у ПК и КПК совершенно разные интерфейсы, размеры экранов. Поэтому и должны быть разные сценарии использования.

                                                                                                  Например в офисе я сижу за ПК с клавиатурой и мышкой в удобном кресле, а за КПК я пальчиком или палочкой пытаюсь попасть в маленький экран в трясущейся маршрутке.

                                                                                                  Технологически разные интерфейсы могут быть реализованы как угодно, я говорю, о том что нельзя взять и задменой CSS сделать из ПК версии сайта мобильную.
                                                                                                    0
                                                                                                    Ну правильно — темами.
                                                                                                    Взгляните на родителя ветки — мой топик.
                                                                                                    Я написал что темами в существующих cms — невозможно, для этого надо 2 сайта делать.

                                                                                                0
                                                                                                это в идеале :)
                                                                                                хотя согласен на 100%.
                                                                                                Просто когда слишком нагруженный дизайн — врядли вам удасться всё усмотреть.
                                                                                                При минимализме — это легко ;)
                                                                                                0
                                                                                                vBulletin- Система скинов и шаблонов позволяет полностью настроить выводимый контент именно на уровне скинов сайта. А система замещаемых переменных (для каждого скина своя) позволяет сделать принудительную замену картинок на ссылку >>>Картинка<<< например. Впрочем есть более гибкое решение- опция в настройках пользователя «показывать изображения». Одна проверка условия в коде шаблона- и можно выбрать, как структурировать контент. Конечно у такой гибкости есть и недостатки- с нуля написать скин для этого форумного движка стоит кучу времени и нервов, не все модули для движка следуют логике шаблонизатора vBulletin (помню как матерился, когда куча html-кода оказалась внутри модуля файлового архива), но это лучше, чем подход например DLE к построению шаблонов.
                                                                                                  0
                                                                                                  >не все модули для движка следуют логике шаблонизатора
                                                                                                  Т. е. как я и писал код модулей тягается по коду ядра.
                                                                                                  Не подходит.
                                                                                                    0
                                                                                                    Для модулей система хуков / плагинов, к ядру они никакого отношения не имеют. Это уже чистоплотность автора стороннего модуля- использовать функцию движка fetch_template или просто echo. Использовать те же хуки или писать в read me «в шаблоне ххх найти строки ууу и добавить туда zzz»
                                                                                                0
                                                                                                я конечно не в теме, но разве эти устройства не масштабируют размер экрана?
                                                                                                сам работал с оперой мини на SonyEricsson и там была удобная функция масштабирования.
                                                                                                Ну про iphone я вообще молчу, Сафари просто прелестно там справляется с этой функцией.
                                                                                                  +1
                                                                                                  При маштабировании сайт теряет свой изначальный облик, хотите Вы этого или нет. Кроме того, трафик нынче пока не бесплатный, специальный дизайн для мобильных устройств может сделать работу быстрой и дешёвой :)
                                                                                                    –2
                                                                                                    По поводу оптимизации размера конечного контента я с вами полностью согласен.
                                                                                                    Это не помешало бы, хотя я больше сижу на WiFi и меня это не очень трогает.
                                                                                                    Пока не окажусь за радиусом действия оного :)
                                                                                                    Да и при оптимизации конечный облик тоже может измениться в силу того что экран мобильного устройства может быть мал
                                                                                                    и не все что хотелось может разместиться с успехом.
                                                                                                  +1
                                                                                                  Все идет к тому, что хороший сайт должен быть адаптирован и под 320х240, и под 2048х1536. Пользователи обзаводятся устройствами самых разных весовых категорий, и я не думаю, что стоит сводить все к двум базовым версиям «под кпк/телефон» и «под ноут». Сайт должен быть спроектирован так, чтобы эти версии («темы») генерились по CSS-шаблону без ущерба для контента. В том числе такая экзотика, как текстовая/звуковая или даже двухмониторная тема для особо продвинутых. Причем желательно сделать это общепринятым стандартом, подобно кроссбраузерной верстке, и отделить эту рутину от собственно дизайна (хотя дизайнерам и юзабилистам работы прибавится).
                                                                                                    +1
                                                                                                    (Отдельно стоит и вопрос адаптации многих декстопных приложений, которые в низких разрешениях работают отвратительно, а преимущества высоких разрешений и нескольких экранов не особо используют.)
                                                                                                      +1
                                                                                                      Ага, и в итоге этот стандарт потребует еще переработки оконных менеджеров под все ОС… хорошая идея, вот только при попытке интегрировать её наверняка пойдет масса изначально ненужных вещей.

                                                                                                      Весьма пригодной к употреблению альтернативой представляется связка xml+xsl, в качестве примера возьмем даже вот это. Чем не решение — достаточно сменить ссылку на схему…
                                                                                                      0
                                                                                                      для субноутбуков и пр. мелкой техники нужно создвать «ПДА» версии и не трахать мозг дизайнеру
                                                                                                        +3
                                                                                                        Во-первых, ВСЕМ не угодишь — так можно дойти до того, что абсолютно под каждое разрешение создавать свою вёрстку. Во-вторых, 800 пикселей в ширину, как тут уже заметили, практически не встречается — на тех же субноутах 1024.
                                                                                                        Сам я юзаю 2 версии стиля — под 240x320 и под 1024х768 и выше.
                                                                                                          0
                                                                                                          интересный обзор, спасибо
                                                                                                          мне кажется, все таки от аудитории зависит сильно такое требование — есил сайт ориентирован на работу с офисного комппютера, субноутбуки не будут иметь решающей роли.
                                                                                                          • UFO just landed and posted this here

                                                                                                            Only users with full accounts can post comments. Log in, please.