В этом посте я хочу изложить пару идей для создания отзывчивые точки останова в веб-дизайне. Конечная цель заключается в создании полезной сайта опыт, который соответствует естественным на любом устройстве. Хотя это легче сказать, чем сделать, вы будете удивлены, как много можно узнать, просто создание сайта и исправления ошибок, как вы идете вперед.
Общие Устройства
Во-первых, я хотел бы указать на то, что большинство точек останова зависят от планировки сайте, а не на ширине устройства или разрешения. Но понимание, какие устройства обычно используются для работы в Интернет поможет вам узнать аудитория немного лучше. Имейте в виду, что мы в первую очередь заинтересованы в ширину устройства, потому что это является ограничивающим фактором, так как высота может быть теоретически бесконечно.
Мы можем с уверенностью предположить, что настольные мониторы и некоторые ноутбуки будут представлены крупнейшие резолюции. Сайт, вероятно, не следует расширить как можно шире, потому что это может превратиться в 1920px или 2560px для более дорогих дисплеев. Определить надежный максимальную ширину и использовать его в качестве точки остановки.
Для небольших устройств ширины редко опускается ниже 300 пикселей. Это не имеет смысла создавать минимальные пороговые значения, так как устройство может упасть ниже этого предела. Вместо просто убедитесь, что самый низкий останова остается читаемым на 320px на смартфонах. Если вы действительно можете просто написать краткий список распространенных устройств и их разрешений экрана. Позже вы можете перепроверить, которые останова активна для каждого устройства.
Анализ элементов страницы
Решение, когда на самом деле создать точку останова собирается привести с любой поломки макета или трудное сжатие содержания. Будучи зависят от разрешения поможет вам сосредоточиться непосредственно на содержании страницы. Насколько велика меню навигации? Может ли он остаться на всю ширину за счет сокращения маржи между ссылками?
Первый шаг заключается в создании прототипа для макета со всеми важными частями. К изменения размера на более мелкие резолюций вы быстро поймете, какие элементы разорвать первый. Принять к сведению эти природные точек конфликта приведет ли они в навигационной панели, боковой панели, заголовке страницы, или что-нибудь еще. Если есть несколько элементов, нарушающие вниз можно сделать из одной точки для обработки всех их вместе.
Также учитывать такие вещи, как содержание сетки для электронной коммерции страниц.A4-колонки сетки в конце концов распадается на 3 колонки и в конечном счете 1-колонка сетки. Размеры, расстояния, и расстояние между элементами сетки полностью зависит от планировки. Так принять к сведению каждого важного раздела страницы, потому что они требуют определенных пределов в течение каждого прерывания.
Хитрые решения
После того, как вы знаете точное положение, когда элементы сломать у вас есть что-то, чтобы начать с — но это только половина проблемы. Как вы на самом деле сломать в изящной и лаконичной манере? Очевидно, что это зависит от условий элемента (ов) страницы в вопросе, но большинство методов сводятся к сокращению пространства и создания предметов меньше.
Для содержимого страницы вы должны признать, когда, чтобы изменить размер текста таким образом, он подходит лучше. Это может включать в себя пункты наряду с элементами списка, заголовки, подписи, в значительной степени все, следует читать. Супер небольшие устройства могут выполнять с большей текста и линии расстояния лучше — или, возможно, вы хотели бы сохранить тот же размер текста, но увеличить маржу между пунктами.
Каждое решение будет отличаться так что это весьма полезно для мозгового штурма идеи быстро. Когда дело доходит до посторонних страниц разделов, таких как боковой панели или нижнем колонтитуле вы можете в конечном итоге скрывая их полностью. Если ссылки важны, то вы могли бы поднять их вниз под областью содержимого. Но высота страницы должно быть рассмотрение и, если некоторое содержание не стоит на мобильных экранах я говорю потерять его. CSS свойство display:none не очень полезно для таких обстоятельствах.
Поскольку меню навигации необходимы, я рекомендовал бы простое решение, чтобы скрыть их за кадром или переставить ссылки, чтобы вписаться в меньшем окне. Большинство отзывчивые сайты скрыть связи с кнопка вкл. В качестве альтернативы вы можете просто поместить каждую ссылку в один большой площади блока на самом верху страницы. Проверьте аналогичные ответные макеты, чтобы увидеть, какие методы они используют для обработки навигационной дизайн.
Инструменты и ресурсы
Кто на самом деле имеет запас каждого планшета и смартфона на демо каждый отзывчивый останова? Ну, если вы делаете, я предложил бы диск утилизации, но, честно говоря, есть много лучших альтернатив.
Мой любимый интернет-ресурс является Отзывчивый Тест, который отображает веб-сайт внутри скользящего окна. Как вы удлинить или укоротить оконное стекло сайт будет реагировать так, как если бы оно было сокращение. Вы также можете выбрать из предустановок устройств, таких как смартфоны и планшеты. Допустил, что вы можете быть в состоянии сделать это, сокращая реальную окно браузера, но это не было бы так точно.
Другой большой выбор Responsivator который отображает смартфонов и планшетов как в портретной и альбомной ориентации. Все оказывается на той же странице, так что вы можете перепроверить ширины устройства друг против друга.
Наконец, если вы предпочитаете работать некоторые плагины попробуйте поискать связанных Firefox дополнения или Chrome плагинов. Это два браузера, которые имеют большие сообщества разработчиков, выпускающих экзотические пока увлекательные плагины, как Габариты Toolkit. Там нет правильного или неправильного способа проверить отзывчивый дизайн. Просто найти метод, который лучше работает для вас и придерживайтесь его.
Существует не всегда подробный шаблонным подходом найти необходимые точки останова. Если вы следуете структуру сетки или здание для определенных устройств, то вы будете иметь реальное представление, чтобы начать. Но самые полезные точки останова будет отличаться для каждого макета, поскольку они относятся к содержанию и структуре. Храните эти советы в виду при создании вашего следующего отзывчивый макет и посмотреть, если вы можете раздвинуть границы, чтобы найти свой собственный способ решения проблем.