Comments 71
Вот тут mediaqueri.es/ можно найти очень много интересных примеров адаптивного дизайна.
Да, вы правы. Вот, собственно, топик автора сего чуда.
Хорошее направление. Зачастую, перед автором проекта встает вопрос — использовать адаптивный дизайн/ отдельный шаблон или мобильное приложение. Если не требуется получения доступа к функциям телефона, то плюсы такого подхода будут очевидны.
Да, вы правы. С одной стороны, если речь идёт о вашем собственном проекте, то лично я бы выбрал именно этот подход. А заказчикам до сих пор нужна совместимость со старыми IE. Ну вы меня поняли…
Не очевидны — зависят от контента и сценариев использования сайта. Для крупных сайтов отдельный шаблон часто может быть более подходящим решением.
К примеру, мобильный пользователь с большей вероятностью будет заходить на сайт чтобы быстро узнать номер телефона или карту проезда в офис, а не полистать портфолио или почитать объёмные тексты «о компании». Поэтому не всегда правильно, как ниже в комментах отметили, грузить весь контент с красивостями и мегабайтами картинок.
К примеру, мобильный пользователь с большей вероятностью будет заходить на сайт чтобы быстро узнать номер телефона или карту проезда в офис, а не полистать портфолио или почитать объёмные тексты «о компании». Поэтому не всегда правильно, как ниже в комментах отметили, грузить весь контент с красивостями и мегабайтами картинок.
Вы приводите какой-то частный пример в данном случае. Например, чем www.bostonglobe.com/ не крупный сайт, или сайт того же Барака, извините, Обамы?
Что касается плюсов:
— отображение на всех устройствах (единый стиль, все плюшки)
— доступен для всех пользователей
— не надо ничего скачивать
— удобно с точки зрения SEO
— легко обновлять
— не надо возиться со всякими сторами
— легко выводить рекламный блок в удобном формате
Минусы:
— низкая персонализация
— проблемы при наличии тяжелой графики
— доступ к функциям телефона
Что касается плюсов:
— отображение на всех устройствах (единый стиль, все плюшки)
— доступен для всех пользователей
— не надо ничего скачивать
— удобно с точки зрения SEO
— легко обновлять
— не надо возиться со всякими сторами
— легко выводить рекламный блок в удобном формате
Минусы:
— низкая персонализация
— проблемы при наличии тяжелой графики
— доступ к функциям телефона
Можно к линкам добавить подборку полезных инструмента для создания адаптивных сайтов
можно конечно воспользоваться гуглом, а можно было и ссылки для каждого примера сразу привести
Ссылки есть при нажатии на скрины. А посмотреть работу адаптивного дизайна, можно просто потаскав за угол окно браузера :)
Потаскайте кота за я#ца называется. Извините, ради бога, не удержался. :)
О.О Вот тут говорят о качественном дизайне, а сами допускают одну из основных ошибок — при клике на картинку человек переходит на ее полный размер. Я вот тоже пока не прочел Ваш камент не понял что пример идет по клику на картинку, все на заголовки мышку наводил в надежде что она подчеркнется и в палец превратится.
Извините, не совсем вас понял. Если вы о самих сайтах, то все изображения кликабельны.
UFO just landed and posted this here
Собственно, когда будет свободное время, собираюсь написать топик «о внедрении для самых маленьких».
Буду рад познать истину :)
Хорошо, постараюсь побыстрее написать… Хотя в ближайшую неделю не обещаю. Работы много + интервью с Джефри провожу. Почитайте материал по ссылочкам пока.
Еще по теме в Советах у Горбунова.
Предлагаю все же называть такую верстку «адаптивной», а не «резиновой». Та верстка, что называется резиновой, основана на других приемах и техниках, хотя и свободно комбинируемых. Их следует разделять хотя бы чтобы не путаться и не вводить в заблуждение других.
Есть очень интересные решения, но часть всё же обладает дизайном, который «резиновым» сложно назвать — макетная сетка не на десктопах имеет фиксированную ширину и не адаптируется при её увеличении. Полноценные «резиновые» же решения хороши при масштабировании доступного пространства в обе стороны.
А знаете что плохого в таких дизайнах? Для мобильной версии грузится тонна ненужного хлама, это хорошо когда сидишь в кафешке с бесплатным вайфаем, но вот что делать если ты зашел вдруг по дороге на работу с очень даже платным 3G или еще более платным GPRS?
Нет предела совершенству… Конечно, гораздо удобнее, когда существует специальная легкая мобильная версия. Но когда выбор стоит между обычным дизайном и адаптирующимся под мобильные устройства, все-таки предпочтение будет отдано второму варианту.
Давайте тогда зайдем с другой стороны, берем 5 первых сайтов:
1) www.fork-cms.com/ (26 559 + 12 423 432 байт)
2) simplebits.com/ (35 646 + 2 683 625 байт)
3) www.whitelotusaromatics.com/ ( 4 342 + 1 196 182 байт)
4) cssgrid.net/ ( 11 129 + 221 212 байт)
5)http://atlason.com/ ( 11 129 + 221 212 байт)
А теперь самое интересное:
Я зашел с телефона на 5 сайт, и как Вы думаете что я там увидел? Слипшиеся и нечитаемые буквы, тоесть мне придется зумить. А если был бы нормальный мобильный шаблон, то не пришлось бы. Зумить я могу и обычный сайт (в обратную сторону)
Лично мне такие шаблоны не нужны, и как пользователю, и как разработчику. И это все при том, что разработка таких шаблонов скорее всего выйдет медленней чем разработка двух отдельных, для большого брата и маленького.
1) www.fork-cms.com/ (26 559 + 12 423 432 байт)
2) simplebits.com/ (35 646 + 2 683 625 байт)
3) www.whitelotusaromatics.com/ ( 4 342 + 1 196 182 байт)
4) cssgrid.net/ ( 11 129 + 221 212 байт)
5)http://atlason.com/ ( 11 129 + 221 212 байт)
А теперь самое интересное:
Я зашел с телефона на 5 сайт, и как Вы думаете что я там увидел? Слипшиеся и нечитаемые буквы, тоесть мне придется зумить. А если был бы нормальный мобильный шаблон, то не пришлось бы. Зумить я могу и обычный сайт (в обратную сторону)
Лично мне такие шаблоны не нужны, и как пользователю, и как разработчику. И это все при том, что разработка таких шаблонов скорее всего выйдет медленней чем разработка двух отдельных, для большого брата и маленького.
у меня получились цифры поменьше, форк — 700кб, симплебитс — 1,8мб, но всё равно впечатляет…
форк — 700кб
На самом деле так и есть. Там CSS и JS передаются упакованными gzip, поэтому они укладываются в 700К. Но несжатые файлы огромны.
Я просто из хрома сохранил страницу на диск. он же уже распакованное сохраняет.
Да, Вы правы, я перепутал страницы когда размер смотрел =) Но всеравно для мобильных приложений пусть даже 500 кб на страницу это много. Причем из двух цифр что я приводил, первая сам хтмл (который не кешируется) а остальное все догружаемое (картинки, стили, скрпты, опять же не все кешируется). Именно по этому я против таких ухищрений, с первого взгляда это удобно и красиво, тут спору нет, это очень удобно, но лишь для десктопа и бесплатного вай-фая.
Почему, блин, верстальщики (или менеджеры, выдающие им задание) прнебрегают реальной резиновой версткой? 86,45% сайтов ни фига не тянутся даже на 1600 по горизонтали, не говоря о 1920+. В тоже время при масштабе ~300% на этих же разрешениях появляются горизонтальные скроллинги. Хабр — не исключение.
UFO just landed and posted this here
Потому что резиновая верстка далеко не всегда так хороша, как многие думают.
1. Неизбежные потери внешнего вида (открыл сейчас главную amazon`а и ухмыльнулся… даже ozon выглядит лучше), плюс двойной-тройной гемморой для дизайнера/верстальщика.
2. Давно заметил, что воспринимать содержимое шириной ~800-1000px гораздо приятнее, чем бегать глазами от одного до другого края «метрового» монитора.
3. От обилия контента заполняющего все свободное пространство, частенько начинает рябить в глазах. Что в сочетании со вторым пунктом может довольно сильно снижать удобство пользования сайтом.
А вот вариант предложенный в топике, видится мне достаточно интересным.
1. Неизбежные потери внешнего вида (открыл сейчас главную amazon`а и ухмыльнулся… даже ozon выглядит лучше), плюс двойной-тройной гемморой для дизайнера/верстальщика.
2. Давно заметил, что воспринимать содержимое шириной ~800-1000px гораздо приятнее, чем бегать глазами от одного до другого края «метрового» монитора.
3. От обилия контента заполняющего все свободное пространство, частенько начинает рябить в глазах. Что в сочетании со вторым пунктом может довольно сильно снижать удобство пользования сайтом.
А вот вариант предложенный в топике, видится мне достаточно интересным.
Что показательно, большинство примеров либо сайты веб-студий и\или художников, либо вообще проекты самих фреймворков\гридов. С контентом не доходящим до 50 страниц и, естественно, тщательно вылизанных.
В теории всё хорошо и правильно, но я с содроганием пытаюсь представить что будет, когда очередной контент-манагер воткнет неформатированный текст из ворда, или воткнет парочку лишних тегов, таблиц с фикс. шириной 568px и прочие прелести.
Жизнеспособность в «реальном вебе» имхо весьма ограниченна и по сути геморройность приближается к ведению второго сайта.
В теории всё хорошо и правильно, но я с содроганием пытаюсь представить что будет, когда очередной контент-манагер воткнет неформатированный текст из ворда, или воткнет парочку лишних тегов, таблиц с фикс. шириной 568px и прочие прелести.
Жизнеспособность в «реальном вебе» имхо весьма ограниченна и по сути геморройность приближается к ведению второго сайта.
Не вижу ни одного рускоязычного сайта, тренд не дошел до нас?
Дошел пока только до веб-студий, которые стали предлагать такую услугу. В остальном, хороших примеров пока не видел. Например, сайт студии webmark.com.ua.
Например, wedeal.ru
У нас на подходе несколько проектов с адаптивным дизайном. На основе одного из них планирую написать how-to статью для Хабры по адаптивному дизайну, начиная от проектирования и заканчивая программированием.
У нас на подходе несколько проектов с адаптивным дизайном. На основе одного из них планирую написать how-to статью для Хабры по адаптивному дизайну, начиная от проектирования и заканчивая программированием.
Не плохо. Но таки, все же часть (не самая большая, по предварительному просмотру примерно процентов 25) страдает от другого — он не поддерживаю изменение шрифтов со стороны пользователя.
Я вот люблю чтобы минимальный шрифт был больше определенного размера (ну или 150%+ dpi общий), это удобно — особенно когда вывод идет на проектор.
Так вот, эти товарищи любо лочат размер шрифтов — т.е. в хроме меняй не меняй размер минимального шрифта — не работает и людям с проблемным зрением их сайты не почитать, либо у тех которые шрифты не «залочили» — у тех таки косяки вылезают.
Хотя все равно подборка добротная.
Я вот люблю чтобы минимальный шрифт был больше определенного размера (ну или 150%+ dpi общий), это удобно — особенно когда вывод идет на проектор.
Так вот, эти товарищи любо лочат размер шрифтов — т.е. в хроме меняй не меняй размер минимального шрифта — не работает и людям с проблемным зрением их сайты не почитать, либо у тех которые шрифты не «залочили» — у тех таки косяки вылезают.
Хотя все равно подборка добротная.
В очередной раз сошлюсь на сайт bostonglobe, как один из моих любимых примеров. У них справа вверху есть переключатель размера шрифта реализованный на css. Собственно, все зависит от того, насколько вы сами продумаете шаблон.
Не встречал. Можете хоть один пример сайта привести, чтобы не реагировал нормально в Хроме на Ctrl++.
опять я устал мотать вниз :(
Кто-нибудь работал с этой Fork CMS?
Как всех пробило то на адаптивный дизайн :))
Адаптивный дизайн, это конечно, хорошо. Но мне кажется, перед этим надо решить другие проблемы, а именно: поддержка css2 браузеров и IE6/7 (те, кто говорят про всякие скрипты типа PIE или ie7.js — вы их исходники смотрели? ни один адекватный человек этого монстра на сайт не поставит. Даже начинающему верстальщику понятно, что адаптировать страницы для ИЕ надо не мучая яваскриптом и без того тормозящий браузер, а на стороне сервера). Поддержка отображения с отключенными картинками, CSS и скриптами. Поддержка версии для печати. Поддержка высокого разрешения на айфоне. Поддержка разных шрифтов.
Когда все это успеть сделать. И покажите мне, какой среднестатистический заказчик согласится оплачивать такую верстку? Сдается мне, мало кто захочет.
Возьмем обычную кнопку: если верстать на совесть, на годы, она должна тянуться по горизонтали, по вертикали (если пользователь увеличит шрифт), в новых бразуерах работать на градиентах, в старых на 4, 6 или 9 картинках в углах, в Ие еще и на костылях, должна иметь фон и бордер для браузеров с отключенными картинками, должна иметь черно-белую версию для печати. Вы представляете, сколько на это времени уйдет?
Можно, конечно где-то схитрить, оптимизировать, что-то генерировать скриптами, но все равно, это не быстро.
Когда все это успеть сделать. И покажите мне, какой среднестатистический заказчик согласится оплачивать такую верстку? Сдается мне, мало кто захочет.
Возьмем обычную кнопку: если верстать на совесть, на годы, она должна тянуться по горизонтали, по вертикали (если пользователь увеличит шрифт), в новых бразуерах работать на градиентах, в старых на 4, 6 или 9 картинках в углах, в Ие еще и на костылях, должна иметь фон и бордер для браузеров с отключенными картинками, должна иметь черно-белую версию для печати. Вы представляете, сколько на это времени уйдет?
Можно, конечно где-то схитрить, оптимизировать, что-то генерировать скриптами, но все равно, это не быстро.
Да ну, кнопки как раз запросто делаются на градиентах с подключением PIE ради ИЕ. В результате кнопка тянется во все стороны и идеально выглядит во всех браузерах во всех режимах. Версия для печати верстается от 20 до 40 секунд. С PIE проблемы начинаются только при большой динамичности сайта и при километровых страницах. И я уж лучше пару строк скрипта напишу для перегенерации фона PIE, чем буду убиваться кромсанием 9 картинок и засирать страницу фиктивными элементами.
Если клиенту нужна клиентская скорость в ИЕ7-8, то пусть платит, тогда покромсаем что угодно. Обычно клиентам на это пофиг, они уже привыкли к тормозам ИЕ.
А IE7/8/9.js — да, ужас. Совершенно невменяемые тормоза даже на маленьких страницах, плюс вообще никакая поддержка динамически создаваемых и изменяемых элементов. Оно не помогает, оно мешает больше.
Если клиенту нужна клиентская скорость в ИЕ7-8, то пусть платит, тогда покромсаем что угодно. Обычно клиентам на это пофиг, они уже привыкли к тормозам ИЕ.
А IE7/8/9.js — да, ужас. Совершенно невменяемые тормоза даже на маленьких страницах, плюс вообще никакая поддержка динамически создаваемых и изменяемых элементов. Оно не помогает, оно мешает больше.
> Обычно клиентам на это пофиг, они уже привыкли к тормозам ИЕ.
Тормоза там из-за вот такого подхода, принятого в сообществе. Если, к примеру, верстать изначально под ИЕ, а под Хром писать костыли, он будет тормозить не меньше. Это же насколько надо от реальности оторваться и нос задирать, чтобы так относиться к самому распространенному браузеру (хотя в последнее время он не самый распространенный).
Я недавно верстал страницу (фиксированный фон на всю страницу + скругленные уголки + полупрозрачное скроллящееся окно поверх) — в Хроме прокрутка в разы дерганнее, чем в ИЕ7. Старые добрые картинки лучше работают, чем вся эта новомодная CSS3 хрень. И памяти меньше ИЕ7 ест, и рендерит картинку быстрее.
Что касается PIE — почему это надо делать на яваскрипте? В чем проблема все эти костыли делать на сервере, не мучая клиента? Авторы просто поленились сделать нормально, 1 строчку в HTML проще вписать, чем нормальный конвертер шаблонов организовать.
Тормоза там из-за вот такого подхода, принятого в сообществе. Если, к примеру, верстать изначально под ИЕ, а под Хром писать костыли, он будет тормозить не меньше. Это же насколько надо от реальности оторваться и нос задирать, чтобы так относиться к самому распространенному браузеру (хотя в последнее время он не самый распространенный).
Я недавно верстал страницу (фиксированный фон на всю страницу + скругленные уголки + полупрозрачное скроллящееся окно поверх) — в Хроме прокрутка в разы дерганнее, чем в ИЕ7. Старые добрые картинки лучше работают, чем вся эта новомодная CSS3 хрень. И памяти меньше ИЕ7 ест, и рендерит картинку быстрее.
Что касается PIE — почему это надо делать на яваскрипте? В чем проблема все эти костыли делать на сервере, не мучая клиента? Авторы просто поленились сделать нормально, 1 строчку в HTML проще вписать, чем нормальный конвертер шаблонов организовать.
Идиотский вопрос: если всё равно вёрстка изначально под ИЕ на голых картинках, то на кой икс дублировать картинки градиентами? Пусть себе все браузеры картинки отображают. Ну, 10 лишних HTTP-запросов, сервер не сляжет (мы же не про крутые нагруженные сайты говорим?). Зато на клиенте скорость большая, и размер CSS ощутимо уменьшается.
Хром с ИЕ7 сравнивать в плане памяти — не совсем честно, это разные весовые категории. :) С таким же успехом можно дивиться скорости Windows 98 и говорить: «Вот же писали! Совсем не тормозит!» (Хотя я Хром с его процессом под каждую вкладку не очень-то перевариваю. У меня браузеры падают раз в пару месяцев, а память этот обжора хавает каждый день — не оправдывается «защита от падений». Да, у меня пока 32-битная система.)
Хром с ИЕ7 сравнивать в плане памяти — не совсем честно, это разные весовые категории. :) С таким же успехом можно дивиться скорости Windows 98 и говорить: «Вот же писали! Совсем не тормозит!» (Хотя я Хром с его процессом под каждую вкладку не очень-то перевариваю. У меня браузеры падают раз в пару месяцев, а память этот обжора хавает каждый день — не оправдывается «защита от падений». Да, у меня пока 32-битная система.)
На ум срfзу пришло metro
Несколько…
Адаптивный дизайн конечно круто, вот только мне больше нравится идея разных интерфейсов на разных девайсах. Обьясню: даже работая с планшетом 10.1" и субноутбуком 13" у меня разные привычки для серфинга и навигации. Я заметил, на ноутбуке использую вертикальный скролл, а на планшете очень уж нравится горизонтальный скрол, похожий на листание страниц книги или журнала. Тогда удобнее видеть одну сущность за раз (одну статью с блога, один продукт с магазина), когда на ноутбуке удобнее видеть несколько в списоке.
UFO just landed and posted this here
Для этого ту же Fork CMS можно использовать. Тоже в основе адаптивная вёрстка.
На демо что-то не видно адаптивной верстки.
Sign up to leave a comment.
Несколько примеров применения Responsive Web Design, или Ваш сайт может и должен быть резиновым