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

| | 0 Comment

Размеры экранов для адаптивной верстки

Основные размеры экранов для адаптивной верстки

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

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

Рис.1 Размеры экранов и PPI

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

Рис.2 Пропорции экрана

Как определить размеры экранов для адаптивного дизайна?

Строго говоря, вам нужно взять размеры для адаптивного дизайна по следующем списку:

  • Размеры своего устройства и устройства клиента, чтобы вы могли сразу закачать картинки себе на телефон и сразу протестировать свой дизайн непосредственно в руках.
  • Размеры флагмана. Нужно сделать адаптивный дизайн под топовый телефон, под самый популярный телефон, который сейчас продается. Если говорить про сегодняшний день, то флагманом среди iPhone будет iPhone 8/8 Plus и iPhone X. Под эти размеры экрана нужен адаптивный дизайн.
  • Адаптация под самое большое разрешение, чтобы все хорошо работало
  • Адаптация под самое маленькое разрешение. Под самое маленькое, адекватно нужное разрешение.
  • Если мы говорим про iOS, то самое большое разрешение сейчас у iPhone 8 plus — 1920х1080, самое маленькое iPhone 4. И вы обязательно должны это в дизайне учитывать. Обязательно нарисовать четвертый iPhone посмотреть, какой у него размер, и прикинуть, как будет выглядеть дизайн на уменьшенном размере экрана (рис.3).

    Рис.3 Размеры экрана iPhone

    Если мы говорим про Андроид, в том числе про Samsung, то сейчас в топе серия Galaxy, у Ace размер экрана 480х320 и тоже будет интересно посмотреть, как будет смотреться дизайн в маленьком разрешении.

    Рис.4 Размеры экрана Samsung

    Тестировать картинки удобно через Дропбокс (рис.5)

    1. Рисуем макет под разрешение вашего телефона
    2. Храним картинки на компьютере в папке Дропбокса
    3. Открываем эти картинки на телефоне через мобильное приложение Дропбокс.
    4. То есть у нас есть рабочая панель, папка с проектами (картинками) и она очень просто переносится вам в телефон по облаку (рис.6). Дальше мы кликаем в картинку и если она нарисована для нашего разрешения, то мы можем видеть в реальном времени как это все выглядит. Есть разумеется хитрые программы, которые позволяют это делать. На мой взгляд это самый простой и быстрый способ посмотреть как ваш дизайн выглядит на мобильных устройствах. Их можно перекинуть, можно очень быстро с ними работать. Вы только сохранили файл и он уже доступен в вашем айфоне. И это бесплатно. Разумеется это может быть не только Дропбокс, но и любой другой облачный сервис ( mail,yandex и т.д.).

      И какое здесь правило, принцип?

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

      Для отправки комментария вам необходимо авторизоваться.

      maximsoldatkin.com

      Разрешения экрана, на которые нужно делать упор при верстке сайта

      Сейчас те web-разработчики, которые не делают адаптивные сайты на HTML5, вымрут как мамонты, так как рынок всегда диктует свои условия, а конкуренция не дает малейшего повода в этом усомниться.

      Сегодня нашел 2 офигенских web-сервиса, которые помогают автоматизировать некоторые вещи при разработке пользовательского интерфейса.

      Поэтому сегодня небольшая статья-заметка обо всем об этом.

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

      Самые важные разрешения экрана, при адаптивной верстке

    5. 480 px — Мобильные устройства (альбомная ориентация);
    6. 768 px — Планшеты (портретная ориентация);
    7. Дополнительные сервисы

      Помимо этого есть как минимум 2 web-сервиса, которые позволяют немного автоматизировать процесс тестирования разрабатываемого сайта:

      Первый сервис – responsinator.com

      Есть возможность удобно протестировать на большинстве популярных устройствах, начиная с iPhone 3GS и заканчивая “стандартными” экранами для Android-смартфонов.

      Второй сервис – studiopress.com

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

      P.S. Эти сервисы я использую только как средства тестирования, но разработку веду по старинному дедовскому способу – постепенно уменьшая размеры окна браузера. Никто не знает, ведь, на каком устройстве в Будущем или в каком окне браузера будет открыт ваш сайт.

      Комментарии:

      1. Bizzona опубликовал комментарий 5 Март 2013, 18:58 #

      Спасибо, за предупреждение про вымирание. Я как раз думал, какой дизайн для сайта покупать – красивый фиксированный или минималистский адаптивынй.

      Доброго времени суток!
      У Вас закралась ошибочка вот здесь “Есть возможность удобно притестировать” должно быть “протестировать”

      adminway.ru

      Как сделать адаптивный дизайн сайта под все разрешения экрана

      Приветствую вас, случайные посетители и постоянные читатели блога Royal-Site.ru!

      Некоторое время назад я обновил свой блог, создав с нуля полностью тему для wordpress. О том как это произошло я писал в статье ” Глобальное обновление и реорганизация моего сайта“. Одна из главных задач при создании нового шаблона – это адаптивная верстка сайта под все разрешения экрана.

      Краткий план статьи:

      В предыдущей статье я уже писал о том, что такое адаптивный дизайн и зачем он нужен. Но как достичь этой самой адаптивности?

      Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ – это адаптивная верстка сайта с помощью CSS.

      Как сделать адаптивную верстку сайта

      Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами вставьте следующий код:

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

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

      Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

      Но ведь этого не может быть!

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

      Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

      Адаптивная верстка CSS media запросы

      Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.

      Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

      Это код означает, что стили заключенные между “ < >” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

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

      Самые важные разрешения экрана, при адаптивной верстке

    8. 320 px — Мобильные устройства (портретная ориентация);
    9. 600 px — Небольшие планшеты;
    10. 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
    11. 1280 px и более — PC.
    12. Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.

      bootstrap адаптивный дизайн

      Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

      Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

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

      Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

      Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.

      Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

      Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

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

      В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую подписаться на обновления блога, чтобы не упустить этот момент.

      Проверка адаптивности сайта

      Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

      Я для этих целей рекомендую использовать следующий онлайн сервис – http://quirktools.com/screenfly/ . Просто введите URL страницы для проверки и переключайте разрешения экранов в панели управления.

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

      Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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

      4 комментария . Оставить новый

      Сижу на море, верстаю новый сайт, увидел тебя по запросу “самые маленькие экраны для адаптивной верстки”. Что ж, приятно увидеть коллег и друзей в ТОПе!

      Илья, спасибо, действительно приятно

      Можно ли из обычного сайта вставив эти коды сделать адаптивный?

      Можно, если правильно настроить CSS файл. Но это не какие то волшебные коды, вставив которые всё автоматически адаптируется.

      royal-site.ru

      О чем нужно помнить при создании адаптивной верстки?

      Стремительный рост мобильного рынка в России и за рубежом сделал вопрос «мобильных версий» одним из самых обсуждаемых в среде SEO-специалистов и владельцев сайтов. И хотя Google и недавно присоединившийся к мобильной гонке Яндекс не отдают предпочтение ни одному из мобильных вариантов, среди вебмастеров распространено мнение, что, выбирая между мобильным сайтом, динамическим контентом и адаптивной версткой, стоит остановиться на последней.

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

      Адаптивный дизайн – это конфигурация, в которой сервер отправляет одинаковый HTML-код на любые устройства, а размеры элементов страницы корректируются с помощью CSS, – Google .

      Основные преимущества формата:

    13. Один URL для всего контента. Облегчает взаимодействие пользователей с контентом, а также его обнаружение и индексацию поисковыми роботами.
    14. Создание одной адаптивной страницы занимает меньше времени, чем дублирование содержания на разные сайты.
    15. При адаптивной верстке алгоритмы Google точнее индексируют параметры страницы, а не регистрируют разные версии одной страницы.
    16. Можно использовать возможности конкретного устройства для взаимодействия с пользователем.
    17. Нет редиректов. А значит, снижается время загрузки, и растет производительность.
    18. Недостаток по большому счету один – довольно трудоемкий и детальный процесс разработки. Так как в этом случае создается единый код для устройств с разным размером экрана, нужно учесть множество деталей, чтобы пользовательский опыт и производительность сайта были на максимальном уровне.

      Что нельзя упустить?

      • Ни в коем случае нельзя блокировать JavaScript, CSS и файлы изображений. Для лучшего отображения и индексации всегда оставляйте доступ googlebot и googlebot-mobile к этим данным. Если вы запретите сканировать эту информацию у себя в robots.txt, это нанесет непосредственный вред отображению и индексации контента, что в свою очередь отрицательно скажется на ранжировании.
      • Проверить доступность файлов для роботов Google можно в Search Console, в разделе «Посмотреть, как Google».

      • Размер данных. Мобильные пользователи не должны скачивать полноразмерные изображения, предназначенные для больших экранов и высоких скоростей. Попробуйте уменьшить HTTP-запросы и сократить CSS и JavaScript. В первую очередь на странице должен загружаться контент. Все остальное вторично.
      • Используйте изображения в формате JPEG, GIF или PNG-8. От обычного PNG лучше отказаться, так как он может утяжелять картинку в 5–10 раз.
      • При создании графических элементов типа кнопок лучше отказаться от картинок в пользу CSS.
      • Невоспроизводимые форматы. Flash и некоторые нераспространенные форматы видео могут не воспроизводиться на мобильных устройствах. Их, а также Java-апплеты и Silverlight-плагины необходимо убрать с сайта, иначе Яндекс не будет считать сайт адаптировынным под мобильные устройства. К слову, с конца прошлого года Яндекс перестал показывать в мобильных Яндекс.Видео ролики, работающие на flash и не поддерживающие HTML5.
      • Разработка адаптивного дизайна должна вестись по принципу mobile-first. То есть сначала создается верстка для самых маленьких экранов. Макет для таких устройств состоит из одной колонки с базовыми элементами: шапкой, меню, основным контентом и подвалом. При увеличении экрана по ширине элементы выстраиваются горизонтально, как на десктопах.

      • Не используйте межстраничные объявления. Вместо них стоит выбрать баннеры HTML или изображения, похожие на обычное объявление, которые не загораживают экран.
      • Чтобы браузеры мобильных устройств не сжимали страницу под размер экрана, а отображали ее в нужном вам виде, используйте метатег viewport. Можно встретить, например, такое его употребление:
      • Указанное значение для ширины device-width говорит мобильному браузеру, что страницу нужно отображать не в стандартном разрешении, а адаптировать под экран устройства.

        Для устройств, у которых при переходе на ландшафтный (горизонтальный) экран ширина страницы не изменяется, просто выполняется масштабирование контента, необходим атрибут initial-scale=1 . Он установит соответствие 1:1 для пикселей CSS вне зависимости от ориентации устройства. Подробнее о метатеге viewport читайте в Справке Google Developers.

      • Популярные разрешения. В отличие от десктопа планшеты и смартфоны могут менять ориентацию страницы с ландшафтной на портретную и наоборот, так что для каждого разрешение лучше разработать два варианта дизайна. Ниже – разрешения для некоторых популярных смартфонов и планшетов.
      • m.seonews.ru

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

        В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?

        Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.

        Когда мобильного веба не было даже в самых смелых фантазиях, весь интернет был на десктопных компьютерах с небольшими экранами. Оптимизирован для разрешения 1024 на 768 и браузера Internet Explorer 5! — гордо писали тогда на сайтах. Но прошло время, экраны подросли и пришлось к этому как-то подстраиваться. Сначала это были просто резиновые таблицы: колонки по 25%, содержимое 50%, а в отдельной строке colspan=3 и распорка для минимальной ширины. Надеюсь, вы не поняли о чём я сечас говорил.

        Резиновая вёрстка — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины. Высоту в вебе в принципе не принято задавать — обычно она подстраивается под содержимое. Фикс или резина? — спрашивали верстальщики 2000-х про макет и втайне надеялись на второе, поинтереснее. Сейчас сложно представить, но когда-то это было прорывной идеей, которая усложнила вёрстку, но сделала первый шаг в правильном пути.

        Таблицы для раскладки ушли, а резиновая вёрстка осталась. Если у вас эластичные флоаты, флексы… да хоть гриды! — это всё равно резиновая вёрстка. Но если ширина внешнего контейнера зафиксирована — это уже фикс, сколько бы ни было резины внутри. Чуть более универсальный фикс, но всё равно. В общем, главное чтобы сайт двигался так или иначе вместе с окном, а не торчал кирпичом где-то в центре или с краю.

        Когда расширился круг устройств с интернетом и появились первые мобильные браузеры — встала задача как-то подстраиваться под них. Простая резина здесь уже не справлялась — нужно было переписывать стили. Одной из первых, в 2006 году появилась техника адаптивной раскладки Марка ван ден Доббельстина. В статье на A List Apart Марк предложил добавлять классы при загрузке или ресайзе окна и на каждый диапазон вешать стили. До первой реализации медиавыражений в Safari оставалось два года.

        Когда в начале десятых годов появилось для чего адаптировать и чем адаптировать — мобильные браузеры и медиавыражения — вышли книги, давшие названия подходам: «Адаптивный веб-дизайн» Аарона Густавсона и «Отзывчивый веб-дизайн» Итана Маркота. Подходы Аарона и Итана продолжали идеи Марка, но с более современными технологиями и несколько отличались направлением мысли.

        «Адаптивный веб-дизайн» Аарона предлагал гибко адаптировать сайты к возможностям устройств и браузеров. Важной частью этой философии был ненавязчивый JavaScript с прогрессивным улучшением — и всё это поверх семантической разметки. Хотя Аарон писал не совсем об этом, сегодня принято считать, что главное в адаптивной вёрстке — привязка к конкретным разрешениям и устройствам. Стили переключаются от одного брейкпоинта к другому, то есть у вас есть фиксированные макеты для iPad и iPhone, а то, что между ними вас не волнует.

        «Отзывчивый веб-дизайн» Итана ставил во главу три вещи: резиновый макет, гибкие картинки и медиавыражения. Все размеры и отступы Итан предлагал указывать в процентах с сумасшедшими дробями для точности. Отличительной чертой подхода стало плавное изменение сайта, с ориентацией не на конкретные устройства, а на содержимое. То есть ваш резиновый макет хорошо выглядит не только на iPhone и iPad, но и в любой точке между ними.

        Чуть позже Итан сформулировал ещё один важный принцип в книге «Сначала мобильные». Если до тех пор отправной точкой для адаптации вёрстки служила десктопная версия, то он предложил перевернуть схему и начинать с мобильной версии, а потом её улучшать. Почему так? Потому, что усложнять простое проще, чем упрощать сложное. Вдуматесь! А ещё потому, что нет соблазна просто спрятать сложно адаптируемое и обделить мобильных пользователей.

        Ну как, стало понятно? Вот адаптивная, вот отзывчивая… М-м, нет, не очень. Из-за путаницы между техникой адаптивной раскладки и философией адаптивного веб-дизайна, из-за того, что все эти подходы прекрасно сочетаются и уже не проследить чёткую границу между ними — из-за всего этого, я плюнул на терминологическую чистоту и стал называть всё это адаптивным дизайном или адаптивной вёрсткой. Это понятие всегда было достаточно широким, чтобы вместить все остальные способы.

        Да и принцип дискретной адаптации от размеров устройств и без резины имел смысл лет 10 назад. При сегодняшнем разнообразии устройств полагаться на конкретные размеры и жёстко переключаться между ними — значит однажды очень больно промахнуться. Притом, никто вам не мешает при полностью резиновой вёрстке дописывать адаптацию под нужные разрешения.

        Ну и как теперь верстать? Просто! Сначала делаете мобильный резиновый макет, который хорошо вписывается в небольшие устройства. А когда размеры экрана или окна начинают расти — начинаете использовать появившееся пространство для улучшения интерфейса. Появляется боковая колонка, вторая, растут размеры картинок и подгружаются новые разрешения и так далее. То есть медиавыражения меняют стили не когда вы дошли до экрана самого модного телефона, а когда это нужно для содержимого сайта и удобства пользователя. Мы именно так и учим делать на интенсиве по продвинутой вёрстке.

        Чтобы сделать хороший адаптивный сайт, нужно понимать много нюансов: вьюпорт, медиавыражения, адаптивные картинки и другое. Сегодня мы сделали первый шаг и разобрались с подходами: он оказывается всего один. Про остальное ещё поговорим.

        Видеоверсия


        m.habr.com

        Это интересно:

        • Заявление на отпуск директора учредителю Отпуск директора с последующим увольнением Конечно же директор должен написать заявление об увольнении по собственному желанию с последующим увольнением на имя Единственного учредителя или Председателя общего собрания, при этом заявление об увольнении по собственному […]
        • Закон об аудиторской деятельности был принят Федеральный закон 307 об аудиторской деятельности Развитие аудиторского рынка РФ на принципах добросовестной конкуренции, систематическое повышение уровня аудита, создание условий для повышения конкурентоспособности всех профильных организаций — это важные задачи, которые […]
        • Кредиты до 3000000 без залога и поручителей Кредит до 3 000 000 рублей наличными без справок и поручителей Взять небольшую сумму кредита наличными не составит особого труда для потенциального заемщика. Но если речь идет о крупной сумме, до 3 000 000 рублей, то здесь финансовые учреждения более тщательно изучают […]
        • Согласно расписке или расписки как писать Печатать текст расписки или писать ее от руки? Сейчас все документы составляются на компьютере и печатаются на принтере. Это удобно, быстро и не надо разбираться в чьем-то почерке. У кого-то он ровный и хороший, а у кого-то крайне неразборчивый. Да и люди последнее время […]
        • Бланк заявления об уточнении основания типа и принадлежности платежа пфр Утверждена форма решения ФСС России об уточнении основания, типа и принадлежности платежа, отчетного периода или статуса страхователя ФСС России принял ведомственный акт, которым утверждена форма решения об уточнении основания, типа и принадлежности платежа, отчетного […]
        • В реестре операторов персональных данных Как подать уведомление в Роскомнадзор Роскомнадзор ведёт реестр операторов — компаний, выполняющих требования закона «О персональных данных». Чтобы попасть в реестр, компания подаёт уведомление об обработке персональных данных. Это может быть непросто сделать: непонятно, […]
        • Заявление на отпуск законодательство В ст. 114 ТК РФ говорится о том, что каждый официально трудоустроенный гражданин имеет право на ежегодный оплачиваемый отпуск. В конце каждого календарного года на любом предприятии должен быть составлен график отпусков, согласно которому будут «гулять» все сотрудники на […]
        • Коап штраф за курение в общественных местах 2018 Какой штраф назначают за курение в общественных местах в 2018 году? Как известно, курить в общественном месте в 2018 году нельзя. За это можно получить административный штраф. Данное положение закреплено в так называемом «антитабачном законе». Кроме того, чтобы узнать […]