Статьи

Мы поговорили об адаптивном веб-дизайне с экспертами

Этим утром (Down Under) я провел еще одну серию бесплатных бесед Talk with Experts . На этот раз предметом был Responsive Web Design, а экспертами были Крейг Шарки и Эндрю Фишер — авторы JumpStart Responsive Web Design . Вы можете проверить предварительный просмотр книги здесь .

Сессия была занята, поэтому, чтобы сэкономить на просмотре стенограммы, вот список ресурсов, которые были упомянуты.

Некоторые из преимуществ RWD

http://www.copyblogger.com/mobile-responsive-design-benefits/


Ресурсы, связанные со шрифтами

http://snook.ca/archives/html_and_css/font-size-with-rem
http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
http://caniuse.com/rem
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/


Сайт, использующий Фонд в качестве основы …

http://www.neheart.com


… И Bootstrap

http://www.nonanetwork.com
http://builtwithbootstrap.com/


Как насчет того, чтобы не использовать фреймворк?

http://dbushell.com/2013/03/19/on-responsive-layout-and-grids/
http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html


Ресурсы для тестирования адаптивных сайтов

https://eyeball.sitepoint.com/ (бета-регистрация)
http://responsinator.com/?url=http://www.jobhub.com&scroll=ext


CSS3 медиазапросы для соответствия IE

http://chrisjacob.github.com/Respond/#RESET
https://github.com/scottjehl/Respond


Таблицы совместимости Media Query

http://caniuse.com/#feat=css-mediaqueries


Использование Google Adsense на адаптивных сайтах

http://www.labnol.org/internet/google-adsense-responsive-design/25252/


Сетка Калькуляторы

https://gridsetapp.com/


Mobile First

http://designshack.net/articles/css/mobilefirst
Мобильная первая презентация Люка В. http://vimeo.com/38187066

Если вы пропустили сегодняшнюю сессию, потому что не знали об этом, вы можете подписаться на электронные напоминания о будущих сессиях здесь . Затем у нас будет « Поговорите с экспертами » с Лорной Митчелл, что будет полезно всем, кто проходит курс . Дата для этого еще не определена. Позже в апреле состоится « Обсуждение, начинающееся в отрасли » с разработчиками SitePoint Джудом Аакджером и Беном Аксником, так что следите за своими глазами. Если вы заинтересованы в прошлых сессиях, вы найдете стенограммы здесь .

Если вам интересно прочитать полный транскрипт сегодняшней сессии, вы найдете его ниже во всей красе.

Джерри Джерри
Новая книга охватывает начальную загрузку или какую-то другую структуру?
SHARKIE SHARKIE
@ TonnnnUK Bootstrap может быть отличным введением
SpaceBee … SpaceBeers
Здравствуйте. Энди — разработчик фронт-энда из Брайтона, Великобритания
mcynowic … mcynowicz
Я хотел бы иметь возможность использовать рамки, которые были готовы к реагированию
TonnnnUK TonnnnUK
@ SHARKIE да, я использовал его после обучения на YouTube! Мы избалованы в эти дни для обучения 🙂
mcynowic … mcynowicz
компания, в которой я работаю, очень увлечена «оригинальными» дизайнами и макетами
b0ss_ b0ss_
Кстати, стенограмма всего этого будет доступна на …?
HAWK HAWK
Привет всем, кто только что присоединился — мы просто представляемся
Я менеджер сообщества в SitePoint
Наши эксперты — @SHARKIE и @ajfisher — авторы JumpStart RWD
(Я не собираюсь каждый раз набирать отзывчивый веб-дизайн)
Если вы еще не видели — вот книга: http://www.sitepoint.com/books/responsive1/
srpsco srpsco
@HAWK, почему я должен был использовать другую электронную почту, чтобы получить доступ к комнате
Jeff_S Jeff_S
Привет всем. Я Джефф. Я в Западной Вирджинии (здесь 16:00). Редизайн двух сайтов теперь с использованием адаптивного дизайна, с новыми инструментами и техниками, которые появляются каждый день.
Теперь увлеченный фреймворком Twitter «Bootsrap», но завтра? Может быть, что-то еще.
HAWK HAWK
@srpsco Чрезвычайно досадная ошибка с этим приложением, которую я не могу контролировать 🙁
У меня нет доступа к адресам электронной почты, поэтому я понятия не имею, почему это происходит
HAWK HAWK
Я зарегистрировал много заявок в службу поддержки и не получил ответа
srpsco srpsco
@HAWK хорошо, честно, спасибо
HAWK HAWK
если вы знаете лучшее приложение — дайте мне знать!
SHARKIE SHARKIE
@Jeff_S Огромный интерес к движению ведет к этому динамичному росту. Это действительно захватывающе
HAWK HAWK
Итак, сейчас 9 утра — давай начнем. У кого-нибудь есть вопрос, с которым они хотели бы начать?
guido200 … guido2004
@ b0ss_ Я думаю, что ссылка на стенограмму будет опубликована в разговоре с веткой экспертов?
HAWK HAWK
Это будет опубликовано на SitePoint.com @ b0ss_ @ guido2004
crissoca crissoca
Привет всем, я Крис, из Гватемалы
srpsco srpsco
Я хотел бы знать, что описано в книге, когда я проверял ранее, книга еще не появилась на странице sitepoint.com/jumpstart
HAWK HAWK
Книга вышла сейчас — http://www.sitepoint.com/books/responsive1/
Но я уверен, что ребята могут дать вам краткое изложение содержания
SHARKIE SHARKIE
@srpsco Книга доступна уже сейчас!
Лиан Лиан
Привет всем, я Лин из Оксфорда, работаю разработчиком внешнего интерфейса. Попробовал мой первый отзывчивый сайт на днях с медиа-запросами.
HAWK HAWK
Похоже, мне нужно разобраться с проблемами, войдя сюда
mcynowic … mcynowicz
У меня не было возможности проверить книгу, но мне интересно, есть ли какие-либо ресурсы (в режиме реального времени / обновления) в цифровой версии, которые имеют дело с популярными размерами устройства?
srpsco srpsco
И, более конкретно, если включить Twitter Twitter и охват адаптивных изображений и таблиц данных
Jeff_S Jeff_S
Я купил это вчера. Был только шанс пролистать его, но мне нравится то, что я вижу FWIW!
simonJae simonJae
Привет всем … Я построил отзывчивое резюме со структурой «Foundation» … плюс несколько других — но эти структуры, кажется, прыгают как «кошки на горячей жестяной крыше»
SHARKIE SHARKIE
@Jeff_S Спасибо!
ajfisher ajfisher
@jeff_S отлично!
ralph.m ralph.m
@mcynowicz Погоня за размерами устройства не обязательно является лучшим способом.
Мэри Мэри
Мой первый раз в одном из этих чатов … скажите мне, как это работает и что я буду изучать?
SHARKIE SHARKIE
@mcynowic В цифровом издании нет места для постоянных обновлений, но я уверен, что sitepoint.com будет держать вас в курсе новостей
Christos Christos
Привет, вы бы порекомендовали стратегию «Mobile First»? Если да, то как насчет браузеров, которые не поддерживают css3?
HAWK HAWK
Привет @Mary Это бесплатный чат — вы задаете вопросы, а наши эксперты отвечают. То, что вы узнаете, будет зависеть от того, что вы спросите 🙂
jeankap jeankap
Привет, я — Жан в Нью-Йорке. Я — архитектор цифровых решений, специализирующийся на электронных книгах, HTML5 и мобильных приложениях для офшорной издательской компании. Я работал с таблицами стилей еще до CSS3, поэтому RWD для меня не новость. Просто новый в синтаксисе …
sjwdavie … sjwdavies
Какой самый лучший каркас RWD для использования?
Пит Пит
Привет всем. Пит здесь из Гастингса, Великобритания. На веб-сайтах приходится делать все понемногу — так что ни в чем не бывало :(. Работал с Bootstrap сегодня впервые. Вау. Может быть, идеально подходит для кого-то вроде меня. (Дети должны вернуться домой в любой момент, поэтому, возможно, придется уйти коротко заметьте. Извинения, если я сделаю.)
MarkDSki MarkDSki
@ ralph.m Можно ли предположить, что размеры устройства неофициально стандартизированы? Можем ли мы теперь разобраться, просто телефон, планшет и т. Д.?
HAWK HAWK
@SHARKIE, возможно, вы можете решить эту проблему: но мне интересно, есть ли какие-либо ресурсы (в режиме реального времени / обновления) в цифровой версии, которые имеют дело с популярными размерами устройства? И, более конкретно, включены ли начальная загрузка Twitter и охват адаптивных изображений и таблиц данных
SHARKIE SHARKIE
@ ralph.m великая точка Ральф. Использование вашего контента в качестве руководства, когда требуются точки останова, является наиболее гибким способом продвижения вперед.
Джерри Джерри
@molona — похоже, многие из нас только что выдумали поддельные адреса
simonJae simonJae
моя самая большая дилемма — «пиксели / ems / pt» — есть ли у кого-нибудь однозначный ответ?
HAWK HAWK
Не беспокойся @pete — мои дети смотрят Аладин на диване рядом со мной …
crissoca crissoca
как насчет рем?
b0ss_ b0ss_
Мобильная первая стратегия или адаптивный веб-дизайн? Почему ???
Lorraine Lorraine
Ремс да
SHARKIE SHARKIE
Адаптивные изображения имеют целую главу, и Bootstrap также там.
mcynowic … mcynowicz
@ ralph.m это важно для моей компании, потому что мы в большой степени полагаемся на объявления Google — мне нужно условно загрузить другой размер объявления в зависимости от определения ширины устройства.
SHARKIE SHARKIE
Ничего конкретного о таблицах в первом издании
SpaceBee … SpaceBeers
@simonJae — это какой контекст?
HelloCar … HelloCarlosR
@simonJae Я видел и читал о ems и процентах
simonJae simonJae
@ Криссока — что такое REM?
jeankap jeankap
@simonJae — пиксели и точки не приведут вас ни к чему в мире адаптивного дизайна по сравнению с устройством перед пользователем … EM,% и REM будут подходящим вариантом.
srpsco srpsco
@HAWK к сведению, я вижу, что это на странице книг sitepoijnt, но не на http://www.sitepoint.com/jumpstart/
ralph.m ralph.m
@MarkDSki Как сказал SHARKIE, лучше взглянуть на логические точки останова для вашего контента. Существует много разных размеров экрана, и, насколько мне известно, «один размер не подходит всем».
TonnnnUK TonnnnUK
REM была хорошей группой … это все, что я могу внести 🙂
molona molona
@ Джерри … Я знал, что я не единственный 😀
HAWK HAWK
@ srpsco Ах, хорошо. Я сделаю это сегодня. Благодарность
Микко Микко
Эй, Микко здесь из поезда где-то между Стокгольмом и Мариефред.
Видел какой-то пост здесь о фреймворках. Когда дело доходит до сеток, их слишком много для подсчета. Тот, который я недавно нашел и действительно очень люблю, — unsemantic.com. Кто-нибудь еще использует это уже?
SHARKIE SHARKIE
@simonJae REM является относительным EM
crissoca crissoca
joshbyer … joshbyers
Адаптивный дизайн и мобильный сначала дополняют друг друга и не являются взаимоисключающими
jeankap jeankap
REM = root em — где вы устанавливаете определенный размер для корня, а затем ссылаетесь на REM, чтобы все было относительно того, что вы установили для корня — без математики.
Микко Микко
и все устанавливают root (body) на 10px, я думаю .. КАК ВЫ ДОЛЖНЫ;)
simonJae simonJae
@SpaceBee — с большими сайтами .net я вычислял некоторые из этих «ems» примерно 3 раза… !!!
ralph.m ralph.m
@mcynowicz Это звучит как высокий заказ. Устройство нюхает много работы. Требуется постоянный мониторинг и обновление. Не стоит ИМХО. Я бы изучил возможности сделать эти объявления более плавными.
SHARKIE SHARKIE
@joshbyers Отличная мысль, Джош
joshbyer … joshbyers
RD может использоваться постепенно (см. Рамки 320 и выше), что соответствует философии мобильного первого
simonJae simonJae
@jeankap — да — это имеет смысл — спасибо
jeankap jeankap
никто не должен устанавливать root на 10px … Это слишком мало. Исследования юзабилити говорят, что минимум 16 px. больше для тех из нас в мире, кто слеп, как летучие мыши.
MarkDSki MarkDSki
@ ralph.m Итак, вы говорите о том, чтобы начать применять адаптивные методы дизайна, когда этого требует контент / дизайн сайта? Независимо от размеров устройства? Я мог видеть это как хороший способ проектирования.
crissoca crissoca
Ребята, у вас есть опыт работы с уже созданными сайтами третьей стороной, чтобы сделать его отзывчивым?
mcynowic … mcynowicz
@ ralph.m Предоставляет ли Google текущие объявления? У меня сложилось впечатление, что это были статичные ширина и высота в пикселях
SHARKIE SHARKIE
@mcynowicz Вы можете использовать свои рекламные блоки в качестве контента, который управляет вашими точками останова
ajfisher ajfisher
@ b0ss_ Mobile First — это действительно подход к RWD. Исходя из того, что ** обычно ** проще начинать с экранов самых маленьких размеров и переходить к более крупным, улучшая свой дизайн, используя преимущества большего пространства
Мэри Мэри
Я работаю по старым технологиям… ASP, Javascript и т. Д. Я готовлюсь уйти с работы (да, я стар!) Это что-то, что я могу легко взять?
Микко Микко
да, конечно, он слишком маленький. но проще вычислить rems. Вы должны установить свои тексты на больший шрифт
crissoca crissoca
Я недавно работал на некоторых сайтах, как это, и это становится кошмаром
ralph.m ralph.m
@Mikko 10px довольно маленький. Слишком маленький для меня. Старайтесь избегать шрифтов в px.
httpster httpster
Ребята из Filiment Group написали хорошую статью о том, как оставить размер шрифта по умолчанию, http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
simonJae simonJae
@ Криссока — да. Это было моей задачей пару месяцев назад — тоже .net
b0ss_ b0ss_
joshbyer: спасибо
Lorraine Lorraine
@crissoca Я использовал адаптивные темы Genesis для WordPress.
ralph.m ralph.m
@MarkDSki Да, это лучший подход, я бы сказал.
imagesti … imagestic
Как начать с адаптивного дизайна?
HAWK HAWK
Если у кого-то есть какие-либо хорошие ресурсы, то обязательно оставьте их здесь — я перечислю их в начале стенограммы
jeankap jeankap
У меня есть отзывчивая тема WP от themeforest.
SHARKIE SHARKIE
@ Мэри, я надеюсь, что с книгой у тебя все получится на выходных. И тогда вы на своем пути
thebrass … thebrassman
Мобильный первый подход хорош, потому что он заставляет вас расставить приоритеты в иерархии сайтов. Это приоритетность всегда важна, но из-за маленькой начальной точки экрана она требует этого.
ralph.m ralph.m
@mcynowicz Боюсь, я не знаю. Что-то для расследования, хотя.
Микко Микко
Раньше говорили, что вы должны установить body на 76% от всего, и затем рассчитать из этого. Проблема в том, что если я установил в своем браузере шрифт на что-то другое, чем стандартное 16pt, то все более или менее повреждено
HAWK HAWK
Хороший стартовый вопрос @imagestic — как начать?
b0ss_ b0ss_
ajfisher: 1) кто-то напечатал здесь, они дополняют друг друга. Правда? (2) То, как вы объяснили, совершенно противоположно грациозной деградации, верно?
MarkDSki MarkDSki
@crissoca Я всегда чувствовал, что для добавления адаптивной технологии дизайна на сайт часто требуется очень тщательный редизайн. Не только шаблон, но часто и переосмысление контента
simonJae simonJae
@imagestic — начните с Google на «адаптивных платформах»
Микко Микко
это то, что я имею в виду, установив «root» в 10px. тогда это легко подсчитать, если использовать рем!
Jeff_S Jeff_S
@Mary: я уверен, что это путь вперед. Если вы занимаетесь веб-дизайном, то, на мой взгляд, изучение этого будет стоить столько же, сколько изучение HTML и CSS.
HAWK HAWK
Добро пожаловать всем, кто только что присоединился к нам. Наши эксперты сегодня @SHARKIE & @ajfisher — пожалуйста, не стесняйтесь задавать вопросы в любой момент. Я сделаю все возможное, чтобы убедиться, что все получит ответ. Если дела идут слишком быстро, вы можете получить стенограмму с сайта pointpoint.com сегодня позже.
Lorraine Lorraine
У меня возникла та же проблема с моим графическим дизайнером, с чего начать — я предоставляю макет, но укладываю графику, которая мне не нравится. @imagestic
SHARKIE SHARKIE
@mikko Пропорции должны быть одинаковыми, если вы делаете ВСЕ в относительных единицах. Таким образом, ваш дизайн должен быть согласованным, даже если масштаб был не тем, о чем вы изначально думали
Мэри Мэри
спасибо @HAWK и @Jeff_S
thebrass … thebrassman
Я обнаружил, что Bootstrap очень легко начать. Также Foundation by Zurb действительно хорош, но вы почти получаете слишком много с этой платформой. Вам нужно время, чтобы прореживать код, который вам не нужен.
HAWK HAWK
@ajfisher Может быть, вы могли бы ответить на вопрос, как начать работу с RWD?
Пит Пит
Спасибо @Hawk. стенограмма отличная идея 🙂
MarkDSki MarkDSki
@thebrassman Согласен. Гораздо проще собрать из меньшего устройства вверх. В то же время, я думаю, что при проектировании сейчас, чтобы включить адаптивные методы проектирования, важно рассмотреть и представить, как сайт будет выглядеть во всех измерениях на ранних стадиях проектирования.
Мэри Мэри
ой @ шарки особенно
simonJae simonJae
@mikko — почему не «@media» запросы?
crissoca crissoca
@markDSki да, я чувствую, что дело не только в разработчике, но и в работе всей команды
Микко Микко
@ SHARKIE ну да, они должны быть, но ты знаешь 🙂
если вы установите 10px (или что-то еще), это как сброс размера нет?
ralph.m ralph.m
@imagestic Возможно, хорошее место, чтобы начать с адаптивного дизайна — это изменить макет с фиксированной шириной на $ width. Посмотрите, как раскладка раскладывается, когда вы сужаете и расширяете окно браузера. (Технически адаптивный дизайн существует уже давно.) Теперь появились более сложные инструменты для адаптивного стиля благодаря таким вещам, как @media. (Конечно, еще один способ начать это получить книгу.: D)
joshbyer … joshbyers
@ b0ss_ ты прав — сначала думай о мобильном телефоне, это противоположность грациозной деградации. Вы начинаете с мобильного устройства, а затем постепенно расширяете возможности, которые предоставляет вам большой экран
thebrass … thebrassman
@MarkDSki Полностью согласен. Фактически, одной из проблем работы с клиентами является вопрос «как это будет выглядеть?». Здесь происходит два уровня обучения: наше собственное понимание техники и понимание клиентов.
imagesti … imagestic
@ ralph.m Понятно, большое спасибо
SHARKIE SHARKIE
@mikko Если ваш дизайн плавный — если все используемые вами размеры взяты из браузера, а фиксированная ширина отсутствует, то даже уменьшение размера шрифта до 10 пикселей означает, что ваш дизайн будет реагировать
anir99 anir99
Является ли написание Responsive CSS обычным способом слишком сложно, чтобы вместо этого использовать framework / bootstrap? Я не думаю, что это действительно трудно или что-то начать с … (да, я еще не вскочил на фреймворк / бутстрап)
Christos Christos
безопасно использовать рем? их поддерживают браузеры?
mcynowic … mcynowicz
@ ralph.m В итоге я использовал эту технику, чтобы поменять идентификаторы рекламных мест в Google на основе ширины.
ralph.m ralph.m
@imagestic Упс, я имел в виду «изменить макет с фиксированной шириной на% ширины».
ajfisher ajfisher
@imagestic Самый простой способ начать работу — использовать одну из платформ и посмотреть, как она делает вещи отзывчивыми. Адаптивная версия Bootstrap или Foundation, например. Это даст вам возможность поиграть в песочнице, где вы сможете наблюдать за происходящим и видеть, как они работают. Если вы хотите что-то немного более скромное, то адаптивный макет для HTML 5 Boilerplate также является хорошим инструментом обучения
mcynowic … mcynowicz
SHARKIE SHARKIE
@joshbyers Думайте об этом как об усилении, а не как о деградации
crissoca crissoca
@ Christos, насколько я могу судить, нуждается в запасном размере
Lorraine Lorraine
Я построил свой сайт в Rems несколько недель назад, никаких проблем,
SpaceBee … SpaceBeers
SHARKIE SHARKIE
REM поддержка отличная http://caniuse.com/rem
SpaceBee … SpaceBeers
IE 9 и IE 10 не поддерживают rem-единицы при использовании в сокращенном свойстве «font».
imagesti … imagestic
@ajfisher Отлично! Является ли Dreamweaver хорошим инструментом для адаптивного дизайна? Если нет, то что?
simonJae simonJae
еще раз … почему все используют EMS — это архаичная мера. Почему не ТОЧКИ?
blanchrt blanchrt
h, @ ralph.m, я думал, что $ означает «гибкий» или «адаптивный». Мы могли бы ввести термин здесь;)))
ralph.m ralph.m
Хорошая ссылка @mcynowicz 🙂 (я думал, что должно быть что-то подобное.)
thebrass … thebrassman
Я только что закончил этот клиентский сайт, используя Foundation в качестве фреймворка. http://www.neheart.com
SpaceBee … SpaceBeers
@simonJae — это печатная машина
jeankap jeankap
Адаптивный веб-дизайн не зависит от инструмента. Это все о целевых приложениях / браузерах / устройствах, на которых вы тестируете.
molona molona
@images any тоже хорош для RWD или любого вида дизайна … если вы знаете, как его использовать
SHARKIE SHARKIE
Спасибо @spaceBeers!
ajfisher ajfisher
@imagestic хорошо, я использую Vim;) но реальность такова, что вам нужно протестировать его в вашем браузере и на целевых устройствах, чтобы редакторы не имели большого значения
srpsco srpsco
какова текущая лучшая практика для изображений, которые также относятся к дисплеям сетчатки
anir99 anir99
@jeankap это так верно
ralph.m ralph.m
@blanchrt Похоже, это будет стоить слишком много $$$: p
thebrass … thebrassman
@srpsco Хороший вопрос. Кто-нибудь?
simonJae simonJae
@SpaceBeers — 8 ‘точек’ составляют EM — хотя POINTS ближе к пикселям — оба являются термином печати
molona molona
@ imagestic… проблема с Dreamweaver (или любым другим WYGIWYS) заключается в том, что если вы доверяете автоматизированному коду, который он создает, ваш сайт будет… мусором… говорить о коде, очевидно
anir99 anir99
Вам не нужно использовать какой-либо загрузочный фреймворк для создания адаптивного дизайна … это действительно просто CSS
thebrass … thebrassman
У кого-нибудь есть примеры сайтов, которые они создали с использованием адаптивных методов?
anir99 anir99
Я имею в виду не обязательно использовать рамки для RWD
mcynowic … mcynowicz
поэтому вместо ems / px / pts вы бы установили базовый размер в пикселях и работали с процентами для размера шрифта?
molona molona
@imagestic, но если вы хорошо знаете свой код, это может ускорить вашу производительность
jeankap jeankap
@ ralph.m — стоимость зависит от ваших бизнес-требований и вашей контент-стратегии. Вам не нужно платить за все заранее, но вы должны рассчитывать на разумную сумму затрат для усилий, необходимых для удовлетворения ваших бизнес-требований и удовлетворения вашей контент-стратегии. Короче говоря … старайтесь отвести разговор о расходах, пока не узнаете, что вам нужно делать.
simonJae simonJae
@thebrassman — artatwork.com.au/resume
SHARKIE SHARKIE
@srpsco Вам нужно будет добавить параметр srcset к своим изображениям и наблюдать, как растет поддержка браузеров. Я с нетерпением жду, чтобы это стало более популярным
mcynowic … mcynowicz
http://www.jobhub.com (только что вышел сегодня, первый отзывчивый проект, пожалуйста, будьте добры :-))
simonJae simonJae
@mcynowicz — да. это было бы предпочтением …
jeankap jeankap
100% — это приблизительно 16 пикселей в большинстве браузеров, в которых вы не использовали параметры пользовательского агента. Начните со 100% и увеличивайте и уменьшайте оттуда.
thebrass … thebrassman
@simonJae Очень приятно!
ralph.m ralph.m
@jeankap Извинения, это была просто неудачная попытка пошутить. Но, в любом случае, хороший момент. 🙂
BRandon вошел в комнату
SHARKIE SHARKIE
@mcynowicz Спасибо, что поделился, посмотрю позже. Что было лучшей частью опыта разработки?
ajfisher ajfisher
@srpsco srcset твой друг здесь. Хотя поддержка еще немного, но станет лучше.
b0ss_ b0ss_
так, чтобы мой сайт был отзывчивым, он должен использовать EM вместо PX?
simonJae simonJae
… даже базовый размер POINT
blanchrt blanchrt
jeankap, это была просто шутка с опечаткой ralph.m (он написал $ для%)
Пит Пит
@mcynowicz — дай мне действительный почтовый индекс … 🙂
HelloCar … HelloCarlosR
@thebrassman заканчивает работу над этим. Мягкая презентация прямо сейчас. http://www.nonanetwork.com это использовало структуру начальной загрузки
jeankap jeankap
@ ralph.m Не беспокойся … Я просто думаю, почему мы делаем это в первую очередь. 🙂
thebrass … thebrassman
@mcynowicz Отличная работа! Выглядит хорошо!
mcynowic … mcynowicz
действительный почтовый индекс США: 90210
jeankap jeankap
и я слежу за разговором одним глазом…;)
SpaceBee … SpaceBeers
На данный момент мы переделываем один из крупнейших туристических брендов в мире, используя Bootstrap.
molona molona
@ b0ss вам определенно нужно двигаться … и это означает EM или% вместо px
simonJae simonJae
@thebrassman — использовал основу «Foundation» — очень приятно!
SHARKIE SHARKIE
@ b0ss_ Относительный или фиксированный, не обязательно EM
HelloCar … HelloCarlosR
@ b0ss_ это начало, и вы должны использовать проценты для вашей ширины, а также для сокращения сайта
Tunbosun Tunbosun
При разработке адаптивных сайтов рекомендуется использовать либо Bootstrap, либо Zurb Foundation.
Пит Пит
Какой лучший способ проверить мой RWD? Могу ли я рассчитывать на веб-эмуляторы?
thebrass … thebrassman
@helloCarlosR — мне нравится, как вы изменили размер текста заголовка для меньших размеров экрана. Хорошо сделано!
molona molona
@ b0ss вы также можете протестировать и повеселиться с новыми единицами измерения (такими как rems)
simonJae simonJae
теперь с помощью фреймворка под названием «Gantry» (через Joomla)
SpaceBee … SpaceBeers
Как далеко (реально) вы проходите тестирование устройства?
HelloCar … HelloCarlosR
@thebrassman спасибо
mcynowic … mcynowicz
@SHARKIE Мне понравилось работать с текучим / мобильным макетом. У меня не было возможности много работать в этой среде. Много устройств, сидящих на моем столе 🙂
jeankap jeankap
Так что … это может показаться старой школой, но как насчет того, чтобы не использовать фреймворк и начать с нуля? Каковы преимущества отсутствия целого ряда вещей, которые вы никогда не сможете использовать?
SHARKIE SHARKIE
@Tunbosun и Bootstrap или Foundation — отличное место для начала. Bootstrap может заставить вас видеть результаты немного быстрее
joshbyer … joshbyers
@srpsco зависит от типа изображения и контекста, в котором вы его используете. Для значков вы можете использовать шрифт значков, хороший вариант css3 в сочетании с медиазапросами, а затем для изображений с контентом доступно несколько сценариев, хотя, на мой взгляд, это все еще находится на стадии дикого запада (не уверен, что «Лучшая практика» пока)
ajfisher ajfisher
Хороший вопрос: вы можете использовать эмуляторы для начала, но ничто не сравнится с тестированием на реальных устройствах. Не в последнюю очередь потому, что с мобильными устройствами вам нужно увидеть, достаточно ли велики ваши сенсорные цели, чтобы по-настоящему ударить пальцем….
anir99 anir99
@jeankap только то, о чем я говорю
ralph.m ralph.m
Мне понравилось это сообщение в блоге о ems в адаптивном дизайне: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ Стоит прочитать.
Лиан Лиан
У @pete firefox есть несколько инструментов для тестирования, которые добавляются в инструменты для веб-разработчиков. Что показывает, как ваш сайт будет выглядеть на разных устройствах и т. Д. Это выглядит довольно хорошо.
Jeff_S Jeff_S
@jeankap: Хороший вопрос!
molona molona
@jeankap, на мой взгляд, это зависит от проекта и вашего графика
SpaceBee … SpaceBeers
@jeankap — Дэвид Бушелл недавно написал хорошую статью об этом — http://dbushell.com/2013/03/19/on-responsive-layout-and-grids/
Christos Christos
Я не думаю, что адаптивные фреймворки — это путь для начинающих. Если вы не испачкаете руки, вы не научитесь. Кроме того, они убирают все веселье.
SHARKIE SHARKIE
@mcynowicz Видеть свой дизайн просто РАБОТАТЬ на разных устройствах — это всегда здорово
HAWK HAWK
Что касается тестирования устройств, мы запускаем продукт, который краудсорсинг интерфейсного тестирования на нескольких устройствах. Вы можете зарегистрироваться на бета-версию здесь eyeball.sitepoint.com
mcynowic … mcynowicz
Я очень сильно полагался на Responsinator для первоначального тестирования: http://responsinator.com/?url=http://www.jobhub.com&scroll=ext
TonnnnUK TonnnnUK
Мы находимся в начале адаптивного веб-дизайна, и сколько времени потребуется владельцам бизнеса, чтобы быть готовыми заплатить, чтобы обновить свои модные веб-сайты? (Я знаю, что это больше маркетинг / бизнес, чем технический)
Пит Пит
@jeankap. хороший вопрос. это мне немного помогло. http://tinyurl.com/ar8axu6
thebrass … thebrassman
@jeankap Я думаю, что начинать с нуля — лучший способ научиться адаптивному подходу. В зависимости от масштаба проекта, это может занять больше времени, но вы многое из этого получите. Преимущество фреймворка в том, что он великолепен для быстрого создания прототипов.
SpaceBee … SpaceBeers
@HAWK — Спасибо. Я ходил в местный телефонный магазин и проверял там свои сайты.
molona molona
@jeankap, если фреймворк хорошо спроектирован и ускоряет процесс, тогда нет ничего плохого в его использовании… тем не менее, если вам нужно персонализировать почти каждый бит… вы можете начать с нуля и заставить его работать так, как вы хотите, чтобы он работал
jeankap jeankap
Просто думать … В идеальном мире, где убедительные силы позволили вам сделать это правильно, а не просто сделать это … Никакая структура не может означать более чистый код. Я пришел со времен SGML и XML. Мне нравится чистый и правильный код …
anir99 anir99
Я мог бы быть странным здесь, может быть, но лично я нахожу бутстрэпс и структуры раздражающими…. нет ничего плохого в написании кода прямым путем
Tunbosun Tunbosun
@SHARKIE спасибо, если я хочу добавить поля к контенту при использовании начальной загрузки, макет разбросан
SHARKIE SHARKIE
@jeankap Фреймворки и шаблоны быстро дают вам отличные результаты, но для долгосрочного успеха я всегда предпочитаю найти индивидуальное решение. Это скудно и быстро!
molona molona
@tonnnnUK как хорошо ты продаешь? сколько стоит бизнес? сколько денег они могут сделать, если дизайн обновлен?
jeankap jeankap
Я пошел в местный складской клуб, чтобы провести тестирование на 7-дюймовых планшетах. Сделайте скриншоты и отправьте их себе. Или просто сфотографироваться с моим телефоном …
HAWK HAWK
Может ли кто-нибудь дать мне какие-либо подробности об ошибке, которую они получали о своем адресе электронной почты при входе здесь?
PaulOB PaulOB
@ anir99 Я чувствую то же самое. Я бы лучше написал свой собственный код.
simonJae simonJae
@jeankap — как вы сочетаете соответствие IE с RWD?
SHARKIE SHARKIE
@tunbosun Попробуйте добавить поля для элементов внутри сетки, а не для элементов, которые структурируют сетку
molona molona
@tonnnnUK, если вы сможете оценить, сколько бизнес заработает с новым дизайном, это поможет вам правильно установить цену
jeankap jeankap
Я за то, чтобы все работали быстро, поэтому я купил тему WP вместо того, чтобы кататься по собственной. У меня просто нет такого времени … Но для проекта клиента? Я постараюсь сделать это правильно.
mcynowic … mcynowicz
@TonnnnUK моя компания очень старая, когда дело доходит до разработки / перепроектирования веб-проекта. Я не мог никого убедить «одобрить» RWD. Для дизайнеров есть кривая обучения, и никто в маркетинге не следовал моим аргументам в пользу бизнеса
ralph.m ralph.m
@TonnnnUK В любом случае компании могут подождать, пока их сайт не нуждается в обновлении. И тогда они должны будут решить, действительно ли дизайн, который перекомпонован для различных устройств, действительно подходит.
Пит Пит
@leanne @ajfisher ура
imagesti … imagestic
какой редактор CSS вы рекомендуете?
ralph.m ralph.m
@ anir99 Вы не одиноки. 🙂
Пит Пит
@jeankap лол. отличная идея.
Jeff_S Jeff_S
TonnnnUK: Первая глава Шарки и Эндрю, я думаю, охватывает некоторые из основных моментов, которые мы должны понять, прежде чем донести важность этого до менеджеров и владельцев бизнеса. Это больше не касается мобильных устройств. Это касается универсального дизайна, который не зависит от устройства. И это работает. И это круто.
SHARKIE SHARKIE
@imagestic Я использую CSSEdit, или просто Textmate
mcynowic … mcynowicz
Мне повезло, что этот конкретный проект прошел под радаром, и они позволили мне разрабатывать его на лету, пока я кодировал
simonJae simonJae
@mcynowicz — хорошая причина, чтобы перейти на «мобильный телефон»
mcynowic … mcynowicz
они не знали заранее, что это будет отзывчивым
jeankap jeankap
@simonJae IE соответствие? Я затыкаю уши и говорю «ля-ля-ля-ля, я вас не слышу»… и затем я иду искать шим, обходной путь или взлом. Но только если я не смогу убедить клиента просто перейти на браузер, который будет поддерживать их требования без взлома.
ajfisher ajfisher
@tonnnnUK Еще одна вещь, которую следует учитывать, это то, что хорошо реализованная часть RWD теперь, вероятно, будет длиться дольше, чем «традиционно» построенный сайт, поэтому ваши общие затраты снижаются.
molona molona
@imagestic для меня, Notepad ++… потому что я знаю, как делать макросы там, и мне очень нравится расширение для Zend-кодирования
TonnnnUK TonnnnUK
@molona Полагаю, это коммерческий шаг … Я думаю, что большинство владельцев бизнеса некоторое время будут не знать об этом … Сколько времени им понадобилось, чтобы понять, что им нужен нормальный сайт?
SHARKIE SHARKIE
@jeff_S Спасибо, Джефф! Это отличный момент
simonJae simonJae
@imagestic — я в одной лодке с ШАРКИ
ralph.m ralph.m
@HAWK Если вы уже использовали адрес электронной почты, он, кажется, не позволяет использовать его снова (скажем, он уже занят). Так что я просто каждый раз придумываю.)
jeankap jeankap
Я недавно спросил члена WG CSS о редакторах. Он сказал, что большинство из них работают в своем любимом редакторе ascii. За исключением Даниэля Глаузмана (разработчика BlueGriffon).
simonJae simonJae
все ручное кодирование и Firebug и т. д.
TonnnnUK TonnnnUK
Некоторые отличные ответы … спасибо, ребята
HAWK HAWK
Спасибо @ ralph.m
mhenders … mhenderson
Какие из любимых решений людей для навигации вне холста на мобильном телефоне?
Lorraine Lorraine
@imagestic
b0ss_ b0ss_
для меня ВИ или ГЕДИТ !!!
anir99 anir99
@simonJae есть CSS3 MediaFill-запросы для соответствия IE, проверьте это:
http://chrisjacob.github.com/Respond/#RESET
https://github.com/scottjehl/Respond
MarkDSki MarkDSki
@jeankap То же самое здесь, я купил тему WP для использования в личном проекте. Спасло меня часами за минимальную стоимость. Гораздо проще взять существующую тему и внести базовые изменения, чем строить с нуля или даже на платформе. Тем не менее, этот подход определенно очень зависит от проекта.
molona molona
@tonnnnUK, поэтому вам нужно выяснить результаты конкурента, который ваш клиент хочет побить (они должны сказать вам, кто их конкурент, в их глазах) и как веб-сайт может помочь им достичь этих цифр … они не не понимают дизайн или необходимость веб-сайта … но они понимают ценность денег … это международный язык
SHARKIE SHARKIE
@simonJae IE не играет огромной роли во многих местах, где вы разрабатываете. Это означает, что вам нужно только убедиться, что одна из ваших точек останова работает, в общем. И вы всегда можете оказать им небольшую условную поддержку
jeankap jeankap
Я тестировал Espresso, Style Master и TopStyle 5 (ПК). TopStyle был моим любимым в 2000 году. Самая новая версия для CSS3 и HTML5 обманута… А потом я просто делаю вещи в Sublime Text 2, потому что это быстро и грязно.
Lorraine Lorraine
@imagestic css лучше без редактора imho
Christos Christos
Если вы переходите на «Mobile First», что вы делаете с браузерами, которые не поддерживают медиазапросы?
mhenders … mhenderson
@christos Отсутствие поддержки медиа-запросов — это первый медиа-запрос, а затем используйте min-width для построения.
molona molona
@ Лоррейн, чтобы объяснить это? Не уверен, что я понимаю, что вы имеете в виду
TonnnnUK TonnnnUK
@molona пятно на! деньги говорят.
mcynowic … mcynowicz
большое преимущество для бизнеса / маркетинга — это противодействие URL-адресам и перенаправлениям для конкретных устройств — один URL-адрес без переадресации с устройства-анализатора лучше подходит для ранжирования SEO, сохраняя целостность пользовательского интерфейса на любом устройстве.
SHARKIE SHARKIE
@ christos Если вы первая цель — мобильные устройства, все они будут поддерживать Media Queries
imagesti … imagestic
Спасибо за ответы, люди!
simonJae simonJae
@ anir99 — спасибо Анир. Есть также несколько других модулей JQuery — см. здесь (где-то) — http://www.unheap.com/
jeankap jeankap
+1 @mcynowicz!
srpsco srpsco
любая рекомендация для калькуляторов
ajfisher ajfisher
Поддержка мультимедийных запросов @christos в наши дни довольно хороша ( http://caniuse.com/#feat=css-mediaqueries ) и превосходна на мобильных устройствах, но если вам нужно позаботиться о браузерах, которые их не поддерживают, то это ваш запасной тест
jeankap jeankap
px2em — это приложение для iOS, которое должно облегчить математическое преобразование …
SHARKIE SHARKIE
@srpsco Grid калькуляторы? Вы смотрели на https://gridsetapp.com/
anir99 anir99
@simonJae Спасибо Саймон за ссылку, я проверю это 🙂
mcynowic … mcynowicz
Может ли кто-нибудь опубликовать пример URL на Адаптивном сайте, который он создал с помощью Bootstrap?
jeankap jeankap
Разве сайт Bootstrap сам по себе не адаптивен?
simonJae simonJae
Я чувствую, что большая часть тяжелой работы должна быть перенесена на сервер — как при обнаружении устройства
b0ss_ b0ss_
Разве сайт Bootstrap сам по себе не адаптивен? [2]
MarkDSki MarkDSki
@mcynowicz Интересный момент, можете ли вы предоставить немного больше информации о том, как перенаправление устройства-сниффера может быть негативным в SEO? Поисковые системы активно ищут эти перенаправления и соответственно корректируют ваше позиционирование? Влияет ли это на результаты поиска на разных устройствах? В настоящее время у меня есть веб-сайт (без ответа), который перенаправляет на / mobile URL в зависимости от устройства.
SHARKIE SHARKIE
@mcynowicz Вы смотрели на http://builtwithbootstrap.com/?
jeankap jeankap
@simonJae Правда? Это больше относится к прогрессивной стороне вещей, не так ли? Но как насчет того, что UA «лгут» о том, кто они и что они могут сделать?
mcynowic … mcynowicz
@jeankap @ b0ss_ У меня сложилось впечатление, что это фреймворк — меня интересует настраиваемость дизайна
mhenders … mhenderson
@mcynowicz Взгляните на http://builtwithbootstrap.com/
ralph.m ralph.m
@simonJae Обнаружение устройств также требует много от вас — или, по крайней мере, от кого-то, так как новые устройства нужно добавлять постоянно, а не все устройства легко обнаружить.
HAWK HAWK
Добро пожаловать всем, кто недавно присоединился к нам. Не стесняйтесь задавать вопросы в любое время.
ajfisher ajfisher
@simonJae — комбинация обнаружения на стороне клиента и на стороне сервера, как правило, дает наилучшие результаты. Клиенты по-прежнему имеют больше возможностей для обнаружения функций, чем сервер, который действительно может только интерпретировать запрос и принимать решения оттуда.
joshbyer … joshbyers
@MarkDSki это может быть негативно для SEO, потому что это замедляет работу сайта. Поскольку скорость сайта является фактором для SEO, каждое перенаправление и запрос оказывает влияние
Christos Christos
@ajfisher вот что меня смущает. Мой запасной вариант — широкоформатное окно ie8 или ie7?
simonJae simonJae
@ ralph.m — согласился. хотя его время сервер работал на нас … вы не согласны?
mcynowic … mcynowicz
@MarkDSki Если вы перенаправляете своих посетителей на альтернативный URL, то вы регистрируете активность на дополнительном URL, нет?
SpaceBee … SpaceBeers
Не технический вопрос — мысли о показе / скрытии контента на устройствах разных размеров?
simonJae simonJae
@SpaceBeers — абсолютно
(прячется)
MarkDSki MarkDSki
@joshbyers Честная точка зрения.
SHARKIE SHARKIE
@spaceBeers Вот где Media Queries превосходят
joshbyer … joshbyers
@MarkDSki также Google предпочитает адаптивный дизайн в виде одного URL, который не обязательно причинит вам вред, но кто скажет, что они не продвигают сайты с RD больше как часть алгоритма где-то?
ajfisher ajfisher
@ christos, как упомянула Шарки, для тех, кто ее не поддерживает, достаточно поймать все, если вы нацеливаетесь на мобильный. Вы действительно просто гарантируете, что у вас есть разумный дефолт.
ralph.m ralph.m
@simonJae Лично я не слишком сильно перегружаю сервер. Адаптивный дизайн — это больше о CSS и, возможно, JS, которые являются территорией браузера. Но здесь много факторов … и серверные вещи — не мое.
anir99 anir99
@spaceBeers Я думаю, вы могли бы просто использовать дисплей: нет; Правило CSS для этого
Christos Christos
@ ajfisher хорошо, спасибо. Я думаю, что я получаю это сейчас
anir99 anir99
вместе с запросом CSS Media
SpaceBee … SpaceBeers
К вашему сведению, я знаю, как это сделать. Должны ли вы скрывать свой контент от своих пользователей только потому, что они заходят с телефона?
Пит Пит
поэтому, если Ie8 не поддерживает медиазапросы ( http://caniuse.com/#feat=css-mediaqueries) , все ли RWD используют полифилл или соглашаются на узкий сайт в этом браузере?
SHARKIE SHARKIE
@ ralph.m Все больше и больше мы увидим, что адаптивный контент становится фактором. Специально для дизайна Mobile First. Использование сервера может быть отличным инструментом здесь
mcynowic … mcynowicz
В целом, я бы сказал, что на создание единого адаптивного макета с одним URL-адресом тестирования ушло гораздо меньше рабочих часов, чем на создание одного макета, а затем другого отдельно для мобильных устройств.
simonJae simonJae
Я удивлен, что никто не настаивает на «переключателе устройств» на сервере
SpaceBee … SpaceBeers
Тем более, что у них нет «просмотра полного сайта». Вы существенно сокращаете свой контент до определенного процента вашей аудитории
blanchrt blanchrt
@ anir99 Но ВСЕ пользователи должны будут ждать, пока весь этот скрытый контент будет загружен
SpaceBee … SpaceBeers
«Ты» конечно.
Jeff_S Jeff_S
@SpaceBeers: контент должен быть ориентирован на цель, должен иметь приоритет с целью. Некоторые изображения являются только декоративными, и потеря не повредит. Потерять то, что мешает, сохранить то, что пришли ваши пользователи. Во всяком случае, это мое эмпирическое правило. 🙂
molona molona
@spaceBeers, если это в его и ваших интересах, безусловно, вы должны скрывать контент… такой как картинки, которые служат только для задержки доставки страницы
MarkDSki MarkDSki
@mcynowicz Правда, посетители регистрируются как лендинги на странице abcd.com/mobile. Не поймите меня неправильно, план состоит в том, чтобы перейти к адаптивному дизайну при следующем редизайне, однако интересно услышать некоторые мнения / дискуссии о том, как отдельная мобильная версия сайта негативно влияет на SEO.
SHARKIE SHARKIE
@simonJae мы будем обслуживать сервер, играющий большую роль, так как дизайн Content First становится все более типичным
joshbyer … joshbyers
@SpaceBee, если вы скрываете контент, он говорит мне, что вы недостаточно продумали свою архитектуру — философия мобильных устройств решает эту проблему довольно хорошо
ajfisher ajfisher
@simonJae вы также можете рассмотреть возможность маршрутизации различных шаблонов, которые вы отправляете пользователю, исходя из общих решений об их возможностях (например, проверка UA или переменные сеанса и т. д.). Затем вы можете настроить презентацию, используя более стандартные приемы RWD, чтобы справиться с нюансами (например, с помощью различий между iPhone). Мы на самом деле говорим об этом в книге
anir99 anir99
@blanchrt Я думаю, что это было бы в случае с видимостью: скрытый; а не с дисплеем: нет; правило
simonJae simonJae
@SpaceBeers — но это хорошо … !! это не?
TonnnnUK TonnnnUK
«Потерять то, что мешает, сохранить то, что пришли ваши пользователи». Это отличная мантра
ralph.m ralph.m
@SpaceBeers Если вы имеете в виду настройку отображения контента: нет, я не заинтересован в этом … разве что для альтернативного меню или чего-то такого маленького. Мне не нравится мысль о том, что мобильные пользователи загружают контент, который они не видят. Если вы обнаружите, что на настольной версии сайта есть много информации, которую вы не хотите показывать на мобильных устройствах, самое время спросить, должен ли этот контент вообще присутствовать в настольной версии. (Мне нравится, как мобильный дизайн заставляет нас задавать эти вопросы. Многие веб-сайты полны ненужного и отвлекающего контента, ИМХО.)
jeankap jeankap
Они есть, и они не … Одной из вещей, которая недавно вышла, является дискуссия по условию @supports, которое только что было добавлено в CSS3. Одни люди за, другие не так сильно. Они думают, что это расплывчато и должно быть более конкретным. Они также беспокоятся, что это может привести нас к пути в места, где мы уже были — например, к расширениям браузера.
molona molona
@spaceBeers понимание каждого устройства и того, как с ним взаимодействовать, необходимо для хорошего дизайна… и не терять процент пользователей, о которых вы говорили ранее
imagesti … imagestic
Учитывая, что большинство использует другие браузеры, при разработке сайта мы должны иметь в виду IE тоже или нет?
Каково твое мнение?
joshbyer … joshbyers
@molona скрывает картинки не означает, что устройство не запрашивает их и не загружает их — оно просто не отображает их
anir99 anir99
@spaceBeers это хорошая мысль, которую вы сделали
mcynowic … mcynowicz
+1 @ ralph.m
jeankap jeankap
Да. Мы должны помнить IE. Особенно в корпоративном и правительственном мире. Там просто нет выхода из этого.
Особенно в закрытых настольных средах. Ага. Они все еще существуют.
simonJae simonJae
@ajfisher — это правда. Это куда мы все должны идти. Благодарность
molona molona
@imagestic, поскольку он по-прежнему является основным браузером, вы, конечно, должны принять его во внимание … но более важные браузеры зависят от вашего бизнеса и веб-сайта … если у вас есть статистика, даже лучше
ajfisher ajfisher
IE по-прежнему является важным браузером, но попробуйте реализовать политику «текущий минус один». Это должно дать вам достаточное покрытие. Также вернитесь к своим данным. Я проделал некоторую работу для ритейлера, и мы показали, что пользователи IE просто не покупали столько вещей, сколько «остальные», до значительного уровня. Это в значительной степени зависит от контекста, где они должны тратить свой бюджет развития
blanchrt blanchrt
anir99 Он не занимает место (как в случае видимости: скрыто), но загружается. Отключите CSS, и вы увидите все
шнель шнель
Как сайт только для мобильных устройств отвлекает от SEO? Если вы не позволите паукам на это. Затем ваш основной сайт индексируется, и мобильные пользователи перенаправляются на перенаправленный мобильный URL. Да нет?
mcynowic … mcynowicz
если вы создаете адаптивный сайт, ваш браузер IE8 (или ниже) будет полностью пропускать ваши медиа-запросы. Если вы создаете свои медиазапросы CSS в сокращающемся формате (сначала рабочий стол?), Разве ваш сайт не будет «в порядке» в IE8? Это не загружается на мобильных устройствах
jeankap jeankap
Статистика для IE страшная. По-прежнему существует так много пользователей, использующих XP, что мы не можем отказаться от поддержки IE 8. MS на этой неделе продвигает IE 10 в Win 7, но это не обязательно означает, что все позволят этому случиться.
HAWK HAWK
Этот чат был полным! Есть ли кто-нибудь скрывающийся, у которого есть вопрос, который у них не было возможности задать? Или кто-нибудь, кто задал вопрос, на который еще не ответили?
molona molona
@joshbyers true, если вы используете только CSS с дисплеем: нет … но это будет означать, что картинка была там в первую очередь … так почему бы нам не сделать это наоборот? Мы добавляем картинку, когда необходимо, используя любые свойства фона (конечно, вы не должны ограничивать себя свойствами фона…)
@joshbyers или любое другое свойство, которое поможет нам с этим конкретным контентом
simonJae simonJae
@ajfisher — интересный факт (покупатели IE) — были ли они продуктами высокого класса ???
Force_Fl … Force_Flow
@mcynowicz В некоторых школах существует мнение, что IE6-8 должен загружать мобильную версию сайта. Тем не менее, я склонен включать условные выражения IE, чтобы была видна настольная версия сайта
mhenders … mhenderson
@HAWK Каковы некоторые из лучших способов использования навигации по холсту?
srpsco srpsco
Вы не могли бы сделать условный комментарий для ie8, когда делаете маленький -> вверх
шнель шнель
@ajfisher — да, очень интересно в отношении покупателей IE. Я должен копаться в статистике некоторых клиентов
ajfisher ajfisher
@ SimonJae не совсем — это был магазин модной одежды.
SpaceBee … SpaceBeers
@molona, ​​@joshbyers — мы смотрим на загрузку контента в aysncronously на настольных компьютерах, поэтому для вкладок, модальных окон и т. д., где они имеют наибольшую мощность. Мобильные телефоны (с ужасными связями) будут иметь контент на отдельных страницах. Должен держать сайт красивым и энергичным.
joshbyer … joshbyers
@schnell Я недавно писал об этом — один сайт помогает с обратными ссылками, частотой отказов и временем загрузки. http://www.copyblogger.com/mobile-responsive-design-benefits/
cherylea cherylea
@HAWK — просто пытаюсь прочитать LOL
шнель шнель
спасибо @joshbyers
HAWK HAWK
@SHARKIE Каковы некоторые из лучших способов использовать навигацию по холстам? (для @mhenderson)
Jeff_S Jeff_S
Я знаю, что Крейг и Эндрю упоминают прогрессивное улучшение в книге. Краткое краткое изложение его текущей важности и актуальности в сочетании с RWD?
ajfisher ajfisher
Данные @schnell, безусловно, являются способом решения многих из этих проблем, особенно с клиентами. Посмотрите, как ведут себя люди, а не только пропорции.
joshbyer … joshbyers
@Molona Да — я согласен. Свойства фона с медиа-запросами являются хорошим вариантом.
SHARKIE SHARKIE
@schnell По крайней мере, наличие нескольких доменов в пространстве поиска означает, что весь ваш трафик не направляется в один домен, и это может выглядеть так, как будто вы получаете меньше трафика. SEO по-прежнему остается серьезной проблемой, но я уверен, что движки откликнутся на новые подходы к обслуживанию контента, как и мы 🙂
HAWK HAWK
Для тех, кто хочет просмотреть книгу, есть примеры глав, доступных здесь https://learnable.com/books/responsive1/online
molona molona
@spaceBeers Я согласен с вами … может быть, я не выразил себя так, как я должен
mcynowic … mcynowicz
Я читал некоторые исследования, которые показали, что большинство людей, использующих устаревшие браузеры IE (6-8), делали это со своих рабочих мест, где бизнес управлял обновлениями своего оборудования и операционных систем, — что даже «пользователи» застряли в устаревших браузерах, которые они не делали. не хочу использовать. Также может быть то, почему люди не могут делать покупки в IE (если они на работе, они не должны делать покупки)
HAWK HAWK
@cherylea Сегодня вечером на sitepoint.com будет опубликована стенограмма, и если у вас есть вопросы, обязательно зайдите на форумы SitePoint.
ajfisher ajfisher
@Jeff_S Я все еще склоняюсь к тому, что это хорошо. Обеспечьте хорошую твердую основу и используйте функцию обнаружения, чтобы улучшить впечатления тех, кто может ее получить.
SpaceBee … SpaceBeers
@molona — я снова прочитал свой вопрос и понял, что это звучит так, будто я спрашиваю «как» спрятать вещи. Рад, что это прояснилось.
cherylea cherylea
спасибо @HAWK
simonJae simonJae
@HAWK — лол — ужасная обложка — ИМХО (без обид) черный ??
Jeff_S Jeff_S
Спасибо @ajfisher
molona molona
@mcynowicz Я могу сказать, что только в компании, в которой я работаю, это правда… среди прочего, потому что у них довольно много приложений, основанных на SAP, и они не будут хорошо работать в любом другом браузере, кроме IE (хотя официальная версия 8)
simonJae simonJae
@HAWK — возьму копию
HAWK HAWK
@SimonJae Все книги JumpStart черные. 🙂
joshbyer … joshbyers
@simonJae отзывчивый дизайн — новый черный цвет 🙂
simonJae simonJae
серый !!!
Пит Пит
Кто-нибудь знает хорошую статью о «рабочий стол / сначала» против «мобильный вверх / сначала»?
simonJae simonJae
: D
HAWK HAWK
И не дразни @SHARKIE о куклах
mcynowic … mcynowicz
отличные друзья! Я буду следить за многими из вас в твиттере … Чао!
srpsco srpsco
Спасибо всем
Force_Fl … Force_Flow
@mcynowicz причины для рабочих мест различны, но когда дело доходит до домашних пользователей, некоторые просто не знают разницы (или не могут обновить IE, если они работают под управлением XP)
ajfisher ajfisher
@mcynowicz да, есть еще и элемент этого. Хотя вы будете удивлены статистикой людей, делающих покупки в нерабочее время с мобильных устройств — вероятно, в результате я считаю…
molona molona
@spaceBeers без пробников… набирать так быстро и следить за всем, что происходит, нелегко… трудно сказать то, что вы действительно хотите сказать: D по крайней мере для меня, это трудно выразить достаточно ясно 😉
jeankap jeankap
У отдельной книги есть целая книга о Mobile First. Тот, безусловно, делает аргумент для мобильных в первую очередь.
SHARKIE SHARKIE
@mhenderson Я бы посмотрел на работу Люка Вроблевского с Canvas — быстрый Google укажет вам правильное направление
HAWK HAWK
У нас есть 10 минут, если у кого-то есть нерешенные вопросы.
joshbyer … joshbyers
@pete проверить http://designshack.net/articles/css/mobilefirst и да проверить Luke W. сначала закажите мобильный
jeankap jeankap
@SHARKIE Я вижу, у нас общий образ мышления …;)
b0ss_ b0ss_
так что WML мертв?
molona molona
@ экспертам … какой ваш лучший проект (или тот, который вам понравился больше всего)?
joshbyer … joshbyers
У Люка У. также есть его первая мобильная презентация на Vimeo http://vimeo.com/38187066
srpsco srpsco
У Люка У также есть видео, доступное на safaribooksonline
SHARKIE SHARKIE
@jeankap Это еще одно преимущество RWD. Есть много дизайнеров и разработчиков, работающих вместе над общими идеями для продвижения технологии вперед
ajfisher ajfisher
@ b0ss_ не заводи меня. Моей первой мобильной работой было создание гида-гиганта в WML в 2000 году… больно даже не описывать его. Давайте держать эту присоску похороненной
b0ss_ b0ss_
Ajfisher: LOL
так что я думаю, что мобильного достаточно в первую очередь.
Джерри Джерри
WML?
Пит Пит
та @ joshbyers
jeankap jeankap
«Хорошо, ребята … Я должен бросить. Мои слайды презентации за апрель не будут писать сами. Это было весело!
Jeff_S Jeff_S
Доступность — одна из моих основных задач, так как я работаю в правительственном агентстве, которое обслуживает людей с ограниченными возможностями. Я думаю, что улучшение удобства использования, внесенное RWD, будет огромным и улучшит доступность для всех нас на всех платформах. (Не вопрос, но это одна из моих страстей, поэтому я должен был это сказать.)
Пит Пит
@Jeff_S Очень приятно слышать.
HAWK HAWK
Спасибо, что присоединились к нам @jeankap
SHARKIE SHARKIE
Спасибо, что пришли все
ajfisher ajfisher
@molona Я с нетерпением жду выхода моей следующей, которая сейчас проходит через UAT. Это для ритейлера здесь, в Австралии (в книге есть снимок экрана, который, как мы думали, он уже запустил), который использует одно и то же ядро ​​для мобильных устройств, планшетов и настольных компьютеров, но представляет настроенный опыт для каждого, основываясь на поведенческих исследованиях, которые мы провели на их использование. Будет очень рад, когда он запускает
srpsco srpsco
@Jeff_S То же самое я работаю с офисами для инвалидов колледжа, и улучшение доступности — большая победа с RWD
SHARKIE SHARKIE
Есть ли в последний момент вопросы?
molona molona
@ajfisher Я очень хочу прочитать книгу 😀
Jeff_S Jeff_S
Мне может понадобиться все мое свободное время в течение следующих трех дней, чтобы вернуться и проверить ссылки, которые все опубликовали. Вы, ребята, великолепны. Всем спасибо!
simonJae simonJae
@SHARKIE Это было хорошо — слишком коротко. Благодарность
srpsco srpsco
@SHARKIE большое спасибо
imagesti … imagestic
@SHARKIE мммм, каков ответ на жизнь вселенной и всего остального?
TonnnnUK TonnnnUK
спасибо ребята, это было полезно
ajfisher ajfisher
@jerry http://en.wikipedia.org/wiki/Wireless_Markup_Language — очень неудачный обход мобильной индустрии на пути к просвещению HTML
HAWK HAWK
Спасибо всем за присоединение сегодня
SHARKIE SHARKIE
@imagestic 42, конечно
Пит Пит
Спасибо всем. Хорошее шоу.
HAWK HAWK
@imagestic — @SHARKIE не тот парень, что спрашивать;)
Jeff_S Jeff_S
@imagestic
HAWK HAWK
Следите за новыми сессиями в следующем месяце
imagesti … imagestic
@shARKIE Конечно XD
srpsco srpsco
@ Джерри мне нравится сарказм ревматизма: неправильный поворот
anir99 anir99
@blanchrt верно, если CSS отключен, все будет загружаться в любом случае, так как больше нет пользовательских правил для управления отображением элементов, но в любом случае, есть ли другой способ остановить загрузку или скрытие блока в окне. определенное устройство некоторой ширины, когда тот же HTML-файл используется для его отображения везде? Я не очень разбираюсь в этих файлах .htc, помогут ли они остановить загрузку?
imagesti … imagestic
большое спасибо всем
Джерри Джерри
Спасибо айфишер
imagesti … imagestic
*поблагодарить
Jeff_S Jeff_S
@imagestic: не паникуйте. И принеси полотенце.
HAWK HAWK
Особая благодарность @SHARKIE & @ajfisher за то, что они рано встали и поделились своими знаниями. Очень ценю, ребята.
simonJae simonJae
@HAWK — звучит отлично. 30 минут не хватает времени
ajfisher ajfisher
Спасибо за все замечательные вопросы
cherylea cherylea
Спасибо!
HAWK HAWK
Сессия длилась 60 минут @simonJae;)
SHARKIE SHARKIE
Всегда приятно! Еще раз спасибо всем.
шнель шнель
Спасибо всем
HAWK HAWK
Как прошел @sydjs прошлой ночью @SHARKIE?
molona molona
@shaRKIE и @ajfisher спасибо
simonJae simonJae
… да. Я на летнее время… 🙂
HAWK HAWK
да, мы тоже, но ненадолго 🙁
b0ss_ b0ss_
Спасибо всем
Jeff_S Jeff_S
(Привет, и спасибо за написание книги!).
Джерри Джерри
Спасибо всем
SHARKIE SHARKIE
@HAWK Более 120 разработчиков JavaScript отлично провели ночь 🙂
HAWK HAWK
Ницца.
ajfisher ajfisher
@sharKIE, прошлой ночью у тебя было 120 разработчиков ?!
HAWK HAWK
С нетерпением ждем выпить и наверстать упущенное завтра вечером. Хорошего дня 🙂
simonJae simonJae
до следующего раза. Береги себя. спасибо и пока
anir99 anir99
Ну, приятно общаться со всеми здесь 🙂 С нетерпением жду, чтобы получить в свои руки новую книгу сейчас 🙂
SHARKIE SHARKIE
@ajfisher Мы получаем это большинство месяцев 🙂
ajfisher ajfisher
Ух ты — собираюсь посмотреть, смогу ли я организовать поездку с перекрытием на третью неделю следующего месяца, тогда я рассчитываю
SHARKIE SHARKIE
Подписываюсь народ! Спасибо, что сделали ранний подъем таким стоящим 🙂
ralph.m ralph.m
MelbJS также получил огромную явку на прошлой неделе. (Мой первый раз.)
Rangga Rangga
Конец?
joshbyer … joshbyers
@HAWK спасибо за хостинг @shARKIE @ajfisher, спасибо за то, что вы были мобильными и евангелистами!
imagesti … imagestic
С нетерпением жду новых сессий
HAWK HAWK
@rangga Боюсь, что так — просто завершение сейчас 🙂
Christos Christos
Это было весело. Ура!
ajfisher ajfisher
Правильно — пора готовиться к работе. Спасибо за все вопросы, заглянул — сделал ранний старт стоящим