Комментарии 34
Вслед за главной мейлру и футубра подтянулась. Спасибо, очень интересно.
Поэтому в своем проекте мы использует media queries для деградации, то есть в сторону уменьшения размера экрана устройств.
Деградация — это не уменьшение размера экрана, а уменьшение/загрубление декора для старых браузеров с неполноценными возможностями.
НЛО прилетело и опубликовало эту надпись здесь
Грузя стили… 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.
предрекаю много смешной и необоснованной критики этому посту
все-таки, когда пишите к-л учебную статью — не ленитесь, приводите нативный CSS — гораздо лучше для восприятия, чем всякие SASS или LESS.
Хорошее замечание. Правда, мне, кажется, что с помощью математических выражений показать идею было бы легче. Например, высота .button__inner равно не просто 26px, а именно потому что…
просто процитирую:
В этом примере $include это синтаксис SASS, подключающий стили из так называемых примесей, которые позволяют группировать CSS-свойства. Мы везде используем такие конструкции, когда для свойств CSS требуется указывать вендор-префиксы.
было бы неплохо прямо в тексте статьи видеть — что же такое примешивается конструкцией @include box-sizing(content-box);
В этом примере $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? Браузеры там идентичные.
Огромное спасибо за статью. В ближайшее время предстоит делать мобильную версию одного сайта, содержащего в основном аудио-корено. Очень много полезного подчерпнул для этой своей будущей работы в этой статье.
Множество новых «фишек» описано для тех, кому мало приходилось или вообще не приходилось делать мобильных версий сайтов для современных и не очень браузеров.
Множество новых «фишек» описано для тех, кому мало приходилось или вообще не приходилось делать мобильных версий сайтов для современных и не очень браузеров.
Бедные верстаки, мало было ie6-7, получите в добавок мобильный зоопарк ) В целом статья полезная, мэйл радует.
Такая «ненавящивая» рекламка ФУ и собственного аккаунта… :-)
НЛО прилетело и опубликовало эту надпись здесь
Супер! Отлично все разжевали, спасибо!
Познавательно и интересно написано. Mail идет вперед и это радует :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Адаптивный веб-дизайн на практике