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