Pull to refresh

Comments 34

Вслед за главной мейлру и футубра подтянулась. Спасибо, очень интересно.
Поэтому в своем проекте мы использует media queries для деградации, то есть в сторону уменьшения размера экрана устройств.

Деградация — это не уменьшение размера экрана, а уменьшение/загрубление декора для старых браузеров с неполноценными возможностями.
Деградация это постепенное ухудшение (в широком смысле). Мы с помощью media queries скрываем «лишние» элементы, чем не деградация?
Я имел в виду не широкий смысл словарного слова, а общепринятую трактовку конкретного термина в верстке.
UFO landed and left these words here
Грузя стили… IE8 для всех браузеров?

У нас есть отдельный файл со стилями для IE8, который загрузится только IE8 (так как он объявлен в комментариях).

Internet Explorer 8 можно отделить теми же условными комментариями или даже снифингом на сервере. Мобильные устройства так снифать однозначно тяжелее.

Мы так и сделали :-)

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

Весь JS сейчас загружается каждым клиентом. Это минус, мы это понимаем. У нас есть технические возможности сделать множество сборок JS (packages), и загружать по мере необходимости. Но на данном этапе загрузка зазипованного JS занимает сравнительно малую долю, так как клиенту приходится грузить медиа-контент.

Опять же, заботясь об ограниченных ресурсах мобильных устройств, не лучше ли использовать вместо прожорливых градиентов (даже десктопные браузеры могут с ними заметно тормозить), внедрённые через data:url, картинки?

Возможно. Мы постоянно экспериментируем. И inline картики на очереди. Обязательно поделимся результатами в будущем :-)

По браузерам: как вы относитесь к андроидному браузеру разных версий: 2.1, 2.2, 2.3, 4? К мобильному Firefox, обычному и бете, Chrome Beta на 4 андроиде? Или почти все они в категории X?

Все верно, они в классе X. Но мы частенько проверяем на реальных устройствах с Android 2.3 (иногда и на четверке) и Mobile Firefox.
UFO landed and left these words here
Верно. Скрипты желательно выносить в конец body.
предрекаю много смешной и необоснованной критики этому посту
image
Предрекаю стремительное уменьшение вашей кармы за идиотские комментарии.
все-таки, когда пишите к-л учебную статью — не ленитесь, приводите нативный CSS — гораздо лучше для восприятия, чем всякие SASS или LESS.
Хорошее замечание. Правда, мне, кажется, что с помощью математических выражений показать идею было бы легче. Например, высота .button__inner равно не просто 26px, а именно потому что…
просто процитирую:

В этом примере $include это синтаксис SASS, подключающий стили из так называемых примесей, которые позволяют группировать CSS-свойства. Мы везде используем такие конструкции, когда для свойств CSS требуется указывать вендор-префиксы.

.button {
    @include box-sizing(content-box);
    height: $height - $border-width * 2;
}


было бы неплохо прямо в тексте статьи видеть — что же такое примешивается конструкцией @include box-sizing(content-box);
Спасибо. Добавил значение миксина.
Сколько в итоге получилось версий дизайна? Две — для стандартных экранов и для телефонов с 240, или были еще промежуточные? Или вообще одна?
Вообще одна! В этом весь и смысл :-)
Одна верстка, а дизайн вы что под низкие разрешения тоже не переделывали? Как тогда решали, что нужно уменьшать, а что нет? На глаз?
У нас нет полностью отрисованных макетов под опорные разрешения экранов (мы сейчас находимся на такой стадии, что у нас постоянно что-то меняется в интерфейсах). Широкие элементы страниц, такие как кнопки например, прорисованы в обычном состоянии и в «укороченном» варианте. Вопрос о скрытии каких-либо функциональных элементов решается по мере поступления проблем, то есть, например, добавили новую кнопку в тулбар, взяли браузер и начали заужать окно, определили на каком этапе стоит скрыть эту кнопку в тулбаре и показать теперь ее в меню.
Адаптивный дизайн довольно молодая «тема» — радует что Майл.ру начали её использовать, т.к до недавнего времени вся вёрстка проектов угнетала своей несовершенностью и отсутствием доступности.
Всё здорово ребята, так держать — это верное направление!
Ну мейлрушечке все-таки надо допиливать верстку. На Samsung Galaxy Tab работать невозможно, все улетает за границы окна. Но зато видно, что работают хотя бы)) Кстати, очень понравилась их идея с главной страницей без скроллов — т.е. адаптивный дизайн у них не только по горизонтали, но и по вертикали.
А с какой целью iPod Touch на графике отделили от iPhone? Браузеры там идентичные.
Это сторонние данные. Мне неизвестны причины такого решения. Что в iPhone, что в iPod Touch используется Mobile Safari.
Огромное спасибо за статью. В ближайшее время предстоит делать мобильную версию одного сайта, содержащего в основном аудио-корено. Очень много полезного подчерпнул для этой своей будущей работы в этой статье.
Множество новых «фишек» описано для тех, кому мало приходилось или вообще не приходилось делать мобильных версий сайтов для современных и не очень браузеров.
Прошу прощения за опечатки. Предыдущем комменте, т9 в айфоне чудит.
Бедные верстаки, мало было ie6-7, получите в добавок мобильный зоопарк ) В целом статья полезная, мэйл радует.
Да, мобильные браузеры порой удивляют гораздо больше чем IE
Такая «ненавящивая» рекламка ФУ и собственного аккаунта… :-)
UFO landed and left these words here
UFO landed and left these words here
Супер! Отлично все разжевали, спасибо!
Познавательно и интересно написано. Mail идет вперед и это радует :)
Only those users with full accounts are able to leave comments. Log in, please.