Comments 45
UFO just landed and posted this here
Если следовать концепту Люка Врублевского «Moble First» — большинства ошибок можно избежать
>> Мобильный интернет не всегда может позволить загружать слишком тяжелые сайты, нужно помнить об этом при разработке адаптивного дизайна.
Это правило трудновыполнимо по самой природе адаптивного дизайна. Тут уже либо куцая графика для десктопов, либо тяжелая для мобил.
Это правило трудновыполнимо по самой природе адаптивного дизайна. Тут уже либо куцая графика для десктопов, либо тяжелая для мобил.
Неправда ваша. Вы вполне можете отдавать меньшие картинки для мобильных устройств. И по весу, и по пиксельному размеру. И фоны, и основные картинки.
Как? На сервере по юзер-агенту генерить на лету нужные картинки? Не костыль ли?
Про фоны я не спорил, я именно про тяжелые контентные картинки.
Про фоны я не спорил, я именно про тяжелые контентные картинки.
UFO just landed and posted this here
То есть все-таки по юзер-агенту? Не костыльно ли? Ключевое слово Mozilla в юзер-агенте IE ничему не научило?
Вот хорошее решения picturefill для подгрузки необходимых картинок, в зависимости от разрешения. К тому же оно работает с всеми любимым изменением окна браузера и налету подгружает нужную картинку.
Когда в css и js появятся фунцкии — isMobile(), isTablet() и т.д. — перестанем по user-agent определять.
Определение разрешения или размера экрана — это вообще не то.
Размер экрана например никак не связан с тем, что моб. девайсу нужна более легкая версия с доп. именно моб. возможностями и даже контентом.
Определение разрешения или размера экрана — это вообще не то.
Размер экрана например никак не связан с тем, что моб. девайсу нужна более легкая версия с доп. именно моб. возможностями и даже контентом.
Тут же не про js и css, там как раз все очень хорошо с feature detection. Речь о том, что сервак должен угадывать девайс и отдавать подходящие изображения.
На сервере кроме как по юзер-агенту ничего и не определить :)
isMobile() и isTablet() вообще какой-то мрак :) Это вообще ни о чем не говорит особенно сейчас, когда появились гигантские телефоны, или умеющие звонить планшеты.
На сервере кроме как по юзер-агенту ничего и не определить :)
isMobile() и isTablet() вообще какой-то мрак :) Это вообще ни о чем не говорит особенно сейчас, когда появились гигантские телефоны, или умеющие звонить планшеты.
UFO just landed and posted this here
UFO just landed and posted this here
Если делать по фэн-шую, то большинству современных мобильных устройств исходя из pixel ratio наоборот нужно отдавать большие фоновые картинки. Чтобы на HiDPI-экранах они не выглядели замыленно. В идеале иконки и логотипы нужно отдавать в векторе с фоллбэком для IE8.
>> исходя из pixel ratio наоборот нужно отдавать большие фоновые картинки
Нельзя отдавать исходя из pixel ratio, ибо сервер не знает ничего о нем
Можно только отдавать сразу большие, а потом через media query оперировать background-size
Нельзя отдавать исходя из pixel ratio, ибо сервер не знает ничего о нем
Можно только отдавать сразу большие, а потом через media query оперировать background-size
Зато браузер знает. По умолчанию для всех элементов бэкграунд 1:1, для девайсов с HiDPI через медиа-запрос про pixel ratio фон перекрывается картинкой @2x, выставляется background-size. Изображение с маленьким разрешением загружаться не будет. Кстати, для всех экранов background-size будет одинаковым — логический размер блоков не меняется в зависимости от плотности пикселей на экране.
Суть всей статьи свелась к одной банальной строчке из середины:
Нужно делать дизайн, который будет максимально удобен на любом устройстве.
Основная ошибка при разработке адаптивного дизайна — сам адаптивный дизайн.
Мне очень не нравится дизайн Lenta.ru на смартах… там слева постоянно висит полоска со стрелочкой, за которой скрывается менюшка, из-за этого неправильно рассчитывается ширина текстового блока и в обычные два клика не масштабируется =(
Текст легче бы воспринимался, если бы исходил не из ошибок, а наоборот, из правил.
А то всё время приходится в голове смысл заголовков переворачивать: «не делать так» означает «не не делайте так», то есть «делайте так».
А то всё время приходится в голове смысл заголовков переворачивать: «не делать так» означает «не не делайте так», то есть «делайте так».
Использовать слишком большие файлы
Использовать тяжелые фреймворки, когда это не нужно
Конкретный вопрос: можно ли подпилить для себя Dojo таким образом, чтобы не вляпаться ни в один из цитируемых моментов? Там будет работа с гридом, в основном.
И на планшете, и на смартфоне Android в браузере использую принудительный масштаб 130%, иначе слишком мелко. Но при этом конечно же увеличиваются абсолютно все элементы, некоторые из них перестают помещаться в отведённое им место и вёрстка слетает. Есть ли возможность для таких блоков жёстко задать отсутствие масштабирования? -webkit-text-size-adjust:none; для блока div не помогает.
Адаптивные дизайн становится все популярнее, сегодня это уже не просто модная новая технология…
…а уже не новая модная технология.
прописывая это в мета-теге viewoprt
Косяк в слове viewport.
> тот же контент и функционал
Контент — точно, функционал совсем не всегда.
На широких экранах десктопов дизайнеры порой запихивают все подряд, чтобы только создать «движение» на экране. На мобильном экране это все лишнее.
Позор прятать именно основной контент сайта, это да. А вот убрать на мобильном экране, скажем, карусель, или убрать с глаз видеоролик — это, скорее, вежливость к пользователю.
Контент — точно, функционал совсем не всегда.
На широких экранах десктопов дизайнеры порой запихивают все подряд, чтобы только создать «движение» на экране. На мобильном экране это все лишнее.
Позор прятать именно основной контент сайта, это да. А вот убрать на мобильном экране, скажем, карусель, или убрать с глаз видеоролик — это, скорее, вежливость к пользователю.
Основная ошибка при разработке адаптивного дизайна — это сам адаптивный дизайн.
Ну не скажите. Например, если главную страницу Яндекса со всей кучей виджетов запихать на мобильник, это будет просто ужасно. А так, в андроидном браузере у них совсем другой, простой интерфейс.
UFO just landed and posted this here
Если бы только favicon для iOS…
Я оставлю тут ссылку: www.gieson.com/Library/projects/utilities/icon_slayer/#.UfE8EW3pytN
Я оставлю тут ссылку: www.gieson.com/Library/projects/utilities/icon_slayer/#.UfE8EW3pytN
> Не стоит прятать части сайта только потому, что они не помещаются на экране мобильного устройства.
Правильно. Его надо не убирать вообще, но перемещать/прятать (во вкладки, различные выезжающие меню, каты), что бы он не мешал восприятию основного контента.
Взять конкретно эту страницу — блок «Похожие посты» справа вверху совсем не обязательно лицезреть на малюсеньких экранах смартфонов. Его необходимо сделать либо внизу, либо «выезжающим по клику»
Правильно. Его надо не убирать вообще, но перемещать/прятать (во вкладки, различные выезжающие меню, каты), что бы он не мешал восприятию основного контента.
Взять конкретно эту страницу — блок «Похожие посты» справа вверху совсем не обязательно лицезреть на малюсеньких экранах смартфонов. Его необходимо сделать либо внизу, либо «выезжающим по клику»
Не стоит прятать части сайта только потому, что они не помещаются на экране мобильного устройства. Мобильные пользователю хотят видеть тот же контент и функционал, что и пользователи десктопов.
С игнорирования этого постулата и начинается хорошая адаптивность. У пользователей мобильных устройств в зачастую совсем другие сценарии и поведение, нежели у десктопщиков. Поэтому им нужны другие функциональные возможности и другой контент.
Sign up to leave a comment.
Основные ошибки при разработке адаптивного дизайна