Что случилось, когда мы говорили об адаптивном дизайне с экспертом

Утро (или вечер) всем. Добро пожаловать в наш чат о адаптивном дизайне с Крейгом Шарки. Я ХОУК, менеджер сообщества в SitePoint. Мы начнем через 10 минут. В то же время, почему бы вам не представиться. Откуда ты? Чем ты занимаешься? Что бы вы хотели получить от этой сессии?

Здравствуйте! Я Джиран, я из Колорадо, я независимый веб-дизайнер и разработчик! и я просто хочу узнать больше о Responsive, я продолжаю бороться с аспектами и получать правильный дизайн! В настоящее время работаю над созданием собственного сайта, jirandowlati.com отзывчив, если вы хотите проверить это! 🙂

Здравствуйте. Эрик здесь, веб-дизайнер из Цинциннати, штат Огайо. Просто начинаю изучать адаптивный дизайн. Просто хочу узнать как можно больше.

Имена Кайл, я из Чикаго, в настоящее время работаю на некоммерческую компанию в качестве единого интернет-магазина! Я читал все о Responsive, и все, что я хочу сделать, это освоить его во всех отношениях.

UI / UX дизайн / разработка в Sprint. Канзас-Сити, и уже использовать макеты Fluid, просто интересно, что другие могут быть до.

Привет, я Джастин. Я в Калифорнии. Я только попробовал Responsive Design, надеясь узнать, что ждет нас в будущем.

Да @ Sami89 Старый был немного ограничивающим.

Крейг будет здесь в любой момент. Он просто входит в систему.

Здравствуй! Скотт из Канзас-Сити. Сделано пару адаптивных дизайнов, но не слишком обширных.

Андре здесь. Всесторонний веб-ученик. Пытаюсь отделить хорошее от плохого.

Утро и или вечер всем!

Марджори из Монреаля. Я работал с текучими макетами некоторое время и получал адаптивные макеты для новых клиентов. Всегда заинтересованы в некотором понимании и как.

Добро пожаловать. Утро Крейг.

из Англии

Самиулла Хан из Пакистана, работает в дизайнерском агентстве; Просто в адаптивный дизайн

Эксперты — трудное слово, учитывая, как быстро все меняется.

Адаптивный дизайн работает очень хорошо, когда вы комбинируете его с мобильным подходом

Я понятия не имею, @skorpyo, но это очень расстраивает. Я нахожусь в поиске альтернативного продукта, если вы знаете его.

Из Ирландии — просто изучение адаптивных концепций дизайна

В первую очередь это не мобильный телефон, а все устройства и контент, который должно иметь каждое устройство.

Кто-нибудь сталкивался с проблемой, с которой они борются?

Не уверен насчет мобильного в первую очередь. Я думаю, вы должны учитывать это при разработке, но я все еще начинаю с рабочего стола, когда я пишу в HTML и CSS.

@deesadler Я думаю, что хитрость заключается в том, чтобы начать, а затем добавлять навыки по мере необходимости. Ожидание только увеличит кривую обучения!

Я всегда погружаюсь в голову первым. 🙂

Так прыгнуть в глубокий конец вы считаете?

ха-ха

лучший способ сделать это — поговорить … ИМО

Только макеты, мне трудно решить, что следует сохранить для экрана мобильного телефона.

Утро всем, кто только что присоединился к нам. Не стесняйтесь прыгать и представиться — откуда вы и каков ваш опыт (если есть) с адаптивными макетами

@meiloo Mobile сначала предлагает иной подход к структуре HTML. Это действительно может помочь

Не содержание, а то, как следует выкладывать навигацию и картинки

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

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

Я преподаю, поэтому то, что я вижу, как наибольшая борьба за людей, это образы. Кто-нибудь согласен?

Подумайте, изобилие минималистских конструкций из жидкости демонстрирует удивительный объем работы, необходимый для того, чтобы сделать это правильно.

@ConorD Я собираюсь передать это @Expert_Sharkie

Привет из Према — мы делаем отзывчивый (фундамент) с Concrete5

Нашли шаблоны, как 320 и выше, и Twitter Bootstrap помог мне выучить основы

Я согласен с Mobile First. Есть ли у вас какие-либо предложения по таким вопросам, как навигация? Мне трудно решить, что следует изменить.

@conorD размер рабочего стола и наименьший размер должны быть нацелены отдельно с медиазапросами

Да. Не уверен, что я * получаю * мобильное первое движение.

ну, модернизр и шаблон наверняка помогли людям. Я люблю использовать его для прототипирования в эти дни

Я только что обнаружил относительные медиазапросы (на основе EM), и это похоже на … OMG!

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

Цель отдельно? Разве это не должно быть одинаковым контентом для всех устройств?

@Expert_Sharkie, @HAWK, спасибо! Также кто-нибудь пытался использовать что-то вроде knockout.js, с или без jQuery, чтобы помочь отзывчивости?

Размер изображения — самая новая часть подхода и самая изменчивая

Контент всегда будет королем, независимо от устройства

@Jiran, а затем стандартные шаблоны дизайна для навигации при увеличении размера экрана

Я понимаю, если клиент хочет сосредоточиться в основном на мобильных устройствах.

Howdee!

Но если это просто функция, я не вижу смысла сначала запускать мобильную версию.

Это то, что я видел, что имеет смысл, но что делать, когда есть только 4 варианта?

Я требую тег <picture> для Отзывчивых !!!!!

я тоже

поскольку для мобильных устройств и планшетов потребовалось больше времени на адаптивность, я также согласен с Mobile.

Интересно услышать мнения о том, использовать ли готовый или свернуть свой собственный

адаптивный веб-дизайн против изящного деградации против адаптивного дизайна

@conorD попытка добиться успеха без JavaScript поможет вам увеличить нагрузку

Привет всем. Я не понимаю этот подход, ориентированный на мобильные устройства? Вы разрабатываете для мобильных устройств, а затем просто добавьте, что вы можете для настольных зрителей, пока кодируете: S?

Утро @ Цоци

Я начинаю с 1136px 16 col, работая вниз

Я не пытался преобразовать сайты в адаптивный дизайн — какие-либо предложения / указатели о том, как это сделать?

@Jiran все зависит от контекста вариантов. Могут ли эти элементы навигации быть эффективно изображены в виде значков? Если это так, пойти на это. Если нет, и иконография будет слишком неоднозначной, то, возможно, сложенные кнопки или опорная точка

@Expert_Sharkie, еще раз спасибо.

сначала пришла жидкость, потом пришла отзывчивость… следующая может быть адаптируемая ?!

Я заинтересован в ответе на вопрос Лагуны

@deesadler Вы ознакомились с предложениями по адаптивным размерам изображений из HTML5?

@Jiran and test, test, test — ваша пользовательская база поможет вам выбрать оптимальный вариант для своих нужд

mobile First поможет вам в определении иерархии контента.

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

просто начать это лучше, чем пытаться учиться, терпеть неудачи, пока не начнете понимать, как все работает!

Старые браузеры нужно будет придать форме, добавив CSS3 медиазапросы JavaScript

@wakkos. Как?

@lagoona реальный подход начинается задолго до конверсии, но это не невозможно. Первые две вещи, над которыми нужно начать работать, это медиазапросы и гибкая настройка размеров изображений.

@andrevr Вы можете увидеть, что действительно важно показать (IE: логотип, меню, слоган) без «комплиментов»

О, хорошо, http://responsinator.com это здорово.

@digikev Я просто хотел спросить, как мы имеем дело с совместимостью при создании адаптивных дизайнов?

@wakkos Спот на! Размышление о мобильной структуре — отличное место для старта

Да, это очень помогает!

Я опытный разработчик, но я не уверен, с чего начать с отзывчивости. Есть ли хороший ресурс, на который я могу пойти и посмотреть на то, чтобы начать работать довольно быстро … вроде бы дать мне основы в двух словах?

@veerdin есть эта книга Алиспарт о адаптивном дизайне!

Как далеко мы можем действительно пойти с адаптивным дизайном прямо сейчас, когда IE7-8 все еще существует?

@veerdin — попробуйте основы или загрузочные фреймворки

@wakkos Конечно, но для различий, разность содержания равна nb. Я думаю, что каждый размер должен быть оптимизирован. Тогда какой бонус для запуска мобильного?

за то 7-8 модернизр может помочь. Я считаю полезным, чтобы веб-сайты были хорошими даже для этих старых продуктов.

@veerdin Отзывчивый веб-дизайн от ABA — хорошее начало? это было для меня

@veerdin Вы начали со статьи Итана Маркотта? http://www.alistapart.com/articles/responsive-web-design/

Также: http://www.abookapart.com/products/responsive-web-design

@andrevr В Coolvillage.es я скрываю этот верхний левый твиттер в мобильном телефоне. Это не важный контент! поэтому я не добавил его в мобильный дизайн. (это пример)

^^ да!

@Jiran планируют проверить это также

Спасибо всем — отлично и спасибо!

@melioo, я не слишком уверен в Модернизре и других легко запускаемых «фреймворках». Я из тех людей, которым нравится все настраивать так, как мне нравится, с минимальным кодом, чтобы я точно знал, что происходит

Я согласен, @jiran, эта книга была отличным началом для меня.

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

Итан не изобрел отзывчивый, просто придумал фразу. Не придираться и не говорить, что он не очень умный, просто делать различия. 🙂

во-вторых, просто прочитайте статью ранее

@meiloo, спасибо :), но какой удар по производительности делают исправления modernizr и javascript на медленных устройствах и телефонах?

Содержание всегда самая важная вещь. Карен МакГрейн: http://www.slideshare.net/KMcGrane/adapting-ourself-to-adaptive-content-12133365

@kestrel Internet Explorer по-прежнему может работать с гибкими сетками и гибкими изображениями. Это отличное начало. Тогда есть прокладки

@ Кестрел, пока ты будешь тейлор Модернизр для своих нужд (а не целой партии из коробки) у тебя все будет хорошо

Я использовал макеты жидкостей с 2002 года. Так что даже на IE6. это не проблема.

Что такое хороший ресурс для использования запросов @media и JavaScript? Хотите, чтобы ваш javascript также менялся в зависимости от сайта и от старых браузеров?

помогает найти в вашей команде очень хорошего разработчика JS, чтобы проверить это

@Expert_Sharkie да, хороший вопрос, вот что я действительно спрашиваю, как далеко мы можем зайти с адаптивным дизайном, если у нас есть сайт с высоким трафиком, который все еще получает значительный более старый трафик браузера?

Я сделал 1136px 16 col систему (фиксированную), если кому-то захочется. Я не мог найти один онлайн, поэтому должен был сделать это сам.

и @Kestrel, Yahoo! YSlow поможет http://developer.yahoo.com/yslow/

Кроме того, легко подобрать: <! — [if lt IE 9]> <script src = ” http://html5shim.googlecode.com/svn/trunk/html5.js”> </ script> <! [Endif] ->

@ Clarkey вы можете иметь собственный файл modernizr и проверить, как они это делают, а затем собрать свою собственную библиотеку. Дело в том, что это сообщество людей, работающих, поэтому они всегда добавляют что-то, и вы учитесь у всех

@ melioo, возможно, придется взглянуть по-другому

Дизайнеры обязаны стать хорошим js-разработчиком. Мой хороший друг Джеймс Уильямсон, выступавший на моей конференции (D2W), является автором Lynda.com и имеет несколько видеосюжетов по медиа-запросам.

@kestrel Старые браузеры, скорее всего, не будут появляться на устройствах, не относящихся к рабочему столу, поэтому у вас не должно возникнуть никаких проблем. И все мы знаем, как заставить рабочий стол выглядеть лучше всего!

@Clarkey cssgrid.net

там должен быть звук?

Кто-нибудь видел или использовал http://www.gumbyframework.com/

@Jiran вот только 12 цв

У дизайнеров @deesadler есть достаточно доводов, с которыми приходится бороться, не беспокоясь о том, чтобы быть действительно хорошими разработчиками JS — другая дисциплина, найдите эксперта, чтобы справиться с этим.

@ Clarkey ой извините: P

@Expert_Sharkie это хороший момент! Так что же с адаптивным дизайном мы добавляем функции, которые поддерживают новые браузеры, а не теряем их для старых браузеров?

Есть тонна Fameworks там. Но … иногда проще написать CSS самостоятельно, либо вам придется разбираться в тоннах вещей, которые вы никогда не будете использовать. Dreamweaver упрощает медиазапросы.

@deesadler Я знаю достаточно, чтобы познакомить меня с jQuery и создать прототип, но когда дело доходит до производственного кода, передайте его хорошему разработчику JS, а не дизайнеру

Ребята, вы действительно чувствуете себя комфортно с Frameworks? Я предпочитаю делать весь свой дизайн с нуля (ну, образую Boilerplate, но это больше похоже на шаблон, чем на фреймворк)

@Jiran Я имел обыкновение использовать cssgrid.net и любил его, пока мне не понадобилось больше столбцов. Хотя отличная система сетки

@digikev и @Kestrel https://developers.google.com/speed/pagespeed/insights тоже довольно полезный инструмент

@ryanConway Я видел это, так много фреймворков для начала, не знаю, какой из них лучше для долгосрочной перспективе.

@ Wakkos Я такой же приятель

@ Кестрел Точно! Это еще один аспект прогрессивного улучшения

Хорошо, @digikev, у меня не всегда есть такая возможность.

@Wakkos некоторые хороши, например, посмотрите на semantic.gs, который работает с Compass SASS или LESS

Также я думаю, что может быть важно обсудить адаптивные электронные письма, так как ОЧЕНЬ много людей читают электронные письма на своем телефоне, а не используют свой рабочий стол в эти дни. Кто-нибудь знает какие-либо хорошие инструменты для проверки того, как электронные письма выглядят на мобильных устройствах?

Я предполагаю, что реальный вопрос, рамки или начать с нуля?

Любые предложения по использованию стиля Javascript Media Query, обслуживающего другой код в зависимости от того, что просматривает сайт?

Я думаю, что у emailonacid.com есть несколько почтовых клиентов для мобильных устройств, которые тестируют. Довольно разумные цены тоже.

@Wakkos, но некоторые злоупотребляют, например, Twitter Bootstrap (который отлично подходит для создания прототипов), который не достаточно хорош для готового готового кода — множество разложений, несемантической структуры и презентационной разметки

@clarkey и @wakkos Я тоже согласен. Из фреймворков можно многому научиться, но чем раньше вы сможете включить их в свой собственный шаблон, тем лучше

@ryanConway Я думаю, что вы должны использовать все, что вам удобно.

@srarden, спасибо мужчина 🙂

@deesadler Я тоже нахожу это, но я думаю, что, пожалуй, хорошо с самого начала использовать фреймворки, поскольку они определенно помогают процессу обучения, а затем помогают писать свои собственные версии — пока еще не добрались

Как вы, ребята, пишете html / css / less / sass? В настоящее время работает Coda 2, и мне это нравится! #

Я думал, что был извращенцем, потому что не любил использовать фреймворки xD

Textmate

Textmate!

@clarkey Coda 2 и Sublime Text

для всего на самом деле

@Jiran это спорный вопрос 🙂 Я думаю, что изменение контента в зависимости от варианта использования получит большее признание

@ryanConway — думайте, что нужно немного подумать. — С самим собой — совместимость становится большой проблемой, если у вас нет огромных ресурсов для тестирования.

Textmate сначала, играя с возвышенным

@wakkos Я тоже не использую фреймворки

Посмотреть / изменить вставить

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

@ Clarkey Macrabbit Espresso и просто пробная версия Coda 2 на данный момент

Ха-ха @ Clarkey — вот что происходит, когда вы режете и вставляете

Кто-нибудь использует YUI?

@Kestrel также заинтересован в части электронной почты … определенно мой следующий шаг. У кого-нибудь есть советы?

У кого-нибудь есть хороший пример адаптивного сайта электронной коммерции?

Теперь, когда у нас тихий момент — кто-нибудь задавал вопрос, на который, по его мнению, он не получил ответа?

Я нашел эти слайды от Энди Кларка очень полезными

https://speakerdeck.com/u/malarkey/p/fashionably-flexible-responsive-web-design-full-day-workshop-1

@alexmarkup Amazon

@RyanConway Thx !!

@HAWK Я не вставил, просто используйте Shift-Enter для новой строки

упс @ Sami89 мне тоже трудно после обсуждения

@alexmarkup есть несколько магазинов футболок, ничего супер электронной коммерции. Мы в Sprint тоже работаем над этим, но пока ничего.

Странно тогда @Clarkey

@sarah THKS, но он не реагирует .. его прогрессивное улучшение

: D смешно

@ sami89 открой все ссылки, которые люди вставляют, и прочитай их завтра. лучше всего работает для меня: P

да ofcoarse @capescafe они только обсуждают шаблоны, эти бутстрапы

@ Сара, потому что они прячутся и показывают контент. Адаптивный должен быть всегда один и тот же контент с другим макетом

любите меня некоторые компоненты пользовательского интерфейса начальной загрузки Twitter

@capescafe и @ sami89 Позже сегодня я опубликую стенограмму на сайте pointpoint.com, чтобы вы могли просмотреть ее на досуге. Обязательно задавайте любые вопросы, которые у вас есть, чтобы мы могли их включить

@alexmarkup Большая часть Malarkey’s Enhancement хорошо поддается адаптивному подходу

У меня есть вопрос об изображениях … сейчас есть так много разных вариантов, но ни один из них пока не является лучшим ответом … кто-нибудь знает, будет ли добавлен новый тег в html5 или css3 для обработки адаптивных изображений?

@sarah что такое ч / б реагирование и прогрессивное улучшение

давайте поговорим изображения

Здорово. Тебе приятно говорить изображения @Expert_Sharkie?

Лучше ли держать ваши отзывчивые «стили» в одной таблице стилей?

@capescafe Пока никто точно не знает. Здесь хорошее начало текущей ситуации: http://html5doctor.com/html5-adaptive-images-end-of-round-one/

@HAWK это отличная система чата

@capescafe сейчас они лоббируют такие теги, но не везет. Вы можете принять меры и узнать больше здесь http://www.w3.org/community/respimg/

@ehCincy я делаю

@sarah for me reponsive = всегда один и тот же контент с разным макетом и Progressive = вы добавляете, отображаете, скрываете (CSS или JS) некоторую часть

Тег <picture> выглядит многообещающе

У меня есть две проблемы с этим @Clarkey — я не могу скачать стенограммы (поэтому я должен скопировать и стилизовать их), и все входят / выходят дважды. Я также хотел бы иметь возможность настраивать конкретных пользователей (например, экспертов и администраторов) с другим цветом, чтобы было проще следить за чатом.

чем то, что diff оставил в img и картинке @kinaz

Итак, как вы определяете адаптивный дизайн? Нуб прямо здесь ..

@HAWK Давай сделаем один?

Но … вы не хотите масштабировать большие изображения до мобильных устройств. Мне нравится масштабирование до некоторой точки, затем заменить это изображение на меньшее, а затем снова для мобильных устройств

@alexmarkup Это отличное место для начала, но вы быстро обнаружите, что хотите использовать прогрессивные подходы под своим отзывчивым баннером.

Я знаю парня, который думает об этом @Clarkey (cc @Expert_Sharkie)

Да, для n00bs, давайте определим адаптивный / адаптивный / прогрессивный

@alexmarkup Ух, я должен был посмотреть его на своем iphone, чтобы увидеть … они могут использовать два отдельных канала контента, но он работает очень хорошо. Я знаю, что главное — создать только один набор контента для нескольких устройств, но я думаю, что Amazon сделал правильный выбор, чтобы пойти по отдельному пути.

адаптивный дизайн, по сути, подгонка контента для пользовательских устройств без ущерба для общего опыта пользователей

да @ deesadler я спросил дважды, но никто не отвечает, все идет над нашими головами

@ sami89 Из Википедии: Адаптивный веб-дизайн (RWD), по сути, указывает, что веб-сайт создан для использования медиазапросов каскадных таблиц стилей 3, расширение правила @media [1], с сетками, основанными на плавных пропорциях, для адаптации макета. к среде просмотра, и, вероятно, также использовать гибкие изображения. [2] [3] [4] [5] В результате пользователи на самых разных устройствах и в браузерах будут иметь доступ к единому источнику контента, так чтобы его было легко читать и перемещать с минимальным изменением размеров, панорамированием и прокруткой.

@HAWK Если вам нужен быстрый хостинг, у меня есть несколько линод

@capescafe Определенно будет решение HTML5. На данный момент это выглядит как атрибут srcset в старом добром элементе img

Я учу этому материалу @ sami89, просто пытаюсь помочь.

@Expert_Sharkie, я работаю над исследованиями и разработками с помощью адаптивного подхода без постепенного усиления и это сложно, но работа должна быть в процессе IA

@ Кларки, я учту это 🙂

так что @HAWK RWD сделано, теперь изящная деградация

@capescafe У элемента изображения, предложенного сообществом, также есть много отличных идей.

@Expert_Sharkie, какие идеи

@ Сара, хорошо, но представьте, когда у вас небольшой тарифный план… пользователи скачивают разметку, которая им не нужна

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

@ sami89, пожалуйста, проверьте это http://www.w3.org/community/respimg/

@ Sami89 Синтаксис дочерних элементов, используемых в видео и аудиоэлементах HTML5, намного более интуитивен, чем подход srcset.

@RyanConway, если бы я прочитал эти длинные статьи, меня бы здесь не было

@alexmarkup не означает ли это, что вы должны использовать комбинацию RD и Enhancement?

Привет, народ. Если я работаю на большом существующем сайте с фиксированной шириной, с чего бы мне начать, чтобы он был адаптивным. Вы бы оставили весь существующий код и использовали медиазапросы для меньших разрешений? Что это значит со скоростью загрузки? имея сайт читать css

прочитайте по диагонали и сохраните ссылки, затем прочитайте их все позже: -d

Примечание: я должен был упомянуть об этом раньше:

Посмотреть / изменить вставить

  Доступные команды:

 /Чисто
 /Помогите
 / пригласить [email protected]
 Я люблю пиццу
 / msg @username Это ваше сообщение
 / togglesound 

@Expert_Sharkie какой вид дочерних элементов ??

У кого-нибудь есть отличные примеры адаптивного дизайна, которыми они хотели бы поделиться? сайты, которые делают отличную работу?

@ sami89 откуда вы знаете, что это длинная статья, она даст вам представление об идеях, предлагаемых сообществом

@expert_Sharkie Я согласен, но когда вы выбираете какую-то ширину или устройства с прогрессивной разверткой, она становится огромной в процессе анализа

@ sami89 Вы можете добавить различные исходные элементы для ваших размеров и запасное изображение, если браузер не справляется с HTML5

@Expert_Sharkie @sarah

@Kestrel — да, приятно видеть некоторые образцы

@purpledude Вы можете отредактировать эту вставку, чтобы удалить адрес (при условии, что он был случайным)

Я люблю их так, как это делает happycog.com

Один из лучших примеров, на мой взгляд, smashingmagazine.com

разбить тоже круто! 🙂

@ Sami89 http://dl.dropbox.com/u/11177072/Screenshots/aoj-.png

@expert_Sharkie @sarah А что насчет вложенной сетки?

@Kestrel www.carnationgroup.com, seesparkbox.com

Проверьте http://mediaqueri.es/

@kestrel вы можете найти много здесь http://mediaqueri.es/

Ага

В настоящее время нет реального сайта электронной коммерции, полностью отвечающего требованиям. Только блоги или очень простые розничные сайты используют его …

Тогда мы должны сделать шаблон Prestashop XD

wow smashingmagazine великолепен, там должно быть как 3 разные версии одного только меню: P

@denzil дополнительный CSS должен быть только небольшим и не должен вызывать слишком много дополнительных проблем с производительностью. И если вы можете адаптировать свой контент к меньшему размеру, вы можете восстановить требования к пропускной способности там

Эх, carnationgroup.com все еще чувствует себя слишком много для мобильного, я немного растерялся, думаю, есть разница, просто меняя макет и по-настоящему приспосабливая своих пользователей на разных экранах!

Может ли кто-нибудь поделиться учебниками на конференции, поговорить о адаптивном веб-дизайне?

@HAWK спасибо, да, это было 🙂

я люблю уменьшать и расширять браузер, чтобы видеть мгновенную реакцию отзывчивых проектов

Великолепно мало пишите из акций Эллиота Джея — лучшие фоновые изображения для адаптивного веб-дизайна http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/

Smashingmagazine действительно хороший

@alexmarkup на самом деле маленький план данных был тем, что меня просто удивило на Amazon. они создали отдельный контент / страницу true, но они сделали его более тонким. Таким образом, у человека на мобильном устройстве такой же опыт, что и у настольного компьютера, только другой, а его тощий внешний вид обеспечивает более быструю загрузку.

вау, мне нравится, как http://builtwithmomentum.com/ делает их навигацию!

Smashingmagazine действительно хороший, но меню на мобильном телефоне довольно обманчиво…

Я не думаю, что вы должны использовать медиа-запросы или сетку для адаптивного сайта

Я работаю над http://coolvillage.es, но у меня все еще есть серьезные сомнения относительно CSS3-анимации (плавающие игрушки), и это подводит меня к вопросу:

Если я установил отображение: ни одна анимация css3 не загружается?

@sarah Я думаю, что чем дальше, тем больше мы увидим сайтов, использующих подход уровня контента в своей практике адаптивного дизайна.

Как вы, ребята, справляетесь с изменением ориентации текста в iOS при изменении ориентации … Я нашел способ отключить его, но тогда пользователь не может ущипнуть Nzoom

Я в замешательстве, хотя, кто-нибудь знает, как buildwithmomentum переключает навигацию таким образом?

Нет медиазапросов на адаптивном сайте = богоподобный.

Скелетная тема WordPress http://www.simplethemes.com/blog/entry/skeleton-wordpress-theme

Мы используем Javascript для ваших адаптивных сайтов

ваш = наш

Эй, что ты думаешь о создании мобильного сайта во Flash?

Эй, что ты думаешь о создании мобильного сайта во Flash?

Эй, что ты думаешь о создании мобильного сайта во Flash?

При планировании адаптивного сайта лучше всего начинать с одноколоночного флюида, который затем адаптируется к 2 или 3 колонкам в определенных точках разрыва? Мне трудно планировать адаптивный сайт, так как ранее я всегда планировал сайт с фиксированной шириной в Photoshop, а затем планировал соответственно с моим css и любыми изображениями с фиксированной шириной. Трудно переучить мозг.

@ Сара, я думаю, вам не нужна сетка, но вам нужны медиа-запросы или какая-то замена

@ sami89 это правда шутка?

@Expert_Sharkie Как ты имеешь в виду?

http://foodsense.is/

@ Clarkey Изменение ориентации — большая проблема, но решения все еще молоды в данный момент. Я думаю, что мы увидим некоторые изменения уровня ОС, которые помогут много

Хорошая статья для начала: http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

почему вспышка не очень хорошая идея?

^^

@sarah Я согласился, что необходимость менять контент, доставляемый на устройства, получает большую поддержку: D

Одним словом: iPhone не любит вспышку.

Давайте держать это под рукой, не спор о Flash против HTML5, пожалуйста

@ sami89 flash может быть худшей идеей, которую я когда-либо слышал, я даже не вхожу в это

Это больше, чем одно слово, верно?

@RyanConway Потому что вспышка не поддерживается Apple …

Таким образом, дисплей не загружает анимацию CSS3?

@ryanConway Flash не поддерживается на многих мобильных устройствах, но все же может быть выполнен для обеспечения адаптивного дизайна

@ meiloo чувство еды приятно

Итак, нарушив мое собственное правило, Flash Pro и Flash Builder действительно могут создавать приложения, скомпилированные в нативные приложения. Конец истории.

Вы, ребята, не должны говорить мне, что вспышка — ужасная идея, это была не моя идея с самого начала

@wakkos Я не слышал об отображении анимации CSS3: никто не ошибается, о чем вы говорите

вернуться к отзывчивому / адаптивному разговору сейчас

У кого-нибудь есть вопрос, который, по его мнению, не был должным образом решен?

нет, это не ошибка но CSS3 требует много ресурсов. Поэтому, чтобы избежать их, я не уверен, что дисплей: ни один не работает.

Теперь, когда я хорошая девушка из Adobe, кто-нибудь еще использовал Edge? Говоря о CSS3 / JS / HTML5

http://cossette.com/, http://thefuturemckeowns.com/, http: ///www.colly.com/

@wakkos Аааа … это работает, или вы можете доставлять анимацию только на устройства, которые могут извлечь из этого пользу, используя ваши медиазапросы

CSS3 занимает много ресурсов?

Я играл с парой ранних версий Edge, и мне понравилось, куда он идет, но у меня не было возможности возиться с более свежими версиями — новой работой.

@ sarah Правильно, Amazon сделал веб-приложение для смартфона … это круто и оптимизировано, но я думаю, что версия для планшета не такая … больше похожа на настольную версию со скрытыми вещами

Ребята, чувствуете ли вы, что нужно проектировать для определенных точек разрыва — например, 768px, 480px, 320px — и чтобы макет был реорганизован до фиксированной ширины, или вы считаете, что макеты должны быть полностью независимы от ширины устройства и масштаба (и реагировать)? важно какой размер?

@webKendo я просто собирался спросить что-то подобное

@webKendo я бы согласился со второй частью

Я думаю, что Canvas vs CSS3 — это совершенно другая дискуссия. Как насчет того, чтобы сказать, что лучше всего использовать гибридный подход? лол

@WebKendo я проектирую с фиксированным откликом

цель должна быть удобочитаемостью на любом устройстве, верно?

Это кажется совершенно независимым от ширины устройства, так как есть так много ширины

@kestrel @webKendo Точки останова — это путь, который дает вам лучший контроль и больше возможностей для ответа

Фиксированная отзывчивость адаптивна. Отзывчивый это жидкость

@webKendo первый подход имеет больше смысла для меня

@WebKendo Пока первый путь — конкретные точки останова

@webKendo до появления Android я бы проголосовал за первую часть

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

@Kestrel и другие — Но фреймворки, такие как Skeleton и т. Д., Предназначены для конкретных точек останова. Адаптивное. Жидкость Отзывчивость оставляет желать лучшего с точки зрения макета …

Самый низкий размер, который я разработал, составляет 320 пикселей, большинство мобильных устройств в любом случае скоро будет эквивалентно сетчатке.

@webKendo согласился.

@expert_Sharkie Думаю, теперь я понимаю термин отзывчивость. в основном дизайнеры должны будут постоянно реагировать на каждое новое устройство, которое выходит: P

@ryanConway, так что вторая часть — явный победитель, не так ли @webKendo

да @webkendo согласился

@webKendo вы можете быть гибкими в пределах своих точек останова, но перерывы дают вам цели для вашего процесса проектирования

@kestrel они будут «адаптироваться», таким образом, адаптивный

не могу дождаться, чтобы увидеть, как веб-сайты выглядят на MBP с разрешением сетчатки: P

Привет всем — у нас есть только 10 минут времени Крейга (в этот момент вы все можете остаться здесь и поболтать между собой), так что если у вас есть какие-либо важные вопросы для него, пожалуйста, ответьте на них сейчас.

@kestrel Ничего не менять — тоже правильный ответ!

Может кто-нибудь определить сетчатки-эквивалент PLS

@expert_Sharkie это правда, может быть, это будет не так много работы, как я понимаю, когда я начну проектировать ответственно / адаптивно

@prema 960 × 640 на телефонах

тишина

@kestrel, конечно, они будут отлично смотреться, но разработчикам будет неинтересно 🙂

Жидкая верстка для сложного сайта электронной коммерции довольно сложна… часто дизайнер ставит фиксированную высоту и…. не уверен, что это хороший подход для сложных сайтов

Я где-то читал: «Сначала начните с маленького экрана, затем расширяйте, пока он не станет похожим на дерьмо. Время вставить точку останова »

ОК, круто, спасибо @deesadler

Если взглянуть на темы WordPress, доступные для покупки, большинство из них предназначены для адаптации к фиксированным точкам останова. Я полагаю, это связано с тем, что дизайнеры тем пытаются обслуживать веб-сайты, на которых будет размещено гораздо больше контента, чем простые веб-сайты, разработанные дизайнерами для дизайнеров, которые мы видели.

WP отстой

@kestrel Чем раньше вы включите RD в свой ежедневный подход, тем скорее вы забудете, что был другой путь 🙂

вернуться к изображениям?

Бетон5 рулез

Изображения являются табу, пока мы не получили крутой тег

@webKendo Они также разрабатывают контент, который не могут предсказать. Поэтому они создают надежные решения

@Expert_Sharkie хорошая мысль

@deesadler хотите уточнить это? (wp отстой) 🙂

@Expert_Sharkie

@Expert_Sharkie: Моя точка зрения точно …

Почему кто-то не может взорвать Internet Explorer?

Просто мысль.

Во вторых что

@ Кларки второй это тоже !!

3-й, что

@expert_Sharkie да, я думаю, теперь понимаю, что идея готова к производству, и что у меня есть множество статей для чтения по этой теме с сегодняшнего вечера, я должен в кратчайшие сроки внедрить ее в сайт

Я изменяю размер своего браузера практически для каждого сайта, который я посещаю

@ehCincy хаха то же самое здесь

@purpledude Я пишу код, поэтому WP вынимает все теги <p> и использует пробелы в HTML. Это отстой

@wakkos Наши современные имиджевые решения — отличное место для старта. Нам нужно показать W3C, что нам нужно!

каково ваше текущее имиджевое решение?

http://uxmag.com/articles/a-primer-on-responsive-design

черт, у меня есть много открытых вкладок прямо сейчас. С нетерпением жду стенограммы @HAWK

Адаптивные макеты просты для веб-сайтов в стиле блога, которые действительно имеют только один тип контента. Для клиентских / производственных веб-сайтов, где кто-то еще будет управлять контентом, нужно создать гораздо более надежное, защищенное от идиотов решение… Особенно для изображений. И ядро ​​WordPress должно быстро работать с изображениями … Нам не нужно удалять объявления ширины и высоты с помощью PHP или jQuery …

@wakkos первый — это 100% ширина в контейнерах размера или использование фоновых изображений, применяемых через медиазапросы. Может быть, не окончательное решение, но отличное место для начала

@WebKendo 100% правильно

Просто выкидываю простую CMS для сайтов .. grabaperch.com

… Нам нужно идти — спасибо SitePoint и всем — несколько отличных советов

автоматические адаптивные изображения в WordPress http://viewportindustries.com/blog/automatic-responsive-images-in-wordpress/

Спасибо @prema — увидимся

вы должны использовать адаптивный режим в Firefox nigtly build @ehCincy

@webKendo Я думаю, что мы должны оказывать давление на производителей браузеров, а также на поставщиков решений для публикации

использовал это, но наткнулся на итр

@ryanConway собирается попробовать это прямо сейчас, спасибо

Спасибо HAWK ценю это

@RyanConway — спасибо… @Expert_Sharkie — Как вы предлагаете нам это сделать?

вау @webKendo у вас есть реальный опыт, хороший пример

@webKendo Используйте инструменты, которые у вас есть сегодня, и присоединяйтесь к сообществу браузеров. Они действительно слушают!

@webKendo примеры из реального мира — отличный способ показать реальные решения

Как вы, ребята, общаетесь с клиентами, как вы продаете их адаптивные сайты? они часто (если не всегда) хотят очень специфические конструкции для разных устройств

Это может открыть червяков, но будет ли это правильным форумом для других (front-end) разработчиков, чтобы поделиться примерами реальной работы / работы с клиентами, которую они сделали ..?

@kinaz, но это отличный пример адаптивного дизайна 🙂

вот @HAWK вы предоставили отличную платформу для обсуждения наших проблем

Ок, люди, это официальное завершение сессии. С этого момента он не будет модерироваться, но вы можете свободно общаться и общаться в чате сколько угодно. Спасибо за участие.

спасибо @ sami89

@kinaz конкретные проекты для конкретных устройств — ужасная идея, как они будут управлять всем этим контентом? Позвольте им сделать это, больше оплачиваемых часов для вас, верно? Покажите им цену за конструкцию, приспособленную для конкретных устройств. Я уверен, что они быстро откажутся от этой идеи.

СПАСИБО ВСЕМ

@hawk 🙂

спасибо всем, люблю вас всех

Благодарность!

Не за что @ sami89 — каждые пару недель я провожу эти сессии на разные темы. Далее идет HTML5.

@expert_Sharkie спасибо за ваше время снова 🙂

@HAWK сладкий с нетерпением жду следующего

Я буду там. > 😉

@HAWK Напишите мне, чтобы напомнить мне для следующего

Спасибо всем, спокойной ночи!

спасибо с нетерпением жду одного на HTML5 — ура

Вот детали для следующей сессии для всех, кто заинтересован http://www.timeanddate.com/worldclock/fixedtime.html?msg=Talk+HTML5+With+The+Experts&iso=20120626T21&p1=22&ah=1