Основные ошибки при разработке адаптивного дизайна

[random1911]

Для Chrome — настройки — специальные возможности — Принудительно изменять масштаб.

[alex_blank]

А вас не бесит, что в приложениях из AppStore нельзя зумить интерфейс?

[belk]

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

[Keyten]

Это разные вещи.

[Melanitsky]

Если следовать концепту Люка Врублевского «Moble First» — большинства ошибок можно избежать

[Proxmiff]

>> Мобильный интернет не всегда может позволить загружать слишком тяжелые сайты, нужно помнить об этом при разработке адаптивного дизайна.
Это правило трудновыполнимо по самой природе адаптивного дизайна. Тут уже либо куцая графика для десктопов, либо тяжелая для мобил.

[dimaniko]

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

[Proxmiff]

Как? На сервере по юзер-агенту генерить на лету нужные картинки? Не костыль ли?

Про фоны я не спорил, я именно про тяжелые контентные картинки.

[Proxmiff]

То есть все-таки по юзер-агенту? Не костыльно ли? Ключевое слово Mozilla в юзер-агенте IE ничему не научило?

[DanilaMaster]

Вот хорошее решения picturefill для подгрузки необходимых картинок, в зависимости от разрешения. К тому же оно работает с всеми любимым изменением окна браузера и налету подгружает нужную картинку.

[Delka]

Когда в css и js появятся фунцкии — isMobile(), isTablet() и т.д. — перестанем по user-agent определять.

Определение разрешения или размера экрана — это вообще не то.
Размер экрана например никак не связан с тем, что моб. девайсу нужна более легкая версия с доп. именно моб. возможностями и даже контентом.

[Proxmiff]

Тут же не про js и css, там как раз все очень хорошо с feature detection. Речь о том, что сервак должен угадывать девайс и отдавать подходящие изображения.
На сервере кроме как по юзер-агенту ничего и не определить :)

isMobile() и isTablet() вообще какой-то мрак :) Это вообще ни о чем не говорит особенно сейчас, когда появились гигантские телефоны, или умеющие звонить планшеты.

[Delka]

Я в защиту серверного определения.
Гигантские телефоны — остаются телефонами, умеющие звонить планшеты — планшетами, все ok.

[belk]

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

[Delka]

Потому что серверу нужно определится что отдавать клиенту, а не грузить ему всё подряд, а потом скрывать.

[LeonidFrolov]

Если делать по фэн-шую, то большинству современных мобильных устройств исходя из pixel ratio наоборот нужно отдавать большие фоновые картинки. Чтобы на HiDPI-экранах они не выглядели замыленно. В идеале иконки и логотипы нужно отдавать в векторе с фоллбэком для IE8.

[Proxmiff]

>> исходя из pixel ratio наоборот нужно отдавать большие фоновые картинки
Нельзя отдавать исходя из pixel ratio, ибо сервер не знает ничего о нем
Можно только отдавать сразу большие, а потом через media query оперировать background-size

[LeonidFrolov]

Зато браузер знает. По умолчанию для всех элементов бэкграунд 1:1, для девайсов с HiDPI через медиа-запрос про pixel ratio фон перекрывается картинкой @2x, выставляется background-size. Изображение с маленьким разрешением загружаться не будет. Кстати, для всех экранов background-size будет одинаковым — логический размер блоков не меняется в зависимости от плотности пикселей на экране.

[Proxmiff]

Я именно так и делаю для ретины, только отдаю сразу @2x по рецепту ПепелСбея :) Ибо JPEG с двойным разрешением и качеством 20-30% зачастую меньше весит, чем в хорошем качестве но в меньшем разрешении.

[impwx]

Суть всей статьи свелась к одной банальной строчке из середины:

Нужно делать дизайн, который будет максимально удобен на любом устройстве.

[Zelenov]

Основная ошибка при разработке адаптивного дизайна — сам адаптивный дизайн.

[Roler]

Мне очень не нравится дизайн Lenta.ru на смартах… там слева постоянно висит полоска со стрелочкой, за которой скрывается менюшка, из-за этого неправильно рассчитывается ширина текстового блока и в обычные два клика не масштабируется =(

[Nilard]

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

[Yoschi]

Текст легче бы воспринимался, если бы исходил не из ошибок, а наоборот, из правил.
А то всё время приходится в голове смысл заголовков переворачивать: «не делать так» означает «не не делайте так», то есть «делайте так».

[Infra_HDC]

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

Конкретный вопрос: можно ли подпилить для себя Dojo таким образом, чтобы не вляпаться ни в один из цитируемых моментов? Там будет работа с гридом, в основном.

[DjOnline]

И на планшете, и на смартфоне Android в браузере использую принудительный масштаб 130%, иначе слишком мелко. Но при этом конечно же увеличиваются абсолютно все элементы, некоторые из них перестают помещаться в отведённое им место и вёрстка слетает. Есть ли возможность для таких блоков жёстко задать отсутствие масштабирования? -webkit-text-size-adjust:none; для блока div не помогает.

[Ogi]

Адаптивные дизайн становится все популярнее, сегодня это уже не просто модная новая технология…

…а уже не новая модная технология.

[master1312]

прописывая это в мета-теге viewoprt

Косяк в слове viewport.

[DjoNIK]

В личку же

[master1312]

Сорри, не сообразил

[achekalin]

> тот же контент и функционал

Контент — точно, функционал совсем не всегда.

На широких экранах десктопов дизайнеры порой запихивают все подряд, чтобы только создать «движение» на экране. На мобильном экране это все лишнее.

Позор прятать именно основной контент сайта, это да. А вот убрать на мобильном экране, скажем, карусель, или убрать с глаз видеоролик — это, скорее, вежливость к пользователю.

[master1312]

Согласен. Честно говоря, даже на экран десктопа иногда запихивают такое, что браузер аж тормозить начинает. А для мобильника это вообще верная смерть.

[front_end]

Основная ошибка при разработке адаптивного дизайна — это сам адаптивный дизайн.

[master1312]

Ну не скажите. Например, если главную страницу Яндекса со всей кучей виджетов запихать на мобильник, это будет просто ужасно. А так, в андроидном браузере у них совсем другой, простой интерфейс.

[pvasili]

Если бы только favicon для iOS…
Я оставлю тут ссылку: www.gieson.com/Library/projects/utilities/icon_slayer/#.UfE8EW3pytN

[adic3x]

> Не стоит прятать части сайта только потому, что они не помещаются на экране мобильного устройства.

Правильно. Его надо не убирать вообще, но перемещать/прятать (во вкладки, различные выезжающие меню, каты), что бы он не мешал восприятию основного контента.

Взять конкретно эту страницу — блок «Похожие посты» справа вверху совсем не обязательно лицезреть на малюсеньких экранах смартфонов. Его необходимо сделать либо внизу, либо «выезжающим по клику»

[Neznaikos]

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

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

[aimh]

Согласен, можно скрывать рекламу, урезать галерею, скрывать аннотацию новости или описание меню, если это можно найти глубже, нажав на эту ссылку.

[Neznaikos]

Рекламу стоит не скрывать, но показывать таргетированную на мобильных пользователей (но скрывать — тоже отличный вариант).
В любом случае начинать надо с изучения сценариев мобильных пользователей и готовить адаптивный контент для них.