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

  • Tutorial
Адаптивные дизайн становится все популярнее, сегодня это уже не просто модная новая технология. Ниже собраны самые частые ошибки, допускаемые при разработке адаптивного сайта, своеобразный чек-лист.



Скрывать контент


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

Не оптимизировать под touch-устройства


Большинство мобильных устройств с touch-управлением, поэтому нужно обязательно оптимизировать элементы интерфейса под него. Популярные техники описаны в хабратопике Оптимизация сайта для планшетов.

Не оптимизировать типографику


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

Использовать слишком большие файлы


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

Использовать слишком большие изображения


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

Упрощать дизайн


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

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


Разрабатывать сайт на адаптивном CSS-фреймворке, со всеми надстройками и плагинами, зачастую избыточно. Иногда достаточно простой легкой сетки. Или можно вообще разрабатывать с нуля.

Не думать о контенте


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

Не думать о больших экранах


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

Отключать зум


На многих адаптивных сайтах разработчики отключают возможность ресайза сайта на тач-устройствах, прописывая это в мета-теге viewport, и это может сильно раздражать пользователей. (На всякий случай дам ссылку на документацию Apple по использованию Viewport)

Забывать о Home Screen иконке


Это аналог favicon для iOS устройств, добавляется простым кодом:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 45

  • UFO just landed and posted this here
      +2
      Для Chrome — настройки — специальные возможности — Принудительно изменять масштаб.
        –4
        А вас не бесит, что в приложениях из AppStore нельзя зумить интерфейс?
          +5
          Приложения из AppStore проходят проверку на то, что их удобно использовать на целевых устройствах.
            0
            Это разные вещи.
          +3
          Если следовать концепту Люка Врублевского «Moble First» — большинства ошибок можно избежать
            +1
            >> Мобильный интернет не всегда может позволить загружать слишком тяжелые сайты, нужно помнить об этом при разработке адаптивного дизайна.
            Это правило трудновыполнимо по самой природе адаптивного дизайна. Тут уже либо куцая графика для десктопов, либо тяжелая для мобил.
              0
              Неправда ваша. Вы вполне можете отдавать меньшие картинки для мобильных устройств. И по весу, и по пиксельному размеру. И фоны, и основные картинки.
                +1
                Как? На сервере по юзер-агенту генерить на лету нужные картинки? Не костыль ли?

                Про фоны я не спорил, я именно про тяжелые контентные картинки.
                • UFO just landed and posted this here
                    0
                    То есть все-таки по юзер-агенту? Не костыльно ли? Ключевое слово Mozilla в юзер-агенте IE ничему не научило?
                      0
                      Вот хорошее решения picturefill для подгрузки необходимых картинок, в зависимости от разрешения. К тому же оно работает с всеми любимым изменением окна браузера и налету подгружает нужную картинку.
                        0
                        Когда в css и js появятся фунцкии — isMobile(), isTablet() и т.д. — перестанем по user-agent определять.

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

                          isMobile() и isTablet() вообще какой-то мрак :) Это вообще ни о чем не говорит особенно сейчас, когда появились гигантские телефоны, или умеющие звонить планшеты.
                            –1
                            Я в защиту серверного определения.
                            Гигантские телефоны — остаются телефонами, умеющие звонить планшеты — планшетами, все ok.
                              0
                              А в чём принципиальная разница между шестидюймовым телефоном и семидюймовым планшетом? Оба звонят, в обоих выгодный тариф с интернет-опцией, железо тоже одинаковое.
                          • UFO just landed and posted this here
                              0
                              Потому что серверу нужно определится что отдавать клиенту, а не грузить ему всё подряд, а потом скрывать.
                              • UFO just landed and posted this here
                      • UFO just landed and posted this here
                        +1
                        Если делать по фэн-шую, то большинству современных мобильных устройств исходя из pixel ratio наоборот нужно отдавать большие фоновые картинки. Чтобы на HiDPI-экранах они не выглядели замыленно. В идеале иконки и логотипы нужно отдавать в векторе с фоллбэком для IE8.
                          0
                          >> исходя из pixel ratio наоборот нужно отдавать большие фоновые картинки
                          Нельзя отдавать исходя из pixel ratio, ибо сервер не знает ничего о нем
                          Можно только отдавать сразу большие, а потом через media query оперировать background-size
                            +2
                            Зато браузер знает. По умолчанию для всех элементов бэкграунд 1:1, для девайсов с HiDPI через медиа-запрос про pixel ratio фон перекрывается картинкой @2x, выставляется background-size. Изображение с маленьким разрешением загружаться не будет. Кстати, для всех экранов background-size будет одинаковым — логический размер блоков не меняется в зависимости от плотности пикселей на экране.
                              +2
                              Я именно так и делаю для ретины, только отдаю сразу @2x по рецепту ПепелСбея :) Ибо JPEG с двойным разрешением и качеством 20-30% зачастую меньше весит, чем в хорошем качестве но в меньшем разрешении.
                      0
                      Суть всей статьи свелась к одной банальной строчке из середины:
                      Нужно делать дизайн, который будет максимально удобен на любом устройстве.
                        –4
                        Основная ошибка при разработке адаптивного дизайна — сам адаптивный дизайн.
                          +2
                          Мне очень не нравится дизайн Lenta.ru на смартах… там слева постоянно висит полоска со стрелочкой, за которой скрывается менюшка, из-за этого неправильно рассчитывается ширина текстового блока и в обычные два клика не масштабируется =(
                            +3
                            И совершенно не понятно, где ссылка есть, а где ее нет. Hа тачах не работает :hover, и поэтому не видно, куда можно тыкать, а куда нельзя. Полный фейл.
                            +1
                            Текст легче бы воспринимался, если бы исходил не из ошибок, а наоборот, из правил.
                            А то всё время приходится в голове смысл заголовков переворачивать: «не делать так» означает «не не делайте так», то есть «делайте так».
                              0
                              Использовать слишком большие файлы
                              Использовать тяжелые фреймворки, когда это не нужно

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

                                  …а уже не новая модная технология.
                                    0
                                    прописывая это в мета-теге viewoprt

                                    Косяк в слове viewport.
                                      +1
                                      В личку же
                                        0
                                        Сорри, не сообразил
                                      0
                                      > тот же контент и функционал

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

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

                                      Позор прятать именно основной контент сайта, это да. А вот убрать на мобильном экране, скажем, карусель, или убрать с глаз видеоролик — это, скорее, вежливость к пользователю.
                                        0
                                        Согласен. Честно говоря, даже на экран десктопа иногда запихивают такое, что браузер аж тормозить начинает. А для мобильника это вообще верная смерть.
                                        –2
                                        Основная ошибка при разработке адаптивного дизайна — это сам адаптивный дизайн.
                                          0
                                          Ну не скажите. Например, если главную страницу Яндекса со всей кучей виджетов запихать на мобильник, это будет просто ужасно. А так, в андроидном браузере у них совсем другой, простой интерфейс.
                                          • UFO just landed and posted this here
                                            0
                                            Если бы только favicon для iOS…
                                            Я оставлю тут ссылку: www.gieson.com/Library/projects/utilities/icon_slayer/#.UfE8EW3pytN
                                              0
                                              > Не стоит прятать части сайта только потому, что они не помещаются на экране мобильного устройства.

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

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


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

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

                                                Only users with full accounts can post comments. Log in, please.