Comments 44
Не люблю адаптивные версии сайтов. Пользуешься все время одним и тем же интерфейсом, а потом заходишь на этот же сайт с телефона и становится непонятно где что искать. Хорошо, если кнопка «обычный режим» есть.
Вы что-то путаете. Адаптивный != мобильная версия
UFO just landed and posted this here
Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах. (wiki)
Мобильная версия сайта является адаптивной версией сайта для мобильного устройства. Или я не правильно понимаю?
Мобильная версия сайта является адаптивной версией сайта для мобильного устройства. Или я не правильно понимаю?
Напрасно минусуете человека — это совершенно нормальное поведение пользователя, привыкшего к определенному интерфейсу.
Например поменялось меню и теперь вкладка «форум» не вторая справа, а третья снизу. Нужно снова перечитать все пункты меню и найти ее. И так с каждым элементом. Представьте себе, если бы в вашей квартире мебель менялась местами днем и ночью — вроде должно стать удобнее, но только если ты на 100% знаешь что и куда переехало.
Конечно есть удачные примеры адаптации, но рекомендую несколько раз подумать, прежде чем глобально перекроить страницу проекта.
Естественно речь идет о крупных площадках с большим количеством постоянных пользователей.
Например поменялось меню и теперь вкладка «форум» не вторая справа, а третья снизу. Нужно снова перечитать все пункты меню и найти ее. И так с каждым элементом. Представьте себе, если бы в вашей квартире мебель менялась местами днем и ночью — вроде должно стать удобнее, но только если ты на 100% знаешь что и куда переехало.
Конечно есть удачные примеры адаптации, но рекомендую несколько раз подумать, прежде чем глобально перекроить страницу проекта.
Естественно речь идет о крупных площадках с большим количеством постоянных пользователей.
Есть ещё одна вещь, которая отталкивает меня от адаптивного дизайна.
Это упрощение интерфейса. Так как разработчик делает одну страницу для разных устройств, то на ПК мы получаем почти ту же функциональность, что и на мобильном гаджете. А это невероятная деградация. Добавьте к этому то, что элементы интерфейса не могут нормально иметь два радикально разных вида (под палец и под курсор), и получаем, что страдает в основном курсор, т.к. «пальцев», то есть тачевых устройств, уже больше, чем ПК.
Из чего делаю вывод: если вы хотите сделать действительно качественный сайт, и вы не скупитесь на дополнительное время разработки, то сделайте три совершенно разные версии — для мобильников, для планшетов и для ПК. С разной функциональностью, и соответственно, различающимся весом.
Из минусов для разработчика я тут вижу только один — ему придется больше работать. С другой стороны, он сам ответственен за качество кода, который пишет.
Это упрощение интерфейса. Так как разработчик делает одну страницу для разных устройств, то на ПК мы получаем почти ту же функциональность, что и на мобильном гаджете. А это невероятная деградация. Добавьте к этому то, что элементы интерфейса не могут нормально иметь два радикально разных вида (под палец и под курсор), и получаем, что страдает в основном курсор, т.к. «пальцев», то есть тачевых устройств, уже больше, чем ПК.
Из чего делаю вывод: если вы хотите сделать действительно качественный сайт, и вы не скупитесь на дополнительное время разработки, то сделайте три совершенно разные версии — для мобильников, для планшетов и для ПК. С разной функциональностью, и соответственно, различающимся весом.
Из минусов для разработчика я тут вижу только один — ему придется больше работать. С другой стороны, он сам ответственен за качество кода, который пишет.
Пользователям мобильников и планшетов лучше дать возможность скачать приложение для работы с вашим сайтом, и уведомлять об этом при попытки просмотра сайта. А адаптировать сайт есть смысл для популярных экранов desktop & ipad и то без фанатизма.
Мобильные приложения меньшее из всех зол, так как можно использовать все возможности гаджета и интегрироваться в экосистему. Пользователи сколны пользоваться приложениями ( это удобно), больше чем кастрированными версиями сайта.
От разработчика потребуется знание не только web, но еще и мобильных технологий. Для ускорения разработки можно пользоваться например phonejs.devexpress.com/
Наверное такой подход подойдет не для всех ресурсов, но для большинства точно.
Мобильные приложения меньшее из всех зол, так как можно использовать все возможности гаджета и интегрироваться в экосистему. Пользователи сколны пользоваться приложениями ( это удобно), больше чем кастрированными версиями сайта.
От разработчика потребуется знание не только web, но еще и мобильных технологий. Для ускорения разработки можно пользоваться например phonejs.devexpress.com/
Наверное такой подход подойдет не для всех ресурсов, но для большинства точно.
Меня лично такой подход бесит. Особенно, когда с мобильного нет даже возможности посмотреть полную версию сайта (а только ссылка на установку приложения).
Кому-то, может, будет удобно поставить приложения для пары-тройки сайтов. Но ставить его для сайта на который ты заходишь в первый и последний раз… Тем более такие приложения часто хотят столько прав, что ужас берет.
Кому-то, может, будет удобно поставить приложения для пары-тройки сайтов. Но ставить его для сайта на который ты заходишь в первый и последний раз… Тем более такие приложения часто хотят столько прав, что ужас берет.
UFO just landed and posted this here
Я хотел сказать, что если выбирать между мобильной версией сайта и приложением для работы с сайтом — обычно выбирают приложение.
Лично я еще не видел удачных мобильных версий сайтов.
Лично я еще не видел удачных мобильных версий сайтов.
>Я хотел сказать, что если выбирать между мобильной версией сайта и приложением для работы с сайтом — обычно выбирают приложение.
В приложениях, обычно, не пошлёшь ссылку на конкретную страницу, не скопируешь текст, не сохранишь понравившуюся картинку и вообще можно сделать только то, что разработчик вспомнил/решил/согласился и реализовал. И не забыл про твою платформу, кстати (привет от владельцев телефонов на Symbian/WP/FirefoxOS/UbuntuTouch и прочих Palm'ов)
>Лично я еще не видел удачных мобильных версий сайтов.
Ну, например, мобильные версии сайтов VK и Emirates меня вполне устраивают.
В приложениях, обычно, не пошлёшь ссылку на конкретную страницу, не скопируешь текст, не сохранишь понравившуюся картинку и вообще можно сделать только то, что разработчик вспомнил/решил/согласился и реализовал. И не забыл про твою платформу, кстати (привет от владельцев телефонов на Symbian/WP/FirefoxOS/UbuntuTouch и прочих Palm'ов)
>Лично я еще не видел удачных мобильных версий сайтов.
Ну, например, мобильные версии сайтов VK и Emirates меня вполне устраивают.
Я в итоге так и не понял о чем речь. Сначала говорят что адаптивный дизайн тяжелее. Что, в общем-то, очевидно: тянем к клиенту верстку на все случаи жизни, а показываем только то, что нужно. Потом говориться о том, что это в общем-то проблема но, вроде как, и не совсем проблема: можно тут подкрутить, там подлечить, потом предлагается сервером отдавать разный контент(!) для разных устройств и все будет красиво. Так если сервером отдавать разный контент, нафига вообще адаптивный дизайн нужен?
Смотреть обычную версию на мелком экране не удобно. Не весь функционал нужен.
мне кажется, вопросы дизайна и профильных технологий, лучше рассматривать в отдельности, иначе холивару не будет конца). ну т.е. да, адаптивный дизайн нужен, чтобы адаптировать интерфейс к физиологическим особенностям юзверей и техническим возможностям клиентских девайсов. как это все реализовать на клиенте и сервере уже чисто инженерная задача. а где-то на стыке живут попытки сэкономить ресурсы, чтобы не верстать под каждый девайс в отдельности.
UFO just landed and posted this here
Так если сервером отдавать разный контент, нафига вообще адаптивный дизайн нужен?
Основной смысл это экономия при разработке. Если просто: 200 $ — адаптивный против 100 $ — мобильный 100 $ — планшетный 100 $ — полноценный 100 $ — ТВ. Итого профит, но у любого профита есть цена и суть поста(как я ее понял) выбирать надо золотую середину в зависимости от проекта.
Изначально не очень хорошо относился к адаптивному дизайну, как раз из-за размеров страницы и что все это ложится на клиента. А у мобильных телефонов не только экран меньше, но и возможностей по обработке информации тоже меньше(процессор, память и т.д.). Поэтому решили у себя делать отдельную версию — для мобильных устройств. Сейчас конечно есть проблемы, но по крайне мере пользователи не ждут пока загрузятся куча ненужных картинок и информации, которую они по сути не увидят.
А вообще за статью большое спасибо. Интересно было почитать.
А вообще за статью большое спасибо. Интересно было почитать.
А на хабре не будете публиковать этот «Usability и UX дайджест»?
Применяйте конкатенацию для всех CSS-файлов или используйте CSS Preprocessors, чтобы скомпилировать их в один файл.
Неужели действительно нужно собирать всё в ОДИН файл? Я всегда думал, что нужно искать компромисс между количеством загружаемых файлов и количеством «лишней» на данный момент загружаемой информации.
Все должно быть в меру. Если основной сайт тяжелый то ему точно нужна отдельная версия под мобильные устройства, в других случаях применятся адаптивка, правда подходить к ней нужно очень осторожно и не перелопачивать интерфейс так что потом при заходе с мобильного устройства этот сайт совершенно не узнать. А вообще я за отдельную кнопку (поддомен) для перехода на мобильную версию сайта, захотел и перешел и получил мобильный интерфейс вместе с меньшим кол-вом трафика заточенный под твое разрешение и тип девайса. Не нужно решать за меня что я хочу, я сам выберу оставаться мне на исходном сайте или перейти на мобильную версию.
ссылки от 2011-2012 годов настолько же устарели, как и ваша информация.
надеялся узнать что-нибудь новое, но, наверное, не судьба…
надеялся узнать что-нибудь новое, но, наверное, не судьба…
Вот эти ссылки на подборки разного добра 3-х летней давности не очень актуальны мягкагаваря.
p.s. опоздал с коментом, сорри )
p.s. опоздал с коментом, сорри )
Сайты, тяжелые на вид и в использовании (Facebook, Twitter, Pinterest), когда им необходима оптимизация для мобильной среды, прибегают к использованию техники ленивой загрузки (lazy loading) для обеспечения лучшего пользовательского опыта. Когда вы загружаете страницу впервые, загружается определенное число постов. Когда вы прокручиваете страницу вниз, дизайнер предполагает, что вы хотите увидеть больше контента, поэтому тот вставляется на страницу с помощью Ajax.
Для тех, кто делает твиттер-подобную подгрузку контента, в аду должен существовать специальный котел — с лестницей наверх, которая будет съезжать обратно в кипящее масло, как только грешник подбирается поближе к бортику. Вы поломали мой скроллбар, ироды!
Браузеры же умеют рендерить недогруженные страницы больше десятилетия. И никакого тормозящего js не нужно.
UFO just landed and posted this here
Больше всего в этом преуспели разработчики Flickr. После внедрения нового «justified view» вес страницы, которая отмотана вниз до предела (он там все же есть) вместе с огромными фото, которые средствами css уменьшаются и подгоняются по ширине окна и высоте строки, может достигать 40 Мб. Это ворочается с существенным трудом на atom-ных нетбуках. Все эти подгрузки по scroll без освобождения страницы от того, что ушло далеко вверх — форменное вредительство.
А еще веселее, когда в самом низу страницы есть ссылка, на которую тебе надо нажать, скажем, ссылка «Для разработчиков». И вот ты ее уже вроде как видишь, но тут чертов контент подгружается и надо листать дальше, пока все новости за 3 года не увидишь.
Особенно доставляет в гугле, в режиме поиска картинок, кнопка «Упрощенная версия» внизу результатов. Пока до нее дойдешь, ощутишь все прелести утяжеленной версии.
А также youtube очень меня разочаровал, когда стал использовать эту чертову ленивую загрузку для комментов у видео. Теперь после загрузки страницы еще надо ждать какое-то время, чтобы прочитать комменты. Неужели нельзя было хотя бы сделать чтобы они погружались в фоне, пока я смотрю видео?
Особенно доставляет в гугле, в режиме поиска картинок, кнопка «Упрощенная версия» внизу результатов. Пока до нее дойдешь, ощутишь все прелести утяжеленной версии.
А также youtube очень меня разочаровал, когда стал использовать эту чертову ленивую загрузку для комментов у видео. Теперь после загрузки страницы еще надо ждать какое-то время, чтобы прочитать комменты. Неужели нельзя было хотя бы сделать чтобы они погружались в фоне, пока я смотрю видео?
Или placeholder флэша — у фэйсбука всегда внизу страницы. При этом FlashBlock почему-то не хочет добавлять FB в белый список раз и навсегда — возможно, из-за https, а может, у меня хром кривой. Но включить флэш на фэйсбуке для меня всегда задачка не из легких.
>А еще веселее, когда в самом низу страницы есть ссылка, на которую тебе надо нажать, скажем, ссылка «Для разработчиков». И вот ты ее уже вроде как видишь, но тут чертов контент подгружается и надо листать дальше, пока все новости за 3 года не увидишь.
В Опере (12) это решается совершенно элементарно, кстати: F12→[ ] Enable Javascript → End → Click → F12 → [x] Enable Javascript.
>А также youtube очень меня разочаровал, когда стал использовать эту чертову ленивую загрузку для комментов у видео. Теперь после загрузки страницы еще надо ждать какое-то время, чтобы прочитать комменты. Неужели нельзя было хотя бы сделать чтобы они погружались в фоне, пока я смотрю видео?
Особенно неудобно это потому, что комментарии, обычно, видны на том же экране безо всякого скролла, зачем откладывать их загрузку на неопределённое время — непонятно. Особенно если топовый комментарий а-ля «видео — фуфло, заголовок левый, можно не смотреть»
В Опере (12) это решается совершенно элементарно, кстати: F12→[ ] Enable Javascript → End → Click → F12 → [x] Enable Javascript.
>А также youtube очень меня разочаровал, когда стал использовать эту чертову ленивую загрузку для комментов у видео. Теперь после загрузки страницы еще надо ждать какое-то время, чтобы прочитать комменты. Неужели нельзя было хотя бы сделать чтобы они погружались в фоне, пока я смотрю видео?
Особенно неудобно это потому, что комментарии, обычно, видны на том же экране безо всякого скролла, зачем откладывать их загрузку на неопределённое время — непонятно. Особенно если топовый комментарий а-ля «видео — фуфло, заголовок левый, можно не смотреть»
У меня как раз выбор недавно стоял между bootstrap 3, foindation 4. Решил остановиться на 2м. Она тоже не легкая, но можно обойтись без jquerly в пользу более легкой библиотеки. В холиварах как раз критиковали foindation 4 за то, что он ориентирован на мобилки. А я предпочитаю более быстрые технологии.
Мобильный рынок продолжает развиваться бешеными темпами.
А с ним и мобильные сети, и тарифы на мобильный Интернет, и мощности мобильных устройств.
Может быть, описанной проблемы вообще не существует?
Я вот раньше думал, как же не веб-программистам трудно с интерфейсом приходится, чтобы тянулся как угодно по размеру… Настал и наш черед :)
Есть ещё проблема размеров шрифтов. До сих пор в ходу 19'' мониторы с разрешением как на 4-5'' смартфонах. И здесь дело не только в размере, но и в ширине строки: слишком узко или слишком широко — и уже неудобно читать. Это до сих пор проблема большинства сайтов.
И ещё: у тачскринов нельзя навести курсор куда-то, можно только кликнуть. Из-за этого я не могу с планшета посмотреть схему зала местного кинотеатра, потому что меню на их дурацком сайте появляется при наведении, а клик перенаправляет на другую страницу (где ссылки куда надо нет).
UFO just landed and posted this here
Адаптивный дизайн хорош для блогов или лент новостей. ПРОСТЫХ вещей.
Для всего остального лучше бы купили технологию подгонки сайта по ширину у Оперы (как же мне не хватает этой технологии в Хроме :(
Для всего остального лучше бы купили технологию подгонки сайта по ширину у Оперы (как же мне не хватает этой технологии в Хроме :(
Sign up to leave a comment.
Адаптивный дизайн: теперь дело уже не в размере экрана