Подводные камни адаптивного веб-дизайна

[Bogdan92]

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

[Suvitruf]

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

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

Даже не знаю… а как, всё же, лучше делать?

[youlose]

легче убирать, чем добавлять, то есть лучше от большего к меньшему

[Bogdan92]

Не все с вами согласятся. Вполне себе существует такой подход как mobile first. Но и здесь есть свои «подводные камни». Вот статья хорошая на эту тему — Mobile First Design: Why It’s Great and Why It Sucks

[fYNX]

Соглашусь с Bogdan92 — там уточнение «В первую очередь для мобильных устройств», в оригинале — mobile first. Имхо, такой подход уместен при разработке сайтов, ориентированных на мобильные платформы. Instagram тому яркий пример, но тоже есть свои недочёты — функционал на телефоне гораздо богаче, чем на десктопе (сломали систему и наплевали уже на десктопных пользователей). Но это уже больше касается юзабилити, чем собственно дизайна.

[Pantofobos]

Всегда делал от большего к меньшему, теперь когда появились 3х, понял несостоятельность данного метода. И теперь все всегда делаю начиная в масштабе 1х.

[Dolios]

Я бы еще один совет добавил: не считайте себя умнее пользователя.
У меня телефон с full hd разрешением экрана и хабр меня уже упарил постоянным переключением на мобильную версию. Не нравится она мне, мне неудобно, я хочу читать полную версию. Почему регулярно, когда я открываю ссылку на статью в новой вкладке (из вкладки с лентой, в которую загружена полная версия), открывается мобильная версия. Я разве просил?
Добавьте галку в профиле «никогда не переключаться на мобильнуюб версию автоматически». Либо, если это по какой-то причине невозможно, сделайте ссылку переключения с мобильной версии на полную вверху страницы. После надцатого проматывания большой статьи и 100500 комментариев для переключения на полную версию, начинаешь задумываться, а так ли тебе нужно преодолевать все эти трудности?

К чести хабра, переключиться на полную версию все-таки можно, пусть и с танцами. А ведь есть сайты, которые за тебя все решили и фиг ты получишь полную версию, пока в настройках браузера не поставишь «прикидываться десктопным браузером». Особенно смешно такая мобильная версия смотрится на 10" full hd планшете.

[joger]

У меня телефон с full hd разрешением экрана

и каким device pixel ratio? ведь от него зависит, что ваш смарт отдаст в media query

[Dolios]

3.0 вроде. Galaxy S4.
Я понимаю, что при первом входе сайт пытается сам определить, какую версию сайта мне отдать. Но ведь я уже несколько десятков раз нажимал ссылку «полная версия». При этом я захожу всегда с одного браузера мобильного, залогинен на хабр и на мобильной версии никогда не оставался дольше чем требуется для прокрутки страницы и переключения на полную версию. Куку можно ведь поставить, пофиг что телефон отдает в такой ситуации.

[ingumsky]

Вы подняли правильную тему, но использовали для этого очень грубый подстрочный перевод. Это разочаровало, потому что понять смысл приведённых пунктов порой позволяет только обратный перевод на английский :(